From fdadd414fd1554b3e8dfe69d297d46ce494ae710 Mon Sep 17 00:00:00 2001 From: Youssef Victor Date: Mon, 22 Jan 2024 20:59:14 +0200 Subject: [PATCH] docs: Improve documentation (#1012) --- README.md | 2 +- doc/controls-styles.md | 102 ++-- doc/controls/AutoLayoutControl.md | 42 +- doc/controls/CardAndCardContentControl.md | 164 ++--- doc/controls/ChipAndChipGroup.md | 218 +++---- doc/controls/Divider.md | 28 +- doc/controls/DrawerControl.md | 58 +- doc/controls/DrawerFlyoutPresenter.md | 30 +- doc/controls/ExtendedSplashScreen.md | 12 +- doc/controls/LoadingView.md | 26 +- doc/controls/NavigationBar.md | 612 +++++++++---------- doc/controls/ResponsiveView.md | 98 +-- doc/controls/SafeArea.md | 12 +- doc/controls/ShadowContainer.md | 28 +- doc/controls/TabBarAndTabBarItem.md | 401 ++++++------ doc/cupertino-getting-started.md | 4 +- doc/getting-started.md | 3 +- doc/helpers/FlipView-extensions.md | 8 +- doc/helpers/Input-extensions.md | 18 +- doc/helpers/Selector-extensions.md | 6 +- doc/helpers/StatusBar-extensions.md | 14 +- doc/helpers/TabBarItem-extensions.md | 8 +- doc/helpers/VisualStateManager-extensions.md | 8 +- doc/helpers/ancestor-itemscontrol-binding.md | 18 +- doc/helpers/command-extensions.md | 10 +- doc/helpers/itemsrepeater-extensions.md | 16 +- doc/helpers/resource-extensions.md | 8 +- doc/helpers/responsive-extension.md | 98 +-- doc/material-getting-started.md | 21 +- doc/material-migration.md | 125 ++-- 30 files changed, 1101 insertions(+), 1097 deletions(-) diff --git a/README.md b/README.md index 0df5f10c..e88a5022 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ [![Open Uno in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/unoplatform/uno.toolkit.ui) [![Azure DevOps](https://uno-platform.visualstudio.com/Uno%20Platform/_apis/build/status/Uno%20Platform/Uno.WindowsCommunityToolkit%20-%20CI?branchName=unorel%2F7.1)](https://uno-platform.visualstudio.com/Uno%20Platform/_build/latest?definitionId=14&branchName=unorel%2F7.1) -[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](LICENSE) +[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](LICENSE.md) Uno Toolkit provides a set of higher-level UI Controls designed specifically for multi-platform, responsive applications. diff --git a/doc/controls-styles.md b/doc/controls-styles.md index 0eaf77cc..51898f2e 100644 --- a/doc/controls-styles.md +++ b/doc/controls-styles.md @@ -5,7 +5,7 @@ uid: Toolkit.ControlsHelpersStyles The `Uno.Toolkit.UI` library adds the following controls: -- `AutoLayout`: A custom panel used by the [Figma plugin](https://platform.uno/unofigma/) to bridge the gap between Figma and UWP layout implementation. +- `AutoLayout`: A custom panel used by the [Figma plugin](https://platform.uno/unofigma/) to bridge the gap between Figma and UWP/WinUI layout implementation. - [`Card` and `CardContentControl`](controls/CardAndCardContentControl.md): \[Material control\] Cards contain content and actions that relate information about a subject. - [`Chip` and `ChipGroup`](controls/ChipAndChipGroup.md): \[Material control\] Chips are compact elements that represent an input, attribute, or action. - [`Divider`](controls/Divider.md): \[Material control\] A divider is a thin line that groups content in lists and layouts. @@ -33,54 +33,54 @@ Exposes visual states as attachable properties that lets you bind a string on a ## Control Styles -Control|Style Key|IsDefaultStyle* --|-|- -AppBarButton|MainCommandStyle|True -AppBarButton|ModalMainCommandStyle| -AppBarButton|PrimaryMainCommandStyle| -AppBarButton|PrimaryModalMainCommandStyle| -AppBarButton|PrimaryAppBarButtonStyle| -utu:Card|FilledCardStyle| -utu:Card|OutlinedCardStyle| -utu:Card|ElevatedCardStyle| -utu:Card|AvatarFilledCardStyle| -utu:Card|AvatarOutlinedCardStyle| -utu:Card|AvatarElevatedCardStyle| -utu:Card|SmallMediaFilledCardStyle| -utu:Card|SmallMediaOutlinedCardStyle| -utu:Card|SmallMediaElevatedCardStyle| -utu:CardContentControl|FilledCardContentControlStyle| -utu:CardContentControl|OutlinedCardContentControlStyle| -utu:CardContentControl|ElevatedCardContentControlStyle| -utu:Chip|AssistChipStyle| -utu:Chip|ElevatedAssistChipStyle| -utu:Chip|InputChipStyle| -utu:Chip|FilterChipStyle| -utu:Chip|ElevatedFilterChipStyle| -utu:Chip|SuggestionChipStyle| -utu:Chip|ElevatedSuggestionChipStyle| -utu:ChipGroup|InputChipGroupStyle| -utu:ChipGroup|ElevatedSuggestionChipGroupStyle| -utu:ChipGroup|SuggestionChipGroupStyle| -utu:ChipGroup|ElevatedFilterChipGroupStyle| -utu:ChipGroup|FilterChipGroupStyle| -utu:ChipGroup|ElevatedAssistChipGroupStyle| -utu:ChipGroup|AssistChipGroupStyle| -utu:Divider|DividerStyle|True -FlyoutPresenter|LeftDrawerFlyoutPresenterStyle| -FlyoutPresenter|TopDrawerFlyoutPresenterStyle| -FlyoutPresenter|RightDrawerFlyoutPresenterStyle| -FlyoutPresenter|BottomDrawerFlyoutPresenterStyle| -utu:NavigationBar|NavigationBarStyle|True -utu:NavigationBar|ModalNavigationBarStyle| -utu:NavigationBar|PrimaryNavigationBarStyle| -utu:NavigationBar|PrimaryModalNavigationBarStyle| -utu:TabBar|BottomTabBarStyle| -utu:TabBar|TopTabBarStyle| -utu:TabBar|ColoredTopTabBarStyle| -utu:TabBar|VerticalTabBarStyle| -utu:TabBarItem|BottomFabTabBarItemStyle| -utu:TabBarItem|BottomTabBarItemStyle| -utu:TabBarItem|VerticalTabBarItemStyle| +| Control | Style Key | IsDefaultStyle\* | +|--------------------------|------------------------------------|-----------------| +| `AppBarButton` | `MainCommandStyle` | True | +| `AppBarButton` | `ModalMainCommandStyle` | | +| `AppBarButton` | `PrimaryMainCommandStyle` | | +| `AppBarButton` | `PrimaryModalMainCommandStyle` | | +| `AppBarButton` | `PrimaryAppBarButtonStyle` | | +| `utu:Card` | `FilledCardStyle` | | +| `utu:Card` | `OutlinedCardStyle` | | +| `utu:Card` | `ElevatedCardStyle` | | +| `utu:Card` | `AvatarFilledCardStyle` | | +| `utu:Card` | `AvatarOutlinedCardStyle` | | +| `utu:Card` | `AvatarElevatedCardStyle` | | +| `utu:Card` | `SmallMediaFilledCardStyle` | | +| `utu:Card` | `SmallMediaOutlinedCardStyle` | | +| `utu:Card` | `SmallMediaElevatedCardStyle` | | +| `utu:CardContentControl` | `FilledCardContentControlStyle` | | +| `utu:CardContentControl` | `OutlinedCardContentControlStyle` | | +| `utu:CardContentControl` | `ElevatedCardContentControlStyle` | | +| `utu:Chip` | `AssistChipStyle` | | +| `utu:Chip` | `ElevatedAssistChipStyle` | | +| `utu:Chip` | `InputChipStyle` | | +| `utu:Chip` | `FilterChipStyle` | | +| `utu:Chip` | `ElevatedFilterChipStyle` | | +| `utu:Chip` | `SuggestionChipStyle` | | +| `utu:Chip` | `ElevatedSuggestionChipStyle` | | +| `utu:ChipGroup` | `InputChipGroupStyle` | | +| `utu:ChipGroup` | `ElevatedSuggestionChipGroupStyle` | | +| `utu:ChipGroup` | `SuggestionChipGroupStyle` | | +| `utu:ChipGroup` | `ElevatedFilterChipGroupStyle` | | +| `utu:ChipGroup` | `FilterChipGroupStyle` | | +| `utu:ChipGroup` | `ElevatedAssistChipGroupStyle` | | +| `utu:ChipGroup` | `AssistChipGroupStyle` | | +| `utu:Divider` | `DividerStyle` | True | +| `FlyoutPresenter` | `LeftDrawerFlyoutPresenterStyle` | | +| `FlyoutPresenter` | `TopDrawerFlyoutPresenterStyle` | | +| `FlyoutPresenter` | `RightDrawerFlyoutPresenterStyle` | | +| `FlyoutPresenter` | `BottomDrawerFlyoutPresenterStyle` | | +| `utu:NavigationBar` | `NavigationBarStyle` | True | +| `utu:NavigationBar` | `ModalNavigationBarStyle` | | +| `utu:NavigationBar` | `PrimaryNavigationBarStyle` | | +| `utu:NavigationBar` | `PrimaryModalNavigationBarStyle` | | +| `utu:TabBar` | `BottomTabBarStyle` | | +| `utu:TabBar` | `TopTabBarStyle` | | +| `utu:TabBar` | `ColoredTopTabBarStyle` | | +| `utu:TabBar` | `VerticalTabBarStyle` | | +| `utu:TabBarItem` | `BottomFabTabBarItemStyle` | | +| `utu:TabBarItem` | `BottomTabBarItemStyle` | | +| `utu:TabBarItem` | `VerticalTabBarItemStyle` | | -IsDefaultStyle*: Styles in this column will be set as the default implicit style for the matching control +IsDefaultStyle\*: Styles in this column will be set as the default implicit style for the matching control diff --git a/doc/controls/AutoLayoutControl.md b/doc/controls/AutoLayoutControl.md index 2d5c4df7..4b401d09 100644 --- a/doc/controls/AutoLayoutControl.md +++ b/doc/controls/AutoLayoutControl.md @@ -11,7 +11,7 @@ uid: Toolkit.Controls.AutoLayoutControl `AutoLayout` arranges child elements into a single row or column, depending on the `Orientation` property. The control is intended to reflect the same behaviors as the [AutoLayout Frame component in Figma](https://www.figma.com/widget-docs/api/component-AutoLayout). -### C# +### C\# ```csharp public partial class AutoLayout : Control @@ -30,32 +30,32 @@ xmlns:utu="using:Uno.Toolkit.UI" ### Inheritance -Object → DependencyObject → UIElement → FrameworkElement → Control +`Object` → `DependencyObject` → `UIElement` → `FrameworkElement` → `Control` → `AutoLayout` ### Constructors -| Constructor | Description | -|-----------------|----------------------------------------------------------| -| AutoLayout() | Initializes a new instance of the `AutoLayout` class. | +| Constructor | Description | +|----------------|-------------------------------------------------------| +| `AutoLayout()` | Initializes a new instance of the `AutoLayout` class. | ### Properties -Property|Type|Description --|-|- -Orientation | `Orientation` | Gets or sets the dimension by which the items are stacked -Spacing | `double` | Gets or sets a uniform distance (in pixels) between stacked items. It is applied in the direction of the `AutoLayout`'s Orientation -Justify | `AutoLayoutJustify` | Gets or sets the value to determine how items are justified within the container. Options are `Stack` or `SpaceBetween`. Note: if a child has its `PrimaryAlignment` set to `Stretch`, it will default to `Stack` -PrimaryAxisAlignment | `AutoLayoutAlignment` | Gets or sets the alignment characteristics that are applied to the content, based on the value of the `Orientation` property. Options are `Start`, `Center`, and `End`. The default is `Start`. -CounterAxisAlignment | `AutoLayoutAlignment` | Gets or sets the alignment characteristics that are applied to the content, based on the inverse value of the `Orientation` property. Options are `Start`, `Center`, `End` and `Stretch`. The default is `Stretch`. If already set in `CounterAlignment` CounterAlignment will have priority. -IsReverseZIndex | `bool` | Gets or sets whether or not the ZIndex of the children should be reversed. The default is `false` -Padding | `Thickness` | **WARNING:** Padding for `AutoLayout` behaves the same as it does within the Figma Plugin: The anchor points determine which sides of the Padding will be taken into consideration. For example, items that are aligned to the Right and Top positions will only take the `Tickness.Right` and `Thickness.Top` values of `Padding` into consideration +| Property | Type | Description | +|------------------------|-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `Orientation` | `Orientation` | Gets or sets the dimension by which the items are stacked. | +| `Spacing` | `double` | Gets or sets a uniform distance (in pixels) between stacked items. It is applied in the direction of the `AutoLayout`'s Orientation. | +| `Justify` | `AutoLayoutJustify` | Gets or sets the value to determine how items are justified within the container. Options are `Stack` or `SpaceBetween`. Note: If a child has its `PrimaryAlignment` set to `Stretch`, it will default to `Stack`. | +| `PrimaryAxisAlignment` | `AutoLayoutAlignment` | Gets or sets the alignment characteristics that are applied to the content, based on the value of the `Orientation` property. Options are `Start`, `Center`, and `End`. The default is `Start`. | +| `CounterAxisAlignment` | `AutoLayoutAlignment` | Gets or sets the alignment characteristics that are applied to the content, based on the inverse value of the `Orientation` property. Options are `Start`, `Center`, `End`, and `Stretch`. The default is `Stretch`. If already set in `CounterAlignment`, CounterAlignment will have priority. | +| `IsReverseZIndex` | `bool` | Gets or sets whether or not the ZIndex of the children should be reversed. The default is `false`. | +| `Padding` | `Thickness` | **WARNING:** Padding for `AutoLayout` behaves the same as it does within the Figma Plugin: The anchor points determine which sides of the Padding will be taken into consideration. For example, items that are aligned to the Right and Top positions will only take the `Tickness.Right` and `Thickness.Top` values of `Padding` into consideration. | ### Attached Properties -Property|Type|Description --|-|- -PrimaryAlignment|`AutoLayoutPrimaryAlignment`| Gets or sets the alignment characteristics that are applied to this element when it is composed in an `AutoLayout` parent, based on the value of the `Orientation` property. Options are `Auto` and `Stretch`. The default is `Auto` -CounterAlignment|`AutoLayoutAlignment`| Gets or sets the counter-alignment characteristics that are applied to this element when it is composed in an `AutoLayout` parent, based on the inverse value of the `Orientation` property. Options are `Start`, `Center`, `End`, and `Stretch`. The default is `Start`. If already set in `CounterAxisAlignment` CounterAlignment will have priority. -PrimaryLength|`double`| Gets or sets the height or width of the child depending on the `Orientation`. If `Height` or `Width` are already set they will have priority. -CounterLength|`double`| Gets or sets the height or width of the child depending on the inverse of `Orientation`. If `Height` or `Width` are already set they will have priority. -IsIndependentLayout | `bool` | **WARNING:** Should not be used with other Attached Properties. Gets or sets whether the element is independent of the `AutoLayout` positioning. Reflects the `Absolute Position` option from Figma +| Property | Type | Description | +|-----------------------|------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `PrimaryAlignment` | `AutoLayoutPrimaryAlignment` | Gets or sets the alignment characteristics that are applied to this element when it is composed in an `AutoLayout` parent, based on the value of the `Orientation` property. Options are `Auto` and `Stretch`. The default is `Auto`. | +| `CounterAlignment` | `AutoLayoutAlignment` | Gets or sets the counter-alignment characteristics that are applied to this element when it is composed in an `AutoLayout` parent, based on the inverse value of the `Orientation` property. Options are `Start`, `Center`, `End`, and `Stretch`. The default is `Start`. If already set in `CounterAxisAlignment`, CounterAlignment will have priority. | +| `PrimaryLength` | `double` | Gets or sets the height or width of the child depending on the `Orientation`. If `Height` or `Width` are already set they will have priority. | +| `CounterLength` | `double` | Gets or sets the height or width of the child depending on the inverse of `Orientation`. If `Height` or `Width` are already set they will have priority. | +| `IsIndependentLayout` | `bool` | **WARNING:** Should not be used with other Attached Properties. Gets or sets whether the element is independent of the `AutoLayout` positioning. Reflects the `Absolute Position` option from Figma. | diff --git a/doc/controls/CardAndCardContentControl.md b/doc/controls/CardAndCardContentControl.md index d592829d..270bf229 100644 --- a/doc/controls/CardAndCardContentControl.md +++ b/doc/controls/CardAndCardContentControl.md @@ -25,7 +25,7 @@ Depending on the amount of user attention you want to draw to the content you ca The `Card` control is based on `Control` and allows you to customize the control's content through [additional properties](#properties) to fit your needs. -### C# +### C\# ```csharp public partial class Card : Control @@ -42,35 +42,35 @@ xmlns:utu="using:Uno.Toolkit.UI" ### Inheritance -Object → DependencyObject → UIElement → FrameworkElement → Control → Card +`Object` → `DependencyObject` → `UIElement` → `FrameworkElement` → `Control` → `Card` ### Constructors -| Constructor | Description | -|----------------|-------------------------------------------------------| -| Card() | Initializes a new instance of the `Card` class. | +| Constructor | Description | +|-------------|-------------------------------------------------| +| `Card()` | Initializes a new instance of the `Card` class. | ### Properties -The Card control comes with all the built-in properties of a `Control`, and also a few additional properties listed below that let you tailor the content to be displayed: +The `Card` control comes with all the built-in properties of a `Control`, and also a few additional properties listed below that let you tailor the content to be displayed: -| Property | Type | Description | -|---------------------------|-------------------|-----------------------------------------------------------------------------------------------| -| HeaderContent | object | Gets or sets the content for the control's header. | -| HeaderContentTemplate | DataTemplate | Gets or sets the data template used to display the content of the control's header. | -| SubHeaderContent | object | Gets or sets the content for the control's subheader. | -| SubHeaderContentTemplate | DataTemplate | Gets or sets the data template used to display the content of the control's subheader. | -| AvatarContent | object | Gets or sets the content for the control's avatar. | -| AvatarContentTemplate | DataTemplate | Gets or sets the data template used to display the content of the control's avatar. | -| MediaContent | object | Gets or sets the content for the control's media area. | -| MediaContentTemplate | DataTemplate | Gets or sets the data template used to display the content of the control's media area. | -| SupportingContent | object | Gets or sets the content for the control's supporting area. | -| SupportingContentTemplate | DataTemplate | Gets or sets the data template used to display the content of the control's supporting area. | -| IconsContent | object | Gets or sets the content for the control's icons. | -| IconsContentTemplate | DataTemplate | Gets or sets the data template used to display the content of the control's icons. | -| Elevation | double | Gets or sets the elevation of the control. | -| ShadowColor | Color | Gets or sets the color to use for the shadow of the control. | -| IsClickable | bool | Gets or sets a value indicating whether the control will respond to pointer and focus events. | +| Property | Type | Description | +|-----------------------------|----------------|-----------------------------------------------------------------------------------------------| +| `HeaderContent` | `object` | Gets or sets the content for the control's header. | +| `HeaderContentTemplate` | `DataTemplate` | Gets or sets the data template used to display the content of the control's header. | +| `SubHeaderContent` | `object` | Gets or sets the content for the control's subheader. | +| `SubHeaderContentTemplate` | `DataTemplate` | Gets or sets the data template used to display the content of the control's subheader. | +| `AvatarContent` | `object` | Gets or sets the content for the control's avatar. | +| `AvatarContentTemplate` | `DataTemplate` | Gets or sets the data template used to display the content of the control's avatar. | +| `MediaContent` | `object` | Gets or sets the content for the control's media area. | +| `MediaContentTemplate` | `DataTemplate` | Gets or sets the data template used to display the content of the control's media area. | +| `SupportingContent` | `object` | Gets or sets the content for the control's supporting area. | +| `SupportingContentTemplate` | `DataTemplate` | Gets or sets the data template used to display the content of the control's supporting area. | +| `IconsContent` | `object` | Gets or sets the content for the control's icons. | +| `IconsContentTemplate` | `DataTemplate` | Gets or sets the data template used to display the content of the control's icons. | +| `Elevation` | `double` | Gets or sets the elevation of the control. | +| `ShadowColor` | `Color` | Gets or sets the color to use for the shadow of the control. | +| `IsClickable` | `bool` | Gets or sets a value indicating whether the control will respond to pointer and focus events. | > [!TIP] > Consider using [CardContentControl](#cardcontentcontrol) if you need full control over the content layout. @@ -103,46 +103,46 @@ xmlns:utu="using:Uno.Toolkit.UI" ## Lightweight Styling -Key|Type|Value --|-|- -ContentTemplateForeground|SolidColorBrush|OnSurfaceMediumBrush -ContentTemplateBorderBrush|SolidColorBrush|OnSurfaceMediumBrush -FilledCardBackground|SolidColorBrush|SurfaceBrush -FilledCardBorderBrush|SolidColorBrush|SystemControlTransparentBrush -FilledCardBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush -FilledCardBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush -AvatarFilledCardBackground|SolidColorBrush|SurfaceBrush -AvatarFilledCardBorderBrush|SolidColorBrush|SystemControlTransparentBrush -AvatarFilledCardBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush -AvatarFilledCardBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush -SmallMediaFilledCardBackground|SolidColorBrush|SurfaceBrush -SmallMediaFilledCardBorderBrush|SolidColorBrush|SystemControlTransparentBrush -SmallMediaFilledCardBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush -SmallMediaFilledCardBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush -OutlinedCardBackground|SolidColorBrush|SurfaceBrush -OutlinedCardBorderBrush|SolidColorBrush|OutlineBrush -AvatarOutlinedCardBackground|SolidColorBrush|SurfaceBrush -AvatarOutlinedCardBorderBrush|SolidColorBrush|OutlineBrush -SmallMediaOutlinedCardBackground|SolidColorBrush|SurfaceBrush -SmallMediaOutlinedCardBorderBrush|SolidColorBrush|OutlineBrush -ElevatedCardBackground|SolidColorBrush|SurfaceBrush -ElevatedCardBorderBrush|SolidColorBrush|SystemControlTransparentBrush -ElevatedCardBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush -ElevatedCardBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush -AvatarElevatedCardBackground|SolidColorBrush|SurfaceBrush -AvatarElevatedCardBorderBrush|SolidColorBrush|SystemControlTransparentBrush -AvatarElevatedCardBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush -AvatarElevatedCardBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush -SmallMediaElevatedCardBackground|SolidColorBrush|SurfaceBrush -SmallMediaElevatedCardBorderBrush|SolidColorBrush|SystemControlTransparentBrush -SmallMediaElevatedCardBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush -SmallMediaElevatedCardBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush +| Key | Type | Value | +|------------------------------------------------|-------------------|---------------------------------| +| `ContentTemplateForeground` | `SolidColorBrush` | `OnSurfaceMediumBrush` | +| `ContentTemplateBorderBrush` | `SolidColorBrush` | `OnSurfaceMediumBrush` | +| `FilledCardBackground` | `SolidColorBrush` | `SurfaceBrush` | +| `FilledCardBorderBrush` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `FilledCardBorderBrushPointerOver` | `SolidColorBrush` | `OnSurfaceHoverBrush` | +| `FilledCardBorderBrushFocused` | `SolidColorBrush` | `OnSurfaceFocusedBrush` | +| `AvatarFilledCardBackground` | `SolidColorBrush` | `SurfaceBrush` | +| `AvatarFilledCardBorderBrush` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `AvatarFilledCardBorderBrushPointerOver` | `SolidColorBrush` | `OnSurfaceHoverBrush` | +| `AvatarFilledCardBorderBrushFocused` | `SolidColorBrush` | `OnSurfaceFocusedBrush` | +| `SmallMediaFilledCardBackground` | `SolidColorBrush` | `SurfaceBrush` | +| `SmallMediaFilledCardBorderBrush` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `SmallMediaFilledCardBorderBrushPointerOver` | `SolidColorBrush` | `OnSurfaceHoverBrush` | +| `SmallMediaFilledCardBorderBrushFocused` | `SolidColorBrush` | `OnSurfaceFocusedBrush` | +| `OutlinedCardBackground` | `SolidColorBrush` | `SurfaceBrush` | +| `OutlinedCardBorderBrush` | `SolidColorBrush` | `OutlineBrush` | +| `AvatarOutlinedCardBackground` | `SolidColorBrush` | `SurfaceBrush` | +| `AvatarOutlinedCardBorderBrush` | `SolidColorBrush` | `OutlineBrush` | +| `SmallMediaOutlinedCardBackground` | `SolidColorBrush` | `SurfaceBrush` | +| `SmallMediaOutlinedCardBorderBrush` | `SolidColorBrush` | `OutlineBrush` | +| `ElevatedCardBackground` | `SolidColorBrush` | `SurfaceBrush` | +| `ElevatedCardBorderBrush` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ElevatedCardBorderBrushPointerOver` | `SolidColorBrush` | `OnSurfaceHoverBrush` | +| `ElevatedCardBorderBrushFocused` | `SolidColorBrush` | `OnSurfaceFocusedBrush` | +| `AvatarElevatedCardBackground` | `SolidColorBrush` | `SurfaceBrush` | +| `AvatarElevatedCardBorderBrush` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `AvatarElevatedCardBorderBrushPointerOver` | `SolidColorBrush` | `OnSurfaceHoverBrush` | +| `AvatarElevatedCardBorderBrushFocused` | `SolidColorBrush` | `OnSurfaceFocusedBrush` | +| `SmallMediaElevatedCardBackground` | `SolidColorBrush` | `SurfaceBrush` | +| `SmallMediaElevatedCardBorderBrush` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `SmallMediaElevatedCardBorderBrushPointerOver` | `SolidColorBrush` | `OnSurfaceHoverBrush` | +| `SmallMediaElevatedCardBorderBrushFocused` | `SolidColorBrush` | `OnSurfaceFocusedBrush` | ## CardContentControl The `CardContentControl` is based on `ContentControl` and allows you to customize the entire content through `DataTemplate` to fit your needs. -### C# +### C\# ```csharp public partial class CardContentControl : ContentControl @@ -167,23 +167,23 @@ xmlns:utu="using:Uno.Toolkit.UI" ### Inheritance -Object → DependencyObject → UIElement → FrameworkElement → Control → ContentControl → CardContentControl +`Object` → `DependencyObject` → `UIElement` → `FrameworkElement` → `Control` → `ContentControl` → `CardContentControl` ### Constructors -| Constructor | Description | -|-----------------------|---------------------------------------------------------------| -| CardContentControl() | Initializes a new instance of the `CardContentControl` class. | +| Constructor | Description | +|------------------------|---------------------------------------------------------------| +| `CardContentControl()` | Initializes a new instance of the `CardContentControl` class. | ### Properties -The Card control comes with all the built-in properties of a `ContentControl`, and also a few additional properties listed below: +The `Card` control comes with all the built-in properties of a `ContentControl`, and also a few additional properties listed below: -| Property | Type | Description | -|---------------------------|-------------------|-----------------------------------------------------------------------------------------------| -| Elevation | double | Gets or sets the elevation of the control. | -| ShadowColor | Color | Gets or sets the color to use for the shadow of the control. | -| IsClickable | bool | Gets or sets a value indicating whether the control will respond to pointer and focus events. | +| Property | Type | Description | +|---------------|----------|-----------------------------------------------------------------------------------------------| +| `Elevation` | `double` | Gets or sets the elevation of the control. | +| `ShadowColor` | `Color` | Gets or sets the color to use for the shadow of the control. | +| `IsClickable` | `bool` | Gets or sets a value indicating whether the control will respond to pointer and focus events. | ### Usage @@ -231,17 +231,17 @@ xmlns:utu="using:Uno.Toolkit.UI" ## Lightweight Styling -Key|Type|Value --|-|- -FilledCardContentBackground|SolidColorBrush|SurfaceBrush -FilledCardContentBorderBrush|SolidColorBrush|SystemControlTransparentBrush -FilledCardContentBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush -FilledCardContentBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush -FilledCardContentBorderBrushPressed|SolidColorBrush|OnSurfacePressedBrush -OutlinedCardContentBackground|SolidColorBrush|SurfaceBrush -OutlinedCardContentBorderBrush|SolidColorBrush|OutlineBrush -ElevatedCardContentBackground|SolidColorBrush|SurfaceBrush -ElevatedCardContentBorderBrush|SolidColorBrush|SystemControlTransparentBrush -ElevatedCardContentBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush -ElevatedCardContentBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush -ElevatedCardContentBorderBrushPressed|SolidColorBrush|OnSurfacePressedBrush +| Key | Type | Value | +|---------------------------------------------|-------------------|---------------------------------| +| `FilledCardContentBackground` | `SolidColorBrush` | `SurfaceBrush` | +| `FilledCardContentBorderBrush` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `FilledCardContentBorderBrushPointerOver` | `SolidColorBrush` | `OnSurfaceHoverBrush` | +| `FilledCardContentBorderBrushFocused` | `SolidColorBrush` | `OnSurfaceFocusedBrush` | +| `FilledCardContentBorderBrushPressed` | `SolidColorBrush` | `OnSurfacePressedBrush` | +| `OutlinedCardContentBackground` | `SolidColorBrush` | `SurfaceBrush` | +| `OutlinedCardContentBorderBrush` | `SolidColorBrush` | `OutlineBrush` | +| `ElevatedCardContentBackground` | `SolidColorBrush` | `SurfaceBrush` | +| `ElevatedCardContentBorderBrush` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ElevatedCardContentBorderBrushPointerOver` | `SolidColorBrush` | `OnSurfaceHoverBrush` | +| `ElevatedCardContentBorderBrushFocused` | `SolidColorBrush` | `OnSurfaceFocusedBrush` | +| `ElevatedCardContentBorderBrushPressed` | `SolidColorBrush` | `OnSurfacePressedBrush` | diff --git a/doc/controls/ChipAndChipGroup.md b/doc/controls/ChipAndChipGroup.md index 8990cd2d..b4d524fc 100644 --- a/doc/controls/ChipAndChipGroup.md +++ b/doc/controls/ChipAndChipGroup.md @@ -15,7 +15,7 @@ uid: Toolkit.Controls.Chip `Chip` is derived from `ToggleButton`, a control that an user can select (check) or deselect (uncheck). -### C# +### C\# ```csharp public partial class Chip : ToggleButton @@ -32,33 +32,34 @@ xmlns:utu="using:Uno.Toolkit.UI" ### Inheritance -Object → DependencyObject → UIElement → FrameworkElement → Control → ContentControl → ButtonBase → ToggleButton → Chip +`Object` → `DependencyObject` → `UIElement` → `FrameworkElement` → `Control` → `ContentControl` → `ButtonBase` → `ToggleButton` → `Chip` ### Constructors | Constructor | Description | |-------------|-------------------------------------------------| -| Chip() | Initializes a new instance of the `Chip` class. | +| `Chip()` | Initializes a new instance of the `Chip` class. | ### Properties -Property|Type|Description --|-|- -CanRemove|bool|Gets or sets whether the remove button is visible. -Elevation|double|Gets or sets the elevation of the `Chip`. -Icon|object|Gets or sets the icon of the `Chip`. -IconTemplate|DataTemplate|Gets or sets the data template that is used to display the icon of the `Chip`. -RemovedCommand|ICommand|Gets or sets the command to invoke when the remove button is pressed. -RemovedCommandParameter|object|Gets or sets the parameter to pass to the RemovedCommand property. +| Property | Type | Description | +|---------------------------|----------------|--------------------------------------------------------------------------------| +| `CanRemove` | `bool` | Gets or sets whether the remove button is visible. | +| `Elevation` | `double` | Gets or sets the elevation of the `Chip`. | +| `Icon` | `object` | Gets or sets the icon of the `Chip`. | +| `IconTemplate` | `DataTemplate` | Gets or sets the data template that is used to display the icon of the `Chip`. | +| `RemovedCommand` | `ICommand` | Gets or sets the command to invoke when the remove button is pressed. | +| `RemovedCommandParameter` | `object` | Gets or sets the parameter to pass to the RemovedCommand property. | ### Events -Event|Type|Description --|-|- -Removed|RoutedEventHandler|Occurs when the remove button is pressed. -Removing|ChipRemovingEventHandler|Occurs when the remove button is pressed, but before the `Removed` event allowing for cancellation. +| Event | Type | Description | +|------------|----------------------------|-----------------------------------------------------------------------------------------------------| +| `Removed` | `RoutedEventHandler` | Occurs when the remove button is pressed. | +| `Removing` | `ChipRemovingEventHandler` | Occurs when the remove button is pressed, but before the `Removed` event allowing for cancellation. | -note: When used outside of a `ChipGroup`, the `Removed` event does not cause itself to be removed from the view. +> [!NOTE] +> When used outside of a `ChipGroup`, the `Removed` event does not cause itself to be removed from the view. ```csharp delegate void ChipRemovingEventHandler(object sender, ChipRemovingEventArgs e); @@ -90,84 +91,84 @@ xmlns:utu="using:Uno.Toolkit.UI" ## Lightweight Styling -Key|Type|Value --|-|- -ChipCheckGlyphSize|Double|20 -ChipContentMinHeight|Double|20 -ChipDeleteIconContainerLength|Double|18 -ChipDeleteIconLength|Double|11 -ChipElevation|Double|4 -ChipElevationDisabled|Double|0 -ChipHeight|Double|32 -ChipIconSize|Double|18 -ChipSize|Double|12 -ChipCornerRadius|CornerRadius|8 -ChipBorderThickness|Thickness|1 -ChipCheckGlyphPadding|Thickness|2 -ChipContentMargin|Thickness|8,0 -ChipElevationBorderThickness|Thickness|0 -ChipElevationMargin|Thickness|4 -ChipPadding|Thickness|8,0 -ChipBackground|SolidColorBrush|SystemControlTransparentBrush -ChipBackgroundPointerOver|SolidColorBrush|SystemControlTransparentBrush -ChipBackgroundFocused|SolidColorBrush|SystemControlTransparentBrush -ChipBackgroundPressed|SolidColorBrush|SystemControlTransparentBrush -ChipBackgroundDisabled|SolidColorBrush|OnSurfaceDisabledLowBrush -ChipBackgroundChecked|SolidColorBrush|SecondaryContainerBrush -ChipBackgroundCheckedPointerOver|SolidColorBrush|SecondaryContainerBrush -ChipBackgroundCheckedFocused|SolidColorBrush|SystemControlTransparentBrush -ChipBackgroundCheckedPressed|SolidColorBrush|SecondaryContainerBrush -ChipBackgroundCheckedDisabled|SolidColorBrush|SystemControlTransparentBrush -ChipForeground|SolidColorBrush|OnSurfaceVariantBrush -ChipForegroundPointerOver|SolidColorBrush|OnSurfaceVariantBrush -ChipForegroundFocused|SolidColorBrush|SystemControlTransparentBrush -ChipForegroundPressed|SolidColorBrush|OnSurfaceVariantBrush -ChipForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush -ChipForegroundChecked|SolidColorBrush|OnSecondaryContainerBrush -ChipForegroundCheckedPointerOver|SolidColorBrush|OnSecondaryContainerBrush -ChipForegroundCheckedFocused|SolidColorBrush|SystemControlTransparentBrush -ChipForegroundCheckedPressed|SolidColorBrush|OnSecondaryContainerBrush -ChipForegroundCheckedDisabled|SolidColorBrush|SystemControlTransparentBrush -ChipDeleteIconBackground|SolidColorBrush|SystemControlTransparentBrush -ChipDeleteIconForeground|SolidColorBrush|OnSurfaceVariantBrush -ChipIconForeground|SolidColorBrush|PrimaryBrush -ChipIconForegroundPointerOver|SolidColorBrush|PrimaryBrush -ChipIconForegroundFocused|SolidColorBrush|SystemControlTransparentBrush -ChipIconForegroundPressed|SolidColorBrush|PrimaryBrush -ChipIconForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush -ChipIconForegroundChecked|SolidColorBrush|PrimaryBrush -ChipIconForegroundCheckedPointerOver|SolidColorBrush|PrimaryBrush -ChipIconForegroundCheckedFocused|SolidColorBrush|SystemControlTransparentBrush -ChipIconForegroundCheckedPressed|SolidColorBrush|PrimaryBrush -ChipIconForegroundCheckedDisabled|SolidColorBrush|SystemControlTransparentBrush -ChipBorderBrush|SolidColorBrush|OutlineBrush -ChipBorderBrushPointerOver|SolidColorBrush|OutlineBrush -ChipBorderBrushFocused|SolidColorBrush|SystemControlTransparentBrush -ChipBorderBrushPressed|SolidColorBrush|OutlineBrush -ChipBorderBrushDisabled|SolidColorBrush|OnSurfaceVariantDisabledLowBrush -ChipBorderBrushChecked|SolidColorBrush|OutlineBrush -ChipBorderBrushCheckedPointerOver|SolidColorBrush|OutlineBrush -ChipBorderBrushCheckedFocused|SolidColorBrush|SystemControlTransparentBrush -ChipBorderBrushCheckedPressed|SolidColorBrush|OutlineBrush -ChipBorderBrushCheckedDisabled|SolidColorBrush|SystemControlTransparentBrush -ChipStateOverlay|SolidColorBrush|SystemControlTransparentBrush -ChipStateOverlayPointerOver|SolidColorBrush|OnSurfaceVariantHoverBrush -ChipStateOverlayFocused|SolidColorBrush|SystemControlTransparentBrush -ChipStateOverlayPressed|SolidColorBrush|OnSurfaceVariantPressedBrush -ChipStateOverlayDisabled|SolidColorBrush|SystemControlTransparentBrush -ChipStateOverlayChecked|SolidColorBrush|SecondaryContainerBrush -ChipStateOverlayCheckedPointerOver|SolidColorBrush|OnSecondaryContainerHoverBrush -ChipStateOverlayCheckedFocused|SolidColorBrush|SystemControlTransparentBrush -ChipStateOverlayCheckedPressed|SolidColorBrush|OnSecondaryContainerSelectedBrush -ChipStateOverlayCheckedDisabled|SolidColorBrush|SystemControlTransparentBrush -ChipRippleFeedback|SolidColorBrush|OnSurfaceFocusedBrush -ElevatedChipBackground|SolidColorBrush|SurfaceBrush +| Key | Type | Value | +|----------------------------------------|-------------------|-------------------------------------| +| `ChipCheckGlyphSize` | `Double` | 20 | +| `ChipContentMinHeight` | `Double` | 20 | +| `ChipDeleteIconContainerLength` | `Double` | 18 | +| `ChipDeleteIconLength` | `Double` | 11 | +| `ChipElevation` | `Double` | 4 | +| `ChipElevationDisabled` | `Double` | 0 | +| `ChipHeight` | `Double` | 32 | +| `ChipIconSize` | `Double` | 18 | +| `ChipSize` | `Double` | 12 | +| `ChipCornerRadius` | `CornerRadius` | 8 | +| `ChipBorderThickness` | `Thickness` | 1 | +| `ChipCheckGlyphPadding` | `Thickness` | 2 | +| `ChipContentMargin` | `Thickness` | 8,0 | +| `ChipElevationBorderThickness` | `Thickness` | 0 | +| `ChipElevationMargin` | `Thickness` | 4 | +| `ChipPadding` | `Thickness` | 8,0 | +| `ChipBackground` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipBackgroundPointerOver` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipBackgroundFocused` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipBackgroundPressed` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipBackgroundDisabled` | `SolidColorBrush` | `OnSurfaceDisabledLowBrush` | +| `ChipBackgroundChecked` | `SolidColorBrush` | `SecondaryContainerBrush` | +| `ChipBackgroundCheckedPointerOver` | `SolidColorBrush` | `SecondaryContainerBrush` | +| `ChipBackgroundCheckedFocused` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipBackgroundCheckedPressed` | `SolidColorBrush` | `SecondaryContainerBrush` | +| `ChipBackgroundCheckedDisabled` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `ChipForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `ChipForegroundFocused` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipForegroundPressed` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `ChipForegroundDisabled` | `SolidColorBrush` | `OnSurfaceDisabledBrush` | +| `ChipForegroundChecked` | `SolidColorBrush` | `OnSecondaryContainerBrush` | +| `ChipForegroundCheckedPointerOver` | `SolidColorBrush` | `OnSecondaryContainerBrush` | +| `ChipForegroundCheckedFocused` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipForegroundCheckedPressed` | `SolidColorBrush` | `OnSecondaryContainerBrush` | +| `ChipForegroundCheckedDisabled` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipDeleteIconBackground` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipDeleteIconForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `ChipIconForeground` | `SolidColorBrush` | `PrimaryBrush` | +| `ChipIconForegroundPointerOver` | `SolidColorBrush` | `PrimaryBrush` | +| `ChipIconForegroundFocused` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipIconForegroundPressed` | `SolidColorBrush` | `PrimaryBrush` | +| `ChipIconForegroundDisabled` | `SolidColorBrush` | `OnSurfaceDisabledBrush` | +| `ChipIconForegroundChecked` | `SolidColorBrush` | `PrimaryBrush` | +| `ChipIconForegroundCheckedPointerOver` | `SolidColorBrush` | `PrimaryBrush` | +| `ChipIconForegroundCheckedFocused` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipIconForegroundCheckedPressed` | `SolidColorBrush` | `PrimaryBrush` | +| `ChipIconForegroundCheckedDisabled` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipBorderBrush` | `SolidColorBrush` | `OutlineBrush` | +| `ChipBorderBrushPointerOver` | `SolidColorBrush` | `OutlineBrush` | +| `ChipBorderBrushFocused` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipBorderBrushPressed` | `SolidColorBrush` | `OutlineBrush` | +| `ChipBorderBrushDisabled` | `SolidColorBrush` | `OnSurfaceVariantDisabledLowBrush` | +| `ChipBorderBrushChecked` | `SolidColorBrush` | `OutlineBrush` | +| `ChipBorderBrushCheckedPointerOver` | `SolidColorBrush` | `OutlineBrush` | +| `ChipBorderBrushCheckedFocused` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipBorderBrushCheckedPressed` | `SolidColorBrush` | `OutlineBrush` | +| `ChipBorderBrushCheckedDisabled` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipStateOverlay` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipStateOverlayPointerOver` | `SolidColorBrush` | `OnSurfaceVariantHoverBrush` | +| `ChipStateOverlayFocused` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipStateOverlayPressed` | `SolidColorBrush` | `OnSurfaceVariantPressedBrush` | +| `ChipStateOverlayDisabled` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipStateOverlayChecked` | `SolidColorBrush` | `SecondaryContainerBrush` | +| `ChipStateOverlayCheckedPointerOver` | `SolidColorBrush` | `OnSecondaryContainerHoverBrush` | +| `ChipStateOverlayCheckedFocused` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipStateOverlayCheckedPressed` | `SolidColorBrush` | `OnSecondaryContainerSelectedBrush` | +| `ChipStateOverlayCheckedDisabled` | `SolidColorBrush` | `SystemControlTransparentBrush` | +| `ChipRippleFeedback` | `SolidColorBrush` | `OnSurfaceFocusedBrush` | +| `ElevatedChipBackground` | `SolidColorBrush` | `SurfaceBrush` | ## ChipGroup `ChipGroup` is a specialized `ItemsControl` used to present a collection of `Chip`s. -### C# +### C\# ```csharp public partial class ChipGroup : ItemsControl @@ -188,24 +189,24 @@ xmlns:utu="using:Uno.Toolkit.UI" ### Inheritance -Object → DependencyObject → UIElement → FrameworkElement → Control → ItemsControl → ChipGroup +`Object` → `DependencyObject` → `UIElement` → `FrameworkElement` → `Control` → `ItemsControl` → `ChipGroup` ### Constructors -| Constructor | Description | -|--------------|------------------------------------------------------| -| ChipGroup() | Initializes a new instance of the `ChipGroup` class. | +| Constructor | Description | +|---------------|------------------------------------------------------| +| `ChipGroup()` | Initializes a new instance of the `ChipGroup` class. | ### Properties -Property|Type|Description --|-|- -CanRemove|bool|Gets or sets the value of each `Chip.CanRemove`. -IconTemplate|DataTemplate|Gets or sets the value of each `Chip.IconTemplate`. -SelectedItem|object|Gets or sets the selected item.
note: This property only works for `ChipSelectionMode.Single` or `SingleOrNone`. -SelectedItems|IList|Gets or sets the selected items.
note: The value will be null if the selection is empty. This property only works for `ChipSelectionMode.Multiple`. -SelectionMemberPath|string|Gets or sets the path which each `Chip.IsChecked` is data-bind to. -SelectionMode|ChipSelectionMode\*|Gets or sets the selection behavior: `None`, `SingleOrNone`, `Single`, `Multiple`
note: Changing this value will cause `SelectedItem` and `SelectedItems` to be re-coerced. +| Property | Type | Description | +|-----------------------|-----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `CanRemove` | `bool` | Gets or sets the value of each `Chip.CanRemove`. | +| `IconTemplate` | `DataTemplate` | Gets or sets the value of each `Chip.IconTemplate`. | +| `SelectedItem` | `object` | Gets or sets the selected item.
note: This property only works for `ChipSelectionMode.Single` or `SingleOrNone`. | +| `SelectedItems` | `IList` | Gets or sets the selected items.
note: The value will be null if the selection is empty. This property only works for `ChipSelectionMode.Multiple`. | +| `SelectionMemberPath` | `string` | Gets or sets the path which each `Chip.IsChecked` is data-bind to. | +| `SelectionMode` | `ChipSelectionMode`\* | Gets or sets the selection behavior: `None`, `SingleOrNone`, `Single`, `Multiple`
note: Changing this value will cause `SelectedItem` and `SelectedItems` to be re-coerced. | #### Remarks @@ -219,13 +220,14 @@ SelectionMode|ChipSelectionMode\*|Gets or sets the selection behavior: `None`, ` ### Events All events below are forwarded from the nested `Chip`s: -Event|Type|Description --|-|- -ItemClick|ChipItemEventHandler|Occurs when a `Chip` item is pressed. -ItemChecked|ChipItemEventHandler|Occurs when a `Chip` item is checked. -ItemUnchecked|ChipItemEventHandler|Occurs when a `Chip` item is unchecked. -ItemRemoved|ChipItemEventHandler|Occurs when a `Chip` is removed. -ItemRemoving|ChipItemRemovingEventHandler|Occurs when a `Chip` item is about to be removed. + +| Event | Type | Description | +|-----------------|--------------------------------|---------------------------------------------------| +| `ItemClick` | `ChipItemEventHandler` | Occurs when a `Chip` item is pressed. | +| `ItemChecked` | `ChipItemEventHandler` | Occurs when a `Chip` item is checked. | +| `ItemUnchecked` | `ChipItemEventHandler` | Occurs when a `Chip` item is unchecked. | +| `ItemRemoved` | `ChipItemEventHandler` | Occurs when a `Chip` is removed. | +| `ItemRemoving` | `ChipItemRemovingEventHandler` | Occurs when a `Chip` item is about to be removed. | ```csharp delegate void ChipItemEventHandler(object sender, ChipItemEventArgs e); diff --git a/doc/controls/Divider.md b/doc/controls/Divider.md index ed550e2f..448ff738 100644 --- a/doc/controls/Divider.md +++ b/doc/controls/Divider.md @@ -7,23 +7,23 @@ A divider is a thin line that groups content in lists and layouts. ## Properties -Property|Type|Description --|-|- -SubHeader|String|Gets or sets the text of the text below the Divider. -SubHeaderForeground|Brush|Gets or sets the foreground of the subheader. +| Property | Type | Description | +|-----------------------|----------|------------------------------------------------------| +| `SubHeader` | `String` | Gets or sets the text of the text below the Divider. | +| `SubHeaderForeground` | `Brush` | Gets or sets the foreground of the subheader. | ## Lightweight Styling -Key|Type|Value --|-|- -DividerForeground|SolidColorBrush|OutlineVariantBrush -DividerSubHeaderForeground|SolidColorBrush|OnSurfaceLowBrush -DividerSubHeaderFontFamily|FontFamily|MaterialMediumFontFamily -DividerSubHeaderFontWeight|FontWeight|BodySmallFontWeight -DividerSubHeaderFontSize|FontSize|BodySmallFontSize -DividerSubHeaderCharacterSpacing|CharacterSpacing|BodySmallCharacterSpacing -DividerSubHeaderMargin|Thickness|0,4,0,0 -DividerHeight|Double|1 +| Key | Type | Value | +|----------------------------------|------------------|---------------------------| +| `DividerForeground` | `SolidColorBrush` | `OutlineVariantBrush` | +| `DividerSubHeaderForeground` | `SolidColorBrush` | `OnSurfaceLowBrush` | +| `DividerSubHeaderFontFamily` | `FontFamily` | `MaterialMediumFontFamily` | +| `DividerSubHeaderFontWeight` | `FontWeight` | `BodySmallFontWeight` | +| `DividerSubHeaderFontSize` | `FontSize` | `BodySmallFontSize` | +| `DividerSubHeaderCharacterSpacing` | `CharacterSpacing` | `BodySmallCharacterSpacing` | +| `DividerSubHeaderMargin` | `Thickness` | `0,4,0,0` | +| `DividerHeight` | `Double` | `1` | ## Usage diff --git a/doc/controls/DrawerControl.md b/doc/controls/DrawerControl.md index db731bb9..98517e98 100644 --- a/doc/controls/DrawerControl.md +++ b/doc/controls/DrawerControl.md @@ -14,7 +14,7 @@ uid: Toolkit.Controls.DrawerControl Due to the lack of clipping, this control should be used as a full window-sized control or, at least, the side where the drawer opens from should be placed on the edge of the screen. -### C# +### C\# ```csharp public partial class DrawerControl : ContentControl @@ -38,28 +38,28 @@ xmlns:utu="using:Uno.Toolkit.UI" ### Inheritance -Object → DependencyObject → UIElement → FrameworkElement → Control → ContentControl → DrawerControl +`Object` → `DependencyObject` → `UIElement` → `FrameworkElement` → `Control` → `ContentControl` → `DrawerControl` ### Constructors -| Constructor | Description | -|-----------------|----------------------------------------------------------| -| DrawerControl() | Initializes a new instance of the `DrawerControl` class. | +| Constructor | Description | +|-------------------|----------------------------------------------------------| +| `DrawerControl()` | Initializes a new instance of the `DrawerControl` class. | ### Properties -Property|Type|Description --|-|- -DrawerBackground|Brush|Gets or sets the background of the drawer. -DrawerContent|object|Gets or sets the drawer content. -DrawerDepth|double?|Get or sets the depth (width or height depending on the `OpenDirection`) of the drawer.
note: The default value is null which enables fully stretched or fit the content (see: `FitToDrawerContent`). Alternatively, a concrete value can be set for a fixed depth. -EdgeSwipeDetectionLength|double?|Gets or sets the length (width or height depending on the `OpenDirection`) of the area allowed for opening swipe gesture.
note: By default, this value is null allowing the drawer to be swiped open from anywhere. Setting a positive value will enforce the edge swipe for opening. -FitToDrawerContent|bool=true|Get or sets a value that indicates whether the drawer will fit to content and aligned to the edge or stretch to fill the control when `DrawerDepth` is null. -IsGestureEnabled|bool=`true`|Get or sets a value that indicates whether the user can interact with the control using gesture. -IsLightDismissEnabled|bool=`true`|Gets or sets a value that indicates whether the drawer can be light-dismissed. -IsOpen|bool|Gets or sets a value that specifies whether the drawer is open. -LightDismissOverlayBackground|Brush|Gets or sets the brush used to paint the light dismiss overlay. -OpenDirection|DrawerOpenDirection=Right|Gets or sets the direction in which the drawer opens toward.
note: The position of the drawer when opened is the opposite of this value. +| Property | Type | Description | +|---------------------------------|-------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `DrawerBackground` | `Brush` | Gets or sets the background of the drawer. | +| `DrawerContent` | `object` | Gets or sets the drawer content. | +| `DrawerDepth` | `double?` | Get or sets the depth (width or height depending on the `OpenDirection`) of the drawer.
note: The default value is null which enables fully stretched or fit the content (see: `FitToDrawerContent`). Alternatively, a concrete value can be set for a fixed depth. | +| `EdgeSwipeDetectionLength` | `double?` | Gets or sets the length (width or height depending on the `OpenDirection`) of the area allowed for opening swipe gesture.
note: By default, this value is null allowing the drawer to be swiped open from anywhere. Setting a positive value will enforce the edge swipe for opening. | +| `FitToDrawerContent` | `bool`=`true` | Get or sets a value that indicates whether the drawer will fit to content and aligned to the edge or stretch to fill the control when `DrawerDepth` is null. | +| `IsGestureEnabled` | `bool`=`true` | Get or sets a value that indicates whether the user can interact with the control using gesture. | +| `IsLightDismissEnabled` | `bool`=`true` | Gets or sets a value that indicates whether the drawer can be light-dismissed. | +| `IsOpen` | `bool` | Gets or sets a value that specifies whether the drawer is open. | +| `LightDismissOverlayBackground` | `Brush` | Gets or sets the brush used to paint the light dismiss overlay. | +| `OpenDirection` | `DrawerOpenDirection`=`Right` | Gets or sets the direction in which the drawer opens toward.
note: The position of the drawer when opened is the opposite of this value. | ### Usage @@ -87,7 +87,7 @@ xmlns:utu="using:Uno.Toolkit.UI" #### NavigationView with drawer -The `DrawerControl` can also be used to enhance [`NavigationView` (muxc)](https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.navigationview?view=winui-3.0) with gesture support, using the `DrawerNavigationViewStyle`: +The `DrawerControl` can also be used to enhance [`NavigationView` (muxc)](https://learn.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.navigationview) with gesture support, using the `DrawerNavigationViewStyle`: ```xml xmlns:utu="using:Uno.Toolkit.UI" @@ -112,16 +112,16 @@ xmlns:muxc="using:Microsoft.UI.Xaml.Controls" From the `NavigationView`, the properties of the `DrawerControl` can be accessed through the same/similarly named properties or via attached properties: -DrawerControl|NavigationView --|- -DrawerBackground|utu:DrawerControlBehavior.DrawerBackground -DrawerDepth|OpenPaneLength -EdgeSwipeDetectionLength|utu:DrawerControlBehavior.EdgeSwipeDetectionLength -FitToDrawerContent|utu:DrawerControlBehavior.FitToDrawerContent -IsGestureEnabled|utu:DrawerControlBehavior.IsGestureEnabled -IsLightDismissEnabled|utu:DrawerControlBehavior.IsLightDismissEnabled -IsOpen|IsPaneOpen -LightDismissOverlayBackground|utu:DrawerControlBehavior.LightDismissOverlayBackground -OpenDirection|utu:DrawerControlBehavior.OpenDirection +| DrawerControl | NavigationView | +|---------------------------------|-----------------------------------------------------------| +| `DrawerBackground` | `utu:DrawerControlBehavior.DrawerBackground` | +| `DrawerDepth` | `OpenPaneLength` | +| `EdgeSwipeDetectionLength` | `utu:DrawerControlBehavior.EdgeSwipeDetectionLength` | +| `FitToDrawerContent` | `utu:DrawerControlBehavior.FitToDrawerContent` | +| `IsGestureEnabled` | `utu:DrawerControlBehavior.IsGestureEnabled` | +| `IsLightDismissEnabled` | `utu:DrawerControlBehavior.IsLightDismissEnabled` | +| `IsOpen` | `IsPaneOpen` | +| `LightDismissOverlayBackground` | `utu:DrawerControlBehavior.LightDismissOverlayBackground` | +| `OpenDirection` | `utu:DrawerControlBehavior.OpenDirection` | > Content and DrawerContent are populated with those of NavigationView. diff --git a/doc/controls/DrawerFlyoutPresenter.md b/doc/controls/DrawerFlyoutPresenter.md index 51fc1cd6..814ac257 100644 --- a/doc/controls/DrawerFlyoutPresenter.md +++ b/doc/controls/DrawerFlyoutPresenter.md @@ -63,13 +63,13 @@ xmlns:utu="using:Uno.Toolkit.UI" ## Properties -Property|Type|Description --|-|- -OpenDirection|DrawerOpenDirection=`Up`|Gets or sets the direction in which the drawer opens toward.
note: The position of drawer when opened is the opposite of this value. -DrawerLength|GridLength=`0.66*`|Get or sets the length (width or height depending on the `OpenDirection`) of the drawer.\* -LightDismissOverlayBackground|Brush|Gets or sets the brush used to paint the light dismiss overlay. The default value is `#80808080` (from the default style). -IsGestureEnabled|bool=`true`|Get or sets a value that indicates whether the user can interact with the control using gesture. -IsLightDismissEnabled|bool=`true`|Gets or sets a value that indicates whether the drawer flyout can be light-dismissed. +| Property | Type | Description | +|---------------------------------|----------------------------|------------------------------------------------------------------------------------------------------------------------------------------| +| `OpenDirection` | `DrawerOpenDirection`=`Up` | Gets or sets the direction in which the drawer opens toward.
note: The position of drawer when opened is the opposite of this value. | +| `DrawerLength` | `GridLength`=`0.66*` | Get or sets the length (width or height depending on the `OpenDirection`) of the drawer.\* | +| `LightDismissOverlayBackground` | `Brush` | Gets or sets the brush used to paint the light dismiss overlay. The default value is `#80808080` (from the default style). | +| `IsGestureEnabled` | `bool`=`true` | Get or sets a value that indicates whether the user can interact with the control using gesture. | +| `IsLightDismissEnabled` | `bool`=`true` | Gets or sets a value that indicates whether the drawer flyout can be light-dismissed. | notes: @@ -87,18 +87,20 @@ notes: ``` - `GridUnitType.Auto`: Fit to flyout content. - - `GridUnitType.Star`: At given ratio of screen/flyout width or height. Valid range is between 0* and 1*, excluding 0* itself. + - `GridUnitType.Star`: At given ratio of screen/flyout width or height. Valid range is between 0\* and 1\*, excluding 0\* itself. - `GridUnitType.Pixel`: Fixed at the given value. ### Usage -To use this, simply use a `Flyout` with `Placement="Full"` and one of the followings as the `FlyoutPresenterStyle`: -> note: The name prefix here indicates the initial position of the drawer (where it opens from). The open animation direction (`OpenDirection`) is the opposite. +To use this, simply use a `Flyout` with `Placement="Full"` and one of the followings as the `FlyoutPresenterStyle`. -- `LeftDrawerFlyoutPresenterStyle` (OpenDirection=Right) -- `TopDrawerFlyoutPresenterStyle` (OpenDirection=Down) -- `RightDrawerFlyoutPresenterStyle` (OpenDirection=Left) -- `BottomDrawerFlyoutPresenterStyle` (OpenDirection=Up) +> [!NOTE] +> The name prefix here indicates the initial position of the drawer (where it opens from). The open animation direction (`OpenDirection`) is the opposite. +> +> - `LeftDrawerFlyoutPresenterStyle` (OpenDirection=Right) +> - `TopDrawerFlyoutPresenterStyle` (OpenDirection=Down) +> - `RightDrawerFlyoutPresenterStyle` (OpenDirection=Left) +> - `BottomDrawerFlyoutPresenterStyle` (OpenDirection=Up) Example: diff --git a/doc/controls/ExtendedSplashScreen.md b/doc/controls/ExtendedSplashScreen.md index 5ddc65cf..e3cc4d98 100644 --- a/doc/controls/ExtendedSplashScreen.md +++ b/doc/controls/ExtendedSplashScreen.md @@ -7,12 +7,12 @@ Represents a control, derived from [`LoadingView`](xref:Toolkit.Controls.Loading ## Properties -Property|Type|Description --|-|- -Platforms|SplashScreenPlatform|Gets or sets which platforms load the native splash screen (`All` by default). This is an flag enumeration, meaning you can specify multiple values that will be combined (eg `Android,iOS` will show native splash screen for only Android and iOS) -SplashScreen|SplashScreen|Gets or sets the `SplashScreen` entity that's available for UWP that defines where the splash screen image is positioned. -Window|Window|Gets or sets the `Window` for the application that is used to size the splash screen -SplashIsEnabled|bool|Gets a value that determines whether native splash is to be displayed for the current platform at runtime. Note for Android 12+ the native splash screen is always disabled irrespective of the Platforms value. +| Property | Type | Description | +|-------------------|------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `Platforms` | `SplashScreenPlatform` | Gets or sets which platforms load the native splash screen (`All` by default). This is an flag enumeration, meaning you can specify multiple values that will be combined (eg `Android,iOS` will show native splash screen for only Android and iOS) | +| `SplashScreen` | `SplashScreen` | Gets or sets the `SplashScreen` entity that's available for UWP that defines where the splash screen image is positioned. | +| `Window` | `Window` | Gets or sets the `Window` for the application that is used to size the splash screen. | +| `SplashIsEnabled` | `bool` | Gets a value that determines whether native splash is to be displayed for the current platform at runtime. Note for Android 12+ the native splash screen is always disabled irrespective of the Platforms value. | ## Usage diff --git a/doc/controls/LoadingView.md b/doc/controls/LoadingView.md index 499392f6..b4ff074c 100644 --- a/doc/controls/LoadingView.md +++ b/doc/controls/LoadingView.md @@ -8,13 +8,13 @@ Represents a control that indicates that the UI is waiting on a task to complete ## Properties -Property|Type|Description --|-|- -Source|ILoadable|Gets and sets the source `ILoadable` associated with this control. -LoadingContent|object|Gets or sets the content to be displayed during loading/waiting. -LoadingContentTemplate|DataTemplate|Gets or sets the template to be used to display the LoadingContent during loading/waiting. -LoadingContentTemplateSelector|DataTemplateSelector|Gets or sets the template selector to be used to display the LoadingContent during loading/waiting. -UseTransitions|bool|Gets and sets whether transitions will run when going between states. +| Property | Type | Description | +|----------------------------------|------------------------|-----------------------------------------------------------------------------------------------------| +| `Source` | `ILoadable` | Gets and sets the source `ILoadable` associated with this control. | +| `LoadingContent` | `object` | Gets or sets the content to be displayed during loading/waiting. | +| `LoadingContentTemplate` | `DataTemplate` | Gets or sets the template to be used to display the LoadingContent during loading/waiting. | +| `LoadingContentTemplateSelector` | `DataTemplateSelector` | Gets or sets the template selector to be used to display the LoadingContent during loading/waiting. | +| `UseTransitions` | `bool` | Gets and sets whether transitions will run when going between states. | ## ILoadable @@ -22,10 +22,10 @@ Describes if this instance is currently in a busy state and notifies subscribers ### Members -Property|Type|Description --|-|- -IsExecuting|bool|Indicates whether the instance is doing work. -IsExecutingChanged|EventHandler?|Event that fires when the `IsExecuting` state has changed. +| Property | Type | Description | +|----------------------|-----------------|------------------------------------------------------------| +| `IsExecuting` | `bool` | Indicates whether the instance is doing work. | +| `IsExecutingChanged` | `EventHandler?` | Event that fires when the `IsExecuting` state has changed. | ### LoadableSource @@ -77,7 +77,7 @@ xmlns:utu="using:Uno.Toolkit.UI" ``` -```cs +```csharp private class ViewModel : ViewModelBase { public string Content0 { get => GetProperty(); set => SetProperty(value); } @@ -107,7 +107,7 @@ private class ViewModel : ViewModelBase AsyncCommand implements ILoadable to notify the LoadingView of ongoing work: -```cs +```csharp public class AsyncCommand : ICommand, ILoadable { public event EventHandler CanExecuteChanged; diff --git a/doc/controls/NavigationBar.md b/doc/controls/NavigationBar.md index 37530a2a..13e1627a 100644 --- a/doc/controls/NavigationBar.md +++ b/doc/controls/NavigationBar.md @@ -13,7 +13,7 @@ The `NavigationBar` represents a specialized app bar that provides the layout fo This document highlights some of the differences you might encounter when working with the native mode of `NavigationBar` on either **iOS** or **Android**. -### C# +### C\# ```csharp public partial class NavigationBar : ContentControl @@ -30,22 +30,22 @@ xmlns:utu="using:Uno.Toolkit.UI" ### Inheritance -Object → DependencyObject → UIElement → FrameworkElement → Control → ContentControl → NavigationBar +`Object` → `DependencyObject` → `UIElement` → `FrameworkElement` → `Control` → `ContentControl` → `NavigationBar` ### Constructors -| Constructor | Description | -|-----------------|----------------------------------------------------------| -| NavigationBar() | Initializes a new instance of the `NavigationBar` class. | +| Constructor | Description | +|-------------------|----------------------------------------------------------| +| `NavigationBar()` | Initializes a new instance of the `NavigationBar` class. | ## Modes The `NavigationBar` supports 2 different modes: -| Mode | Style | -|---------|--------------------------| -| Windows | `XamlDefaultNavigationBar` | -| Native | `NativeDefaultNavigationBar`| +| Mode | Style | +|---------|------------------------------| +| Windows | `XamlDefaultNavigationBar` | +| Native | `NativeDefaultNavigationBar` | ### Windows @@ -77,16 +77,16 @@ This mode is the default for Android and iOS. It uses platform-specific controls ![iOS NavigationBar - Second Page](../assets/navbar-ios-page2.png) -| Platform | Native control | Benefits | -|----------|---------------------|-------------------------------------------------------| -| Android | `Toolbar` | Native pressed states (ripple), native overflow menu. | -| iOS | `UINavigationBar` | Transitions when navigating between pages. | +| Platform | Native control | Benefits | +|----------|-------------------|-------------------------------------------------------| +| Android | `Toolbar` | Native pressed states (ripple), native overflow menu. | +| iOS | `UINavigationBar` | Transitions when navigating between pages. | The rest of this document will exclusively cover the native mode. #### Usage Example -```cs +```xml - - ``` +`AppBarToggleButton` is not currently supported. + +To implement a similar effect, you can bind your `AppBarButton`'s icon to a state using a converter: + +```xml +xmlns:utu="using:Uno.Toolkit.UI" +... + + + + + + + +``` + +### How can I show an image under my NavigationBar? + +You can show an image under a `NavigationBar` by making its background transparent and superposing it over an `Image`: + +```xml +xmlns:utu="using:Uno.Toolkit.UI" +... + + + + +``` + +### What size should my AppBarButton icons be? + +Please refer to the **Icon** section for details. + +### Why does my back button icon change when swiping back on iOS? + +This can happen when navigating between two pages with `NavigationBar`s using different `MainCommand.Icon`s + +To avoid this issue, please make sure that all `NavigationBar`s use the same `BitmapIcon` for their `MainCommand.Icon` by using a style: + +```xml +xmlns:utu="using:Uno.Toolkit.UI" +... + + + +``` diff --git a/doc/controls/ResponsiveView.md b/doc/controls/ResponsiveView.md index c8cd4fba..1e0f2396 100644 --- a/doc/controls/ResponsiveView.md +++ b/doc/controls/ResponsiveView.md @@ -11,14 +11,14 @@ The `ResponsiveView` control adapts to different screen sizes by dynamically cho ## Properties -| Property | Type | Description | -| ----------------- | ---------------- | ------------------------------------------------------- | -| NarrowestTemplate | DataTemplate | Template to be displayed on the narrowest screen size. | -| NarrowTemplate | DataTemplate | Template to be displayed on a narrow screen size. | -| NormalTemplate | DataTemplate | Template to be displayed on a normal screen size. | -| WideTemplate | DataTemplate | Template to be displayed on a wide screen size. | -| WidestTemplate | DataTemplate | Template to be displayed on the widest screen size. | -| ResponsiveLayout | ResponsiveLayout | Overrides the screen size threshold/breakpoints. | +| Property | Type | Description | +| ------------------- | ------------------ | ------------------------------------------------------- | +| `NarrowestTemplate` | `DataTemplate` | Template to be displayed on the narrowest screen size. | +| `NarrowTemplate` | `DataTemplate` | Template to be displayed on a narrow screen size. | +| `NormalTemplate` | `DataTemplate` | Template to be displayed on a normal screen size. | +| `WideTemplate` | `DataTemplate` | Template to be displayed on a wide screen size. | +| `WidestTemplate` | `DataTemplate` | Template to be displayed on the widest screen size. | +| `ResponsiveLayout` | `ResponsiveLayout` | Overrides the screen size threshold/breakpoints. | ### ResponsiveLayout @@ -26,13 +26,13 @@ Provides the ability to override the breakpoint for each screen size: `Narrowest #### Properties -| Property | Type | Description | -| ---------- | ------ | ---------------------- | -| Narrowest | double | Default value is 150. | -| Narrow | double | Default value is 300. | -| Normal | double | Default value is 600. | -| Wide | double | Default value is 800. | -| Widest | double | Default value is 1080. | +| Property | Type | Description | +| ------------ | -------- | ---------------------- | +| `Narrowest` | `double` | Default value is 150. | +| `Narrow` | `double` | Default value is 300. | +| `Normal` | `double` | Default value is 600. | +| `Wide` | `double` | Default value is 800. | +| `Widest` | `double` | Default value is 1080. | #### Resolution Logics @@ -40,43 +40,43 @@ The layouts whose value(ResponsiveExtension) or template(ResponsiveView) is not Below are the selected layout at different screen width if all layouts are provided: -Width|Layout --|- -149|Narrowest -150(Narrowest)|Narrowest -151|Narrowest -299|Narrowest -300(Narrow)|Narrow -301|Narrow -599|Narrow -600(Normal)|Normal -601|Normal -799|Normal -800(Wide)|Wide -801|Wide -1079|Wide -1080(Widest)|Widest -1081|Widest +| Width | Layout | +|----------------|-----------| +| 149 | Narrowest | +| 150(Narrowest) | Narrowest | +| 151 | Narrowest | +| 299 | Narrowest | +| 300(Narrow) | Narrow | +| 301 | Narrow | +| 599 | Narrow | +| 600(Normal) | Normal | +| 601 | Normal | +| 799 | Normal | +| 800(Wide) | Wide | +| 801 | Wide | +| 1079 | Wide | +| 1080(Widest) | Widest | +| 1081 | Widest | Here are the selected layout at different screen width if only `Narrow` and `Wide` are provided: -Width|Layout --|- -149|Narrow -150(~~Narrowest~~)|Narrow -151|Narrow -299|Narrow -300(Narrow)|Narrow -301|Narrow -599|Narrow -600(~~Normal~~)|Narrow -601|Narrow -799|Narrow -800(Wide)|Wide -801|Wide -1079|Wide -1080(~~Widest~~)|Wide -1081|Wide +| Width | Layout | +|--------------------|--------| +| 149 | Narrow | +| 150(~~Narrowest~~) | Narrow | +| 151 | Narrow | +| 299 | Narrow | +| 300(Narrow) | Narrow | +| 301 | Narrow | +| 599 | Narrow | +| 600(~~Normal~~) | Narrow | +| 601 | Narrow | +| 799 | Narrow | +| 800(Wide) | Wide | +| 801 | Wide | +| 1079 | Wide | +| 1080(~~Widest~~) | Wide | +| 1081 | Wide | ## Usage diff --git a/doc/controls/SafeArea.md b/doc/controls/SafeArea.md index 526a3350..1130d765 100644 --- a/doc/controls/SafeArea.md +++ b/doc/controls/SafeArea.md @@ -4,7 +4,7 @@ uid: Toolkit.Controls.SafeArea # SafeArea -`SafeArea` is a specialized control that overrides the `Padding` or `Margin` properties of its child/attached control to ensure that its inner content is always within the [`ApplicationView.VisibleBounds`](https://docs.microsoft.com/en-us/uwp/api/windows.ui.viewmanagement.applicationview.visiblebounds?view=winrt-22621) rectangle. +`SafeArea` is a specialized control that overrides the `Padding` or `Margin` properties of its child/attached control to ensure that its inner content is always within the [`ApplicationView.VisibleBounds`](https://learn.microsoft.com/uwp/api/windows.ui.viewmanagement.applicationview.visiblebounds) rectangle. The `ApplicationView.VisibleBounds` is the rectangular area of the screen which is completely unobscured by any window decoration, such as the status bar, rounded screen corners, or any type of screen notch. @@ -35,10 +35,10 @@ xmlns:utu="using:Uno.Toolkit.UI" > [!WARNING] > In most cases, the attached properties and the `SafeArea` control can be used interchangeably. However, be aware that using `SafeArea` as a control while `Insets` contains `InsetMask.SoftInput` will introduce a `ScrollViewer` into the visual tree as the content root of the `SafeArea`. Please refer to the [SoftInput usage section](#using-insetmasksoftinput-for-on-screen-keyboards). -Property|Type|Description --|-|- -Insets|`InsetMask`|Gets or sets the specific bound(s) of the "safe" area that you want to be considered when `SafeArea` attempts to apply the Padding or Margin. Defaults to `InsetMask.None`. -Mode|`InsetMode`|Gets or sets whether the `SafeArea` insets will be applied to the control's `Margin` or its `Padding`. Defaults to `InsetMode.Padding`. +| Property | Type | Description | +|----------|-------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `Insets` | `InsetMask` | Gets or sets the specific bound(s) of the "safe" area that you want to be considered when `SafeArea` attempts to apply the Padding or Margin. Defaults to `InsetMask.None`. | +| `Mode` | `InsetMode` | Gets or sets whether the `SafeArea` insets will be applied to the control's `Margin` or its `Padding`. Defaults to `InsetMode.Padding`. | ## Usage @@ -63,7 +63,7 @@ The default `Mode` for `SafeArea` is set to `InsetMode.Padding`. Using the Paddi Here we are using the Toolkit's [`TabBar`](TabBarAndTabBarItem.md) with both the `TopTabBarStyle` and the `BottomTabBarStyle`. Both controls have their `Background`s set to `Purple`. Note the differences within the unsafe areas of the screen between the `Padding` mode and the `Margin` mode. > [!NOTE] -> The `BottomTabBarStyle` uses `SafeArea` and has the `Insets` property set to `Bottom` by default. This is removed from the style for the purpose of the demontration below. +> The `BottomTabBarStyle` uses `SafeArea` and has the `Insets` property set to `Bottom` by default. This is removed from the style for the purpose of the demonstration below. Given the following XAML, we can see what SafeArea is doing and what the differences are between an `InsetMode` of `Padding` versus `Margin`. diff --git a/doc/controls/ShadowContainer.md b/doc/controls/ShadowContainer.md index 534ffec4..2f691696 100644 --- a/doc/controls/ShadowContainer.md +++ b/doc/controls/ShadowContainer.md @@ -52,13 +52,13 @@ xmlns:utu="using:Uno.Toolkit.UI" ### Inheritance -Object → DependencyObject → UIElement → FrameworkElement → Control → ContentControl > ShadowContainer +`Object` → `DependencyObject` → `UIElement` → `FrameworkElement` → `Control` → `ContentControl` → `ShadowContainer` ### Properties -| Property | Type | Description | -| -------- | ---------------- | ----------- | -Shadows | ShadowCollection | The collection of shadows that will be displayed under your control. A `ShadowCollection` can be stored in a resource dictionary to have a consistent style throughout your app. The `ShadowCollection` implements `INotifyCollectionChanged`. +| Property | Type | Description | +|------------|--------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `Shadows` | `ShadowCollection` | The collection of shadows that will be displayed under your control. A `ShadowCollection` can be stored in a resource dictionary to have a consistent style throughout your app. The `ShadowCollection` implements `INotifyCollectionChanged`. | ## Shadow @@ -66,15 +66,15 @@ Dependency object representing a single shadow. ### Shadow Properties -| Property | Type | Description | -| -------- | ---- | ----------- | -IsInner | bool | True if this shadow is an inner shadow (similar to `inset` of `box-shadow` in CSS). -OffsetX | double | The X offset of the shadow. -OffsetY | double | The Y offset of the shadow. -Color | Color | The color of the shadow. It will be multiplied by the `Opacity` property before rendering. -Opacity | double | The opacity of the shadow. -BlurRadius | double | The radius of the blur that will be applied to the shadow **[0..100]**. -Spread | double | The spread will inflate or deflate (if negative) the control shadow size **before** applying the blur. +| Property | Type | Description | +|--------------|----------|--------------------------------------------------------------------------------------------------------| +| `IsInner` | `bool` | True if this shadow is an inner shadow (similar to `inset` of `box-shadow` in CSS). | +| `OffsetX` | `double` | The X offset of the shadow. | +| `OffsetY` | `double` | The Y offset of the shadow. | +| `Color` | `Color` | The color of the shadow. It will be multiplied by the `Opacity` property before rendering. | +| `Opacity` | `double` | The opacity of the shadow. | +| `BlurRadius` | `double` | The radius of the blur that will be applied to the shadow **[0..100]**. | +| `Spread` | `double` | The spread will inflate or deflate (if negative) the control shadow size **before** applying the blur. | As mentioned `IsInner` is similar to `inset` of `box-shadow` in CSS. See the images below that illustrate its effects: @@ -86,7 +86,7 @@ Without `inset` a Drop (outer) Shadow is rendered. ![CSS box-shadow without inset](../assets/box-shadow.png) -For more info on how `inset` works in CSS for `box-shadow` follow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#values. +For more info on how `inset` works in CSS for `box-shadow`, see [`box-shadow` values](https://developer.mozilla.org/docs/Web/CSS/box-shadow#values). > [!IMPORTANT] > Be careful not to confuse the `Shadow` property with the `Shadows` property. The singular `Shadow` property comes from `UIElement`. To add shadows to the `ShadowContainer`, use only the `Shadows` property. diff --git a/doc/controls/TabBarAndTabBarItem.md b/doc/controls/TabBarAndTabBarItem.md index dc65469e..999bf18c 100644 --- a/doc/controls/TabBarAndTabBarItem.md +++ b/doc/controls/TabBarAndTabBarItem.md @@ -14,7 +14,7 @@ Represents a control that provides a list of `TabItem`s to select from. The `Tab `TabBarItem` is a specialized `SelectorItem` that includes functionality such as triggering an `ICommand` on click/tap or displaying a flyout. -### C# +### C\# ```csharp public partial class TabBarItem : SelectorItem @@ -35,37 +35,37 @@ xmlns:utu="using:Uno.Toolkit.UI" ### Inheritance -Object → DependencyObject → UIElement → FrameworkElement → Control → ContentControl → SelectorItem → TabBarItem +`Object` → `DependencyObject` → `UIElement` → `FrameworkElement` → `Control` → `ContentControl` → `SelectorItem` → `TabBarItem` ### Constructors -| Constructor | Description | -|--------------|-------------------------------------------------------| -| TabBarItem() | Initializes a new instance of the `TabBarItem` class. | +| Constructor | Description | +|----------------|-------------------------------------------------------| +| `TabBarItem()` | Initializes a new instance of the `TabBarItem` class. | ### Properties -Property|Type|Description --|-|- -BadgeValue|string|Gets or sets the value to be displayed in the badge of the `TabBarItem`. If a value is set the large badge will be displayed otherwise it will be the small badge. (Currently only supported by the Material Theme Toolkit Library with `BottomTabBarItemStyle` and `VerticalTabBarItemStyle`) -BadgeVisibility|Visibility|Gets or sets the badge visibility of the `TabBarItem`. (Currently only supported by the Material Theme Toolkit Library with `BottomTabBarItemStyle` and `VerticalTabBarItemStyle`) -Command|ICommand|Gets or sets the command to invoke when the `TabBarItem` is pressed. -CommandParameter|object|Gets or sets the parameter to pass to the `Command` property. -Flyout|double|Gets or sets the flyout associated with this `TabBarItem`. -Icon|IconElement|Gets or sets the icon of the `TabBarItem`. -IsSelectable|bool|Gets or sets whether the `TabBarItem` can be selected. +| Property | Type | Description | +|--------------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `BadgeValue` | `string` | Gets or sets the value to be displayed in the badge of the `TabBarItem`. If a value is set the large badge will be displayed otherwise it will be the small badge. (Currently only supported by the Material Theme Toolkit Library with `BottomTabBarItemStyle` and `VerticalTabBarItemStyle`) | +| `BadgeVisibility` | `Visibility` | Gets or sets the badge visibility of the `TabBarItem`. (Currently only supported by the Material Theme Toolkit Library with `BottomTabBarItemStyle` and `VerticalTabBarItemStyle`) | +| `Command` | `ICommand` | Gets or sets the command to invoke when the `TabBarItem` is pressed. | +| `CommandParameter` | `object` | Gets or sets the parameter to pass to the `Command` property. | +| `Flyout` | `double` | Gets or sets the flyout associated with this `TabBarItem`. | +| `Icon` | `IconElement` | Gets or sets the icon of the `TabBarItem`. | +| `IsSelectable` | `bool` | Gets or sets whether the `TabBarItem` can be selected. | ### Events -Event|Type|Description --|-|- -Click|RoutedEventHandler|Occurs when the `TabBarItem` is pressed. +| Event | Type | Description | +|---------|----------------------|------------------------------------------| +| `Click` | `RoutedEventHandler` | Occurs when the `TabBarItem` is pressed. | ## TabBar `TabBar` is a specialized `ItemsControl` used to present a collection of `TabBarItem`s. -### C# +### C\# ```csharp public partial class TabBar : ItemsControl @@ -92,38 +92,39 @@ xmlns:utu="using:Uno.Toolkit.UI" ### Inheritance -Object → DependencyObject → UIElement → FrameworkElement → Control → ItemsControl → TabBar +`Object` → `DependencyObject` → `UIElement` → `FrameworkElement` → `Control` → `ItemsControl` → `TabBar` ### Constructors | Constructor | Description | |-------------|---------------------------------------------------| -| TabBar() | Initializes a new instance of the `TabBar` class. | +| `TabBar()` | Initializes a new instance of the `TabBar` class. | ### Properties -Property|Type|Description --|-|- -SelectedIndex|int|Gets or sets the index of the selected item. -SelectedItem|object|Gets or sets the selected item. -Orientation|Orientation|Gets or sets the dimension by which the items are stacked -SelectionIndicatorContent|object|Gets or sets the content to be displayed as the selection indicator -SelectionIndicatorContentTemplate|DataTemplate|Gets or sets the data template that is used to display the content of the selection indicator -SelectionIndicatorPresenterStyle|Style|Gets or sets the style to be applied for the content of the `TabBarSelectionIndicatorPresenter` -SelectionIndicatorTransitionMode|IndicatorTransitionMode|Gets or sets the behavior of the selection indicator. The indicator can either slide or snap to the newly selected item. Defaults to `Snap` -SelectionIndicatorPlacement|IndicatorPlacement|Gets or sets the placement of the selection indicator. The indicator can either be displayed `Above` or `Below` the TabBarItem Content. Defaults to `Above` +| Property | Type | Description | +|-------------------------------------|---------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `SelectedIndex` | `int` | Gets or sets the index of the selected item. | +| `SelectedItem` | `object` | Gets or sets the selected item. | +| `Orientation` | `Orientation` | Gets or sets the dimension by which the items are stacked | +| `SelectionIndicatorContent` | `object` | Gets or sets the content to be displayed as the selection indicator | +| `SelectionIndicatorContentTemplate` | `DataTemplate` | Gets or sets the data template that is used to display the content of the selection indicator | +| `SelectionIndicatorPresenterStyle` | `Style` | Gets or sets the style to be applied for the content of the `TabBarSelectionIndicatorPresenter` | +| `SelectionIndicatorTransitionMode` | `IndicatorTransitionMode` | Gets or sets the behavior of the selection indicator. The indicator can either slide or snap to the newly selected item. Defaults to `Snap` | +| `SelectionIndicatorPlacement` | `IndicatorPlacement` | Gets or sets the placement of the selection indicator. The indicator can either be displayed `Above` or `Below` the TabBarItem Content. Defaults to `Above` | -> Note: `TabBar` only supports the single selection mode. +> [!NOTE] +> `TabBar` only supports the single selection mode. ### Events All events below are forwarded from the nested `TabBarItem`s: -Event|Type|Description --|-|- -SelectionChanged|`TypedEventHandler`|Occurs when a `TabBarItem`'s selection state has changed. +| Event | Type | Description | +|--------------------|--------------------------------------------------------------|-----------------------------------------------------------| +| `SelectionChanged` | `TypedEventHandler` | Occurs when a `TabBarItem`'s selection state has changed. | -```cs +```csharp class TabBarSelectionChangedEventArgs : EventArgs { // Gets the newly selected TabBarItem @@ -384,15 +385,15 @@ xmlns:utu="using:Uno.Toolkit.UI" The Uno Toolkit provides several styles of `TabBarItem` for both Material and Cupertino themes. -Style Key|Material|Cupertino --|-|- -BottomFabTabBarItemStyle|✓| -BottomTabBarItemStyle|✓|✓| -ColoredTopTabBarItemStyle|✓| -SegmentedItemStyle||✓| -SlidingSegmentedItemStyle|✓| -TopTabBarItemStyle|✓| -VerticalTabBarItemStyle|✓| +| Style Key | Material | Cupertino | +|-----------------------------|----------|-----------| +| `BottomFabTabBarItemStyle` | ✓ | | +| `BottomTabBarItemStyle` | ✓ | ✓ | +| `ColoredTopTabBarItemStyle` | ✓ | | +| `SegmentedItemStyle` | | ✓ | +| `SlidingSegmentedItemStyle` | ✓ | | +| `TopTabBarItemStyle` | ✓ | | +| `VerticalTabBarItemStyle` | ✓ | | These pre-built styles can be used for more complex `TabBar` scenarios. For example, using the BottomFabTabBarItemStyle, we can embed Floating Action Buttons into the `TabBar`. @@ -505,159 +506,159 @@ xmlns:utu="using:Uno.Toolkit.UI" ## Lightweight Styling -Key|Type|Value --|-|- -NavigationTabBarWidthOrHeight|Double|80 -NavigationTabBarTintOpacity|Double|0.8 -NavigationTabBarItemIconHeight|Double|18 -NavigationTabBarItemActiveIndicatorWidth|Double|64 -NavigationTabBarItemActiveIndicatorHeight|Double|32 -NavigationTabBarItemPadding|Thickness|0,12,0,16 -NavigationTabBarItemActiveIndicatorCornerRadius|CornerRadius|16 -TopTabBarHeight|Double|48 -TopTabBarItemIconHeight|Double|20 -TopTabBarItemContentMargin|Thickness|0 -FabTabBarItemOffset|Double|-32 -FabTabBarItemContentWidthOrHeight|Double|16 -FabTabBarItemIconTextPadding|Double|12 -FabTabBarItemCornerRadius|CornerRadius|16 -FabTabBarItemPadding|Thickness|20 -NavigationTabBarItemSmallBadgeHeight|Double|6 -NavigationTabBarItemSmallBadgeWidth|Double|6 -NavigationTabBarItemSmallBadgeMargin|Thickness|0,4,20,0 -NavigationTabBarItemLargeBadgeHeight|Double|16 -NavigationTabBarItemLargeBadgeMinWidth|Double|16 -NavigationTabBarItemLargeBadgeMargin|Thickness|32,2,0,0 -NavigationTabBarItemLargeBadgePadding|Thickness|4,0 -NavigationTabBarItemLargeBadgeCornerRadius|CornerRadius|8 -VerticalTabBarBackground|SolidColorBrush|SurfaceBrush -BottomTabBarBackground|SolidColorBrush|SurfaceBrush -TopTabBarBackground|SolidColorBrush|BackgroundBrush -TopTabBarBottomBorderBrush|SolidColorBrush|PrimaryBrush -ColoredTopTabBarBackground|SolidColorBrush|PrimaryBrush -ColoredTopTabBarBottomBorderBrush|SolidColorBrush|OnPrimaryBrush -ColoredTopTabBarItemBackground|SolidColorBrush|SystemControlTransparentBrush -ColoredTopTabBarItemBackgroundPointerOver|SolidColorBrush|OnPrimaryHoverBrush -ColoredTopTabBarItemBackgroundFocused|SolidColorBrush|OnPrimaryLowBrush -ColoredTopTabBarItemBackgroundPressed|SolidColorBrush|OnPrimaryPressedBrush -ColoredTopTabBarItemBackgroundDisabled|SolidColorBrush|SystemControlTransparentBrush -ColoredTopTabBarItemBackgroundSelected|SolidColorBrush|SystemControlTransparentBrush -ColoredTopTabBarItemBackgroundSelectedPointerOver|SolidColorBrush|OnPrimaryHoverBrush -ColoredTopTabBarItemBackgroundSelectedPressed|SolidColorBrush|OnPrimaryPressedBrush -ColoredTopTabBarItemForeground|SolidColorBrush|OnPrimaryMediumBrush -ColoredTopTabBarItemForegroundPointerOver|SolidColorBrush|OnPrimaryMediumBrush -ColoredTopTabBarItemForegroundFocused|SolidColorBrush|OnPrimaryMediumBrush -ColoredTopTabBarItemForegroundPressed|SolidColorBrush|OnPrimaryMediumBrush -ColoredTopTabBarItemForegroundDisabled|SolidColorBrush|SystemControlDisabledBaseMediumLowBrush -ColoredTopTabBarItemForegroundSelected|SolidColorBrush|OnPrimaryBrush -ColoredTopTabBarItemForegroundSelectedPointerOver|SolidColorBrush|OnPrimaryBrush -ColoredTopTabBarItemForegroundSelectedPressed|SolidColorBrush|OnPrimaryBrush -ColoredTopTabBarItemIconForeground|SolidColorBrush|SystemControlTransparentBrush -ColoredTopTabBarItemIconForegroundPointerOver|SolidColorBrush|OnPrimaryMediumBrush -ColoredTopTabBarItemIconForegroundFocused|SolidColorBrush|SystemControlTransparentBrush -ColoredTopTabBarItemIconForegroundPressed|SolidColorBrush|OnPrimaryMediumBrush -ColoredTopTabBarItemIconForegroundDisabled|SolidColorBrush|SystemControlDisabledBaseMediumLowBrush -ColoredTopTabBarItemIconForegroundSelected|SolidColorBrush|OnPrimaryBrush -ColoredTopTabBarItemIconForegroundSelectedPointerOver|SolidColorBrush|OnPrimaryBrush -ColoredTopTabBarItemIconForegroundSelectedPressed|SolidColorBrush|OnPrimaryBrush -ColoredTopTabBarItemPointerFillBrush|SolidColorBrush|SystemControlTransparentBrush -ColoredTopTabBarItemPointerFillBrushPointerOver|SolidColorBrush|OnPrimaryHoverBrush -ColoredTopTabBarItemPointerFillBrushFocused|SolidColorBrush|OnPrimaryLowBrush -ColoredTopTabBarItemPointerFillBrushPressed|SolidColorBrush|OnPrimaryPressedBrush -ColoredTopTabBarItemPointerFillBrushDisabled|SolidColorBrush|SystemControlTransparentBrush -ColoredTopTabBarItemPointerFillBrushSelected|SolidColorBrush|SystemControlTransparentBrush -ColoredTopTabBarItemPointerFillBrushSelectedPointerOver|SolidColorBrush|OnPrimaryHoverBrush -ColoredTopTabBarItemPointerFillBrushSelectedPressed|SolidColorBrush|OnPrimaryPressedBrush -ColoredTopTabBarItemRippleFeedback|SolidColorBrush|PrimaryBrush -FabTabBarItemBackground|SolidColorBrush|PrimaryContainerBrush -FabTabBarItemBackgroundPointerOver|SolidColorBrush|OnPrimaryContainerHoverBrush -FabTabBarItemBackgroundFocused|SolidColorBrush|OnPrimaryContainerFocusedBrush -FabTabBarItemBackgroundPressed|SolidColorBrush|OnPrimaryContainerPressedBrush -FabTabBarItemBackgroundDisabled|SolidColorBrush|OnSurfaceDisabledLowBrush -FabTabBarItemBackgroundSelected|SolidColorBrush|SystemControlTransparentBrush -FabTabBarItemBackgroundSelectedPointerOver|SolidColorBrush|SystemControlTransparentBrush -FabTabBarItemBackgroundSelectedPressed|SolidColorBrush|SystemControlTransparentBrush -FabTabBarItemForeground|SolidColorBrush|OnPrimaryContainerBrush -FabTabBarItemForegroundPointerOver|SolidColorBrush|OnPrimaryContainerBrush -FabTabBarItemForegroundFocused|SolidColorBrush|OnPrimaryContainerBrush -FabTabBarItemForegroundPressed|SolidColorBrush|OnPrimaryContainerBrush -FabTabBarItemForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush -FabTabBarItemForegroundSelected|SolidColorBrush|SystemControlTransparentBrush -FabTabBarItemForegroundSelectedPointerOver|SolidColorBrush|SystemControlTransparentBrush -FabTabBarItemForegroundSelectedPressed|SolidColorBrush|SystemControlTransparentBrush -FabTabBarItemIconForeground|SolidColorBrush|SystemControlTransparentBrush -FabTabBarItemIconForegroundPointerOver|SolidColorBrush|SystemControlTransparentBrush -FabTabBarItemIconForegroundFocused|SolidColorBrush|SystemControlTransparentBrush -FabTabBarItemIconForegroundPressed|SolidColorBrush|SystemControlTransparentBrush -FabTabBarItemIconForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush -FabTabBarItemIconForegroundSelected|SolidColorBrush|SystemControlTransparentBrush -FabTabBarItemIconForegroundSelectedPointerOver|SolidColorBrush|SystemControlTransparentBrush -FabTabBarItemIconForegroundSelectedPressed|SolidColorBrush|SystemControlTransparentBrush -NavigationTabBarItemActiveIndicatorBackground|SolidColorBrush|SystemControlTransparentBrush -NavigationTabBarItemActiveIndicatorBackgroundPointerOver|SolidColorBrush|OnSurfaceVariantHoverBrush -NavigationTabBarItemActiveIndicatorBackgroundPressed|SolidColorBrush|OnSurfaceVariantPressedBrush -NavigationTabBarItemActiveIndicatorBackgroundDisabled|SolidColorBrush|SystemControlTransparentBrush -NavigationTabBarItemActiveIndicatorBackgroundSelected|SolidColorBrush|SecondaryContainerBrush -NavigationTabBarItemActiveIndicatorBackgroundSelectedPointerOver|SolidColorBrush|OnSurfaceHoverBrush -NavigationTabBarItemActiveIndicatorBackgroundSelectedPressed|SolidColorBrush|OnSurfacePressedBrush -NavigationTabBarItemIconForeground|SolidColorBrush|SystemControlTransparentBrush -NavigationTabBarItemIconForegroundPointerOver|SolidColorBrush|OnSurfaceVariantBrush -NavigationTabBarItemIconForegroundPressed|SolidColorBrush|OnSurfaceVariantBrush -NavigationTabBarItemIconForegroundDisabled|SolidColorBrush|SystemControlDisabledBaseMediumLowBrush -NavigationTabBarItemIconForegroundSelected|SolidColorBrush|OnSecondaryContainerBrush -NavigationTabBarItemIconForegroundSelectedPointerOver|SolidColorBrush|OnSecondaryContainerBrush -NavigationTabBarItemIconForegroundSelectedPressed|SolidColorBrush|OnSecondaryContainerBrush -NavigationTabBarItemErrorBrush|SolidColorBrush|ErrorBrush -NavigationTabBarItemOnErrorBrush|SolidColorBrush|OnErrorBrush -NavigationTabBarItemPointerFillBrush|SolidColorBrush|SystemControlTransparentBrush -NavigationTabBarItemRippleFeedback|SolidColorBrush|OnSurfaceBrush -TopTabBarItemBackground|SolidColorBrush|SystemControlTransparentBrush -TopTabBarItemBackgroundPointerOver|SolidColorBrush|PrimaryHoverBrush -TopTabBarItemBackgroundFocused|SolidColorBrush|PrimaryLowBrush -TopTabBarItemBackgroundPressed|SolidColorBrush|PrimaryPressedBrush -TopTabBarItemBackgroundDisabled|SolidColorBrush|SystemControlTransparentBrush -TopTabBarItemBackgroundSelected|SolidColorBrush|SystemControlTransparentBrush -TopTabBarItemBackgroundSelectedPointerOver|SolidColorBrush|PrimaryHoverBrush -TopTabBarItemBackgroundSelectedPressed|SolidColorBrush|PrimaryPressedBrush -TopTabBarItemForeground|SolidColorBrush|OnSurfaceMediumBrush -TopTabBarItemForegroundPointerOver|SolidColorBrush|OnSurfaceMediumBrush -TopTabBarItemForegroundFocused|SolidColorBrush|OnSurfaceMediumBrush -TopTabBarItemForegroundPressed|SolidColorBrush|OnSurfaceMediumBrush -TopTabBarItemForegroundDisabled|SolidColorBrush|SystemControlDisabledBaseMediumLowBrush -TopTabBarItemForegroundSelected|SolidColorBrush|PrimaryBrush -TopTabBarItemForegroundSelectedPointerOver|SolidColorBrush|PrimaryBrush -TopTabBarItemForegroundSelectedPressed|SolidColorBrush|PrimaryBrush -TopTabBarItemBorderBrush|SolidColorBrush|SystemControlTransparentBrush -TopTabBarItemIconForeground|SolidColorBrush|SystemControlTransparentBrush -TopTabBarItemIconForegroundPointerOver|SolidColorBrush|OnSurfaceMediumBrush -TopTabBarItemIconForegroundFocused|SolidColorBrush|SystemControlTransparentBrush -TopTabBarItemIconForegroundPressed|SolidColorBrush|OnSurfaceMediumBrush -TopTabBarItemIconForegroundDisabled|SolidColorBrush|SystemControlDisabledBaseMediumLowBrush -TopTabBarItemIconForegroundSelected|SolidColorBrush|PrimaryBrush -TopTabBarItemIconForegroundSelectedPointerOver|SolidColorBrush|PrimaryBrush -TopTabBarItemIconForegroundSelectedPressed|SolidColorBrush|PrimaryBrush -TopTabBarItemPointerFillBrush|SolidColorBrush|SystemControlTransparentBrush -TopTabBarItemPointerFillBrushPointerOver|SolidColorBrush|PrimaryHoverBrush -TopTabBarItemPointerFillBrushFocused|SolidColorBrush|PrimaryLowBrush -TopTabBarItemPointerFillBrushPressed|SolidColorBrush|PrimaryPressedBrush -TopTabBarItemPointerFillBrushDisabled|SolidColorBrush|SystemControlTransparentBrush -TopTabBarItemPointerFillBrushSelected|SolidColorBrush|SystemControlTransparentBrush -TopTabBarItemPointerFillBrushSelectedPointerOver|SolidColorBrush|PrimaryHoverBrush -TopTabBarItemPointerFillBrushSelectedPressed|SolidColorBrush|PrimaryPressedBrush -TopTabBarItemRippleFeedback|SolidColorBrush|PrimaryBrush -NavigationTabBarBackground|SolidColorBrush|SystemControlTransparentBrush -NavigationTabBarBackgroundPointerOver|SolidColorBrush|SystemControlTransparentBrush -NavigationTabBarBackgroundFocused|SolidColorBrush|SystemControlTransparentBrush -NavigationTabBarBackgroundPressed|SolidColorBrush|SystemControlTransparentBrush -NavigationTabBarBackgroundSelected|SolidColorBrush|SystemControlTransparentBrush -NavigationTabBarBackgroundSelectedPointerOver|SolidColorBrush|SystemControlTransparentBrush -NavigationTabBarBackgroundSelectedPressed|SolidColorBrush|SystemControlTransparentBrush -NavigationTabBarForeground|SolidColorBrush|OnSurfaceVariantBrush -NavigationTabBarForegroundPointerOver|SolidColorBrush|OnSurfaceVariantBrush -NavigationTabBarForegroundPressed|SolidColorBrush|OnSurfaceVariantBrush -NavigationTabBarForegroundDisabled|SolidColorBrush|SystemControlDisabledBaseMediumLowBrush -NavigationTabBarForegroundSelected|SolidColorBrush|OnSurfaceBrush -NavigationTabBarForegroundSelectedPointerOver|SolidColorBrush|OnSurfaceBrush -NavigationTabBarForegroundSelectedPressed|SolidColorBrush|OnSurfaceBrush -NavigationTabBarBorderBrush|SolidColorBrush|SystemControlTransparentBrush -NavigationTabBarTintBrush|SolidColorBrush|SurfaceTintColor@NavigationTabBarTintOpacity +| Key | Type | Value | +|----------------------------------------------------------------------|-----------------|----------------------------------------------| +| `NavigationTabBarWidthOrHeight` | `Double` | 80 | +| `NavigationTabBarTintOpacity` | `Double` | 0.8 | +| `NavigationTabBarItemIconHeight` | `Double` | 18 | +| `NavigationTabBarItemActiveIndicatorWidth` | `Double` | 64 | +| `NavigationTabBarItemActiveIndicatorHeight` | `Double` | 32 | +| `NavigationTabBarItemPadding` | `Thickness` | 0,12,0,16 | +| `NavigationTabBarItemActiveIndicatorCornerRadius` | `CornerRadius` | 16 | +| `TopTabBarHeight` | `Double` | 48 | +| `TopTabBarItemIconHeight` | `Double` | 20 | +| `TopTabBarItemContentMargin` | `Thickness` | 0 | +| `FabTabBarItemOffset` | `Double` | -32 | +| `FabTabBarItemContentWidthOrHeight` | `Double` | 16 | +| `FabTabBarItemIconTextPadding` | `Double` | 12 | +| `FabTabBarItemCornerRadius` | `CornerRadius` | 16 | +| `FabTabBarItemPadding` | `Thickness` | 20 | +| `NavigationTabBarItemSmallBadgeHeight` | `Double` | 6 | +| `NavigationTabBarItemSmallBadgeWidth` | `Double` | 6 | +| `NavigationTabBarItemSmallBadgeMargin` | `Thickness` | 0,4,20,0 | +| `NavigationTabBarItemLargeBadgeHeight` | `Double` | 16 | +| `NavigationTabBarItemLargeBadgeMinWidth` | `Double` | 16 | +| `NavigationTabBarItemLargeBadgeMargin` | `Thickness` | 32,2,0,0 | +| `NavigationTabBarItemLargeBadgePadding` | `Thickness` | 4,0 | +| `NavigationTabBarItemLargeBadgeCornerRadius` | `CornerRadius` | 8 | +| `VerticalTabBarBackground` | `SolidColorBrush` | SurfaceBrush | +| `BottomTabBarBackground` | `SolidColorBrush` | SurfaceBrush | +| `TopTabBarBackground` | `SolidColorBrush` | BackgroundBrush | +| `TopTabBarBottomBorderBrush` | `SolidColorBrush` | PrimaryBrush | +| `ColoredTopTabBarBackground` | `SolidColorBrush` | PrimaryBrush | +| `ColoredTopTabBarBottomBorderBrush` | `SolidColorBrush` | OnPrimaryBrush | +| `ColoredTopTabBarItemBackground` | `SolidColorBrush` | SystemControlTransparentBrush | +| `ColoredTopTabBarItemBackgroundPointerOver` | `SolidColorBrush` | OnPrimaryHoverBrush | +| `ColoredTopTabBarItemBackgroundFocused` | `SolidColorBrush` | OnPrimaryLowBrush | +| `ColoredTopTabBarItemBackgroundPressed` | `SolidColorBrush` | OnPrimaryPressedBrush | +| `ColoredTopTabBarItemBackgroundDisabled` | `SolidColorBrush` | SystemControlTransparentBrush | +| `ColoredTopTabBarItemBackgroundSelected` | `SolidColorBrush` | SystemControlTransparentBrush | +| `ColoredTopTabBarItemBackgroundSelectedPointerOver` | `SolidColorBrush` | OnPrimaryHoverBrush | +| `ColoredTopTabBarItemBackgroundSelectedPressed` | `SolidColorBrush` | OnPrimaryPressedBrush | +| `ColoredTopTabBarItemForeground` | `SolidColorBrush` | OnPrimaryMediumBrush | +| `ColoredTopTabBarItemForegroundPointerOver` | `SolidColorBrush` | OnPrimaryMediumBrush | +| `ColoredTopTabBarItemForegroundFocused` | `SolidColorBrush` | OnPrimaryMediumBrush | +| `ColoredTopTabBarItemForegroundPressed` | `SolidColorBrush` | OnPrimaryMediumBrush | +| `ColoredTopTabBarItemForegroundDisabled` | `SolidColorBrush` | SystemControlDisabledBaseMediumLowBrush | +| `ColoredTopTabBarItemForegroundSelected` | `SolidColorBrush` | OnPrimaryBrush | +| `ColoredTopTabBarItemForegroundSelectedPointerOver` | `SolidColorBrush` | OnPrimaryBrush | +| `ColoredTopTabBarItemForegroundSelectedPressed` | `SolidColorBrush` | OnPrimaryBrush | +| `ColoredTopTabBarItemIconForeground` | `SolidColorBrush` | SystemControlTransparentBrush | +| `ColoredTopTabBarItemIconForegroundPointerOver` | `SolidColorBrush` | OnPrimaryMediumBrush | +| `ColoredTopTabBarItemIconForegroundFocused` | `SolidColorBrush` | SystemControlTransparentBrush | +| `ColoredTopTabBarItemIconForegroundPressed` | `SolidColorBrush` | OnPrimaryMediumBrush | +| `ColoredTopTabBarItemIconForegroundDisabled` | `SolidColorBrush` | SystemControlDisabledBaseMediumLowBrush | +| `ColoredTopTabBarItemIconForegroundSelected` | `SolidColorBrush` | OnPrimaryBrush | +| `ColoredTopTabBarItemIconForegroundSelectedPointerOver` | `SolidColorBrush` | OnPrimaryBrush | +| `ColoredTopTabBarItemIconForegroundSelectedPressed` | `SolidColorBrush` | OnPrimaryBrush | +| `ColoredTopTabBarItemPointerFillBrush` | `SolidColorBrush` | SystemControlTransparentBrush | +| `ColoredTopTabBarItemPointerFillBrushPointerOver` | `SolidColorBrush` | OnPrimaryHoverBrush | +| `ColoredTopTabBarItemPointerFillBrushFocused` | `SolidColorBrush` | OnPrimaryLowBrush | +| `ColoredTopTabBarItemPointerFillBrushPressed` | `SolidColorBrush` | OnPrimaryPressedBrush | +| `ColoredTopTabBarItemPointerFillBrushDisabled` | `SolidColorBrush` | SystemControlTransparentBrush | +| `ColoredTopTabBarItemPointerFillBrushSelected` | `SolidColorBrush` | SystemControlTransparentBrush | +| `ColoredTopTabBarItemPointerFillBrushSelectedPointerOver` | `SolidColorBrush` | OnPrimaryHoverBrush | +| `ColoredTopTabBarItemPointerFillBrushSelectedPressed` | `SolidColorBrush` | OnPrimaryPressedBrush | +| `ColoredTopTabBarItemRippleFeedback` | `SolidColorBrush` | PrimaryBrush | +| `FabTabBarItemBackground` | `SolidColorBrush` | PrimaryContainerBrush | +| `FabTabBarItemBackgroundPointerOver` | `SolidColorBrush` | OnPrimaryContainerHoverBrush | +| `FabTabBarItemBackgroundFocused` | `SolidColorBrush` | OnPrimaryContainerFocusedBrush | +| `FabTabBarItemBackgroundPressed` | `SolidColorBrush` | OnPrimaryContainerPressedBrush | +| `FabTabBarItemBackgroundDisabled` | `SolidColorBrush` | OnSurfaceDisabledLowBrush | +| `FabTabBarItemBackgroundSelected` | `SolidColorBrush` | SystemControlTransparentBrush | +| `FabTabBarItemBackgroundSelectedPointerOver` | `SolidColorBrush` | SystemControlTransparentBrush | +| `FabTabBarItemBackgroundSelectedPressed` | `SolidColorBrush` | SystemControlTransparentBrush | +| `FabTabBarItemForeground` | `SolidColorBrush` | OnPrimaryContainerBrush | +| `FabTabBarItemForegroundPointerOver` | `SolidColorBrush` | OnPrimaryContainerBrush | +| `FabTabBarItemForegroundFocused` | `SolidColorBrush` | OnPrimaryContainerBrush | +| `FabTabBarItemForegroundPressed` | `SolidColorBrush` | OnPrimaryContainerBrush | +| `FabTabBarItemForegroundDisabled` | `SolidColorBrush` | OnSurfaceDisabledBrush | +| `FabTabBarItemForegroundSelected` | `SolidColorBrush` | SystemControlTransparentBrush | +| `FabTabBarItemForegroundSelectedPointerOver` | `SolidColorBrush` | SystemControlTransparentBrush | +| `FabTabBarItemForegroundSelectedPressed` | `SolidColorBrush` | SystemControlTransparentBrush | +| `FabTabBarItemIconForeground` | `SolidColorBrush` | SystemControlTransparentBrush | +| `FabTabBarItemIconForegroundPointerOver` | `SolidColorBrush` | SystemControlTransparentBrush | +| `FabTabBarItemIconForegroundFocused` | `SolidColorBrush` | SystemControlTransparentBrush | +| `FabTabBarItemIconForegroundPressed` | `SolidColorBrush` | SystemControlTransparentBrush | +| `FabTabBarItemIconForegroundDisabled` | `SolidColorBrush` | OnSurfaceDisabledBrush | +| `FabTabBarItemIconForegroundSelected` | `SolidColorBrush` | SystemControlTransparentBrush | +| `FabTabBarItemIconForegroundSelectedPointerOver` | `SolidColorBrush` | SystemControlTransparentBrush | +| `FabTabBarItemIconForegroundSelectedPressed` | `SolidColorBrush` | SystemControlTransparentBrush | +| `NavigationTabBarItemActiveIndicatorBackground` | `SolidColorBrush` | SystemControlTransparentBrush | +| `NavigationTabBarItemActiveIndicatorBackgroundPointerOver` | `SolidColorBrush` | OnSurfaceVariantHoverBrush | +| `NavigationTabBarItemActiveIndicatorBackgroundPressed` | `SolidColorBrush` | OnSurfaceVariantPressedBrush | +| `NavigationTabBarItemActiveIndicatorBackgroundDisabled` | `SolidColorBrush` | SystemControlTransparentBrush | +| `NavigationTabBarItemActiveIndicatorBackgroundSelected` | `SolidColorBrush` | SecondaryContainerBrush | +| `NavigationTabBarItemActiveIndicatorBackgroundSelectedPointerOver` | `SolidColorBrush` | OnSurfaceHoverBrush | +| `NavigationTabBarItemActiveIndicatorBackgroundSelectedPressed` | `SolidColorBrush` | OnSurfacePressedBrush | +| `NavigationTabBarItemIconForeground` | `SolidColorBrush` | SystemControlTransparentBrush | +| `NavigationTabBarItemIconForegroundPointerOver` | `SolidColorBrush` | OnSurfaceVariantBrush | +| `NavigationTabBarItemIconForegroundPressed` | `SolidColorBrush` | OnSurfaceVariantBrush | +| `NavigationTabBarItemIconForegroundDisabled` | `SolidColorBrush` | SystemControlDisabledBaseMediumLowBrush | +| `NavigationTabBarItemIconForegroundSelected` | `SolidColorBrush` | OnSecondaryContainerBrush | +| `NavigationTabBarItemIconForegroundSelectedPointerOver` | `SolidColorBrush` | OnSecondaryContainerBrush | +| `NavigationTabBarItemIconForegroundSelectedPressed` | `SolidColorBrush` | OnSecondaryContainerBrush | +| `NavigationTabBarItemErrorBrush` | `SolidColorBrush` | ErrorBrush | +| `NavigationTabBarItemOnErrorBrush` | `SolidColorBrush` | OnErrorBrush | +| `NavigationTabBarItemPointerFillBrush` | `SolidColorBrush` | SystemControlTransparentBrush | +| `NavigationTabBarItemRippleFeedback` | `SolidColorBrush` | OnSurfaceBrush | +| `TopTabBarItemBackground` | `SolidColorBrush` | SystemControlTransparentBrush | +| `TopTabBarItemBackgroundPointerOver` | `SolidColorBrush` | PrimaryHoverBrush | +| `TopTabBarItemBackgroundFocused` | `SolidColorBrush` | PrimaryLowBrush | +| `TopTabBarItemBackgroundPressed` | `SolidColorBrush` | PrimaryPressedBrush | +| `TopTabBarItemBackgroundDisabled` | `SolidColorBrush` | SystemControlTransparentBrush | +| `TopTabBarItemBackgroundSelected` | `SolidColorBrush` | SystemControlTransparentBrush | +| `TopTabBarItemBackgroundSelectedPointerOver` | `SolidColorBrush` | PrimaryHoverBrush | +| `TopTabBarItemBackgroundSelectedPressed` | `SolidColorBrush` | PrimaryPressedBrush | +| `TopTabBarItemForeground` | `SolidColorBrush` | OnSurfaceMediumBrush | +| `TopTabBarItemForegroundPointerOver` | `SolidColorBrush` | OnSurfaceMediumBrush | +| `TopTabBarItemForegroundFocused` | `SolidColorBrush` | OnSurfaceMediumBrush | +| `TopTabBarItemForegroundPressed` | `SolidColorBrush` | OnSurfaceMediumBrush | +| `TopTabBarItemForegroundDisabled` | `SolidColorBrush` | SystemControlDisabledBaseMediumLowBrush | +| `TopTabBarItemForegroundSelected` | `SolidColorBrush` | PrimaryBrush | +| `TopTabBarItemForegroundSelectedPointerOver` | `SolidColorBrush` | PrimaryBrush | +| `TopTabBarItemForegroundSelectedPressed` | `SolidColorBrush` | PrimaryBrush | +| `TopTabBarItemBorderBrush` | `SolidColorBrush` | SystemControlTransparentBrush | +| `TopTabBarItemIconForeground` | `SolidColorBrush` | SystemControlTransparentBrush | +| `TopTabBarItemIconForegroundPointerOver` | `SolidColorBrush` | OnSurfaceMediumBrush | +| `TopTabBarItemIconForegroundFocused` | `SolidColorBrush` | SystemControlTransparentBrush | +| `TopTabBarItemIconForegroundPressed` | `SolidColorBrush` | OnSurfaceMediumBrush | +| `TopTabBarItemIconForegroundDisabled` | `SolidColorBrush` | SystemControlDisabledBaseMediumLowBrush | +| `TopTabBarItemIconForegroundSelected` | `SolidColorBrush` | PrimaryBrush | +| `TopTabBarItemIconForegroundSelectedPointerOver` | `SolidColorBrush` | PrimaryBrush | +| `TopTabBarItemIconForegroundSelectedPressed` | `SolidColorBrush` | PrimaryBrush | +| `TopTabBarItemPointerFillBrush` | `SolidColorBrush` | SystemControlTransparentBrush | +| `TopTabBarItemPointerFillBrushPointerOver` | `SolidColorBrush` | PrimaryHoverBrush | +| `TopTabBarItemPointerFillBrushFocused` | `SolidColorBrush` | PrimaryLowBrush | +| `TopTabBarItemPointerFillBrushPressed` | `SolidColorBrush` | PrimaryPressedBrush | +| `TopTabBarItemPointerFillBrushDisabled` | `SolidColorBrush` | SystemControlTransparentBrush | +| `TopTabBarItemPointerFillBrushSelected` | `SolidColorBrush` | SystemControlTransparentBrush | +| `TopTabBarItemPointerFillBrushSelectedPointerOver` | `SolidColorBrush` | PrimaryHoverBrush | +| `TopTabBarItemPointerFillBrushSelectedPressed` | `SolidColorBrush` | PrimaryPressedBrush | +| `TopTabBarItemRippleFeedback` | `SolidColorBrush` | PrimaryBrush | +| `NavigationTabBarBackground` | `SolidColorBrush` | SystemControlTransparentBrush | +| `NavigationTabBarBackgroundPointerOver` | `SolidColorBrush` | SystemControlTransparentBrush | +| `NavigationTabBarBackgroundFocused` | `SolidColorBrush` | SystemControlTransparentBrush | +| `NavigationTabBarBackgroundPressed` | `SolidColorBrush` | SystemControlTransparentBrush | +| `NavigationTabBarBackgroundSelected` | `SolidColorBrush` | SystemControlTransparentBrush | +| `NavigationTabBarBackgroundSelectedPointerOver` | `SolidColorBrush` | SystemControlTransparentBrush | +| `NavigationTabBarBackgroundSelectedPressed` | `SolidColorBrush` | SystemControlTransparentBrush | +| `NavigationTabBarForeground` | `SolidColorBrush` | OnSurfaceVariantBrush | +| `NavigationTabBarForegroundPointerOver` | `SolidColorBrush` | OnSurfaceVariantBrush | +| `NavigationTabBarForegroundPressed` | `SolidColorBrush` | OnSurfaceVariantBrush | +| `NavigationTabBarForegroundDisabled` | `SolidColorBrush` | SystemControlDisabledBaseMediumLowBrush | +| `NavigationTabBarForegroundSelected` | `SolidColorBrush` | OnSurfaceBrush | +| `NavigationTabBarForegroundSelectedPointerOver` | `SolidColorBrush` | OnSurfaceBrush | +| `NavigationTabBarForegroundSelectedPressed` | `SolidColorBrush` | OnSurfaceBrush | +| `NavigationTabBarBorderBrush` | `SolidColorBrush` | SystemControlTransparentBrush | +| `NavigationTabBarTintBrush` | `SolidColorBrush` | SurfaceTintColor@NavigationTabBarTintOpacity | diff --git a/doc/cupertino-getting-started.md b/doc/cupertino-getting-started.md index 8e03f9db..6f570ea1 100644 --- a/doc/cupertino-getting-started.md +++ b/doc/cupertino-getting-started.md @@ -60,7 +60,7 @@ If your application is based on the older solution template that includes a shar - + @@ -81,4 +81,4 @@ If your application is based on the older solution template that includes a shar ## Customization -For instructions on changing the default color palette or the font family, please refer to [this guide](https://platform.uno/docs/articles/external/uno.themes/doc/cupertino-getting-started.html#customization). +For instructions on changing the default color palette or the font family, please refer to the [Customization section in Uno.Cupertino guide](https://platform.uno/docs/articles/external/uno.themes/doc/cupertino-getting-started.html#customization). diff --git a/doc/getting-started.md b/doc/getting-started.md index a0fa984f..69c3ad4e 100644 --- a/doc/getting-started.md +++ b/doc/getting-started.md @@ -87,4 +87,5 @@ using Uno.Toolkit.UI.Markup; this.Build(r => r.UseToolkit()); ``` -> [!NOTE]: If you are using the [Uno.Toolkit.WinUI.Material.Markup](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Material.Markup) NuGet package, follow the steps in the [Using C# Markup for the Material Toolkit](./material-getting-started.md#using-c-markup) guide instead as it includes the Toolkit library. +> [!NOTE] +> If you are using the [Uno.Toolkit.WinUI.Material.Markup](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Material.Markup) NuGet package, follow the steps in the [Using C# Markup for the Material Toolkit](./material-getting-started.md#using-c-markup) guide instead as it includes the Toolkit library. diff --git a/doc/helpers/FlipView-extensions.md b/doc/helpers/FlipView-extensions.md index 01950404..7331d7a7 100644 --- a/doc/helpers/FlipView-extensions.md +++ b/doc/helpers/FlipView-extensions.md @@ -7,10 +7,10 @@ Provides additional features for `FlipView`. ## Attached Properties -Property|Type|Description --|-|- -Next|FlipView| Sets the `FlipView` that should be moved to its next item -Previous|FlipView| Sets the `FlipView` that should be moved to its previous item +| Property | Type | Description | +|------------|------------|---------------------------------------------------------------| +| `Next` | `FlipView` | Sets the `FlipView` that should be moved to its next item | +| `Previous` | `FlipView` | Sets the `FlipView` that should be moved to its previous item | The `Next` and `Previous` properties will provide an easy hook to allow other controls, that derive from `ButtonBase`, to control the navigation between `FlipView.Items`, moving to the next or previous item, respectively. diff --git a/doc/helpers/Input-extensions.md b/doc/helpers/Input-extensions.md index dec3d12b..6eaf913e 100644 --- a/doc/helpers/Input-extensions.md +++ b/doc/helpers/Input-extensions.md @@ -8,19 +8,19 @@ Provides various attached properties for _input controls_, such as `TextBox` and ## Attached Properties -Property|Type|Description --|-|- -AutoDismiss|bool|Whether the soft-keyboard will be dismissed when the enter key is pressed. -AutoFocusNext|bool|Whether the focus will move to the next focusable element when the enter key is pressed.\* -AutoFocusNextElement|Control|Sets the next control to focus when the enter key is pressed.\* +| Property | Type | Description | +|------------------------|-----------|--------------------------------------------------------------------------------------------| +| `AutoDismiss` | `bool` | Whether the soft-keyboard will be dismissed when the enter key is pressed. | +| `AutoFocusNext` | `bool` | Whether the focus will move to the next focusable element when the enter key is pressed.\* | +| `AutoFocusNextElement` | `Control` | Sets the next control to focus when the enter key is pressed.\* | -AutoFocusNext and AutoFocusNextElement\*: Having either or both of the two properties set will enable the focus next behavior. AutoFocusNextElement will take precedences over AutoFocusNext when both are set. +`AutoFocusNext` and `AutoFocusNextElement`\*: Having either or both of the two properties set will enable the focus next behavior. `AutoFocusNextElement` will take precedences over `AutoFocusNext` when both are set. ### Remarks -- AutoFocusNext and AutoFocusNextElement have different focus target: - - AutoFocusNext is determined by `FocusManager.FindNextFocusableElement` - - AutoFocusNextElement is provided by the value. +- `AutoFocusNext` and `AutoFocusNextElement` have different focus target: + - `AutoFocusNext` is determined by `FocusManager.FindNextFocusableElement` + - `AutoFocusNextElement` is provided by the value. ## Usage diff --git a/doc/helpers/Selector-extensions.md b/doc/helpers/Selector-extensions.md index d2df507f..fa1a9b1b 100644 --- a/doc/helpers/Selector-extensions.md +++ b/doc/helpers/Selector-extensions.md @@ -8,9 +8,9 @@ Provides an easy integration between `PipsPager` and `Selector` controls. ## Attached Properties -Property|Type|Description --|-|- -PipsPagerProperty|PipsPager| Backing property for the `PipsPager` that will interact with the `Selector` control. +| Property | Type | Description | +|---------------------|-------------|--------------------------------------------------------------------------------------| +| `PipsPagerProperty` | `PipsPager` | Backing property for the `PipsPager` that will interact with the `Selector` control. | When the `SelectorExtensions.PipsPager` is set, the control will take care of updating the `NumberOfPages` and the `SelectedIndex` properties automatically. diff --git a/doc/helpers/StatusBar-extensions.md b/doc/helpers/StatusBar-extensions.md index 3602356d..7d267983 100644 --- a/doc/helpers/StatusBar-extensions.md +++ b/doc/helpers/StatusBar-extensions.md @@ -13,15 +13,15 @@ For iOS, `UIViewControllerBasedStatusBarAppearance` should be set to false in `i ## Attached Properties -Property|Type|Description --|-|- -Foreground|StatusBarForegroundTheme\*|Sets the foreground color for the text and icons on the status bar. Possible values are: `None, Light, Dark, Auto or AutoInverse`. -Background|Brush|Sets the background color for the status bar.
note: Due to platform limitations, only `SolidColorBrush`es are accepted. +| Property | Type | Description | +|--------------|------------------------------|------------------------------------------------------------------------------------------------------------------------------------| +| `Foreground` | `StatusBarForegroundTheme`\* | Sets the foreground color for the text and icons on the status bar. Possible values are: `None, Light, Dark, Auto or AutoInverse`. | +| `Background` | `Brush` | Sets the background color for the status bar.
note: Due to platform limitations, only `SolidColorBrush`es are accepted. | -StatusBarForegroundTheme\*: `Auto` and `AutoInverse` will set the foreground in accordance to the theme, and update itself when the system theme or the app theme changes: +`StatusBarForegroundTheme`\*: `Auto` and `AutoInverse` will set the foreground in accordance to the theme, and update itself when the system theme or the app theme changes: -- Auto: light/white in the dark mode, and dark/black in the light mode -- AutoInverse: dark/black in the dark mode, and light/white in the light mode +- `Auto`: light/white in the dark mode, and dark/black in the light mode +- `AutoInverse`: dark/black in the dark mode, and light/white in the light mode ## Usage diff --git a/doc/helpers/TabBarItem-extensions.md b/doc/helpers/TabBarItem-extensions.md index 94a07000..97b7250c 100644 --- a/doc/helpers/TabBarItem-extensions.md +++ b/doc/helpers/TabBarItem-extensions.md @@ -10,16 +10,16 @@ Provides additional features for `TabBarItem`. Property|Type|Description -|-|- -OnClickBehaviors|TBIOnClickBehavior\*|Backing property for the `TabBarItem` on-click behaviors when already selected. -OnClickBehaviorsTarget|UIElement|Optional. Backing property for the target of OnClickBehaviors.\* +`OnClickBehaviors`|`TBIOnClickBehaviors`\*|Backing property for the `TabBarItem` on-click behaviors when already selected. +`OnClickBehaviorsTarget`|UIElement|Optional. Backing property for the target of `OnClickBehaviors`.\* -TBIOnClickBehavior\*: Specifies the on-click behaviors of `TabBarItem`: +`TBIOnClickBehaviors`\*: Specifies the on-click behaviors of `TabBarItem`: - `BackNavigation`: Find the first `NavigationView` with back stack to back navigate. - `ScrollToTop`: Find the first `ListView` or `ScrollViewer` to reset scroll position. - `Auto`: All of above. -OnClickBehaviorsTarget\*: The content host which the on-click behavior is applied is either the target itself or one of its descendent (via deep first search) suitable for the behavior. When omitted, the parent of `TabBar` will serve as the target. +`OnClickBehaviorsTarget`\*: The content host which the on-click behavior is applied is either the target itself or one of its descendent (via deep first search) suitable for the behavior. When omitted, the parent of `TabBar` will serve as the target. ## Usage diff --git a/doc/helpers/VisualStateManager-extensions.md b/doc/helpers/VisualStateManager-extensions.md index 51357162..267ae82e 100644 --- a/doc/helpers/VisualStateManager-extensions.md +++ b/doc/helpers/VisualStateManager-extensions.md @@ -24,9 +24,9 @@ This "first child" is more common known as the template root within the context ## Attached Properties -Property|Type|Description --|-|- -States|string|Sets the visual states of the control.\* +| Property | Type | Description | +|----------|----------|------------------------------------------| +| `States` | `string` | Sets the visual states of the control.\* | States\*: The accepted value can be a space, comma or semi-colon separated list of visual state names. eg: @@ -96,7 +96,7 @@ States\*: The accepted value can be a space, comma or semi-colon separated list Grid.Row="1" Grid.ColumnSpan="3" /> ``` -```cs +```csharp public class ViewModel : ViewModelBase { public string PageState { get => GetProperty(); set => SetProperty(value); } diff --git a/doc/helpers/ancestor-itemscontrol-binding.md b/doc/helpers/ancestor-itemscontrol-binding.md index b0f6748a..08aedd40 100644 --- a/doc/helpers/ancestor-itemscontrol-binding.md +++ b/doc/helpers/ancestor-itemscontrol-binding.md @@ -20,13 +20,13 @@ This markup extension provides a binding to the closest parent ItemsControl. Thi ### Properties -Property|Type|Description --|-|- -Path|string|Binding path from the ancestor. +| Property | Type | Description | +|------------|----------|---------------------------------| +| `Path` | `string` | Binding path from the ancestor. | ### Usage -```cs +```csharp public class ExampleModel { public int[] Items { get; } = new[] { 1, 2, 3 }; @@ -60,14 +60,14 @@ This markup extension provides a means to bind to an ancestor of a specific type ### Properties -Property|Type|Description --|-|- -AncestorType|Type|Type of ancestor to bind from. -Path|string|Binding path from the ancestor. +| Property | Type | Description | +|----------------|----------|---------------------------------| +| `AncestorType` | `Type` | Type of ancestor to bind from. | +| `Path` | `string` | Binding path from the ancestor. | ### Usage -```cs +```csharp public class ExampleModel { public int[] Items { get; } = new[] { 1, 2, 3 }; diff --git a/doc/helpers/command-extensions.md b/doc/helpers/command-extensions.md index ef90c2ab..c6be8386 100644 --- a/doc/helpers/command-extensions.md +++ b/doc/helpers/command-extensions.md @@ -8,13 +8,13 @@ Provides Command/CommandParameter attached properties for common scenarios. ## Attached Properties -Property|Type|Description --|-|- -Command|ICommand|Sets the command to execute when `TextBox`/`PasswordBox` enter key is pressed, `ListViewBase.ItemClick`, `NavigationView.ItemInvoked`, and `ItemsRepeater` item tapped. -CommandParameter|ICommand|Sets the parameter to pass to the Command property. +| Property | Type | Description | +|--------------------|------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `Command` | `ICommand` | Sets the command to execute when `TextBox`/`PasswordBox` enter key is pressed, `ListViewBase.ItemClick`, `NavigationView.ItemInvoked`, and `ItemsRepeater` item tapped. | +| `CommandParameter` | `ICommand` | Sets the parameter to pass to the Command property. | Command on `TextBox`/`PasswordBox`\*: Having this set will also cause the keyboard dismiss on enter. -Command on `ListView`\*: [`IsItemClickEnabled`](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.listviewbase.isitemclickenabled) must also be set to true for this to work. +Command on `ListView`\*: [`IsItemClickEnabled`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.listviewbase.isitemclickenabled) must also be set to true for this to work. ### Remarks diff --git a/doc/helpers/itemsrepeater-extensions.md b/doc/helpers/itemsrepeater-extensions.md index d2195592..1a8a588f 100644 --- a/doc/helpers/itemsrepeater-extensions.md +++ b/doc/helpers/itemsrepeater-extensions.md @@ -8,13 +8,13 @@ Provides selection support for `ItemsRepeater`. ## Attached Properties -Property|Type|Description --|-|- -SelectedItem|object|Two-ways bindable property for the current/first(in Multiple mode) selected item.\* -SelectedIndex|int|Two-ways bindable property for the current/first(in Multiple mode) selected index.\* -SelectedItems|IList\|Two-ways bindable property for the current selected items.\* -SelectedIndexes|IList\|Two-ways bindable property for the current selected indexes.\* -SelectionMode|ItemsSelectionMode|Gets or sets the selection behavior: `None`, `SingleOrNone`, `Single`, `Multiple`
note: Changing this value will cause the `Selected-`properties to be re-coerced. +| Property | Type | Description | +|-------------------|----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `SelectedItem` | `object` | Two-ways bindable property for the current/first(in Multiple mode) selected item.\* | +| `SelectedIndex` | `int` | Two-ways bindable property for the current/first(in Multiple mode) selected index.\* | +| `SelectedItems` | `IList` | Two-ways bindable property for the current selected items.\* | +| `SelectedIndexes` | `IList` | Two-ways bindable property for the current selected indexes.\* | +| `SelectionMode` | `ItemsSelectionMode` | Gets or sets the selection behavior: `None`, `SingleOrNone`, `Single`, `Multiple`
note: Changing this value will cause the `Selected-`properties to be re-coerced. | ### Remarks @@ -30,7 +30,7 @@ SelectionMode|ItemsSelectionMode|Gets or sets the selection behavior: `None`, `S View-Model: -```cs +```csharp private class ViewModel : INotifyPropertyChanged { public int[] MultiItemsSource { get; set; } diff --git a/doc/helpers/resource-extensions.md b/doc/helpers/resource-extensions.md index e5d09d55..7c1c46b3 100644 --- a/doc/helpers/resource-extensions.md +++ b/doc/helpers/resource-extensions.md @@ -4,13 +4,13 @@ uid: Toolkit.Helpers.ResourceExtensions # Resource Extensions -This extension facilitates assigning a specific ResourceDictionary directly to a control's style. It simplifies [lightweight styling](../lightweight-styling.md) by eliminating 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. +This extension facilitates assigning a specific `ResourceDictionary` directly to a control's style. It simplifies [lightweight styling](../lightweight-styling.md) by eliminating 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. ## Attached Properties -Property|Type|Description --|-|- -Resources|ResourceDictionary|Gets or sets the ResourceDictionary to be applied to the control's style +| Property | Type | Description | +|-------------|----------------------|----------------------------------------------------------------------------| +| `Resources` | `ResourceDictionary` | Gets or sets the `ResourceDictionary` to be applied to the control's style | ## Usage diff --git a/doc/helpers/responsive-extension.md b/doc/helpers/responsive-extension.md index 978cd283..6fc4f4b8 100644 --- a/doc/helpers/responsive-extension.md +++ b/doc/helpers/responsive-extension.md @@ -30,14 +30,14 @@ You can workaround this by declaring the values as resources and using {StaticRe ## Properties -| Property | Type | Description | -| ---------- | ---------------- | ---------------------------------------------------------- | -| Narrowest | object | Value to be used when the screen size is at its narrowest. | -| Narrow | object | Value to be used when the screen size is narrow. | -| Normal | object | Value to be used when the screen size is normal. | -| Wide | object | Value to be used when the screen size is wide. | -| Widest | object | Value to be used when the screen size is at its widest. | -| Layout | ResponsiveLayout | Overrides the screen size thresholds/breakpoints. | +| Property | Type | Description | +|-------------|--------------------|------------------------------------------------------------| +| `Narrowest` | `object` | Value to be used when the screen size is at its narrowest. | +| `Narrow` | `object` | Value to be used when the screen size is narrow. | +| `Normal` | `object` | Value to be used when the screen size is normal. | +| `Wide` | `object` | Value to be used when the screen size is wide. | +| `Widest` | `object` | Value to be used when the screen size is at its widest. | +| `Layout` | `ResponsiveLayout` | Overrides the screen size thresholds/breakpoints. | ### ResponsiveLayout @@ -46,13 +46,13 @@ This is done using an instance of the `ResponsiveLayout` class. #### Properties -| Property | Type | Description | -| ---------- | ---------------- | ---------------------- | -| Narrowest | double | Default value is 150. | -| Narrow | double | Default value is 300. | -| Normal | double | Default value is 600. | -| Wide | double | Default value is 800. | -| Widest | double | Default value is 1080. | +| Property | Type | Description | +|-------------|----------|------------------------| +| `Narrowest` | `double` | Default value is 150. | +| `Narrow` | `double` | Default value is 300. | +| `Normal` | `double` | Default value is 600. | +| `Wide` | `double` | Default value is 800. | +| `Widest` | `double` | Default value is 1080. | #### Resolution Logics @@ -60,43 +60,43 @@ The layouts whose value(ResponsiveExtension) or template(ResponsiveView) is not Below are the selected layout at different screen width if all layouts are provided: -Width|Layout --|- -149|Narrowest -150(Narrowest)|Narrowest -151|Narrowest -299|Narrowest -300(Narrow)|Narrow -301|Narrow -599|Narrow -600(Normal)|Normal -601|Normal -799|Normal -800(Wide)|Wide -801|Wide -1079|Wide -1080(Widest)|Widest -1081|Widest +| Width | Layout | +|----------------|-----------| +| 149 | Narrowest | +| 150(Narrowest) | Narrowest | +| 151 | Narrowest | +| 299 | Narrowest | +| 300(Narrow) | Narrow | +| 301 | Narrow | +| 599 | Narrow | +| 600(Normal) | Normal | +| 601 | Normal | +| 799 | Normal | +| 800(Wide) | Wide | +| 801 | Wide | +| 1079 | Wide | +| 1080(Widest) | Widest | +| 1081 | Widest | Here are the selected layout at different screen width if only `Narrow` and `Wide` are provided: -Width|Layout --|- -149|Narrow -150(~~Narrowest~~)|Narrow -151|Narrow -299|Narrow -300(Narrow)|Narrow -301|Narrow -599|Narrow -600(~~Normal~~)|Narrow -601|Narrow -799|Narrow -800(Wide)|Wide -801|Wide -1079|Wide -1080(~~Widest~~)|Wide -1081|Wide +| Width | Layout | +|--------------------|--------| +| 149 | Narrow | +| 150(~~Narrowest~~) | Narrow | +| 151 | Narrow | +| 299 | Narrow | +| 300(Narrow) | Narrow | +| 301 | Narrow | +| 599 | Narrow | +| 600(~~Normal~~) | Narrow | +| 601 | Narrow | +| 799 | Narrow | +| 800(Wide) | Wide | +| 801 | Wide | +| 1079 | Wide | +| 1080(~~Widest~~) | Wide | +| 1081 | Wide | ## Usage diff --git a/doc/material-getting-started.md b/doc/material-getting-started.md index 1c44fccc..514ebfc4 100644 --- a/doc/material-getting-started.md +++ b/doc/material-getting-started.md @@ -20,17 +20,17 @@ Initialization of the Material Toolkit resources is handled by the specialized ` #### Constructors -| Constructor | Description | -|----------------|-------------------------------------------------------| -| MaterialToolkitTheme() | Initializes a new instance of the `MaterialToolkitTheme` resource dictionary. | -| MaterialToolkitTheme(ResourceDictionary? colorOverride, ResourceDictionary? fontOverride) | Initializes a new instance of the `MaterialToolkitTheme` resource dictionary and applies the given overrides | +| Constructor | Description | +|---------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------| +| `MaterialToolkitTheme()` | Initializes a new instance of the `MaterialToolkitTheme` resource dictionary. | +| `MaterialToolkitTheme(ResourceDictionary? colorOverride, ResourceDictionary? fontOverride)` | Initializes a new instance of the `MaterialToolkitTheme` resource dictionary and applies the given overrides | #### Properties -| Property | Type | Description | -|---------------------------|-------------------|-----------------------------------------------------------------------------------------------| -| ColorOverrideSource | string | (Optional) Gets or sets a Uniform Resource Identifier that provides the source location of a ResourceDictionary containing overrides for the default Uno.Material Color resources | -| FontOverrideSource | string | (Optional) Gets or sets a Uniform Resource Identifier that provides the source location of a ResourceDictionary containing overrides for the default Uno.Material FontFamily resources | +| Property | Type | Description | +|-----------------------|----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `ColorOverrideSource` | `string` | (Optional) Gets or sets a Uniform Resource Identifier that provides the source location of a ResourceDictionary containing overrides for the default Uno.Material Color resources | +| `FontOverrideSource` | `string` | (Optional) Gets or sets a Uniform Resource Identifier that provides the source location of a ResourceDictionary containing overrides for the default Uno.Material FontFamily resources | ## Installation @@ -81,7 +81,7 @@ If your application is based on the older solution template that includes a shar - + @@ -138,7 +138,8 @@ this.Build(r => r.UseMaterialToolkit( )); ``` -> [!NOTE]: The [Uno.Toolkit.WinUI.Material.Markup](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Material.Markup) NuGet package includes the base [Toolkit Markup package](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Markup) as a dependency. Therefore, there is no need to add the `Uno.Toolkit.WinUI.Markup` package separately. Furthermore, the `UseMaterialToolkit` extension method also initializes the Toolkit library, so there is no need to call the `UseToolkit` extension method in your `AppResources.cs`. +> [!NOTE] +> The [Uno.Toolkit.WinUI.Material.Markup](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Material.Markup) NuGet package includes the base [Toolkit Markup package](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Markup) as a dependency. Therefore, there is no need to add the `Uno.Toolkit.WinUI.Markup` package separately. Furthermore, the `UseMaterialToolkit` extension method also initializes the Toolkit library, so there is no need to call the `UseToolkit` extension method in your `AppResources.cs`. ## Additional Resources diff --git a/doc/material-migration.md b/doc/material-migration.md index 67ba7fcb..00f46f01 100644 --- a/doc/material-migration.md +++ b/doc/material-migration.md @@ -15,73 +15,73 @@ Along with the above list of new resource keys, below is a list of the resource ### Chip -Old Key|New Key|Value --|-|- -MaterialChipElevationMargin|ChipElevationMargin|4 -MaterialChipCornerRadius|ChipCornerRadius|8 -MaterialChipIconSize|ChipIconSize|18 -MaterialChipElevation|ChipElevation|4 -M3MateriaChipCheckGlyphSize|**_REMOVED_**|20 -MaterialChipBorderThickness|ChipBorderThickness|1 -MaterialChipDeleteIconLength|ChipDeleteIconLength|11 -MaterialChipDeleteIconContainerLength|ChipDeleteIconContainerLength|18 -MaterialChipSize|ChipSize|12 -MaterialChipContentMinHeight|ChipContentMinHeight|20 -MaterialChipHeight|ChipHeight|32 -MaterialChipDisabledBorderBrush|ChipBorderBrushDisabled|OnSurfaceVariantDisabledLowBrush -MaterialChipDisabledBackground|ChipBackgroundDisabled|OnSurfaceDisabledLowBrush -MaterialChipDisabledForeground|ChipForegroundDisabled|OnSurfaceDisabledBrush -MaterialChipIconDisabledForeground|ChipIconForegroundDisabled|OnSurfaceDisabledBrush -MaterialChipIconForeground|ChipIconForeground|PrimaryBrush -MaterialChipSelectedPressedForeground|**_REMOVED_**|OnSecondaryContainerBrush -MaterialChipSelectedFocusedForeground|**_REMOVED_**|OnSecondaryContainerBrush -MaterialChipSelectedPointerOverForeground|**_REMOVED_**|OnSecondaryContainerBrush -MaterialChipSelectedForeground|**_REMOVED_**|OnSecondaryContainerBrush -MaterialChipPressedForeground|ChipForegroundPressed|OnSurfaceVariantBrush -MaterialChipFocusedForeground|ChipForegroundFocused|OnSurfaceVariantBrush -> SystemControlTransparentBrush -MaterialChipPointerOverForeground|ChipForegroundPointerOver|OnSurfaceVariantBrush -MaterialChipForeground|ChipForeground|OnSurfaceVariantBrush -MaterialChipSelectedPressedStateOverlay|**_REMOVED_**|OnSecondaryContainerSelectedBrush -MaterialChipSelectedFocusedStateOverlay|**_REMOVED_**|OnSecondaryContainerFocusedBrush -MaterialChipSelectedPointerOverStateOverlay|**_REMOVED_**|OnSecondaryContainerHoverBrush -MaterialChipPressedStateOverlay|ChipStateOverlayPressed|OnSurfaceVariantPressedBrush -MaterialChipFocusedStateOverlay|ChipStateOverlayFocused|OnSurfaceVariantFocusedBrush -> SystemControlTransparentBrush -MaterialChipPointerOverStateOverlay|ChipStateOverlayPointerOver|OnSurfaceVariantHoverBrush -MaterialChipSelectedBackground|**_REMOVED_**|SecondaryContainerBrush -MaterialChipBackground|ChipBackground|SystemControlTransparentBrush +| Old Key | New Key | Value | +|-----------------------------------------------|---------------------------------|-------------------------------------------------------------------| +| `MaterialChipElevationMargin` | `ChipElevationMargin` | 4 | +| `MaterialChipCornerRadius` | `ChipCornerRadius` | 8 | +| `MaterialChipIconSize` | `ChipIconSize` | 18 | +| `MaterialChipElevation` | `ChipElevation` | 4 | +| `M3MateriaChipCheckGlyphSize` | **_REMOVED_** | 20 | +| `MaterialChipBorderThickness` | `ChipBorderThickness` | 1 | +| `MaterialChipDeleteIconLength` | `ChipDeleteIconLength` | 11 | +| `MaterialChipDeleteIconContainerLength` | `ChipDeleteIconContainerLength` | 18 | +| `MaterialChipSize` | `ChipSize` | 12 | +| `MaterialChipContentMinHeight` | `ChipContentMinHeight` | 20 | +| `MaterialChipHeight` | `ChipHeight` | 32 | +| `MaterialChipDisabledBorderBrush` | `ChipBorderBrushDisabled` | `OnSurfaceVariantDisabledLowBrush` | +| `MaterialChipDisabledBackground` | `ChipBackgroundDisabled` | `OnSurfaceDisabledLowBrush` | +| `MaterialChipDisabledForeground` | `ChipForegroundDisabled` | `OnSurfaceDisabledBrush` | +| `MaterialChipIconDisabledForeground` | `ChipIconForegroundDisabled` | `OnSurfaceDisabledBrush` | +| `MaterialChipIconForeground` | `ChipIconForeground` | `PrimaryBrush` | +| `MaterialChipSelectedPressedForeground` | **_REMOVED_** | `OnSecondaryContainerBrush` | +| `MaterialChipSelectedFocusedForeground` | **_REMOVED_** | `OnSecondaryContainerBrush` | +| `MaterialChipSelectedPointerOverForeground` | **_REMOVED_** | `OnSecondaryContainerBrush` | +| `MaterialChipSelectedForeground` | **_REMOVED_** | `OnSecondaryContainerBrush` | +| `MaterialChipPressedForeground` | `ChipForegroundPressed` | `OnSurfaceVariantBrush` | +| `MaterialChipFocusedForeground` | `ChipForegroundFocused` | `OnSurfaceVariantBrush` -> `SystemControlTransparentBrush` | +| `MaterialChipPointerOverForeground` | `ChipForegroundPointerOver` | `OnSurfaceVariantBrush` | +| `MaterialChipForeground` | `ChipForeground` | `OnSurfaceVariantBrush` | +| `MaterialChipSelectedPressedStateOverlay` | **_REMOVED_** | `OnSecondaryContainerSelectedBrush` | +| `MaterialChipSelectedFocusedStateOverlay` | **_REMOVED_** | `OnSecondaryContainerFocusedBrush` | +| `MaterialChipSelectedPointerOverStateOverlay` | **_REMOVED_** | `OnSecondaryContainerHoverBrush` | +| `MaterialChipPressedStateOverlay` | `ChipStateOverlayPressed` | `OnSurfaceVariantPressedBrush` | +| `MaterialChipFocusedStateOverlay` | `ChipStateOverlayFocused` | `OnSurfaceVariantFocusedBrush` -> `SystemControlTransparentBrush` | +| `MaterialChipPointerOverStateOverlay` | `ChipStateOverlayPointerOver` | `OnSurfaceVariantHoverBrush` | +| `MaterialChipSelectedBackground` | **_REMOVED_** | `SecondaryContainerBrush` | +| `MaterialChipBackground` | `ChipBackground` | `SystemControlTransparentBrush` | ### Divider -Old Key|New Key|Value --|-|- -MaterialDividerHeight|DividerHeight|1 +| Old Key | New Key | Value | +|-------------------------|-----------------|-------| +| `MaterialDividerHeight` | `DividerHeight` | 1 | ### TabBar -Old Key|New Key|Value --|-|- -MaterialNavigationTabBarItemLargeBadgeCornerRadius|NavigationTabBarItemLargeBadgeCornerRadius|8 -MaterialNavigationTabBarItemLargeBadgePadding|NavigationTabBarItemLargeBadgePadding|4,0 -MaterialNavigationTabBarItemLargeBadgeMargin|NavigationTabBarItemLargeBadgeMargin|32,2,0,0 -MaterialNavigationTabBarItemLargeBadgeMinWidth|NavigationTabBarItemLargeBadgeMinWidth|16 -MaterialNavigationTabBarItemLargeBadgeHeight|NavigationTabBarItemLargeBadgeHeight|16 -MaterialNavigationTabBarItemSmallBadgeMargin|NavigationTabBarItemSmallBadgeMargin|0,4,20,0 -MaterialNavigationTabBarItemSmallBadgeWidth|NavigationTabBarItemSmallBadgeWidth|6 -MaterialNavigationTabBarItemSmallBadgeHeight|NavigationTabBarItemSmallBadgeHeight|6 -MaterialFabTabBarItemPadding|FabTabBarItemPadding|20 -MaterialFabTabBarItemCornerRadius|FabTabBarItemCornerRadius|16 -MaterialFabTabBarItemIconTextPadding|FabTabBarItemIconTextPadding|12 -MaterialFabTabBarItemContentWidthOrHeight|FabTabBarItemContentWidthOrHeight|16 -MaterialFabTabBarItemOffset|FabTabBarItemOffset|-32 -MaterialTopTabBarItemContentMargin|TopTabBarItemContentMargin|0 -MaterialTopTabBarItemIconHeight|TopTabBarItemIconHeight|20 -MaterialTopTabBarHeight|TopTabBarHeight|48 -MaterialNavigationTabBarItemActiveIndicatorCornerRadius|NavigationTabBarItemActiveIndicatorCornerRadius|16 -MaterialNavigationTabBarItemPadding|NavigationTabBarItemPadding|0,12,0,16 -MaterialNavigationTabBarItemActiveIndicatorHeight|NavigationTabBarItemActiveIndicatorHeight|32 -MaterialNavigationTabBarItemActiveIndicatorWidth|NavigationTabBarItemActiveIndicatorWidth|64 -MaterialNavigationTabBarItemIconHeight|NavigationTabBarItemIconHeight|18 -MaterialNavigationTabBarWidthOrHeight|NavigationTabBarWidthOrHeight|80 +| Old Key | New Key | Value | +|-----------------------------------------------------------|---------------------------------------------------|-----------| +| `MaterialNavigationTabBarItemLargeBadgeCornerRadius` | `NavigationTabBarItemLargeBadgeCornerRadius` | 8 | +| `MaterialNavigationTabBarItemLargeBadgePadding` | `NavigationTabBarItemLargeBadgePadding` | 4,0 | +| `MaterialNavigationTabBarItemLargeBadgeMargin` | `NavigationTabBarItemLargeBadgeMargin` | 32,2,0,0 | +| `MaterialNavigationTabBarItemLargeBadgeMinWidth` | `NavigationTabBarItemLargeBadgeMinWidth` | 16 | +| `MaterialNavigationTabBarItemLargeBadgeHeight` | `NavigationTabBarItemLargeBadgeHeight` | 16 | +| `MaterialNavigationTabBarItemSmallBadgeMargin` | `NavigationTabBarItemSmallBadgeMargin` | 0,4,20,0 | +| `MaterialNavigationTabBarItemSmallBadgeWidth` | `NavigationTabBarItemSmallBadgeWidth` | 6 | +| `MaterialNavigationTabBarItemSmallBadgeHeight` | `NavigationTabBarItemSmallBadgeHeight` | 6 | +| `MaterialFabTabBarItemPadding` | `FabTabBarItemPadding` | 20 | +| `MaterialFabTabBarItemCornerRadius` | `FabTabBarItemCornerRadius` | 16 | +| `MaterialFabTabBarItemIconTextPadding` | `FabTabBarItemIconTextPadding` | 12 | +| `MaterialFabTabBarItemContentWidthOrHeight` | `FabTabBarItemContentWidthOrHeight` | 16 | +| `MaterialFabTabBarItemOffset` | `FabTabBarItemOffset` | -32 | +| `MaterialTopTabBarItemContentMargin` | `TopTabBarItemContentMargin` | 0 | +| `MaterialTopTabBarItemIconHeight` | `TopTabBarItemIconHeight` | 20 | +| `MaterialTopTabBarHeight` | `TopTabBarHeight` | 48 | +| `MaterialNavigationTabBarItemActiveIndicatorCornerRadius` | `NavigationTabBarItemActiveIndicatorCornerRadius` | 16 | +| `MaterialNavigationTabBarItemPadding` | `NavigationTabBarItemPadding` | 0,12,0,16 | +| `MaterialNavigationTabBarItemActiveIndicatorHeight` | `NavigationTabBarItemActiveIndicatorHeight` | 32 | +| `MaterialNavigationTabBarItemActiveIndicatorWidth` | `NavigationTabBarItemActiveIndicatorWidth` | 64 | +| `MaterialNavigationTabBarItemIconHeight` | `NavigationTabBarItemIconHeight` | 18 | +| `MaterialNavigationTabBarWidthOrHeight` | `NavigationTabBarWidthOrHeight` | 80 | ## Updating Material Toolkit to Uno Material v2 @@ -101,7 +101,8 @@ Along with the new Material Design 3 styles, our Material Toolkit NuGet packages > [!WARNING] > In order to continue using the v1 styles, some changes are required in your `App.xaml`. -Since the Material Toolkit has a dependency on the Uno Material library, it is required to first follow the steps in the **_Continue Using v1 Styles_** section of the [Uno Material v2 migration documentation](xref:uno.themes.material.migration). + +Since the Material Toolkit has a dependency on the Uno Material library, it is required to first follow the steps in the **_Continue Using v1 Styles_** section of the [Uno Material v2 migration documentation](https://platform.uno/docs/articles/external/uno.themes/doc/material-migration.html). The Material Toolkit v2 NuGet package contains both sets of v1 and v2 styles. Within your `App.xaml`, you will need to replace the reference to `MaterialToolkitResources` with `MaterialToolkitResourcesV1`.