diff --git a/doc/helpers/FlipView-extensions.md b/doc/helpers/FlipView-extensions.md index d40eb3fee..019504042 100644 --- a/doc/helpers/FlipView-extensions.md +++ b/doc/helpers/FlipView-extensions.md @@ -1,11 +1,12 @@ --- uid: Toolkit.Helpers.FlipViewExtensions --- -# SelectorExtensions Attached Properties +# FlipView Extensions Provides additional features for `FlipView`. -## Properties +## Attached Properties + Property|Type|Description -|-|- Next|FlipView| Sets the `FlipView` that should be moved to its next item diff --git a/doc/helpers/Input-extensions.md b/doc/helpers/Input-extensions.md index b08844f69..dec3d12b2 100644 --- a/doc/helpers/Input-extensions.md +++ b/doc/helpers/Input-extensions.md @@ -1,10 +1,13 @@ --- uid: Toolkit.Helpers.InputExtensions --- -# InputExtensions Attached Properties + +# Input Extensions + Provides various attached properties for _input controls_, such as `TextBox` and `PasswordBox`. -## Properties +## Attached Properties + Property|Type|Description -|-|- AutoDismiss|bool|Whether the soft-keyboard will be dismissed when the enter key is pressed. @@ -14,11 +17,13 @@ AutoFocusNextElement|Control|Sets the next control to focus when the enter key i 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. ## Usage + ```xml xmlns:utu="using:Uno.Toolkit.UI" diff --git a/doc/helpers/Selector-extensions.md b/doc/helpers/Selector-extensions.md index d070e78cd..6055ac49a 100644 --- a/doc/helpers/Selector-extensions.md +++ b/doc/helpers/Selector-extensions.md @@ -1,11 +1,13 @@ --- uid: Toolkit.Helpers.SelectorExtensions --- -# SelectorExtensions Attached Properties + +# Selector Extensions Provides an easy integration between `PipsPager` and `Selector` controls. -## Properties +## Attached Properties + Property|Type|Description -|-|- PipsPagerProperty|PipsPager| Backing property for the `PipsPager` that will interact with the `Selector` control. @@ -13,6 +15,7 @@ PipsPagerProperty|PipsPager| Backing property for the `PipsPager` that will inte When the `SelectorExtensions.PipsPager` is set, the control will take care of updating the `NumberOfPages` and the `SelectedIndex` properties automatically. ## Usage + ```xml xmlns:utu="using:Uno.Toolkit.UI" diff --git a/doc/helpers/StatusBar-extensions.md b/doc/helpers/StatusBar-extensions.md index d833883d3..2df0e395a 100644 --- a/doc/helpers/StatusBar-extensions.md +++ b/doc/helpers/StatusBar-extensions.md @@ -1,14 +1,18 @@ --- uid: Toolkit.Helpers.StatusBarExtensions --- -# StatusBar Attached Properties -Provides two attached properties on `Page` to controls the visual of the status bar on mobile platforms. + +# StatusBar Extensions + +Provides two attached properties on `Page` to control the visuals of the status bar on mobile platforms. ## Remarks + The attached properties do nothing on platforms other than iOS and Android. -For iOS, `UIViewControllerBasedStatusBarAppearance` should set to false in `info.plist`. +For iOS, `UIViewControllerBasedStatusBarAppearance` should be set to false in `info.plist`. + +## Attached Properties -## 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`. @@ -19,6 +23,7 @@ StatusBarForegroundTheme\*: `Auto` and `AutoInverse` will set the foreground in - AutoInverse: dark/black in the dark mode, and light/white in the light mode ## Usage + ```xml xmlns:utu="using:Uno.Toolkit.UI" diff --git a/doc/helpers/VisualStateManager-extensions.md b/doc/helpers/VisualStateManager-extensions.md index 19ce033d3..0329e3b3f 100644 --- a/doc/helpers/VisualStateManager-extensions.md +++ b/doc/helpers/VisualStateManager-extensions.md @@ -1,10 +1,13 @@ --- uid: Toolkit.Helpers.VisualStateManagerExtensions --- -# VisualStateManagerExtensions Attached Properties + +# VisualStateManager Extensions + Provides a way of manipulating the visual states of `Control` with attached property. ## Remarks + `VisualStateManager.GoToState` is typically used with `Control` where you would set `` on the root element of the ControlTemplate. Because this class is implemented using the same method, it means that if you are setting `StatesProperty` on an element, the `VisualStateManager.VisualStateGroups` should not be set on the very same element, but its first child: ```xml @@ -15,9 +18,11 @@ Provides a way of manipulating the visual states of `Control` with attached prop ... ``` + This "first child" is more common known as the template root within the context of a `ControlTemplate` where you typically have a top-level `Grid`/`Border`/Panel with the x:Name that contains "Root". -## Properties +## Attached Properties + Property|Type|Description -|-|- States|string|Sets the visual states of the control.\* @@ -110,4 +115,3 @@ public class ViewModel : ViewModelBase } } ``` - diff --git a/doc/helpers/ancestor-itemscontrol-binding.md b/doc/helpers/ancestor-itemscontrol-binding.md index 8310bb836..6ecdf2ef6 100644 --- a/doc/helpers/ancestor-itemscontrol-binding.md +++ b/doc/helpers/ancestor-itemscontrol-binding.md @@ -1,22 +1,28 @@ --- uid: Toolkit.Helpers.Bindings --- + # AncestorBinding & ItemsControlBinding + These markup extensions provides relative binding based on ancestor type. If you are familiar with WPF, they are very similar to `{RelativeSource Mode=FindAncestor}`. ## Remarks + Both of the markup extensions are available for all **non-Windows** UWP platforms as well as all WinUI 3 platforms. ## AncestorBinding + This markup extension provides a mean 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. ### Usage + ```xml xmlns:utu="using:Uno.Toolkit.UI" @@ -34,14 +40,17 @@ xmlns:utu="using:Uno.Toolkit.UI" ``` ## ItemsControlBinding + This markup extension provides a binding to the closest parent ItemsControl. This markup can be used to access the parent ItemsControl from inside of the ItemTemplate. ### Properties + Property|Type|Description -|-|- Path|string|Binding path from the ancestor. ### Usage + ```xml xmlns:utu="using:Uno.Toolkit.UI" ... diff --git a/doc/helpers/command-extensions.md b/doc/helpers/command-extensions.md index d15eedba1..ef90c2ab9 100644 --- a/doc/helpers/command-extensions.md +++ b/doc/helpers/command-extensions.md @@ -1,10 +1,13 @@ --- uid: Toolkit.Helpers.CommandExtensions --- -# CommandExtensions Attached Properties + +# Command Extensions + Provides Command/CommandParameter attached properties for common scenarios. -## Properties +## 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. @@ -14,6 +17,7 @@ Command on `TextBox`/`PasswordBox`\*: Having this set will also cause the keyboa 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. ### Remarks + - For Command, the relevant parameter is also provided for the `CanExecute` and `Execute` call: > Unless CommandParameter is set, which replaces the following. - `TextBox.Text` @@ -23,6 +27,7 @@ Command on `ListView`\*: [`IsItemClickEnabled`](https://docs.microsoft.com/en-us - `ItemsRepeater`'s item root's DataContext ## Usage + ```xml xmlns:utu="using:Uno.Toolkit.UI" @@ -33,16 +38,16 @@ xmlns:utu="using:Uno.Toolkit.UI" + IsItemClickEnabled="True" + utu:CommandExtensions.Command="{Binding UpdateSelection}" /> - - - - - + + + + + diff --git a/doc/helpers/itemsrepeater-extensions.md b/doc/helpers/itemsrepeater-extensions.md index 279afcea2..ce26070e1 100644 --- a/doc/helpers/itemsrepeater-extensions.md +++ b/doc/helpers/itemsrepeater-extensions.md @@ -1,10 +1,13 @@ --- uid: Toolkit.Helpers.ItemRepeaterExtensions --- -# ItemsRepeaterExtensions Attached Properties + +# ItemsRepeater Extensions + Provides selection support for `ItemsRepeater`. -## Properties +## Attached Properties + Property|Type|Description -|-|- SelectedItem|object|Two-ways bindable property for the current/first(in Multiple mode) selected item.\* @@ -14,6 +17,7 @@ SelectedIndexes|IList\|Two-ways bindable property for the current selected SelectionMode|ItemsSelectionMode|Gets or sets the selection behavior: `None`, `SingleOrNone`, `Single`, `Multiple`
note: Changing this value will cause the `Selected-`properties to be re-coerced. ### Remarks + - `Selected-`properties only takes effect when `SelectionMode` is set to a valid value that is not `None`. - `ItemsSelectionMode`: Defines constants that specify the selection behavior. > Different numbers of selected items are guaranteed: None=0, SingleOrNone=0 or 1, Single=1, Multiple=0 or many. @@ -23,6 +27,7 @@ SelectionMode|ItemsSelectionMode|Gets or sets the selection behavior: `None`, `S - `Multiple`: The current item cannot be deselected. ## Usage + ```xml xmlns:utu="using:Uno.Toolkit.UI" @@ -45,5 +50,6 @@ xmlns:muxc="using:Microsoft.UI.Xaml.Controls" ``` ### Remarks + - The selection feature from this extensions support ItemTemplate whose the root element is a `SelectorItem` or `ToggleButton`(which includes `Chip`). - `RadioButton`: Multiple mode is not supported due to control limitation. diff --git a/doc/helpers/resource-extensions.md b/doc/helpers/resource-extensions.md index fc093af4c..e5d09d559 100644 --- a/doc/helpers/resource-extensions.md +++ b/doc/helpers/resource-extensions.md @@ -2,35 +2,43 @@ uid: Toolkit.Helpers.ResourceExtensions --- -## Resources +# 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. +## Attached Properties + +Property|Type|Description +-|-|- +Resources|ResourceDictionary|Gets or sets the ResourceDictionary to be applied to the control's style + +## Usage + Here is an example of how lightweight styling could be applied on a Button's style: ```xml ``` diff --git a/doc/toc.yml b/doc/toc.yml index 05ec11f0e..356c13772 100644 --- a/doc/toc.yml +++ b/doc/toc.yml @@ -49,19 +49,26 @@ items: - name: AncestorBinding and ItemsControlBinding href: helpers/ancestor-itemscontrol-binding.md - - name: CommandExtensions attached properties + - name: CommandExtensions Extensions href: helpers/command-extensions.md - - name: InputExtensions attached properties + - name: FlipView Extensions + href: helpers/FlipView-extensions.md + - name: InputExtensions Extensions href: helpers/input-extensions.md - - name: ItemsRepeaterExtensions Attached Properties + - name: ItemsRepeater Extensions href: helpers/itemsrepeater-extensions.md - name: Responsive markup extension href: helpers/responsive-extension.md - name: StatusBar attached properties + - name: Resource Extensions + href: helpers/resource-extensions.md + - name: Selector Extensions + href: helpers/Selector-extensions.md + - name: StatusBar Extensions href: helpers/StatusBar-extensions.md - - name: TabBarItem attached properties + - name: TabBarItem Extensions href: helpers/TabBarItem-extensions.md - - name: VisualStateManager attached properties + - name: VisualStateManager Extensions href: helpers/VisualStateManager-extensions.md # ***************** Reference\Styles ********************** - name: Styles