Skip to content

Commit

Permalink
fix: wording
Browse files Browse the repository at this point in the history
  • Loading branch information
rajamatt committed Aug 15, 2023
1 parent c7f68d7 commit 4634b1f
Showing 1 changed file with 5 additions and 2 deletions.
7 changes: 5 additions & 2 deletions doc/lightweight-styling.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 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** the system brushes that they use. Lightweight styling is applied in the Resources of the control itself:
[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:

```xml
<utu:Chip Content="Default Chip Style" Style="{StaticResource FilterChipStyle}" />
Expand All @@ -16,7 +16,7 @@

![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.
Some interactive 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: ChipForeground*PointerOver*, ChipForeground*Pressed*, and ChipForeground*Disabled*. Combined with these, the Chip control also has a **Checked** state. [These links](lightweight-styling#resource-keys) list the resource keys for each control.

```xml
<utu:Chip Content="Overriden Chip Style" Style="{StaticResource FilterChipStyle}">
Expand All @@ -36,12 +36,15 @@ Most controls have multiple states, such as **PointerOver** (mouse is hovered ov
![Material - Button lightweight styling](assets/material-chip-pointerover-lightweight-styling.png)

## Resource Keys

For more information about the lightweight styling resource keys used in each control, check out the following links:

- [Card](controls/CardAndCardContentControl.md#lightweight-styling)
- [CardContentControl](controls/CardAndCardContentControl.md#lightweight-styling-1)
- [Chip](controls/ChipAndChipGroup.md#lightweight-styling)
- [NavigationBar](controls/NavigationBar.md#lightweight-styling)
- [TabBar](controls/TabBarAndTabBarItem.md#lightweight-styling)

### Further Reading

https://learn.microsoft.com/windows/apps/design/style/xaml-styles#lightweight-styling

0 comments on commit 4634b1f

Please sign in to comment.