Fixing Fluent Style Issues

[dipeshmsft]

Description

WPF's Fluent control styles have some issues which need to be addressed to bring the styles at parity with WinUI Fluent styles and make them production ready. We also need some changes to default values of properties ( like HorizontalAlignment, etc. ) to minimize UI breaking changes for applications moving from Aero2 to Fluent.

Here are the broad categories of tasks that need to be done per control for this:

1. Match resource usage in control styles with WinUI resources where possible
2. Add animations for controls where required to match WinUI.
3. Compare Fluent styles with Aero2 styles to match
   3.a. Properties like HorizontalAlignment, VerticalAlignment
   3.b. TemplateBinding comparison with Aero2 styles
4. Compare WPF Fluent styles with WinUI styles :
   4.a. Convert ControlTemplate Triggers to VisualStates ( to simplify animation's and bring parity with WinUI styles )
   4.b. Convert StaticResource's to DynamicResource for properties where customization is needed.
   4.c. Define resources for CornerRadius, Thickness, etc. for the controls where it is needed

List of Controls

• • Expander
• • GridSplitter
• • GroupBox
• • ResizeGrip
• • Separator
• • ScrollBar
• • ScrollViewer
• • Window
• • Button
• • RepeatButton
• Fix DataGrid Fluent control style #10445
• • ListView
• • TreeView
• • Calendar
• • ContextMenu
• • Menu
• • ToolBar
• • CheckBox
• • ListBox
• • RadioButton
• • Slider
• • Frame
• • Hyperlink
• • Page
• • NavigationWindow
• • Label
• • ProgressBar
• • StatusBar
• • TextBlock
• • ToolTip
• • DocumentViewer
• • FlowDocumentPageViewer
• • FlowDocumentReader
• • FlowDocumentScrollViewer
• • StickyNoteControl
• • InkCanvas

Related Issues:

These issues refer to the type of problems that we have in Fluent styles currently :

• Fluent2: ListViewItem/ListBoxItem Has Hardcoded Padding #10370
• Inconsistent Animations and Effects in Windows 11 Styles #8670
• Fluent2 ToolTip Missing Some Lightweight Styling Resources Available in WinUI3 #9671
• Fluent2 Menu/MenuItem Resource Keys Misnamed #9987

[dipeshmsft]

I would like to know others opinion on 4.a. and 4.b. Here are my thoughts on the above points:

• Point 4.a:

  • Moving from ControlTemplate.Triggers to VisualStates will bring parity in WPF and WinUI Fluent styles.
  • It is also make it easy to add animations for controls similar to those in WinUI
  • However, it marks the departure from the way styles are usually written in WPF. I am guessing most developers and third party libraries use Triggers to handle changes for Hover / Pressed states, etc. I am guessing this will make it harder for apps to migrate to new theme as well.
  • I was thinking that we should use both of them, but animations are the ones that will be handled by VisualStates only and property value updates are handled via Triggers.

• Point 4.b:

  • This will be a performance tradeoff if we switch StaticResources to DynamicResource for margin and padding, to allow customization in the way WinUI does it.
  • My thoughts here are that resources which are bound to setters of control styles for these properties ( margin , padding : non color properties ) should be used as StaticResource as it is easy enough to customize the styles by just creating a new style based on default style and overriding the required setters.

/cc @dotnet/dotnet-wpf-triage @robert-abeo @MichaeIDietrich

[robert-abeo]

Personally, I prefer Triggers compared to visual states. Triggers are just so much more intuitive and easy to use. However, they are not as powerful and can't be used in all cases.

I think this comes down to how you want to create the Fluent themes?

1. If you are starting from Aero2 then modifying to make it visually look like Fluent then prefer triggers -- what is done in Aero2 for the most part I believe
2. If you are trying to backport WinUI Fluent to WPF then use visual states

[andreaCosm]

Thank you for your efforts, just found this ticket while trying to understand the new Fluent controls, having just switched to the newest version of WPF. I want single out that the tab control needs better states and contrast. There's no hover animation; the selection also doesn't seem update the color with selection either although I do see that working in the example. Are we supposed to use a specific background color with it?

                    <TabControl>
                        <TabItem Header="Audio">
                            <TextBlock Text="Audio Settings" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </TabItem>
                        <TabItem Header="Video">
                            <TextBlock Text="Video Settings" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </TabItem>
                    </TabControl>