Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add resource override path extensions #1243

Closed
wants to merge 2 commits into from
Closed

feat: add resource override path extensions #1243

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6bd6fd1
feat: add resource override path extensions
Marc-Antoine-Soucy Oct 11, 2023
90e31c2
feat: change to resources extension
Marc-Antoine-Soucy Oct 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions doc/lightweight-styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,8 @@ With this XAML we are given the following visual result, notice the third Button

![Material - Button lightweight styling](assets/material-button-pointerover-lightweight-styling.png)

It's also possible to customize a control using [the ResourcePathOverride extension](material-controls-extensions.md#ResourcePathOverride)

## Resource Keys

For more information about the lightweight styling resource keys used in each control, check out the following links:
Expand Down
65 changes: 65 additions & 0 deletions doc/material-controls-extensions.md
View file
Open in desktop
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" />
Comment on lines +144 to +146
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be used as more of a Setter attached property on a Style like here https://github.com/unoplatform/Uno.Themes/issues/1116#issuecomment-1759885473

```

* 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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading