Skip to content

Commit

Permalink
fix: comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@Marc-Antoine-Soucy
Marc-Antoine-Soucy committed Oct 16, 2023
1 parent 4a0a3ee commit 0cfa4db
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 72 deletions.
46 changes: 8 additions & 38 deletions doc/helpers/style-extensions.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
uid: Toolkit.Helpers.StyleExtensions
---

## Resource
## Resources

This extension facilitates assigning a specific ResourceDictionary directly to a control's style. It simplifies [lightweight styling](../lightweight-styling.md) by allowing you to add a resource dictionary to the control's style. This eliminates 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 could be used on a button's style:
Here is an example of how lightweight styling could be applied on a Button's style:

```xml
<Style x:Key="OverridenFilledButtonStyle"
Expand All @@ -18,45 +18,15 @@ Here is an example of how lightweight styling could be applied could be used on
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="FilledButtonForeground"
Color="DarkGreen" />
<SolidColorBrush x:Key="FilledButtonBackground"
Color="LightGreen" />

<SolidColorBrush x:Key="FilledButtonForegroundPointerOver"
Color="DarkRed" />
<SolidColorBrush x:Key="FilledButtonBackgroundPointerOver"
Color="LightPink" />

<SolidColorBrush x:Key="FilledButtonForegroundPressed"
Color="DarkBlue" />
<SolidColorBrush x:Key="FilledButtonBackgroundPressed"
Color="LightSteelBlue" />

<SolidColorBrush x:Key="FilledButtonForegroundFocused"
Color="AntiqueWhite" />
<SolidColorBrush x:Key="FilledButtonBackgroundFocused"
Color="DarkMagenta" />
Color="DarkGreen" />
<StaticResource x:Key="FilledButtonBackground"
ResourceKey="SystemControlTransparentBrush" />
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="FilledButtonForeground"
Color="LightGreen" />
<SolidColorBrush x:Key="FilledButtonBackground"
Color="DarkGreen" />

<SolidColorBrush x:Key="FilledButtonForegroundPointerOver"
Color="LightPink" />
<SolidColorBrush x:Key="FilledButtonBackgroundPointerOver"
Color="DarkRed" />

<SolidColorBrush x:Key="FilledButtonForegroundPressed"
Color="LightSteelBlue" />
<SolidColorBrush x:Key="FilledButtonBackgroundPressed"
Color="DarkBlue" />

<SolidColorBrush x:Key="FilledButtonForegroundFocused"
Color="DarkMagenta" />
<SolidColorBrush x:Key="FilledButtonBackgroundFocused"
Color="AntiqueWhite" />
Color="DarkGreen" />
<StaticResource x:Key="FilledButtonBackground"
ResourceKey="SystemControlTransparentBrush" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
Expand Down
4 changes: 2 additions & 2 deletions doc/lightweight-styling.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ 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)

## Resource extension
To apply lightweight styling to a style, you can use [StyleExtensions.Resource](helpers/style-extensions.md).
## Resourcea extension
To apply lightweight styling to a style, you can use [StyleExtensions.Resources](helpers/style-extensions.md).

### Further Reading

Expand Down
81 changes: 49 additions & 32 deletions ...oolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/StyleExtensionsSamplePage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,54 +10,71 @@
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Page.Resources>
<Style x:Key="OverridenFilledButtonStyle"
<Style x:Key="OverridenButtonStyle"
TargetType="Button"
BasedOn="{StaticResource MaterialFilledButtonStyle}">
BasedOn="{StaticResource DefaultButtonStyle}">
<Setter Property="utu:StyleExtensions.Resources">
<Setter.Value>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="FilledButtonForeground"
<SolidColorBrush x:Key="ButtonForeground"
Color="LightGreen" />
<SolidColorBrush x:Key="ButtonBackground"
Color="DarkGreen" />
<SolidColorBrush x:Key="FilledButtonBackground"
<SolidColorBrush x:Key="ButtonBorderBrush"
Color="LightGreen" />

<SolidColorBrush x:Key="FilledButtonForegroundPointerOver"
<SolidColorBrush x:Key="ButtonForegroundPointerOver"
Color="LightCoral" />
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="DarkRed" />
<SolidColorBrush x:Key="FilledButtonBackgroundPointerOver"
Color="LightPink" />
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
Color="LightCoral" />

<SolidColorBrush x:Key="FilledButtonForegroundPressed"
<SolidColorBrush x:Key="ButtonForegroundPressed"
Color="LightSkyBlue" />
<SolidColorBrush x:Key="ButtonBackgroundPressed"
Color="DarkBlue" />
<SolidColorBrush x:Key="FilledButtonBackgroundPressed"
Color="LightSteelBlue" />
<SolidColorBrush x:Key="ButtonBorderBrushPressed"
Color="LightSkyBlue" />

<SolidColorBrush x:Key="FilledButtonForegroundFocused"
Color="AntiqueWhite" />
<SolidColorBrush x:Key="FilledButtonBackgroundFocused"
Color="DarkMagenta" />
<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="FilledButtonForeground"
Color="LightGreen" />
<SolidColorBrush x:Key="FilledButtonBackground"
<SolidColorBrush x:Key="ButtonForeground"
Color="DarkGreen" />
<SolidColorBrush x:Key="ButtonBackground"
Color="PaleGreen" />
<SolidColorBrush x:Key="ButtonBorderBrush"
Color="DarkGreen" />

<SolidColorBrush x:Key="FilledButtonForegroundPointerOver"
Color="LightPink" />
<SolidColorBrush x:Key="FilledButtonBackgroundPointerOver"
<SolidColorBrush x:Key="ButtonForegroundPointerOver"
Color="DarkRed" />
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="Pink" />
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
Color="DarkRed" />

<SolidColorBrush x:Key="FilledButtonForegroundPressed"
Color="LightSteelBlue" />
<SolidColorBrush x:Key="FilledButtonBackgroundPressed"
<SolidColorBrush x:Key="ButtonForegroundPressed"
Color="DarkBlue" />
<SolidColorBrush x:Key="ButtonBackgroundPressed"
Color="SkyBlue" />
<SolidColorBrush x:Key="ButtonBorderBrushPressed"
Color="DarkBlue" />

<SolidColorBrush x:Key="FilledButtonForegroundFocused"
Color="DarkMagenta" />
<SolidColorBrush x:Key="FilledButtonBackgroundFocused"
Color="AntiqueWhite" />
<SolidColorBrush x:Key="ButtonForegroundDisabled"
Color="DarkSlateGray" />
<SolidColorBrush x:Key="ButtonBackgroundDisabled"
Color="LightGray" />
<SolidColorBrush x:Key="ButtonBorderBrushDisabled"
Color="DarkSlateGray" />

</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
Expand All @@ -72,16 +89,16 @@
<DataTemplate>
<StackPanel Padding="0,20"
Spacing="20">
<TextBlock Text="StyleExtensions.Resource"
Style="{StaticResource MaterialHeadline5}" />
<TextBlock Text="StyleExtensions.Resources"
FontSize="24" />

<TextBlock Text="This property can be used in order to assign a resource dictionary to a style and facilitate lightweight Styling:"
Style="{StaticResource MaterialBody1}" />
FontSize="16" />

<Button Style="{StaticResource MaterialFilledButtonStyle}"
<Button Style="{StaticResource DefaultButtonStyle}"
Content="Default filled Button" />

<Button Style="{StaticResource OverridenFilledButtonStyle}"
<Button Style="{StaticResource OverridenButtonStyle}"
Content="Overriden filled Button" />
</StackPanel>
</DataTemplate>
Expand Down

0 comments on commit 0cfa4db

Please sign in to comment.