DEV Community

Cover image for Controls with Custom Styles Fall Back to the Old Look Under the WPF Fluent Theme
s-iguchi09
s-iguchi09

Posted on Edited on Originally published at s-iguchi09.github.io AI-assisted

Controls with Custom Styles Fall Back to the Old Look Under the WPF Fluent Theme

You set ThemeMode="Light" in App.xaml, and check boxes turn Fluent while every Button keeps square corners and a grey background. The only suspect is a <Style TargetType="Button"> that sets nothing but Padding. There is no error and no warning.

This is a short summary. The full article, with a table of style placements measured on .NET 9 and .NET 10, is here:
Controls with Custom Styles Fall Back to the Old Look Under the WPF Fluent Theme

Why one setter drops the whole theme

Older themes such as Aero2 come in as the theme style, which still supplies the template under your own style. Fluent comes in differently: ThemeMode merges a resource dictionary of implicit styles keyed by type. Your {x:Type Button} style has the same key and wins, so the Fluent template is never used. Style="{x:Null}" gives the same legacy look.

The fix, and the trap inside it

Inherit Fluent with BasedOn="{StaticResource {x:Type Button}}". Written directly in Application.Resources, though, it silently resolves to null. In the measurements, that happened whenever the referenced key equals the style's own key and also exists in a dictionary merged into the one declaring the style.

The layout that worked:

  1. Set ThemeMode on Application, not on a Window.
  2. Move the style into its own Styles.xaml and merge that file from App.xaml.
  3. Do not merge Fluent.xaml inside that file.
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
    <Setter Property="Padding" Value="16,6" />
</Style>
Enter fullscreen mode Exit fullscreen mode

Check the result by eye. A non-null BasedOn can still point at the old theme.

A Japanese version is also available.

Related Articles

Top comments (0)