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

docs: lightweight styling (backport #1118) #1160

Merged
merged 1 commit into from
Aug 17, 2023
Merged

docs: lightweight styling (backport #1118) #1160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file added doc/assets/material-button-pointerover-lightweight-styling.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/assets/material-lightweight-styling-anatomy.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 70 additions & 0 deletions doc/lightweight-styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
---
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:

```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)

All 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: ButtonForeground*PointerOver*, ButtonForeground*Pressed*, and ButtonForeground*Disabled*. Combined with these, the CheckBox and RadioButton controls also have **Checked** and **Unchecked** states. [These links](lightweight-styling#resource-keys) list the resource keys for each control.

```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](styles/Button.md)
- [CheckBox](styles/CheckBox.md)
- [ComboBox](styles/ComboBox.md)
- [DatePicker](styles/DatePicker.md)
- [FloatingActionButton](styles/FloatingActionButton.md)
- [HyperlinkButton](styles/HyperlinkButton.md)
- [NavigationView](styles/NavigationView.md)
- [PasswordBox](styles/PasswordBox.md)
- [PipsPager](styles/PipsPager.md)
- [ProgressBar](styles/ProgressBar.md)
- [ProgressRing](styles/ProgressRing.md)
- [RadioButton](styles/RadioButton.md)
- [RatingControl](styles/RatingControl.md)
- [Slider](styles/Slider.md)
- [TextBlock](styles/Typography.md)
- [TextBox](styles/TextBox.md)
- [ToggleButton](styles/ToggleButton.md)
- [ToggleSwitch](styles/ToggleSwitch.md)

## Toolkit

Toolkit also has controls that allow lightweight styling, check out [Lightweight Styling in Uno.Toolkit](xref:Toolkit.LightweightStyling).

### Further Reading

https://learn.microsoft.com/windows/apps/design/style/xaml-styles#lightweight-styling
7 changes: 4 additions & 3 deletions doc/material-controls-styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ Button|TertiaryLargeFabStyle|
CalendarDatePicker|CalendarDatePickerStyle|True
CalendarView|CalendarViewStyle|True
CheckBox|CheckBoxStyle|True
CheckBox|SecondaryCheckBoxStyle|
ComboBox|ComboBoxStyle|True
CommandBar|CommandBarStyle|True
ContentDialog|ContentDialogStyle|True
Expand All @@ -39,11 +38,13 @@ muxc:NavigationView|NavigationViewStyle|True
muxc:NavigationViewItem|NavigationViewItemStyle|True
muxc:ProgressBar|ProgressBarStyle|True
muxc:ProgressRing|ProgressRingStyle|True
PasswordBox|FilledPasswordBoxStyle|True
PasswordBox|OutlinedPasswordBoxStyle|
PasswordBox|FilledPasswordBoxStyle|
PasswordBox|OutlinedPasswordBoxStyle|True
muxc:PipsPager|PipsPagerStyle|True
RadioButton|RadioButtonStyle|True
RadioButton|SecondaryRadioButtonStyle|
RatingControl|RatingControlStyle|True
RatingControl|SecondaryRatingControlStyle|
Slider|SliderStyle|True
TextBlock|DisplayLarge|
TextBlock|DisplayMedium|
Expand Down
160 changes: 160 additions & 0 deletions doc/styles/Button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
# Button Control
## Styles

Style Key|IsDefaultStyle*
-|-
ElevatedButtonStyle|
FilledButtonStyle|True
FilledTonalButtonStyle|
OutlinedButtonStyle|
TextButtonStyle|
IconButtonStyle|

IsDefaultStyle*: Styles in this column will be set as the default implicit style for the matching control

## Lightweight Styling

Key|Type|Value
-|-|-
ElevatedButtonForeground|SolidColorBrush|PrimaryBrush
ElevatedButtonForegroundPointerOver|SolidColorBrush|PrimaryBrush
ElevatedButtonForegroundPressed|SolidColorBrush|PrimaryBrush
ElevatedButtonForegroundFocused|SolidColorBrush|PrimaryBrush
ElevatedButtonForegroundPointerFocused|SolidColorBrush|PrimaryBrush
ElevatedButtonForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush
ElevatedButtonIconForeground|SolidColorBrush|PrimaryBrush
ElevatedButtonIconForegroundPointerOver|SolidColorBrush|PrimaryBrush
ElevatedButtonIconForegroundPressed|SolidColorBrush|PrimaryBrush
ElevatedButtonIconForegroundFocused|SolidColorBrush|PrimaryBrush
ElevatedButtonIconForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush
ElevatedButtonIconForegroundPointerFocused|SolidColorBrush|PrimaryBrush
ElevatedButtonBackground|SolidColorBrush|SurfaceBrush
ElevatedButtonBackgroundDisabled|SolidColorBrush|OnSurfaceDisabledLowBrush
ElevatedButtonBackgroundPointerOver|SolidColorBrush|PrimaryHoverBrush
ElevatedButtonBackgroundPressed|SolidColorBrush|PrimaryPressedBrush
ElevatedButtonBackgroundFocused|SolidColorBrush|PrimaryFocusedBrush
ElevatedButtonBackgroundPointerFocused|SolidColorBrush|PrimaryFocusedBrush
ElevatedButtonBorderBrush|SolidColorBrush|SystemControlTransparentBrush
ElevatedButtonBorderBrushPointerOver|SolidColorBrush|SystemControlTransparentBrush
ElevatedButtonBorderBrushPressed|SolidColorBrush|SystemControlTransparentBrush
ElevatedButtonBorderBrushFocused|SolidColorBrush|SystemControlTransparentBrush
ElevatedButtonBorderBrushDisabled|SolidColorBrush|SystemControlTransparentBrush
ElevatedButtonBorderBrushPointerFocused|SolidColorBrush|SystemControlTransparentBrush
FilledButtonForeground|SolidColorBrush|OnPrimaryBrush
FilledButtonForegroundPointerOver|SolidColorBrush|OnPrimaryBrush
FilledButtonForegroundPressed|SolidColorBrush|OnPrimaryBrush
FilledButtonForegroundPointerFocused|SolidColorBrush|OnPrimaryBrush
FilledButtonForegroundFocused|SolidColorBrush|OnPrimaryBrush
FilledButtonForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush
FilledButtonIconForeground|SolidColorBrush|OnPrimaryBrush
FilledButtonIconForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush
FilledButtonIconForegroundPointerOver|SolidColorBrush|OnPrimaryBrush
FilledButtonIconForegroundPressed|SolidColorBrush|OnPrimaryBrush
FilledButtonIconForegroundFocused|SolidColorBrush|OnPrimaryBrush
FilledButtonIconForegroundPointerFocused|SolidColorBrush|OnPrimaryBrush
FilledButtonBackground|SolidColorBrush|PrimaryBrush
FilledButtonBackgroundPointerOver|SolidColorBrush|OnPrimaryHoverBrush
FilledButtonBackgroundPressed|SolidColorBrush|OnPrimaryPressedBrush
FilledButtonBackgroundDisabled|SolidColorBrush|OnSurfaceDisabledLowBrush
FilledButtonBackgroundFocused|SolidColorBrush|OnPrimaryFocusedBrush
FilledButtonBackgroundPointerFocused|SolidColorBrush|OnPrimaryFocusedBrush
FilledButtonBorderBrush|SolidColorBrush|SystemControlTransparentBrush
FilledButtonBorderBrushPointerOver|SolidColorBrush|SystemControlTransparentBrush
FilledButtonBorderBrushPressed|SolidColorBrush|SystemControlTransparentBrush
FilledButtonBorderBrushFocused|SolidColorBrush|SystemControlTransparentBrush
FilledButtonBorderBrushDisabled|SolidColorBrush|SystemControlTransparentBrush
FilledButtonBorderBrushPointerFocused|SolidColorBrush|SystemControlTransparentBrush
FilledTonalButtonForeground|SolidColorBrush|OnSecondaryContainerBrush
FilledTonalButtonForegroundPointerOver|SolidColorBrush|OnSecondaryContainerBrush
FilledTonalButtonForegroundPressed|SolidColorBrush|OnSecondaryContainerBrush
FilledTonalButtonForegroundFocused|SolidColorBrush|OnSecondaryContainerBrush
FilledTonalButtonForegroundPointerFocused|SolidColorBrush|OnSecondaryContainerBrush
FilledTonalButtonForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush
FilledTonalButtonIconForeground|SolidColorBrush|OnSecondaryContainerBrush
FilledTonalButtonIconForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush
FilledTonalButtonIconForegroundPointerOver|SolidColorBrush|OnSecondaryContainerBrush
FilledTonalButtonIconForegroundPressed|SolidColorBrush|OnSecondaryContainerBrush
FilledTonalButtonIconForegroundFocused|SolidColorBrush|OnSecondaryContainerBrush
FilledTonalButtonIconForegroundPointerFocused|SolidColorBrush|OnSecondaryContainerBrush
FilledTonalButtonBackground|SolidColorBrush|SecondaryContainerBrush
FilledTonalButtonBackgroundPointerOver|SolidColorBrush|OnSecondaryContainerHoverBrush
FilledTonalButtonBackgroundPressed|SolidColorBrush|OnSecondaryContainerPressedBrush
FilledTonalButtonBackgroundDisabled|SolidColorBrush|OnSurfaceDisabledLowBrush
FilledTonalButtonBackgroundFocused|SolidColorBrush|OnSecondaryContainerFocusedBrush
FilledTonalButtonBackgroundPointerFocused|SolidColorBrush|OnSecondaryContainerFocusedBrush
FilledTonalButtonBorderBrush|SolidColorBrush|SystemControlTransparentBrush
FilledTonalButtonBorderBrushPointerOver|SolidColorBrush|SystemControlTransparentBrush
FilledTonalButtonBorderBrushPressed|SolidColorBrush|SystemControlTransparentBrush
FilledTonalButtonBorderBrushFocused|SolidColorBrush|SystemControlTransparentBrush
FilledTonalButtonBorderBrushDisabled|SolidColorBrush|SystemControlTransparentBrush
FilledTonalButtonBorderBrushPointerFocused|SolidColorBrush|SystemControlTransparentBrush
OutlinedButtonForeground|SolidColorBrush|PrimaryBrush
OutlinedButtonForegroundPressed|SolidColorBrush|PrimaryBrush
OutlinedButtonForegroundPointerOver|SolidColorBrush|PrimaryBrush
OutlinedButtonForegroundFocused|SolidColorBrush|PrimaryBrush
OutlinedButtonForegroundPointerFocused|SolidColorBrush|PrimaryBrush
OutlinedButtonForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush
OutlinedButtonIconForeground|SolidColorBrush|PrimaryBrush
OutlinedButtonIconForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush
OutlinedButtonIconForegroundPointerOver|SolidColorBrush|PrimaryBrush
OutlinedButtonIconForegroundPressed|SolidColorBrush|PrimaryBrush
OutlinedButtonIconForegroundFocused|SolidColorBrush|PrimaryBrush
OutlinedButtonIconForegroundPointerFocused|SolidColorBrush|PrimaryBrush
OutlinedButtonBackground|SolidColorBrush|SystemControlTransparentBrush
OutlinedButtonBackgroundPointerOver|SolidColorBrush|PrimaryHoverBrush
OutlinedButtonBackgroundPressed|SolidColorBrush|PrimaryPressedBrush
OutlinedButtonBackgroundDisabled|SolidColorBrush|OnSurfaceDisabledLowBrush
OutlinedButtonBackgroundFocused|SolidColorBrush|PrimaryFocusedBrush
OutlinedButtonBackgroundPointerFocused|SolidColorBrush|PrimaryFocusedBrush
OutlinedButtonBorderBrush|SolidColorBrush|OutlineBrush
OutlinedButtonBorderBrushPointerOver|SolidColorBrush|OutlineBrush
OutlinedButtonBorderBrushPressed|SolidColorBrush|OutlineBrush
OutlinedButtonBorderBrushFocused|SolidColorBrush|OutlineBrush
OutlinedButtonBorderBrushDisabled|SolidColorBrush|OutlineDisabledBrush
OutlinedButtonBorderBrushPointerFocused|SolidColorBrush|OutlineBrush
TextButtonForeground|SolidColorBrush|PrimaryBrush
TextButtonForegroundPressed|SolidColorBrush|PrimaryBrush
TextButtonForegroundPointerOver|SolidColorBrush|PrimaryBrush
TextButtonForegroundFocused|SolidColorBrush|PrimaryBrush
TextButtonForegroundPointerFocused|SolidColorBrush|PrimaryBrush
TextButtonForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush
TextButtonIconForeground|SolidColorBrush|PrimaryBrush
TextButtonIconForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush
TextButtonIconForegroundPointerOver|SolidColorBrush|PrimaryBrush
TextButtonIconForegroundPressed|SolidColorBrush|PrimaryBrush
TextButtonIconForegroundFocused|SolidColorBrush|PrimaryBrush
TextButtonIconForegroundPointerFocused|SolidColorBrush|PrimaryBrush
TextButtonBackground|SolidColorBrush|SystemControlTransparentBrush
TextButtonBackgroundPointerOver|SolidColorBrush|PrimaryHoverBrush
TextButtonBackgroundPressed|SolidColorBrush|PrimaryPressedBrush
TextButtonBackgroundFocused|SolidColorBrush|PrimaryFocusedBrush
TextButtonBackgroundPointerFocused|SolidColorBrush|PrimaryFocusedBrush
TextButtonBorderBrush|SolidColorBrush|SystemControlTransparentBrush
TextButtonBorderBrushPointerOver|SolidColorBrush|SystemControlTransparentBrush
TextButtonBorderBrushPressed|SolidColorBrush|SystemControlTransparentBrush
TextButtonBorderBrushFocused|SolidColorBrush|SystemControlTransparentBrush
TextButtonBorderBrushDisabled|SolidColorBrush|SystemControlTransparentBrush
TextButtonBorderBrushPointerFocused|SolidColorBrush|SystemControlTransparentBrush
IconButtonForeground|SolidColorBrush|OnSurfaceBrush
IconButtonForegroundDisabled|SolidColorBrush|OnSurfaceLowBrush
IconButtonEllipseFillPointerOver|SolidColorBrush|PrimaryHoverBrush
IconButtonEllipseFillPressed|SolidColorBrush|PrimaryPressedBrush
IconButtonEllipseFillFocused|SolidColorBrush|PrimaryFocusedBrush
ButtonMinHeight|Double|40
ButtonMinWidth|Double|40
ButtonIconMinWidth|Double|18
ElevatedButtonElevation|Double|1
ElevatedButtonElevationDisabled|Double|0
ButtonElevation|Double|0
IconButtonOpacityVisibleState|Double|1
IconButtonOpacityHiddenState|Double|0
ButtonPadding|Thickness|16,0
TextButtonPadding|Thickness|12,0
TextButtonIconMargin|Thickness|0,0,8,0
ButtonBorderThickness|Thickness|0
OutlinedButtonBorderThickness|Thickness|1
ElevatedButtonMargin|Thickness|0,0,0,1
ElevatedButtonDisabledMargin|Thickness|0
ButtonContentMargin|Thickness|8,0
ButtonMargin|Thickness|0
ButtonCornerRadius|CornerRadius|20
44 changes: 44 additions & 0 deletions doc/styles/CalendarDatePicker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# CalendarDatePicker Control
## Styles

Style Key|IsDefaultStyle*
-|-
CalendarDatePickerStyle|True

IsDefaultStyle*: Styles in this column will be set as the default implicit style for the matching control

## Lightweight Styling

Key|Type|Value
-|-|-
CalendarDatePickerBackgroundCornerRadius|CornerRadius|4,4,0,0
CalendarDatePickerBorderThemeThickness|Thickness|1
CalendarDatePickerFlyoutPresenterPadding|Thickness|0
CalendarDatePickerFlyoutPresenterMargin|Thickness|0
CalendarDatePickerContentMargin|Thickness|10,0
CalendarDatePickerHeight|Double|53
CalendarDatePickerBackgroundMinHeight|Double|53
CalendarDatePickerCornerRadius|CornerRadius|ControlCornerRadius
CalendarDatePickerFlyoutPresenterCornerRadius|CornerRadius|OverlayCornerRadius
CalendarDatePickerCalendarViewCornerRadius|CornerRadius|OverlayCornerRadius
CalendarDatePickerForeground|SolidColorBrush|OnSurfaceBrush
CalendarDatePickerForegroundDisabled|SolidColorBrush|OnSurfaceMediumBrush
CalendarDatePickerCalendarGlyphForeground|SolidColorBrush|OnSurfaceBrush
CalendarDatePickerCalendarGlyphForegroundDisabled|SolidColorBrush|OnSurfaceMediumBrush
CalendarDatePickerTextForeground|SolidColorBrush|OnSurfaceLowBrush
CalendarDatePickerTextForegroundDisabled|SolidColorBrush|OnSurfaceMediumBrush
CalendarDatePickerTextForegroundSelected|SolidColorBrush|OnSurfaceBrush
CalendarDatePickerHeaderForeground|SolidColorBrush|PrimaryBrush
CalendarDatePickerHeaderForegroundDisabled|SolidColorBrush|OnSurfaceMediumBrush
CalendarDatePickerBackground|SolidColorBrush|SurfaceVariantBrush
CalendarDatePickerBackgroundPointerOver|SolidColorBrush|SurfaceVariantBrush
CalendarDatePickerBackgroundPressed|SolidColorBrush|SurfaceVariantBrush
CalendarDatePickerBackgroundDisabled|SolidColorBrush|SystemControlTransparentBrush
CalendarDatePickerBackgroundFocused|SolidColorBrush|SurfaceVariantBrush
CalendarDatePickerBorderBrush|SolidColorBrush|OnSurfaceLowBrush
CalendarDatePickerBorderBrushPointerOver|SolidColorBrush|OnSurfaceLowBrush
CalendarDatePickerBorderBrushPressed|SolidColorBrush|OnSurfaceLowBrush
CalendarDatePickerBorderBrushDisabled|SolidColorBrush|OnSurfaceLowBrush
CalendarDatePickerBottomBorderBrush|SolidColorBrush|PrimaryBrush
CalendarDatePickerHeaderStyle|Style|MaterialBodySmall
CalendarDatePickerTextStyle|Style|MaterialBodyMedium
Loading