Provide Pivot Tab Styling Resources

[michael-hawker]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[x] Feature request <!-- Please file a UserVoice request and include the link below https://wpdev.uservoice.com/forums/110705-universal-windows-platform/category/193402-uwp-community-toolkit -->
[ ] Sample app request
[ ] Documentation issue or request
[ ] Question of Support request => Please do not submit support request here, instead see https://github.com/Microsoft/UWPCommunityToolkit/blob/master/contributing.md#question

Request links

microsoft/Windows-universal-samples#314
Also related to a subset of requests for the Tab Control #353.

Expected behavior

This item is to provide static resource templates that can restyle a pivot control to behave more like a tab control.

It should look like the sample image in the docs which is mentioned to exist in the platform sample, but is not quite sufficient (see issue filed there).

Ideally I'd like to see three provided templates:

• System Icon Tabs as in docs page
• Traditional Document Style Tabs (like Edge, not sure if can add pivot extension helpers for a 'close' style command, but will investigate)
• Office Style Tabs (like https://github.com/Raamakrishnan/UWP-Styles-Library/tree/master/Pivot/PivotTabbedStyle)
• VSCode style Drawers (done with NavigationView as part of 2.2 release)
• Provide Pivot Style for tabs on bottom.

UserVoice: https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/17983933-tab-control-like-in-microsoft-edge

[windowstoolkitbot]

No response from the community. ping @nmetulev @Odonno @IbraheemOsama

[nmetulev]

@michael-hawker is currently working on this

[windowstoolkitbot]

This issue seems inactive. Do you need help to complete this issue?

[michael-hawker]

@uwptoolkitbot working on it here https://github.com/michael-hawker/UWPCommunityToolkit/tree/mhawker/pivot-styles

[michael-hawker]

The VS Code Activity Bar will be a restyling of a NavigationView, so will break that off as a separate item.

I have a couple of bugs and style things to tweak, but otherwise System & Edge styles tabs for Pivot are close.

I should also swap out my Glyph for Icon like NavigationView so it's easier to restyle.

[lucaasrojas]

What's the current status?

[michael-hawker]

I have some prototypes that work partially, but getting the Pivot to respond correctly for all scenarios is proving to be more work than this is probably worth. Recommending we close this in favor of #353 again, which I'm actually going to start looking at in more detail.

[mdtauk]

Whilst it may still be an idea to include these Templates and Resources...

Microsoft has formalised using the NavigationView with the pane set to Top, to do Tab Navigation, instead of using a modified Pivot or set of CheckBoxes.

This doesn't replace a need for a proper Tab Control, in the same vein as the Edge and Sets tabs, but for navigation in Alarms & Clock, Store, Films & TV, or the Phone app - There is new guidance.

[nmetulev]

Agree on closing this and focusing on creating a new control

[skendrot]

@nmetulev Wait, What!?!?!?

[nmetulev]

After talking to @michael-hawker in person, I agree that it makes more sense to build something from scratch. The Pivot does a lot of work in code behind that makes it difficult to build a true tab control

[mdtauk]

@skendrot It takes a fair bit of tweaking to get the pivot to work well with a tab design. And now Microsoft themselves are moving away from Pivot as tabs, to the updated NavigationView - I think the effort needs to go in an Edge like TabBar control. With Drag and Drop, re-arranging, new window on release of a tab, Tab close, etc