Control no longer using WinUI 2 styles when you apply a custom style to it? Here's how to fix it in XAML

So you've applied your own style to a Button, TextBox, ContentDialog or any other UWP control only to find that the control has reverted to the in-built UWP styles - no longer are WinUI styles being used for the control. Gone are the rounded corners and back are various fluent design lighting effects and 3D button effects common in older versions of Windows 10. You check your custom styles and can't find any reason why the control(s) look like this and you followed the instructions on how to apply the WinUI styles to your app. Well, that's because it's not your fault - this is actually normal behaviour. Read on to see why and the quick and easy fix for it.

WinUI button without custom style applied vs WinUI button with custom style applied

Why this happens

This actually happens due to the default behaviour of UWP. In fact, if you've used WPF (Windows Presentation Foundation), it had the same behaviour. What happens is that whenever you apply your own styles to controls, any properties not defined by the style are inherited by the built-in styles, even if there are styles in other ResourceDictionarys that would normally apply to that control. So what is happening is that your styles are taking priority over the WinUI styles and any properties not defined in your styles are instead inherited from the ones in built in UWP and, since the built in control styles in UWP have barely been touched since Windows 10 1903, they have a Windows 10 1903 look.

How to fix this

Luckily, the fix for this issue is pretty simple - we just have to make use of the Style.BasedOn property to tell UWP that we want to inherit from the WinUI styles instead of the UWP ones - meaning that any properties not defined in the style will be inherited from WinUI instead of UWP. Now, in order to do this for a particular control, we need to know what the WinUI style for that control is called. Luckily, Microsoft has made this pretty easy with many WinUI styles following the naming format of DefaultControlNameStyle - so for a Button it would be DefaultButtonStyle, for a TextBox it would be DefaultTextBoxStyle, for a ContentDialogDefaultContentDialogStyle and so on. So for any custom style you want to use where you want to inherit from the WinUI styles instead of the UWP ones, simply add the name of the WinUI style to the BasedOn property as a StaticResource. Here is an example of how to do that in XAML for a Button style:

<Style TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}"/>


Any Button that uses the above style will automatically inherit any properties not defined in the styles from WinUI. For other controls, just replace DefaultButtonStyle with the control-specific style key. Remember, if you're not sure what a WinUI control's style's key is, try the format DefaultControlNameStyle - obviously, replace ControlName with the name of the control whose style you're after.

Bonus: If you have an issue where a control is not using WinUI styles even though you didn't define a custom style for it, you can try setting the Style property of the control to the WinUI style for that control's key. If doing this in XAML, just copy the same text in the BasedOn property in the sample above and use that (and replace the style key if necessary).

This snippet is available in Codly. Click the download link below to download the snippet. If you don't have Codly, it is available here in the Microsoft Store.

Did this guide help you? Do you have anything to add? Let us know in the comments! Also, if this guide did help you and you use an AdBlocker and you want to support us, consider disabling it for this site - if you do, it will be greatly appreciated!

Follow us to be notified when we release new guides:

Comments

Popular posts from this blog

How to show placeholder text in a WPF TextBox in C# and VB

How to enable dark title bar in WPF and Windows Forms/WinForms apps in C# and VB

How to use modern icons in XAML in WPF on Windows 10 and 11

How to change the colour of a WPF or Windows Forms/WinForms title bar in Windows 11 in C# and VB

Microsoft WebView2: How to check if the WebView2 runtime is installed in C# and VB