Skip to content

Commit

Permalink
feat: add resource override path extensions
Browse files Browse the repository at this point in the history
  • Loading branch information
@Marc-Antoine-Soucy
Marc-Antoine-Soucy committed Oct 11, 2023
1 parent acfb64b commit 4058c39
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 1 deletion.
65 changes: 65 additions & 0 deletions doc/material-controls-extensions.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,3 +131,68 @@ The following control styles have support for surface tint:
| Control | Supporting Styles |
|---------|---------------------|
| Button | ElevatedButtonStyle |


## ResourcePathOverride

This extension allows you to set the path of a dictionary in your project for a specific control. It makes [lightweight styling](lightweight-styling.md) easier by enabling controls, like buttons, to link directly to resource dictionaries instead of requiring each resource to be written on the page. This means you can have multiple buttons with the same style but different colors simply by linking them to different resource dictionaries. It also allows for the reuse of these dictionaries across various controls, making the styling process more efficient and manageable.

Here is an example of how LightWeightStyling could be applied could be used on a checkbox.
* CheckBox:

```xml
<CheckBox Content="Overridden checkbox style"
Style="{StaticResource MaterialCheckBoxStyle}"
um:ControlExtensions.ResourceOverridePath="ms-appx:///ControlResourcesOverride/CheckBox.xaml" />
```

* ControlResourcesOverride/CheckBox.xaml content :

```xml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!-- Checked state -->
<SolidColorBrush x:Key="CheckBoxGlyphForegroundChecked"
Color="Red" />
<SolidColorBrush x:Key="CheckBoxBorderBrushChecked"
Color="Green" />
<SolidColorBrush x:Key="CheckBoxBackgroundChecked"
Color="White" />

<!-- Checked and pointer over state -->
<SolidColorBrush x:Key="CheckBoxGlyphForegroundCheckedPointerOver"
Color="Blue" />
<SolidColorBrush x:Key="CheckBoxBorderBrushCheckedPointerOver"
Color="Yellow" />
<SolidColorBrush x:Key="CheckBoxBackgroundCheckedPointerOver"
Color="Black" />

<!-- Checked and pressed state -->
<SolidColorBrush x:Key="CheckBoxGlyphForegroundPressed"
Color="Purple" />
<SolidColorBrush x:Key="CheckBoxBorderBrushCheckedPressed"
Color="Silver" />
<SolidColorBrush x:Key="CheckBoxBackgroundCheckedPressed"
Color="Cyan" />

<!-- Unchecked state -->
<StaticResource x:Key="CheckBoxBorderBrushUnchecked"
ResourceKey="SecondaryBrush" />
<StaticResource x:Key="CheckBoxBackgroundUnchecked"
ResourceKey="PrimaryLowBrush" />

<!-- Unchecked and pressed state -->
<SolidColorBrush x:Key="CheckBoxBorderBrushUncheckedPressed"
Color="Lime" />
<SolidColorBrush x:Key="CheckBoxBackgroundUncheckedPressed"
Color="Navy" />

<!-- Unchecked and pointer over state -->
<SolidColorBrush x:Key="CheckBoxBorderBrushUncheckedPointerOver"
Color="Maroon" />
<SolidColorBrush x:Key="CheckBoxBackgroundUncheckedPointerOver"
Color="Olive" />
</ResourceDictionary>
```

29 changes: 29 additions & 0 deletions src/library/Uno.Material/Extensions/ControlExtensions.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,35 @@ public static class ControlExtensions

#endregion

#region DependencyProperty: ResourceOverridePath
public static readonly DependencyProperty ResourceOverridePathProperty =
DependencyProperty.RegisterAttached(
"ResourceOverridePath",
typeof(string),
typeof(ControlExtensions),
new PropertyMetadata(null, OnResourceOverridePathChanged));

public static void SetResourceOverridePath(FrameworkElement element, string value)
{
element.SetValue(ResourceOverridePathProperty, value);
}

public static string GetResourceOverridePath(FrameworkElement element)
{
return (string)element.GetValue(ResourceOverridePathProperty);
}

private static void OnResourceOverridePathChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is FrameworkElement fe)
{
fe.Resources = e.NewValue is string path
? new ResourceDictionary() { Source = new Uri(path, UriKind.RelativeOrAbsolute) }
: default;
}
}
#endregion

private static void OnElevationChanged(DependencyObject element, DependencyPropertyChangedEventArgs e)
=> SurfaceTintExtensions.OnElevationChanged(element, (int)e.NewValue);

Expand Down
59 changes: 58 additions & 1 deletion ...samples/UWP/Uno.Themes.Samples.Shared/Content/Extensions/ControlExtensionsSamplePage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:example="http://schemas.microsoft.com/expression/blend/2008"
xmlns:android="http://uno.ui/android"
xmlns:ios="http://uno.ui/ios"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:um="using:Uno.Material"
xmlns:smtx="using:ShowMeTheXAML"
mc:Ignorable="d android ios">
mc:Ignorable="d android ios example">
<Page.Resources>
<x:String x:Key="Icon_more_horizontal">M 2 0 C 0.8999999761581421 0 0 0.8999999761581421 0 2 C 0 3.100000023841858 0.8999999761581421 4 2 4 C 3.100000023841858 4 4 3.100000023841858 4 2 C 4 0.8999999761581421 3.100000023841858 0 2 0 Z M 14 0 C 12.899999976158142 0 12 0.8999999761581421 12 2 C 12 3.100000023841858 12.899999976158142 4 14 4 C 15.100000023841858 4 16 3.100000023841858 16 2 C 16 0.8999999761581421 15.100000023841858 0 14 0 Z M 8 0 C 6.899999976158142 0 6 0.8999999761581421 6 2 C 6 3.100000023841858 6.899999976158142 4 8 4 C 9.100000023841858 4 10 3.100000023841858 10 2 C 10 0.8999999761581421 9.100000023841858 0 8 0 Z</x:String>
<x:String x:Key="Icon_more_vertical">M 2 4 C 3.100000023841858 4 4 3.100000023841858 4 2 C 4 0.8999999761581421 3.100000023841858 0 2 0 C 0.8999999761581421 0 0 0.8999999761581421 0 2 C 0 3.100000023841858 0.8999999761581421 4 2 4 Z M 2 6 C 0.8999999761581421 6 0 6.899999976158142 0 8 C 0 9.100000023841858 0.8999999761581421 10 2 10 C 3.100000023841858 10 4 9.100000023841858 4 8 C 4 6.899999976158142 3.100000023841858 6 2 6 Z M 2 12 C 0.8999999761581421 12 0 12.899999976158142 0 14 C 0 15.100000023841858 0.8999999761581421 16 2 16 C 3.100000023841858 16 4 15.100000023841858 4 14 C 4 12.899999976158142 3.100000023841858 12 2 12 Z</x:String>
Expand Down Expand Up @@ -151,6 +152,62 @@
<ToggleButton Style="{StaticResource MaterialIconToggleButtonStyle}"
Content="Hello" />
</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="ControlExtensionsSamplePage_MaterialCheckBox"
Style="{StaticResource XamlDisplayBelowStyle}">
<StackPanel Spacing="24">
<CheckBox Content="Default checkbox style"
Style="{StaticResource MaterialCheckBoxStyle}" />
<CheckBox Content="Overridden checkbox style"
Style="{StaticResource MaterialCheckBoxStyle}"
um:ControlExtensions.ResourceOverridePath="ms-appx:///ControlResourcesOverride/CheckBox.xaml" />

<!--ControlResourcesOverride/CheckBox.xaml content:-->
<example:ResourceDictionary>
<!--Checked state-->
<SolidColorBrush x:Key="CheckBoxGlyphForegroundChecked"
Color="Red" />
<SolidColorBrush x:Key="CheckBoxBorderBrushChecked"
Color="Green" />
<SolidColorBrush x:Key="CheckBoxBackgroundChecked"
Color="White" />

<!--Checked and pointer over state-->
<SolidColorBrush x:Key="CheckBoxGlyphForegroundCheckedPointerOver"
Color="Blue" />
<SolidColorBrush x:Key="CheckBoxBorderBrushCheckedPointerOver"
Color="Yellow" />
<SolidColorBrush x:Key="CheckBoxBackgroundCheckedPointerOver"
Color="Black" />

<!--Checked and pressed state-->
<SolidColorBrush x:Key="CheckBoxGlyphForegroundPressed"
Color="Purple" />
<SolidColorBrush x:Key="CheckBoxBorderBrushCheckedPressed"
Color="Silver" />
<SolidColorBrush x:Key="CheckBoxBackgroundCheckedPressed"
Color="Cyan" />

<!--Unchecked state-->
<StaticResource x:Key="CheckBoxBorderBrushUnchecked"
ResourceKey="SecondaryBrush" />
<StaticResource x:Key="CheckBoxBackgroundUnchecked"
ResourceKey="PrimaryLowBrush" />

<!--Unchecked and pressed state-->
<SolidColorBrush x:Key="CheckBoxBorderBrushUncheckedPressed"
Color="Lime" />
<SolidColorBrush x:Key="CheckBoxBackgroundUncheckedPressed"
Color="Navy" />

<!--Unchecked and pointer over state-->
<SolidColorBrush x:Key="CheckBoxBorderBrushUncheckedPointerOver"
Color="Maroon" />
<SolidColorBrush x:Key="CheckBoxBackgroundUncheckedPointerOver"
Color="Olive" />
</example:ResourceDictionary>
</StackPanel>
</smtx:XamlDisplay>
</StackPanel>
</StackPanel>
</ScrollViewer>
Expand Down
45 changes: 45 additions & 0 deletions src/samples/UWP/Uno.Themes.Samples.Shared/ControlResourcesOverride/CheckBox.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!-- Checked state -->
<SolidColorBrush x:Key="CheckBoxGlyphForegroundChecked"
Color="Red" />
<SolidColorBrush x:Key="CheckBoxBorderBrushChecked"
Color="Green" />
<SolidColorBrush x:Key="CheckBoxBackgroundChecked"
Color="White" />

<!-- Checked and pointer over state -->
<SolidColorBrush x:Key="CheckBoxGlyphForegroundCheckedPointerOver"
Color="Blue" />
<SolidColorBrush x:Key="CheckBoxBorderBrushCheckedPointerOver"
Color="Yellow" />
<SolidColorBrush x:Key="CheckBoxBackgroundCheckedPointerOver"
Color="Black" />

<!-- Checked and pressed state -->
<SolidColorBrush x:Key="CheckBoxGlyphForegroundPressed"
Color="Purple" />
<SolidColorBrush x:Key="CheckBoxBorderBrushCheckedPressed"
Color="Silver" />
<SolidColorBrush x:Key="CheckBoxBackgroundCheckedPressed"
Color="Cyan" />

<!-- Unchecked state -->
<StaticResource x:Key="CheckBoxBorderBrushUnchecked"
ResourceKey="SecondaryBrush" />
<StaticResource x:Key="CheckBoxBackgroundUnchecked"
ResourceKey="PrimaryLowBrush" />

<!-- Unchecked and pressed state -->
<SolidColorBrush x:Key="CheckBoxBorderBrushUncheckedPressed"
Color="Lime" />
<SolidColorBrush x:Key="CheckBoxBackgroundUncheckedPressed"
Color="Navy" />

<!-- Unchecked and pointer over state -->
<SolidColorBrush x:Key="CheckBoxBorderBrushUncheckedPointerOver"
Color="Maroon" />
<SolidColorBrush x:Key="CheckBoxBackgroundUncheckedPointerOver"
Color="Olive" />
</ResourceDictionary>
4 changes: 4 additions & 0 deletions src/samples/UWP/Uno.Themes.Samples.Shared/Uno.Themes.Samples.Shared.projitems
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,10 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="$(MSBuildThisFileDirectory)ControlResourcesOverride\CheckBox.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="$(MSBuildThisFileDirectory)Converters.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
Expand Down

0 comments on commit 4058c39

Please sign in to comment.