Styles Not Applying When Overriding in Page Resources

[Kunal22shah]

Current behavior

When overriding button styles in the main page resources using the same key as the global resource, the styles do not apply on WSL (Desktop), but they do on Windows (with latest toolkit : <UnoToolkitVersion>6.2.0-dev.41</UnoToolkitVersion> ). A workaround involves adding BasedOn="{StaticResource DefaultButtonStyle}" to the button style, which makes it work on WSL as well.
Repro : UnoApp5.zip (no blue background for the buttons)

Expected behavior

Same blue background for both buttons

How to reproduce it (as minimally and precisely as possible)

No response

Workaround

adding BasedOn="{StaticResource DefaultButtonStyle}" to the button style in the Page Resources

Works on UWP/WinUI

None

Environment

No response

NuGet package version(s)

No response

Affected platforms

No response

IDE

No response

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[agneszitte]

cc @MartinZikmund, @kazo0 for info
Related Toolkit issue: unoplatform/uno.toolkit.ui#1187

[kazo0]

I don't think this is necessarily constrained to WSL. I can repro on net8.0-desktop windows

[kazo0]

Probably related? #18115

[Kunal22shah]

i tested some cases for this issue with the sample app from above w latest stable sdk :

1. (Page Resources, without BasedOn): Styles did not apply.
2. (Page Resources, BasedOn included): Styles applied successfully.
3. (Global Styles from Buttons.xaml removed from page resource) : Styles applied successfully.
4. (Inline Styles on Button, removed from global and page resource): Styles applied successfully.

[kazo0]

Ok, here's what is happening. Both WinUI and Uno have a generic.xaml that contains all of the default implicit styles

So if I have these two styles:

<Style x:Key="ActionButtonStyle"
		   TargetType="Button">
		<Setter Property="utu:ResourceExtensions.Resources">
			<Setter.Value>
				<ResourceDictionary>
					<ResourceDictionary.ThemeDictionaries>
						<ResourceDictionary x:Key="Default">
							<StaticResource x:Key="ButtonBackground" ResourceKey="ActionBackgroundBrush" />
							<StaticResource x:Key="ButtonForeground" ResourceKey="ActionForegroundBrush" />
							<StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="Gray300Brush" />
							<StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="ActionBackgroundBrush" />
						</ResourceDictionary>
					</ResourceDictionary.ThemeDictionaries>
				</ResourceDictionary>
			</Setter.Value>
		</Setter>
</Style>

<Style x:Key="ActionButtonStyle2"
		   TargetType="Button"
		   BasedOn="{StaticResource DefaultButtonStyle}">
		<Setter Property="utu:ResourceExtensions.Resources">
			<Setter.Value>
				<ResourceDictionary>
					<ResourceDictionary.ThemeDictionaries>
						<ResourceDictionary x:Key="Default">
							<StaticResource x:Key="ButtonBackground" ResourceKey="ActionBackgroundBrush" />
							<StaticResource x:Key="ButtonForeground" ResourceKey="ActionForegroundBrush" />
							<StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="Gray300Brush" />
							<StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="ActionBackgroundBrush" />
						</ResourceDictionary>
					</ResourceDictionary.ThemeDictionaries>
				</ResourceDictionary>
			</Setter.Value>
		</Setter>
</Style>

And this as my xaml:

<StackPanel HorizontalAlignment="Center"
			VerticalAlignment="Center"
			Orientation="Horizontal">

	<Button Content="Menu"
			Style="{StaticResource ActionButtonStyle}" />

	<Button Margin="12,0,0,0"
			Content="Menu 2"
			Style="{StaticResource ActionButtonStyle2}" />

</StackPanel>

I see this on Windows:

And this on Uno platforms:

So we can see that the style without BasedOn is different on both platforms. So since there's no BasedOn, it resolves the default style to the one in Generic.xaml.

Generic.xaml for WinUI: https://github.com/microsoft/microsoft-ui-xaml/blob/14364e6c301e881c5e2b6b9c39503343c66e53eb/src/dxaml/xcp/dxaml/themes/generic.xaml#L5984

Uno's Generic.xaml:

uno/src/Uno.UI/UI/Xaml/Style/Generic/Generic.xaml

Line 2898 in 4dabe7d

<Style x:Key="XamlDefaultButton"

So it is CORRECT that the two buttons in the app are different. BUT the reason it looks like the ResourceExtension isn't properly overriding the resources for the non-BasedOn style is because of the difference between Uno's default generic.xaml Button style and WinUI's generic.xaml Button style.

See the one in WinUI is using the ButtonBackground resource (https://github.com/microsoft/microsoft-ui-xaml/blob/14364e6c301e881c5e2b6b9c39503343c66e53eb/src/dxaml/xcp/dxaml/themes/generic.xaml#L5985)

But the Uno one is not:

uno/src/Uno.UI/UI/Xaml/Style/Generic/Generic.xaml

Lines 2900 to 2901 in 4dabe7d

	<Setter Property="Background"
	Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />

So it is normal that the BasedOn is required if you are indeed looking to override the Fluent "DefaultButtonStyle"

What should be fixed is we should be updating the Generic.xaml in Uno to match the styles in WinUI's Generic.xaml

[jeromelaban]

We can adjust our system styles to match the ones from WinUI. They might have evolved slightly in the past.