docs: added general lightweight styling

fix: screenshots fix: spacing and commas Co-authored-by: Xiaotian Gu <[email protected]> Co-authored-by: Agnès ZITTE <[email protected]> fix: resource keys list Co-authored-by: Xiaotian Gu <[email protected]> fix: xml code changes docs: lightweight styling fix: missing word Co-authored-by: Agnès ZITTE <[email protected]> fix: added further reading docs: added lightweight styling docs fix: images docs: added lightweight styling docs
unoplatform · Aug 8, 2023 · c49ef55 · c49ef55
1 parent 73b8e0b
commit c49ef55
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 0 deletions.
diff --git a/doc/assets/material-button-pointerover-lightweight-styling.png b/doc/assets/material-button-pointerover-lightweight-styling.png
diff --git a/doc/assets/material-lightweight-styling-anatomy.png b/doc/assets/material-lightweight-styling-anatomy.png
diff --git a/doc/lightweight-styling.md b/doc/lightweight-styling.md
@@ -0,0 +1,58 @@
+# Lightweight Styling
+
+[Lightweight styling](https://learn.microsoft.com/en-us/windows/apps/design/style/xaml-styles#lightweight-styling) is a way to customize the appearance of XAML controls by **overriding** the system brushes that they use. Lightweight styling is applied in the Resources of the control itself:
+
+```xml
+<Button Content="Default Button Style" Style="{StaticResource MaterialFilledButtonStyle}" />
+
+<Button Content="Overridden Button Style" Style="{StaticResource MaterialFilledButtonStyle}" BorderThickness="2">
+	<Button.Resources>
+		<SolidColorBrush x:Key="FilledButtonForeground" Color="DarkGreen" />
+		<SolidColorBrush x:Key="FilledButtonBackground" Color="LightGreen" />
+		<SolidColorBrush x:Key="FilledButtonBorderBrush" Color="DarkGreen" />
+	</Button.Resources>
+</Button>
+```
+
+![Material - Button lightweight styling](assets/material-lightweight-styling-anatomy.png)
+
+Most controls have multiple states, such as **PointerOver** (mouse is hovered over), **Pressed** (control is pressed on), and **Disabled** (control is not interactable). These states are appended onto the endings of the resource keys: ButtonForeground*PointerOver*, ButtonForeground*Pressed*, and ButtonForeground*Disabled*. Some controls even have **Checked** and **Unchecked** states.
+
+```xml
+<Button Content="Overridden Button Style" Style="{StaticResource MaterialFilledButtonStyle}" BorderThickness="2">
+	<Button.Resources>
+		<SolidColorBrush x:Key="FilledButtonForeground" Color="DarkGreen" />
+		<SolidColorBrush x:Key="FilledButtonBackground" Color="LightGreen" />
+		<SolidColorBrush x:Key="FilledButtonBorderBrush" Color="DarkGreen" />
+
+		<!-- Overriding the PointerOver brushes -->
+		<SolidColorBrush x:Key="FilledButtonForegroundPointerOver" Color="DarkRed" />
+		<SolidColorBrush x:Key="FilledButtonBackgroundPointerOver" Color="LightPink" />
+		<SolidColorBrush x:Key="FilledButtonBorderBrushPointerOver" Color="DarkRed" />
+	</Button.Resources>
+</Button>
+```
+
+![Material - Button lightweight styling](assets/material-button-pointerover-lightweight-styling.png)
+
+## Resource Keys
+For more information about the lightweight styling resource keys used in each control, check out the following links:
+- [Button]()
+- [CheckBox]()
+- [ComboBox]()
+- [DatePicker]()
+- [FloatingActionButton]()
+- [HyperlinkButton]() 
+- [NavigationView]()
+- [PasswordBox]()
+- [PipsPager]()
+- [ProgressBar]()
+- [ProgressRing]()
+- [RadioButton]()
+- [Slider]()
+- [TextBlock]()
+- [TextBox]()
+- [ToggleButton]()
+
+### Further Reading
+https://learn.microsoft.com/en-us/windows/apps/design/style/xaml-styles#lightweight-styling