Proposal: Pivot visual refresh

Proposal: Pivot visual refresh

https://user-images.githubusercontent.com/7389110/104976838-0a072780-59f6-11eb-8ceb-3c163fe23b84.mp4

This example uses a selection indicator to fit the text string, as suggested by @Jaiganeshkumaran

Summary

As most of the the WinUI controls are being given a visual refresh, Pivot should also be given some changes to make it feel like it belongs with the other controls, and to improve the look and feel of this control.

Rationale

• Pivot is under utilised and under valued, it also feels awkwardly static compared to the smooth animating and transitioning controls coming with the visual refresh
• Pivot is used as a primitive for other controls such as the TabbedCommandBar coming to the Windows Community Toolkit
• FluentUI includes this control, with some of the same visual style changes I am proposing

Scope

Capability	Priority
The control must sit comfortably with the other WinUI refreshed control visuals	Must
The Selection Indicator width should animate/transition between VisualStates	Must
The brushes and styling of the controls should allow it to feel closer to the FluentUI implementation	Should
The position of the Selection Indicator could transition when the Selected PivotItem is changed	Could

Important Notes

The changes to this control consist of a few notable changes:

• The overall height of the control will be reduced when the Pivot Title is visible.
• The brushes used correspond to the new brushes coming as part of the visual refresh (including the use of the Accent AA colours for the selection indicator.
• Font sizing for the Pivot Labels is reduced slightly, to fit better with the backing plates added for the PointerOver and Pressed VisualStates

ThemeResources Used

Pivot Item Header States

---

Here is a breakdown of which theme resources could be used for each state:

VisualState	Property	Value
Default	Background	GhostFillTransparent
	Foreground	TextFillSecondary
PointerOver	Background	GhostFillSecondary
	Foreground	TextFillPrimary
Pressed	Background	GhostFillTertiary
	Foreground	TextFillTertiary
Disabled	Background	GhostFillTransparent
	Foreground	TextFillDisabled
Default - Selected	Background	GhostFillTransparent
	Foreground	TextFillPrimary
	Selection Indicator Fill	AccentAAFillDefault
	Selection Indicator Width	32px • or text length −12px
PointerOver - Selected	Background	GhostFillSecondary
	Foreground	TextFillPrimary
	Selection Indicator Fill	AccentAAFillSecondary
	Selection Indicator Width	48px • or text length
Pressed - Selected	Background	GhostFillTertiary
	Foreground	TextFillTertiary
	Selection Indicator Fill	AccentAAFillTertiary
	Selection Indicator Width	16px • or text length −24px
Disabled - Selected	Background	GhostFillTransparent
	Foreground	TextFillDisabled
	Selection Indicator Fill	TextFillDisabled
	Selection Indicator Width	32px • or text length

Transitioning between Selected and Unselected state

• extend the Selection Indicator width by +20px - into the Default or PointerOver width;
• fade in the indicator visual;

When transitioning into the Unselected state from the Selected state:

• reduce the Selection Indicator width by −20px; -fade the indicator out;

Open Questions

There have been a few issues asking for the Selection Indicator to animate between PivotItem selection changes, as the NavigationView’s indicator does. Whether this is following the finger as you swipe, or after you release and the Selected Item actually changes. #848

Fluent UI animates the SelectionIndicator within the Pivot Item itself, which may be a good compromise, as it should not result in a big re-working of how the control is built.

[mdtauk]

Pivots used not for navigation, but for tool set changes, or view changes.

As this control is still used, I hope eventually Microsoft will allow the community to maintain and update the Pivot control.

[jordan-msftfan]

@YuliKl Can you disclose to the community which controls are no longer officially invested? Edit: i mean except pivot