From 1156435616cca2a8c4bfa6d1078934499ab04901 Mon Sep 17 00:00:00 2001 From: Steve Bilogan Date: Mon, 4 Sep 2023 13:02:47 -0400 Subject: [PATCH 1/6] docs: Additional lightweight styling docs (cherry picked from commit 29fe1aa0b74ba24a1de2dafe90f4584ae15b2fa8) --- doc/lightweight-styling.md | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/doc/lightweight-styling.md b/doc/lightweight-styling.md index c42728726..f49ad9d20 100644 --- a/doc/lightweight-styling.md +++ b/doc/lightweight-styling.md @@ -3,13 +3,16 @@ uid: uno.themes.lightweightstyling --- # Lightweight Styling -[Lightweight styling](https://learn.microsoft.com/windows/apps/design/style/xaml-styles#lightweight-styling) is a way to customize the appearance of XAML controls by **overriding** their default brushes, fonts and numeric properties. Lightweight styles are changed by providing alternate resources with the same key: +[Lightweight styling](https://learn.microsoft.com/windows/apps/design/style/xaml-styles#lightweight-styling) is a way to customize the appearance of XAML controls by **overriding** their default brushes, fonts, and numeric properties. Lightweight styles are changed by providing alternate resources with the same key. All Uno Material styles support the capability to be customized through resource overrides without the need to re-define the style. + +An example of the anatomy of the lightweight styling resources available for something like Uno Material’s FilledButtonStyle can be seen below. The provided XAML code and image depict a Button using the default FilledButtonStyle followed by a second button, also with FilledButtonStyle applied, but now with specific resource keys overridden to customize its appearance. ```xml - + ``` +With this XAML we are given the following visual result, notice the third Button has a new BorderThickness applied and takes on different colors while in the **PointerOver** state. + ![Material - Button lightweight styling](assets/material-button-pointerover-lightweight-styling.png) ## Resource Keys @@ -57,7 +69,7 @@ For more information about the lightweight styling resource keys used in each co - [ComboBox](styles/ComboBox.md) - [DatePicker](styles/DatePicker.md) - [FloatingActionButton](styles/FloatingActionButton.md) -- [HyperlinkButton](styles/HyperlinkButton.md) +- [HyperlinkButton](styles/HyperlinkButton.md) - [NavigationView](styles/NavigationView.md) - [PasswordBox](styles/PasswordBox.md) - [PipsPager](styles/PipsPager.md) @@ -77,4 +89,4 @@ Toolkit also has controls that allow lightweight styling, check out [Lightweight ### Further Reading -https://learn.microsoft.com/windows/apps/design/style/xaml-styles#lightweight-styling +[Lightweight Styling (Windows Dev Docs)](https://learn.microsoft.com/windows/apps/design/style/xaml-styles#lightweight-styling) From 13167bf78a686c259bb6d97659bb855de9e41e98 Mon Sep 17 00:00:00 2001 From: Steve Bilogan Date: Tue, 5 Sep 2023 12:45:16 -0400 Subject: [PATCH 2/6] docs: add more information (cherry picked from commit 8ee0618525142c460fc08bb69aebc630c396dfe5) --- .../lightweight-styling-theme-comparison.png | Bin 0 -> 14694 bytes doc/lightweight-styling.md | 110 ++++++++++++++---- 2 files changed, 89 insertions(+), 21 deletions(-) create mode 100644 doc/assets/lightweight-styling-theme-comparison.png diff --git a/doc/assets/lightweight-styling-theme-comparison.png b/doc/assets/lightweight-styling-theme-comparison.png new file mode 100644 index 0000000000000000000000000000000000000000..76123ac1342e3d524275b42140b3254590f19d42 GIT binary patch literal 14694 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 + + + + + + + + + + + + + 2 + + + + + + 2 + + + + + + + + +``` + +Notice the `ResourceDictionary.ThemeDictionaries` element. This is where you can override resources for each theme. In the example above, we are overriding the resources for both the Light and Default themes. The Light theme is used when the device is in Light mode, and the Default theme is used when the device is in Dark mode. Below is an example of the same `Button` using the `FilledButtonStyle` from Uno Material, but with the overrides from above applied to both the Light and Dark themes. + +![Material - Button lightweight styling themes](assets/lightweight-styling-theme-comparison.png) + +Placing these brush overrides at the `AppResources.xaml` level will alter every `Button` that is styled with `FilledButtonStyle` within the entire application. The overrides can be scoped to a specific page by placing them in the `Page.Resources` element of the page’s XAML. The following XAML shows how to override the same resources from above, but scoped to a specific page. + +```xml + + + + + + 2 + + + + + + 2 + + + + + + + +``` + +## Per-control styling + +In other cases, changing a single control on one page only to look a certain way, without altering any other versions of that control, can also be achieved. The provided XAML code and image depict a `Button` using the default `FilledButtonStyle` followed by a second `Button`, also with `FilledButtonStyle` applied, but now with specific resource keys overridden to customize its appearance. ```xml ``` @@ -31,27 +99,27 @@ Lightweight Styling allows for fine-grained control over the look of your UI com ```xml ``` From 8157c8d9ba7659d6572b691acae1c1cab9eec3af Mon Sep 17 00:00:00 2001 From: Steve Bilogan Date: Tue, 5 Sep 2023 12:48:50 -0400 Subject: [PATCH 3/6] chore: pr comments (cherry picked from commit efe625cfe5f889fd09227da5786d25c4caea38e2) --- doc/lightweight-styling.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/doc/lightweight-styling.md b/doc/lightweight-styling.md index dcde0a101..834301ac4 100644 --- a/doc/lightweight-styling.md +++ b/doc/lightweight-styling.md @@ -76,11 +76,13 @@ Placing these brush overrides at the `AppResources.xaml` level will alter every In other cases, changing a single control on one page only to look a certain way, without altering any other versions of that control, can also be achieved. The provided XAML code and image depict a `Button` using the default `FilledButtonStyle` followed by a second `Button`, also with `FilledButtonStyle` applied, but now with specific resource keys overridden to customize its appearance. ```xml -