feat: added the resource style extension

doc/helpers/resource-extensions.md

@@ -0,0 +1,36 @@
+---
+uid: Toolkit.Helpers.ResourceExtensions
+---
+
+## Resources
+
+This extension facilitates assigning a specific ResourceDictionary directly to a control's style. It simplifies [lightweight styling](../lightweight-styling.md) by eliminating the necessity to declare each resource on the page explicitly, enabling the easy creation of diverse visual elements with shared styles but varied attributes. The extension also supports the reuse of resource dictionaries across different control styles, enhancing consistency and efficiency in the UI design process.
+
+Here is an example of how lightweight styling could be applied on a Button's style:
+
+ ```xml
+<Style x:Key="OverridenFilledButtonStyle"
+	   TargetType="Button"
+	   BasedOn="{StaticResource MaterialFilledButtonStyle}">
+	<Setter Property="utu:ResourceExtensions.Resources">
+		<Setter.Value>
+			<ResourceDictionary>
+				<ResourceDictionary.ThemeDictionaries>
+					<ResourceDictionary x:Key="Default">
+						<SolidColorBrush x:Key="FilledButtonForeground"
+					 					 Color="DarkGreen" />
+						<StaticResource x:Key="FilledButtonBackground"
+										ResourceKey="SystemControlTransparentBrush" />
+					</ResourceDictionary>
+					<ResourceDictionary x:Key="Light">
+						<SolidColorBrush x:Key="FilledButtonForeground"
+					 					 Color="DarkGreen" />
+						<StaticResource x:Key="FilledButtonBackground"
+										ResourceKey="SystemControlTransparentBrush" />
+					</ResourceDictionary>
+				</ResourceDictionary.ThemeDictionaries>
+			</ResourceDictionary>
+		</Setter.Value>
+	</Setter>
+</Style>
+```

doc/lightweight-styling.md

@@ -56,7 +56,10 @@ For more information about the lightweight styling resource keys used in each co
 - [NavigationBar](controls/NavigationBar.md#lightweight-styling)
 - [TabBar](controls/TabBarAndTabBarItem.md#lightweight-styling)
 
+## Resources extension
+To apply lightweight styling to a style, you can use [ResourceExtensions.Resources](helpers/resource-extensions.md).
+
 ### Further Reading
 
 [Lightweight Styling (Windows Dev Docs)](https://learn.microsoft.com/windows/apps/design/style/xaml-styles#lightweight-styling)
-[Lightweight Styling with Uno Themes](xref:uno.themes.lightweightstyling)
+[Lightweight Styling with Uno Themes](xref:uno.themes.lightweightstyling)

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ResourceExtensionsSamplePage.xaml

@@ -0,0 +1,108 @@
+<Page x:Class="Uno.Toolkit.Samples.Content.Controls.ResourceExtensionsSamplePage"
+	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	  xmlns:local="using:Uno.Toolkit.Samples.Content.Controls"
+	  xmlns:utu="using:Uno.Toolkit.UI"
+	  xmlns:sample="using:Uno.Toolkit.Samples"
+	  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+	  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	  mc:Ignorable="d"
+	  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+	<Page.Resources>
+		<Style x:Key="OverridenButtonStyle"
+			   TargetType="Button"
+			   BasedOn="{StaticResource DefaultButtonStyle}">
+			<Setter Property="utu:ResourceExtensions.Resources">
+				<Setter.Value>
+					<ResourceDictionary>
+						<ResourceDictionary.ThemeDictionaries>
+							<ResourceDictionary x:Key="Default">
+								<SolidColorBrush x:Key="ButtonForeground"
+												 Color="LightGreen" />
+								<SolidColorBrush x:Key="ButtonBackground"
+												 Color="DarkGreen" />
+								<SolidColorBrush x:Key="ButtonBorderBrush"
+												 Color="LightGreen" />
+
+								<SolidColorBrush x:Key="ButtonForegroundPointerOver"
+												 Color="LightCoral" />
+								<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
+												 Color="DarkRed" />
+								<SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
+												 Color="LightCoral" />
+
+								<SolidColorBrush x:Key="ButtonForegroundPressed"
+												 Color="LightSkyBlue" />
+								<SolidColorBrush x:Key="ButtonBackgroundPressed"
+												 Color="DarkBlue" />
+								<SolidColorBrush x:Key="ButtonBorderBrushPressed"
+												 Color="LightSkyBlue" />
+
+								<SolidColorBrush x:Key="ButtonForegroundDisabled"
+												 Color="DarkSlateGray" />
+								<SolidColorBrush x:Key="ButtonBackgroundDisabled"
+												 Color="Gray" />
+								<SolidColorBrush x:Key="ButtonBorderBrushDisabled"
+												 Color="DarkSlateGray" />
+							</ResourceDictionary>
+							<ResourceDictionary x:Key="Light">
+								<SolidColorBrush x:Key="ButtonForeground"
+												 Color="DarkGreen" />
+								<SolidColorBrush x:Key="ButtonBackground"
+												 Color="PaleGreen" />
+								<SolidColorBrush x:Key="ButtonBorderBrush"
+												 Color="DarkGreen" />
+
+								<SolidColorBrush x:Key="ButtonForegroundPointerOver"
+												 Color="DarkRed" />
+								<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
+												 Color="Pink" />
+								<SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
+												 Color="DarkRed" />
+
+								<SolidColorBrush x:Key="ButtonForegroundPressed"
+												 Color="DarkBlue" />
+								<SolidColorBrush x:Key="ButtonBackgroundPressed"
+												 Color="SkyBlue" />
+								<SolidColorBrush x:Key="ButtonBorderBrushPressed"
+												 Color="DarkBlue" />
+
+								<SolidColorBrush x:Key="ButtonForegroundDisabled"
+												 Color="DarkSlateGray" />
+								<SolidColorBrush x:Key="ButtonBackgroundDisabled"
+												 Color="LightGray" />
+								<SolidColorBrush x:Key="ButtonBorderBrushDisabled"
+												 Color="DarkSlateGray" />
+
+							</ResourceDictionary>
+						</ResourceDictionary.ThemeDictionaries>
+					</ResourceDictionary>
+				</Setter.Value>
+			</Setter>
+		</Style>
+	</Page.Resources>
+
+	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+		<sample:SamplePageLayout IsDesignAgnostic="True">
+			<sample:SamplePageLayout.DesignAgnosticTemplate>
+				<DataTemplate>
+					<StackPanel Padding="0,20"
+								Spacing="20">
+						<TextBlock Text="ResourceExtensions.Resources"
+								   FontSize="24" />
+
+						<TextBlock Text="This property can be used in order to assign a resource dictionary to a style and facilitate lightweight Styling:"
+								   FontSize="16" />
+
+						<Button Style="{StaticResource DefaultButtonStyle}"
+								Content="Default Button" />
+
+						<Button Style="{StaticResource OverridenButtonStyle}"
+								Content="Overriden Button" />
+					</StackPanel>
+				</DataTemplate>
+			</sample:SamplePageLayout.DesignAgnosticTemplate>
+		</sample:SamplePageLayout>
+	</Grid>
+</Page>

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ResourceExtensionsSamplePage.xaml.cs

@@ -0,0 +1,24 @@
+using System;
+using System.Linq;
+using System.Windows.Input;
+using Uno.Toolkit.Samples.Entities;
+using Uno.Toolkit.Samples.ViewModels;
+using Uno.Toolkit.UI;
+
+#if IS_WINUI
+using Microsoft.UI.Xaml.Controls;
+#else
+using Windows.UI.Xaml.Controls;
+#endif
+
+namespace Uno.Toolkit.Samples.Content.Controls
+{
+	[SamplePage(SampleCategory.Behaviors, nameof(ResourceExtensions), SourceSdk.UnoToolkit)]
+	public sealed partial class ResourceExtensionsSamplePage : Page
+	{
+		public ResourceExtensionsSamplePage()
+		{
+			this.InitializeComponent();
+		}
+	}
+}

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Uno.Toolkit.Samples.Shared.projitems

@@ -56,6 +56,9 @@
     <Compile Include="$(MSBuildThisFileDirectory)Content\Controls\StatusBarSamplePage.xaml.cs">
       <DependentUpon>StatusBarSamplePage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Content\Controls\ResourceExtensionsSamplePage.xaml.cs">
+      <DependentUpon>ResourceExtensionsSamplePage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Content\Controls\TabBarItemExtensionsSamplePage.xaml.cs">
       <DependentUpon>TabBarItemExtensionsSamplePage.xaml</DependentUpon>
     </Compile>
@@ -270,6 +273,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Content\Controls\ResourceExtensionsSamplePage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Content\Controls\TabBarItemExtensionsSamplePage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

src/Uno.Toolkit.RuntimeTests/Tests/ResourceExtensionsTest.cs

@@ -0,0 +1,127 @@
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+using Uno.Extensions.Specialized;
+using Uno.Toolkit.RuntimeTests.Helpers;
+using Uno.Toolkit.UI;
+using Uno.UI.RuntimeTests;
+
+#if IS_WINUI
+using Microsoft.UI;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media;
+#else
+using Windows.UI;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Media;
+#endif
+
+namespace Uno.Toolkit.RuntimeTests.Tests;
+
+[TestClass]
+[RunsOnUIThread]
+internal class ResourceExtensionsTest
+{
+	[TestMethod]
+	public async Task ResourceExtensionsResourcesPropertyAppliedToStyleTest()
+	{
+		// Arrange
+		var colorBrush = new SolidColorBrush(Colors.DarkGreen);
+		var testKey = "TestKey";
+
+		var resourceDictionary = new ResourceDictionary
+		{
+			{ testKey, colorBrush }
+		};
+
+		var style = new Style(typeof(Button))
+		{
+			Setters =
+			{
+				new Setter { Property = ResourceExtensions.ResourcesProperty, Value = resourceDictionary }
+			}
+		};
+
+		var button = new Button
+		{
+			Style = style
+		};
+
+
+		// Act
+		await UnitTestUIContentHelperEx.SetContentAndWait(button);
+
+		// Assert
+		Assert.AreEqual(button.Resources[testKey], colorBrush);
+	}
+
+	[TestMethod]
+	public async Task ResourceExtensionsResourcesPropertyAppliedToControlTest()
+	{
+		// Arrange
+		var testValue = "TestValue";
+		var testKey = "TestKey";
+
+		var button = new Button();
+
+		var resourceDictionary = new ResourceDictionary
+		{
+			{ testKey, testValue }
+		};
+
+		// Act
+		ResourceExtensions.SetResources(button, resourceDictionary);
+
+		await UnitTestUIContentHelperEx.SetContentAndWait(button);
+
+		// Assert
+		Assert.AreEqual(button.Resources[testKey], testValue);
+	}
+
+	[TestMethod]
+	public async Task ResourceExtensionsOldResourcesRemovedWhenDictionaryChangesTest()
+	{
+		// Arrange
+		var initialColorBrush = new SolidColorBrush(Colors.DarkGreen);
+		var initialKey = "InitialKey";
+
+		var updatedColorBrush = new SolidColorBrush(Colors.Red);
+		var updatedKey = "UpdatedKey";
+
+		var initialResourceDictionary = new ResourceDictionary
+		{
+			{ initialKey, initialColorBrush }
+		};
+
+		var updatedResourceDictionary = new ResourceDictionary
+		{
+			{ updatedKey, updatedColorBrush }
+		};
+
+		var style = new Style(typeof(Button))
+		{
+			Setters =
+			{
+				new Setter { Property = ResourceExtensions.ResourcesProperty, Value = initialResourceDictionary }
+			}
+		};
+
+		var button = new Button
+		{
+			Style = style
+		};
+
+		// Act
+		// Update the resource dictionary applied to the button
+		ResourceExtensions.SetResources(button, updatedResourceDictionary);
+		await UnitTestUIContentHelperEx.SetContentAndWait(button);
+
+		// Assert
+		// The button's resources should now have the updated brush, not the initial one
+		Assert.AreEqual(button.Resources[updatedKey], updatedColorBrush);
+		Assert.IsFalse(button.Resources.Contains(initialKey));
+	}
+
+}

src/Uno.Toolkit.UI/Behaviors/ResourceExtensions.cs

@@ -0,0 +1,40 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+#if IS_WINUI
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml;
+#else
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+#endif
+
+namespace Uno.Toolkit.UI
+{
+	public static class ResourceExtensions
+	{
+		public static readonly DependencyProperty ResourcesProperty =
+		DependencyProperty.RegisterAttached("Resources", typeof(ResourceDictionary), typeof(ResourceExtensions), new PropertyMetadata(null, OnResourcesChanged));
+
+		public static ResourceDictionary GetResources(UIElement element)
+		{
+			return (ResourceDictionary)element.GetValue(ResourcesProperty);
+		}
+
+		public static void SetResources(UIElement element, ResourceDictionary value)
+		{
+			element.SetValue(ResourcesProperty, value);
+		}
+
+		private static void OnResourcesChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+		{
+			if (d is Control control && e.NewValue is ResourceDictionary newResources)
+			{
+				control.Resources = newResources;
+			}
+		}
+	}
+}