docs: Improve documentation (#1012)
This commit is contained in:
Youssef Victor
GitHub
Родитель
e2917105f9
Коммит
fdadd414fd
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
[](https://gitpod.io/#https://github.com/unoplatform/uno.toolkit.ui)
|
||||
[](https://uno-platform.visualstudio.com/Uno%20Platform/_build/latest?definitionId=14&branchName=unorel%2F7.1)
|
||||
[](LICENSE)
|
||||
[](LICENSE.md)
|
||||
|
||||
Uno Toolkit provides a set of higher-level UI Controls designed specifically for multi-platform, responsive applications.
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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# <!-- markdownlint-disable-line -->
|
||||
### 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. |
|
||||
|
|
|
|||
|
|
@ -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# <!-- markdownlint-disable-line -->
|
||||
### 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# <!-- markdownlint-disable-line -->
|
||||
### 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` |
|
||||
|
|
|
|||
|
|
@ -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# <!-- markdownlint-disable-line -->
|
||||
### 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# <!-- markdownlint-disable-line -->
|
||||
### 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. <br/> note: This property only works for `ChipSelectionMode.Single` or `SingleOrNone`.
|
||||
SelectedItems|IList|Gets or sets the selected items. <br/> 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` <br/> 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. <br/> note: This property only works for `ChipSelectionMode.Single` or `SingleOrNone`. |
|
||||
| `SelectedItems` | `IList` | Gets or sets the selected items. <br/> 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` <br/> 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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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# <!-- markdownlint-disable-line -->
|
||||
### 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.<br/>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. <br/>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. <br/>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.<br/>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. <br/>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. <br/>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.
|
||||
|
|
|
|||
|
|
@ -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.<br/>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.<br/>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. <!-- markdownlint-disable-line MD037 -->
|
||||
- `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:
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
|||
<utu:LoadingView>
|
||||
```
|
||||
|
||||
```cs
|
||||
```csharp
|
||||
private class ViewModel : ViewModelBase
|
||||
{
|
||||
public string Content0 { get => GetProperty<string>(); 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;
|
||||
|
|
|
|||
|
|
@ -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# <!-- markdownlint-disable-line -->
|
||||
### 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
|
|||
|
||||
|
||||
|
||||
| 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
|
||||
<Style TargetType="NavigationBar" BasedOn="{StaticResource NativeDefaultNavigationBar}" />
|
||||
```
|
||||
|
||||
|
|
@ -100,23 +100,23 @@ By default on iOS and Android, the `VisibleBoundsPadding.PaddingMask` on `Naviga
|
|||
|
||||
## Properties
|
||||
|
||||
| Property | Windows | iOS | Android | Comments |
|
||||
|---------------------------------------|:-------:|:---:|:-------:|------------------------------------------------------ |
|
||||
| Background | x | x | x | |
|
||||
| Content | x | x | x | |
|
||||
| Foreground | x | x | x | |
|
||||
| Height | x | - | - | **iOS** and **Android**: Fixed and can't be changed. |
|
||||
| HorizontalAlignment | x | - | x | **iOS**: Always use `HorizontalAlignment.Stretch`. |
|
||||
| Opacity | x | x | x | |
|
||||
| Padding | x | x | x | **iOS** and **Android**: Please refer to the `Padding` section. |
|
||||
| MainCommand | x | x | x
|
||||
| PrimaryCommands | x | x | x | |
|
||||
| SecondaryCommands | x | - | x | **iOS**: Not supported. |
|
||||
| VerticalAlignment | x | - | x | **iOS**: Always use `VerticalAlignment.Top`. |
|
||||
| Visibility | x | x | x | |
|
||||
| Width | x | - | x | **iOS**: Always use `double.NaN`. |
|
||||
| HorizontalContentAlignment | x | - | x | **Android**: Stretch and Left are supported. **Windows**: Set `IsDynamicOverflowEnabled="False"` for proper behavior. |
|
||||
| VerticalContentAlignment | x | - | - | Only supported on Windows. **Android**: Alignment needs to be done through the content itself. |
|
||||
| Property | Windows | iOS | Android | Comments |
|
||||
|------------------------------|:-------:|:---:|:-------:|---------------------------------------------------------------------------------------------------------------------- |
|
||||
| `Background` | x | x | x | |
|
||||
| `Content` | x | x | x | |
|
||||
| `Foreground` | x | x | x | |
|
||||
| `Height` | x | - | - | **iOS** and **Android**: Fixed and can't be changed. |
|
||||
| `HorizontalAlignment` | x | - | x | **iOS**: Always use `HorizontalAlignment.Stretch`. |
|
||||
| `Opacity` | x | x | x | |
|
||||
| `Padding` | x | x | x | **iOS** and **Android**: Please refer to the `Padding` section. |
|
||||
| `MainCommand` | x | x | x | |
|
||||
| `PrimaryCommands` | x | x | x | |
|
||||
| `SecondaryCommands` | x | - | x | **iOS**: Not supported. |
|
||||
| `VerticalAlignment` | x | - | x | **iOS**: Always use `VerticalAlignment.Top`. |
|
||||
| `Visibility` | x | x | x | |
|
||||
| `Width` | x | - | x | **iOS**: Always use `double.NaN`. |
|
||||
| `HorizontalContentAlignment` | x | - | x | **Android**: Stretch and Left are supported. **Windows**: Set `IsDynamicOverflowEnabled="False"` for proper behavior. |
|
||||
| `VerticalContentAlignment` | x | - | - | Only supported on Windows. **Android**: Alignment needs to be done through the content itself. |
|
||||
|
||||
*If it's not listed, assume it's not supported.*
|
||||
|
||||
|
|
@ -126,8 +126,6 @@ Gets or sets a `Brush` that describes the background of a control.
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
Remarks:
|
||||
|
||||
* Only supports `SolidColorBrush`.
|
||||
|
|
@ -403,53 +401,53 @@ Only supports `BitmapImage` on iOS/Android
|
|||
|
||||
## Lightweight Styling
|
||||
|
||||
Key|Type|Value
|
||||
-|-|-
|
||||
NavigationBarCommandBarEllipsisIconForegroundDisabled|SolidColorBrush|TextFillColorDisabledBrush
|
||||
NavigationBarCommandBarBackgroundCompactOpenUp|SolidColorBrush|SurfaceBrush
|
||||
NavigationBarCommandBarBackgroundCompactOpenDown|SolidColorBrush|SurfaceBrush
|
||||
NavigationBarMainCommandForeground|SolidColorBrush|OnSurfaceBrush
|
||||
NavigationBarForeground|SolidColorBrush|OnSurfaceBrush
|
||||
NavigationBarBackground|SolidColorBrush|SurfaceBrush
|
||||
NavigationBarPadding|Thickness|4,0,0,0
|
||||
NavigationBarFontFamily|FontFamily|MaterialRegularFontFamily
|
||||
NavigationBarFontWeight|String|TitleLargeFontWeight
|
||||
NavigationBarFontSize|Double|TitleLargeFontSize
|
||||
MaterialModalNavigationBarMainCommandForeground|SolidColorBrush|OnSurfaceBrush
|
||||
MaterialModalNavigationBarForeground|SolidColorBrush|OnSurfaceBrush
|
||||
MaterialModalNavigationBarBackground|SolidColorBrush|SurfaceBrush
|
||||
MaterialPrimaryNavigationBarCommandBarEllipsisIconForegroundDisabled|SolidColorBrush|TextFillColorDisabledBrush
|
||||
MaterialPrimaryNavigationBarCommandBarBackgroundCompactOpenUp|SolidColorBrush|PrimaryBrush
|
||||
MaterialPrimaryNavigationBarCommandBarBackgroundCompactOpenDown|SolidColorBrush|PrimaryBrush
|
||||
MaterialPrimaryNavigationBarMainCommandForeground|SolidColorBrush|OnPrimaryBrush
|
||||
MaterialPrimaryNavigationBarForeground|SolidColorBrush|OnPrimaryBrush
|
||||
MaterialPrimaryNavigationBarBackground|SolidColorBrush|PrimaryBrush
|
||||
MaterialPrimaryAppBarButtonForeground|SolidColorBrush|OnPrimaryBrush
|
||||
MaterialPrimaryModalNavigationBarMainCommandForeground|SolidColorBrush|OnPrimaryBrush
|
||||
MaterialPrimaryModalNavigationBarForeground|SolidColorBrush|OnPrimaryBrush
|
||||
MaterialPrimaryModalNavigationBarBackground|SolidColorBrush|PrimaryBrush
|
||||
NavigationBarOverflowAppBarButtonForeground|SolidColorBrush|OnPrimaryBrush
|
||||
NavigationBarOverflowAppBarButtonBackground|SolidColorBrush|SolidColorBrush { Color = Transparent }
|
||||
NavigationBarEllipsisButtonForeground|SolidColorBrush|OnSurfaceBrush
|
||||
NavigationBarEllipsisButtonBackground|SolidColorBrush|SolidColorBrush { Color = Transparent }
|
||||
MaterialNavigationBarElevation|Double|4
|
||||
MaterialXamlNavigationBarHeight|Double|64
|
||||
MaterialNavigationBarHeight|Double|48
|
||||
MaterialNavigationBarContentMargin|Thickness|16,0,0,0
|
||||
MaterialAppBarEllipsisButtonInnerBorderMargin|Thickness|2,6,6,6
|
||||
NavigationBarMaterialEllipsisButtonFontFamily|FontFamily|MaterialRegularFontFamily
|
||||
NavigationBarMaterialEllipsisButtonFontWeight|FontWeight|SemiBold
|
||||
NavigationBarMaterialEllipsisButtonFontSize|Double|ControlContentThemeFontSize
|
||||
NavigationBarMaterialEllipsisButtonWidth|Double|AppBarExpandButtonThemeWidth
|
||||
NavBarAppBarButtonContentHeight|Double|24
|
||||
NavBarMainCommandAppBarButtonContentHeight|Double|16
|
||||
NavBarAppBarThemeCompactHeight|Double|56
|
||||
NavBarAppBarButtonPadding|Thickness|12,16
|
||||
NavBarAppBarButtonHasFlyoutChevronVisibility|Visibility|Collapsed
|
||||
| Key | Type | Value |
|
||||
|------------------------------------------------------------------------|-------------------|-----------------------------------------|
|
||||
| `NavigationBarCommandBarEllipsisIconForegroundDisabled` | `SolidColorBrush` | TextFillColorDisabledBrush |
|
||||
| `NavigationBarCommandBarBackgroundCompactOpenUp` | `SolidColorBrush` | SurfaceBrush |
|
||||
| `NavigationBarCommandBarBackgroundCompactOpenDown` | `SolidColorBrush` | SurfaceBrush |
|
||||
| `NavigationBarMainCommandForeground` | `SolidColorBrush` | OnSurfaceBrush |
|
||||
| `NavigationBarForeground` | `SolidColorBrush` | OnSurfaceBrush |
|
||||
| `NavigationBarBackground` | `SolidColorBrush` | SurfaceBrush |
|
||||
| `NavigationBarPadding` | `Thickness` | 4,0,0,0 |
|
||||
| `NavigationBarFontFamily` | `FontFamily` | MaterialRegularFontFamily |
|
||||
| `NavigationBarFontWeight` | `String` | TitleLargeFontWeight |
|
||||
| `NavigationBarFontSize` | `Double` | TitleLargeFontSize |
|
||||
| `MaterialModalNavigationBarMainCommandForeground` | `SolidColorBrush` | OnSurfaceBrush |
|
||||
| `MaterialModalNavigationBarForeground` | `SolidColorBrush` | OnSurfaceBrush |
|
||||
| `MaterialModalNavigationBarBackground` | `SolidColorBrush` | SurfaceBrush |
|
||||
| `MaterialPrimaryNavigationBarCommandBarEllipsisIconForegroundDisabled` | `SolidColorBrush` | TextFillColorDisabledBrush |
|
||||
| `MaterialPrimaryNavigationBarCommandBarBackgroundCompactOpenUp` | `SolidColorBrush` | PrimaryBrush |
|
||||
| `MaterialPrimaryNavigationBarCommandBarBackgroundCompactOpenDown` | `SolidColorBrush` | PrimaryBrush |
|
||||
| `MaterialPrimaryNavigationBarMainCommandForeground` | `SolidColorBrush` | OnPrimaryBrush |
|
||||
| `MaterialPrimaryNavigationBarForeground` | `SolidColorBrush` | OnPrimaryBrush |
|
||||
| `MaterialPrimaryNavigationBarBackground` | `SolidColorBrush` | PrimaryBrush |
|
||||
| `MaterialPrimaryAppBarButtonForeground` | `SolidColorBrush` | OnPrimaryBrush |
|
||||
| `MaterialPrimaryModalNavigationBarMainCommandForeground` | `SolidColorBrush` | OnPrimaryBrush |
|
||||
| `MaterialPrimaryModalNavigationBarForeground` | `SolidColorBrush` | OnPrimaryBrush |
|
||||
| `MaterialPrimaryModalNavigationBarBackground` | `SolidColorBrush` | PrimaryBrush |
|
||||
| `NavigationBarOverflowAppBarButtonForeground` | `SolidColorBrush` | OnPrimaryBrush |
|
||||
| `NavigationBarOverflowAppBarButtonBackground` | `SolidColorBrush` | SolidColorBrush { Color = Transparent } |
|
||||
| `NavigationBarEllipsisButtonForeground` | `SolidColorBrush` | OnSurfaceBrush |
|
||||
| `NavigationBarEllipsisButtonBackground` | `SolidColorBrush` | SolidColorBrush { Color = Transparent } |
|
||||
| `MaterialNavigationBarElevation` | `Double` | 4 |
|
||||
| `MaterialXamlNavigationBarHeight` | `Double` | 64 |
|
||||
| `MaterialNavigationBarHeight` | `Double` | 48 |
|
||||
| `MaterialNavigationBarContentMargin` | `Thickness` | 16,0,0,0 |
|
||||
| `MaterialAppBarEllipsisButtonInnerBorderMargin` | `Thickness` | 2,6,6,6 |
|
||||
| `NavigationBarMaterialEllipsisButtonFontFamily` | `FontFamily` | MaterialRegularFontFamily |
|
||||
| `NavigationBarMaterialEllipsisButtonFontWeight` | `FontWeight` | SemiBold |
|
||||
| `NavigationBarMaterialEllipsisButtonFontSize` | `Double` | ControlContentThemeFontSize |
|
||||
| `NavigationBarMaterialEllipsisButtonWidth` | `Double` | AppBarExpandButtonThemeWidth |
|
||||
| `NavBarAppBarButtonContentHeight` | `Double` | 24 |
|
||||
| `NavBarMainCommandAppBarButtonContentHeight` | `Double` | 16 |
|
||||
| `NavBarAppBarThemeCompactHeight` | `Double` | 56 |
|
||||
| `NavBarAppBarButtonPadding` | `Thickness` | 12,16 |
|
||||
| `NavBarAppBarButtonHasFlyoutChevronVisibility` | `Visibility` | Collapsed |
|
||||
|
||||
## Navigation
|
||||
|
||||
The `NavigationBar` automatically hooks itself up to the [`SystemNavigationManager.BackRequested`](https://docs.microsoft.com/en-us/uwp/api/windows.ui.core.systemnavigationmanager.backrequested?view=winrt-22000) event and will attempt to navigate back by calling `Frame.GoBack()` as long as all of the following conditions are met:
|
||||
The `NavigationBar` automatically hooks itself up to the [`SystemNavigationManager.BackRequested` event](https://learn.microsoft.com/uwp/api/windows.ui.core.systemnavigationmanager.backrequested) and will attempt to navigate back by calling `Frame.GoBack()` as long as all of the following conditions are met:
|
||||
|
||||
* `MainCommandMode` for the `NavigationBar` is set to `MainCommandMode.Back`
|
||||
* The `Frame` that contains the `NavigationBar` is currently visible
|
||||
|
|
@ -478,29 +476,29 @@ On **iOS** a `NavigationBarHelper` is available for this purpose, you only have
|
|||
|
||||
## AppBarButton
|
||||
|
||||
The `AppBarButton` in **Uno** is designed to be used the same way you would use the `AppBarButton` on **UWP**. In most cases, you should refer to the [official `AppBarButton` documentation](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.appbarbutton).
|
||||
The `AppBarButton` in **Uno** is designed to be used the same way you would use the `AppBarButton` on **UWP**. In most cases, you should refer to the [official `AppBarButton` documentation](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.appbarbutton).
|
||||
|
||||
When `AppBarButton` is used within a native `NavigationBar`, its control template is completely ignored and can't be customized.
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Windows | iOS | Android | Comments |
|
||||
|---------|:-------:|:---:|:-------:|----------|
|
||||
| Clicked | x | x | x | |
|
||||
| Event | Windows | iOS | Android | Comments |
|
||||
|-----------|:-------:|:---:|:-------:|----------|
|
||||
| `Clicked` | x | x | x | |
|
||||
|
||||
### Properties
|
||||
|
||||
| Property | Windows | iOS | Android | Comments |
|
||||
|-----------------|:-------:|:---:|:-------:|--------------------------------------------|
|
||||
| Command | x | x | x | |
|
||||
| Content | x | x* | x* | Supports `string` and `FrameworkElement` |
|
||||
| Foreground | x | x | x* | **Android**: See details below |
|
||||
| Icon | x | x* | x* | Only supports `BitmapIcon` |
|
||||
| IsEnabled | x | x | x* | **Android**: Not supported with `Content` |
|
||||
| Label | x | x* | x* | See details below |
|
||||
| Opacity | x | x | x | |
|
||||
| Visibility | x | x | x | |
|
||||
| IsInOverflow | x | - | x | **Android**: See details below |
|
||||
| Property | Windows | iOS | Android | Comments |
|
||||
|----------------|---------|-----|---------|-------------------------------------------|
|
||||
| `Command` | x | x | x | |
|
||||
| `Content` | x | x* | x* | Supports `string` and `FrameworkElement` |
|
||||
| `Foreground` | x | x | x* | **Android**: See details below |
|
||||
| `Icon` | x | x* | x* | Only supports `BitmapIcon` |
|
||||
| `IsEnabled` | x | x | x* | **Android**: Not supported with `Content` |
|
||||
| `Label` | x | x* | x* | See details below |
|
||||
| `Opacity` | x | x | x | |
|
||||
| `Visibility` | x | x | x | |
|
||||
| `IsInOverflow` | x | - | x | **Android**: See details below |
|
||||
|
||||
*If it's not listed, assume it's not supported.*
|
||||
|
||||
|
|
@ -587,11 +585,11 @@ Remarks:
|
|||
## FAQ: NavigationBar
|
||||
|
||||
### How can I remove the back button title from all pages on iOS?
|
||||
|
||||
|
||||
```xml
|
||||
xmlns:utu="using:Uno.Toolkit.UI"
|
||||
...
|
||||
<Style x:Key="MyCustomAppBarButtonStyle"
|
||||
<Style x:Key="MyCustomAppBarButtonStyle"
|
||||
BasedOn="{StaticResource AppBarButtonStyle}"
|
||||
TargetType="AppBarButton">
|
||||
<Setter Property="Label"
|
||||
|
|
@ -606,7 +604,7 @@ Remarks:
|
|||
```
|
||||
|
||||
### How can I change the back button icon/arrow/chevron in my app?
|
||||
|
||||
|
||||
```xml
|
||||
xmlns:utu="using:Uno.Toolkit.UI"
|
||||
...
|
||||
|
|
@ -631,253 +629,251 @@ Remarks:
|
|||
<AppBarButton Foreground="Red"
|
||||
ShowAsMonochrome="False" />
|
||||
</utu:NavigationBar.MainCommand>
|
||||
</utu:NavigationBar>
|
||||
</utu:NavigationBar>
|
||||
```
|
||||
|
||||
### Why does my back button display "Back" on iOS?
|
||||
|
||||
The back button will display "Back" if:
|
||||
|
||||
|
||||
The back button will display "Back" if:
|
||||
|
||||
* The previous page doesn't have a `NavigationBar`.
|
||||
* The previous page's `NavigationBar` doesn't have a `Content` of type `string`
|
||||
* The current page's `NavigationBar` doesn't set the `Label` of its `MainCommand`
|
||||
* The previous page's `NavigationBar` has a title that's too long (more than 140px)
|
||||
|
||||
### Why can't I overlap content over the NavigationBar on iOS?
|
||||
|
||||
The `NavigationBar` is not actually part of the `Page` on **iOS**, and you can't overlap content over it like you would on **UWP** or **Android**. Please refer to the **Placement** section for details.
|
||||
|
||||
|
||||
The `NavigationBar` is not actually part of the `Page` on **iOS**, and you can't overlap content over it like you would on **UWP** or **Android**. Please refer to the **Placement** section for details.
|
||||
|
||||
### Why doesn't my NavigationBar show a back button?
|
||||
|
||||
For a `NavigationBar` to show a back button, it must first be resolved by `Frame` as soon as it navigates to a `Page`. To ensure that `NavigationBar` is available as soon as the navigation starts, make sure it's directly part of a page, and not part of a `DataTemplate` or `ControlTemplate`.
|
||||
|
||||
|
||||
For a `NavigationBar` to show a back button, it must first be resolved by `Frame` as soon as it navigates to a `Page`. To ensure that `NavigationBar` is available as soon as the navigation starts, make sure it's directly part of a page, and not part of a `DataTemplate` or `ControlTemplate`.
|
||||
|
||||
### Why don't my AppBarButton visual states work?
|
||||
|
||||
You can't customize the `ControlTemplate` of `AppBarButton` when using `NavigationBar` in native mode.
|
||||
|
||||
You can't customize the `ControlTemplate` of `AppBarButton` when using `NavigationBar` in native mode.
|
||||
|
||||
### How can I add a badge to an AppBarButton?
|
||||
|
||||
You can implement your own badge by setting a custom content on `AppBarButton`:
|
||||
|
||||
```xml
|
||||
<AppBarButton>
|
||||
<AppBarButton.Content>
|
||||
<Grid Height="48"
|
||||
Width="48">
|
||||
<Image Source="ms-appx:///Assets/Icons/cart.png"
|
||||
VerticalAlignment="Center"
|
||||
HorizontalAlignment="Center" />
|
||||
<Border x:Name="Badge"
|
||||
VerticalAlignment="Top"
|
||||
HorizontalAlignment="Right"
|
||||
Background="Red"
|
||||
Margin="8,4"
|
||||
Padding="4,0"
|
||||
MinWidth="16"
|
||||
Height="16"
|
||||
CornerRadius="8">
|
||||
<TextBlock x:Name="Count"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Foreground="White"
|
||||
FontSize="8"
|
||||
Text="0" />
|
||||
</Border>
|
||||
</Grid>
|
||||
</AppBarButton.Content>
|
||||
</AppBarButton>
|
||||
```
|
||||
|
||||
|
||||
You can implement your own badge by setting a custom content on `AppBarButton`:
|
||||
|
||||
```xml
|
||||
<AppBarButton>
|
||||
<AppBarButton.Content>
|
||||
<Grid Height="48"
|
||||
Width="48">
|
||||
<Image Source="ms-appx:///Assets/Icons/cart.png"
|
||||
VerticalAlignment="Center"
|
||||
HorizontalAlignment="Center" />
|
||||
<Border x:Name="Badge"
|
||||
VerticalAlignment="Top"
|
||||
HorizontalAlignment="Right"
|
||||
Background="Red"
|
||||
Margin="8,4"
|
||||
Padding="4,0"
|
||||
MinWidth="16"
|
||||
Height="16"
|
||||
CornerRadius="8">
|
||||
<TextBlock x:Name="Count"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Foreground="White"
|
||||
FontSize="8"
|
||||
Text="0" />
|
||||
</Border>
|
||||
</Grid>
|
||||
</AppBarButton.Content>
|
||||
</AppBarButton>
|
||||
```
|
||||
|
||||
### How can I set custom content to an AppBarButton?
|
||||
|
||||
You can set a custom content to an `AppBarButton` like this:
|
||||
|
||||
```xml
|
||||
<AppBarButton>
|
||||
<AppBarButton.Content>
|
||||
<!-- Custom content goes here -->
|
||||
<TextBlock Text="asd" />
|
||||
</AppBarButton.Content>
|
||||
</AppBarButton>
|
||||
```
|
||||
|
||||
|
||||
You can set a custom content to an `AppBarButton` like this:
|
||||
|
||||
```xml
|
||||
<AppBarButton>
|
||||
<AppBarButton.Content>
|
||||
<!-- Custom content goes here -->
|
||||
<TextBlock Text="asd" />
|
||||
</AppBarButton.Content>
|
||||
</AppBarButton>
|
||||
```
|
||||
|
||||
### Why does my NavigationBar always appear at the top of the page on iOS?
|
||||
|
||||
You can't place your `NavigationBar` anywhere other than at the top of the `Page` on **iOS**. See the **Placement** section for details.
|
||||
|
||||
|
||||
You can't place your `NavigationBar` anywhere other than at the top of the `Page` on **iOS**. See the **Placement** section for details.
|
||||
|
||||
### How can I change the height of my NavigationBar?
|
||||
|
||||
You can't currently change the height of the `NavigationBar`. It is dictated by the platform and the device.
|
||||
|
||||
You can't currently change the height of the `NavigationBar`. It is dictated by the platform and the device.
|
||||
|
||||
### How can I use a Path for the AppBarButton Icon?
|
||||
|
||||
`AppBarButton` doesn't currently support `PathIcon`. Only `BitmapIcon` with PNGs is supported. Please refer to the **Icon** section.
|
||||
|
||||
|
||||
`AppBarButton` doesn't currently support `PathIcon`. Only `BitmapIcon` with PNGs is supported. Please refer to the **Icon** section.
|
||||
|
||||
### How can I customize the pressed/disabled visual states of my AppBarButton?
|
||||
|
||||
You can't currently customize the visual states of `AppBarButton` when using `NavigationBar` in native mode.
|
||||
|
||||
|
||||
You can't currently customize the visual states of `AppBarButton` when using `NavigationBar` in native mode.
|
||||
|
||||
### Why doesn't the disabled state work on my AppBarButton on Android?
|
||||
|
||||
`AppBarButton` doesn't currently support the disabled state when used with `Content` (of `string`) on **Android**. You can use an `Icon` instead.
|
||||
|
||||
|
||||
`AppBarButton` doesn't currently support the disabled state when used with `Content` (of `string`) on **Android**. You can use an `Icon` instead.
|
||||
|
||||
### How can I display two NavigationBars side by side on iOS (i.e., master-detail)
|
||||
|
||||
`Page` only supports a single `NavigationBar` at a time. To display two `NavigationBar`s side by side (i.e., master-detail), you should place two `Frame`s side by side and put a `NavigationBar` in the `Page` of each `Frame`.
|
||||
|
||||
|
||||
`Page` only supports a single `NavigationBar` at a time. To display two `NavigationBar`s side by side (i.e., master-detail), you should place two `Frame`s side by side and put a `NavigationBar` in the `Page` of each `Frame`.
|
||||
|
||||
### How can I add a burger menu to the left of my NavigationBar?
|
||||
|
||||
```xml
|
||||
xmlns:utu="using:Uno.Toolkit.UI"
|
||||
...
|
||||
<utu:NavigationBar>
|
||||
<utu:NavigationBar.MainCommand>
|
||||
<AppBarButton Command="{Binding ToggleMenu}">
|
||||
<AppBarButton.Icon>
|
||||
<BitmapIcon UriSource="ms-appx:///Assets/Icons/menu.png" />
|
||||
</AppBarButton.Icon>
|
||||
</AppBarButton>
|
||||
</utu:NavigationBar.MainCommand>
|
||||
</utu:NavigationBar>
|
||||
```
|
||||
|
||||
```xml
|
||||
xmlns:utu="using:Uno.Toolkit.UI"
|
||||
...
|
||||
<utu:NavigationBar>
|
||||
<utu:NavigationBar.MainCommand>
|
||||
<AppBarButton Command="{Binding ToggleMenu}">
|
||||
<AppBarButton.Icon>
|
||||
<BitmapIcon UriSource="ms-appx:///Assets/Icons/menu.png" />
|
||||
</AppBarButton.Icon>
|
||||
</AppBarButton>
|
||||
</utu:NavigationBar.MainCommand>
|
||||
</utu:NavigationBar>
|
||||
```
|
||||
|
||||
### Why doesn't Flyout work on my AppBarButton?
|
||||
|
||||
`AppBarButton` doesn't currently support `Flyout` when using `NavigationBar` in native mode. You can use `MenuFlyout` instead.
|
||||
|
||||
|
||||
`AppBarButton` doesn't currently support `Flyout` when using `NavigationBar` in native mode. You can use `MenuFlyout` instead.
|
||||
|
||||
### Why can't I change the Foreground of my AppBarButton on Android?
|
||||
|
||||
`AppBarButton` doesn't currently support `Foreground` when displaying text (using `Content` of `string`).
|
||||
|
||||
However, you can change the color of all textual `AppBarButton`s globally using **Android** styles:
|
||||
|
||||
**Colors.xml**
|
||||
|
||||
```xml
|
||||
<color name="red">#FFFF0000</color>
|
||||
```
|
||||
|
||||
**Styles.xml**
|
||||
`AppBarButton` doesn't currently support `Foreground` when displaying text (using `Content` of `string`).
|
||||
|
||||
```xml
|
||||
<item name="android:actionMenuTextColor">@color/red</item>
|
||||
<item name="actionMenuTextColor">@color/red</item>
|
||||
```
|
||||
However, you can change the color of all textual `AppBarButton`s globally using **Android** styles:
|
||||
|
||||
If you need the button to display a different color to reflect being in a disabled state, you can add a selector in its own file, under res/color, like so:
|
||||
|
||||
**PrimaryTextColorSelector.xml**
|
||||
**Colors.xml**
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
|
||||
<item android:state_enabled="false" android:color="#88888888"/>
|
||||
<item android:color="#FF00FFFF"/>
|
||||
</selector>
|
||||
```
|
||||
|
||||
**Styles.xml**
|
||||
```xml
|
||||
<color name="red">#FFFF0000</color>
|
||||
```
|
||||
|
||||
**Styles.xml**
|
||||
|
||||
```xml
|
||||
<item name="android:actionMenuTextColor">@color/red</item>
|
||||
<item name="actionMenuTextColor">@color/red</item>
|
||||
```
|
||||
|
||||
If you need the button to display a different color to reflect being in a disabled state, you can add a selector in its own file, under res/color, like so:
|
||||
|
||||
**PrimaryTextColorSelector.xml**
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
|
||||
<item android:state_enabled="false" android:color="#88888888"/>
|
||||
<item android:color="#FF00FFFF"/>
|
||||
</selector>
|
||||
```
|
||||
|
||||
**Styles.xml**
|
||||
|
||||
```xml
|
||||
<item name="android:actionMenuTextColor">@color/PrimaryTextColorSelector</item>
|
||||
<item name="actionMenuTextColor">@color/PrimaryTextColorSelector</item>
|
||||
```
|
||||
|
||||
```xml
|
||||
<item name="android:actionMenuTextColor">@color/PrimaryTextColorSelector</item>
|
||||
<item name="actionMenuTextColor">@color/PrimaryTextColorSelector</item>
|
||||
```
|
||||
|
||||
### How can I customize the font of the NavigationBar title/content?
|
||||
|
||||
To customize the font of the `NavigationBar`'s title, you must set a custom `FrameworkElement` as the `Content` of your `NavigationBar`:
|
||||
|
||||
```xml
|
||||
xmlns:utu="using:Uno.Toolkit.UI"
|
||||
...
|
||||
<utu:NavigationBar>
|
||||
<utu:NavigationBar.Content>
|
||||
<TextBlock Text="Title"
|
||||
FontFamily="{StaticResource CustomFontFamily}" />
|
||||
</utu:NavigationBar.Content>
|
||||
</utu:NavigationBar>
|
||||
```
|
||||
|
||||
|
||||
To customize the font of the `NavigationBar`'s title, you must set a custom `FrameworkElement` as the `Content` of your `NavigationBar`:
|
||||
|
||||
```xml
|
||||
xmlns:utu="using:Uno.Toolkit.UI"
|
||||
...
|
||||
<utu:NavigationBar>
|
||||
<utu:NavigationBar.Content>
|
||||
<TextBlock Text="Title"
|
||||
FontFamily="{StaticResource CustomFontFamily}" />
|
||||
</utu:NavigationBar.Content>
|
||||
</utu:NavigationBar>
|
||||
```
|
||||
|
||||
### Why doesn't my NavigationBar scroll when placed inside a ScrollViewer on iOS?
|
||||
|
||||
`NavigationBar` can't be placed inside a `ScrollViewer`. It must be anchored to the top of your `Page` at all times. Please refer to the **Placement** section for details.
|
||||
|
||||
|
||||
`NavigationBar` can't be placed inside a `ScrollViewer`. It must be anchored to the top of your `Page` at all times. Please refer to the **Placement** section for details.
|
||||
|
||||
### How can I change the color of the ripple effect when pressing on AppBarButtons on Android?
|
||||
|
||||
You can change the color of the ripple effect globally using Android styles:
|
||||
|
||||
**Colors.xml**
|
||||
|
||||
```xml
|
||||
<!-- https://android.googlesource.com/platform/frameworks/support/+/415f740/v7/appcompat/res/values/colors_material.xml -->
|
||||
<color name="ripple_material_light">#20444444</color>
|
||||
<color name="ripple_material_dark">#20ffffff</color>
|
||||
```
|
||||
|
||||
**Styles.xml**
|
||||
You can change the color of the ripple effect globally using Android styles:
|
||||
|
||||
**Colors.xml**
|
||||
|
||||
```xml
|
||||
<!-- https://android.googlesource.com/platform/frameworks/support/+/415f740/v7/appcompat/res/values/colors_material.xml -->
|
||||
<color name="ripple_material_light">#20444444</color>
|
||||
<color name="ripple_material_dark">#20ffffff</color>
|
||||
```
|
||||
|
||||
**Styles.xml**
|
||||
|
||||
```xml
|
||||
<item name="colorControlHighlight">@color/ripple_material_dark</item>
|
||||
```
|
||||
|
||||
```xml
|
||||
<item name="colorControlHighlight">@color/ripple_material_dark</item>
|
||||
```
|
||||
|
||||
### Why doesn't my AppBarToggleButton work?
|
||||
|
||||
`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"
|
||||
...
|
||||
<utu:NavigationBar>
|
||||
<AppBarButton Command="{Binding ToggleIsFavorite}">
|
||||
<AppBarButton.Icon>
|
||||
<BitmapIcon UriSource="{Binding IsFavorite, Converter={StaticResource IsFavoriteToStarIcon}}" />
|
||||
</AppBarButton.Icon>
|
||||
</AppBarButton>
|
||||
</utu:NavigationBar>
|
||||
```
|
||||
|
||||
### 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"
|
||||
...
|
||||
<Grid>
|
||||
<Image Source="http://www.example.com/image.png">
|
||||
<utu:NavigationBar Background="Transparent"
|
||||
VerticalAlignment="Top" />
|
||||
</Grid>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 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"
|
||||
...
|
||||
<Style x:Key="MyCustomMainCommandStyle" TargetType="AppBarButton">
|
||||
<Setter Property="Icon">
|
||||
<Setter.Value>
|
||||
<BitmapIcon UriSource="ms-appx:///Assets/Icons/back.png" />
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Style>
|
||||
|
||||
<Style TargetType="utu:NavigationBar">
|
||||
<Setter Property="MainCommandStyle"
|
||||
Value="{StaticResource MyCustomMainCommandStyle}" />
|
||||
</Setter>
|
||||
</Style>
|
||||
```
|
||||
`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"
|
||||
...
|
||||
<utu:NavigationBar>
|
||||
<AppBarButton Command="{Binding ToggleIsFavorite}">
|
||||
<AppBarButton.Icon>
|
||||
<BitmapIcon UriSource="{Binding IsFavorite, Converter={StaticResource IsFavoriteToStarIcon}}" />
|
||||
</AppBarButton.Icon>
|
||||
</AppBarButton>
|
||||
</utu:NavigationBar>
|
||||
```
|
||||
|
||||
### 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"
|
||||
...
|
||||
<Grid>
|
||||
<Image Source="http://www.example.com/image.png">
|
||||
<utu:NavigationBar Background="Transparent"
|
||||
VerticalAlignment="Top" />
|
||||
</Grid>
|
||||
```
|
||||
|
||||
### 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"
|
||||
...
|
||||
<Style x:Key="MyCustomMainCommandStyle" TargetType="AppBarButton">
|
||||
<Setter Property="Icon">
|
||||
<Setter.Value>
|
||||
<BitmapIcon UriSource="ms-appx:///Assets/Icons/back.png" />
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Style>
|
||||
|
||||
<Style TargetType="utu:NavigationBar">
|
||||
<Setter Property="MainCommandStyle"
|
||||
Value="{StaticResource MyCustomMainCommandStyle}" />
|
||||
</Setter>
|
||||
</Style>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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`.
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
|||
|
||||
|
||||
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -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# <!-- markdownlint-disable-line -->
|
||||
### 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# <!-- markdownlint-disable-line -->
|
||||
### 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<TabBar, TabBarSelectionChangedEventArgs>`|Occurs when a `TabBarItem`'s selection state has changed.
|
||||
| Event | Type | Description |
|
||||
|--------------------|--------------------------------------------------------------|-----------------------------------------------------------|
|
||||
| `SelectionChanged` | `TypedEventHandler<TabBar, TabBarSelectionChangedEventArgs>` | 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 |
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ If your application is based on the older solution template that includes a shar
|
|||
|
||||
<!-- Load WinUI resources -->
|
||||
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
|
||||
|
||||
|
||||
<!-- Load Cupertino resources -->
|
||||
<CupertinoColors xmlns="using:Uno.Cupertino" />
|
||||
<CupertinoFonts xmlns="using:Uno.Cupertino" />
|
||||
|
|
@ -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).
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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. <br/> 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. <br/> 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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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<string>(); set => SetProperty(value); }
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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\<object>|Two-ways bindable property for the current selected items.\*
|
||||
SelectedIndexes|IList\<int>|Two-ways bindable property for the current selected indexes.\*
|
||||
SelectionMode|ItemsSelectionMode|Gets or sets the selection behavior: `None`, `SingleOrNone`, `Single`, `Multiple` <br/> 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<object>` | Two-ways bindable property for the current selected items.\* |
|
||||
| `SelectedIndexes` | `IList<int>` | Two-ways bindable property for the current selected indexes.\* |
|
||||
| `SelectionMode` | `ItemsSelectionMode` | Gets or sets the selection behavior: `None`, `SingleOrNone`, `Single`, `Multiple` <br/> 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; }
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
|||
|
||||
<!-- Load WinUI resources -->
|
||||
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
|
||||
|
||||
|
||||
<!-- Load Material Toolkit resources (also loads the base Uno.Material resources) -->
|
||||
<MaterialToolkitTheme xmlns="using:Uno.Toolkit.UI.Material" />
|
||||
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
<!-- TODO: Use xref link. For some reason, it currently doesn't work. -->
|
||||
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`.
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче