diff --git a/docs/controls/AdaptiveGridView.md b/docs/controls/AdaptiveGridView.md index 735d44733..b9df2289b 100644 --- a/docs/controls/AdaptiveGridView.md +++ b/docs/controls/AdaptiveGridView.md @@ -1,160 +1,161 @@ ---- -title: AdaptiveGridView XAML Control -author: nmetulev -description: The AdaptiveGridView Control presents items in a evenly-spaced set of columns to fill the total available display space. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, AdaptiveGridView, xaml control, xaml -dev_langs: - - csharp - - vb ---- - -# AdaptiveGridView XAML Control - -The [AdaptiveGridView Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.adaptivegridview) presents items in a evenly-spaced set of columns to fill the total available display space. It reacts to changes in the layout as well as the content so it can adapt to different form factors automatically. - -There are 3 ways to use this Control: - -1. You can set `DesiredWidth` and `ItemHeight`, which will scale the **width** of each item and adjust the number of columns on demand using all horizontal space. - -2. You can set `DesiredWidth` only. This will mean that rows will take up as much space as required, using all horizontal space. - -3. Using `OneRowModeEnabled`, you can set `DesiredWidth` and `ItemHeight` which will adjust the **width** of each item and the number of visible columns on demand, using all horizontal space. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=AdaptiveGridView) - -## Syntax - -```xaml - - - - -``` - -## Sample Output - -![AdaptiveGridView animation](../resources/images/Controls/AdaptiveGridView.gif) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| DesiredWidth | double | Gets or sets the desired width of each item | -| ItemClickCommand | ICommand | Gets or sets the command to execute when an item is clicked and the IsItemClickEnabled property is true | -| ItemHeight | double | Gets or sets the height of each item in the grid | -| ItemsPanel | ItemsPanelTemplate | Gets the template that defines the panel that controls the layout of items | -| OneRowModeEnabled | Boolean | Gets or sets a value indicating whether only one row should be displayed | -| StretchContentForSingleRow | Boolean | Gets or sets a value indicating whether the control should stretch the content to fill at least one row | - -> [!IMPORTANT] -> ItemHeight property must be set when OneRowModeEnabled property set as `true` - -## Examples - -1. Using `DesiredWidth` in combination with `ItemHeight`: - - ![AdaptiveGridView DesiredHeight and ItemHeight](../resources/images/Controls/AdaptiveGridView/AdaptiveGridView-DesiredWidthItemHeight.gif) - -2. Maintain aspect ratio by setting `DesiredWidth` with no `ItemHeight` set: - - ![AdaptiveGridView Viewbox scaled](../resources/images/Controls/AdaptiveGridView/AdaptiveGridView-ViewboxAspectRatio.gif) - - This still requires the `ItemTemplate` to contain some scaling logic, this can be done with Height and Width set on the content inside of a Viewbox, or using custom view logic. - - - Using a `Viewbox`: - - Using the `Height` and `Width` properties of content inside of a `Viewbox` means that the content inside will scale linearly when **Width** and **Height** changes, which causes a zoom-like effect. This might not be a desired effect, and it will also likely incur a slight performance penalty. - - _ItemTemplate implementation_ - - ```xaml - - - - - - - - ``` - - - To use custom view logic: - - Using `MeasureOverride` on a ContentControl allows you to specify the **Width** and **Height** of the content, which might reap better performance compared to a `Viewbox`. The dimensions of the content space will change uniformly, but the content will not zoom. - - _Custom logic implementation_ - - ```csharp - public class AspectContentControl : ContentControl - { - protected override Size MeasureOverride(Size availableSize) - { - return new Size(availableSize.Width, availableSize.Width * 1.6); - } - } - ``` - ```vb - Public Class AspectContentControl - Inherits ContentControl - - Protected Overrides Function MeasureOverride(ByVal availableSize As Size) As Size - Return New Size(availableSize.Width, availableSize.Width * 1.6) - End Function - End Class - ``` - - _ItemTemplate implementation_ - - ```xaml - - - - - - - - ``` - -3. Using `OneRowModeEnabled`: - - ![AdaptiveGridView OneRowMode](../resources/images/Controls/AdaptiveGridView/AdaptiveGridView-OneRowMode.gif) - - If there are not enough items to fill one row, the control will stretch the items until all available space is filled. This can result in much wider items than specified. If you prefer your items to always stay close to the DesiredWidth, you can set the **StretchContentForSingleRow** property to **false**, to prevent further stretching. - -## Sample Project - -[AdaptiveGridView Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AdaptiveGridView). You can [see this in action](uwpct://Controls?sample=AdaptiveGridView) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - -- [AdaptiveGridView source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/AdaptiveGridView) - -## Related Topics - +--- +title: AdaptiveGridView +author: nmetulev +description: The AdaptiveGridView Control presents items in an evenly-spaced set of columns to fill the total available display space. + +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, AdaptiveGridView, xaml control, xaml +dev_langs: + - csharp + - vb +--- + +# AdaptiveGridView + +The [AdaptiveGridView](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.adaptivegridview) control presents items in a evenly-spaced set of columns to fill the total available display space. It reacts to changes in the layout as well as the content so it can adapt to different form factors automatically. + +There are 3 ways to use this control: + +1. You can set `DesiredWidth` and `ItemHeight`, which will scale the **width** of each item and adjust the number of columns on demand using all horizontal space. + +2. You can set `DesiredWidth` only. This will mean that rows will take up as much space as required, using all horizontal space. + +3. Using `OneRowModeEnabled`, you can set `DesiredWidth` and `ItemHeight` which will adjust the **width** of each item and the number of visible columns on demand, using all horizontal space. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=AdaptiveGridView) + +## Syntax + +```xaml + + + + +``` + +## Sample Output + +![AdaptiveGridView animation](../resources/images/Controls/AdaptiveGridView.gif) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| DesiredWidth | double | Gets or sets the desired width of each item | +| ItemClickCommand | ICommand | Gets or sets the command to execute when an item is clicked and the IsItemClickEnabled property is true | +| ItemHeight | double | Gets or sets the height of each item in the grid | +| ItemsPanel | ItemsPanelTemplate | Gets the template that defines the panel that controls the layout of items | +| OneRowModeEnabled | Boolean | Gets or sets a value indicating whether only one row should be displayed | +| StretchContentForSingleRow | Boolean | Gets or sets a value indicating whether the control should stretch the content to fill at least one row | + +> [!IMPORTANT] +> ItemHeight property must be set when OneRowModeEnabled property set as `true` + +## Examples + +1. Using `DesiredWidth` in combination with `ItemHeight`: + + ![AdaptiveGridView DesiredHeight and ItemHeight](../resources/images/Controls/AdaptiveGridView/AdaptiveGridView-DesiredWidthItemHeight.gif) + +2. Maintain aspect ratio by setting `DesiredWidth` with no `ItemHeight` set: + + ![AdaptiveGridView Viewbox scaled](../resources/images/Controls/AdaptiveGridView/AdaptiveGridView-ViewboxAspectRatio.gif) + + This still requires the `ItemTemplate` to contain some scaling logic, this can be done with Height and Width set on the content inside of a Viewbox, or using custom view logic. + + - Using a `Viewbox`: + + Using the `Height` and `Width` properties of content inside of a `Viewbox` means that the content inside will scale linearly when **Width** and **Height** changes, which causes a zoom-like effect. This might not be a desired effect, and it will also likely incur a slight performance penalty. + + _ItemTemplate implementation_ + + ```xaml + + + + + + + + ``` + + - To use custom view logic: + + Using `MeasureOverride` on a ContentControl allows you to specify the **Width** and **Height** of the content, which might reap better performance compared to a `Viewbox`. The dimensions of the content space will change uniformly, but the content will not zoom. + + _Custom logic implementation_ + + ```csharp + public class AspectContentControl : ContentControl + { + protected override Size MeasureOverride(Size availableSize) + { + return new Size(availableSize.Width, availableSize.Width * 1.6); + } + } + ``` + ```vb + Public Class AspectContentControl + Inherits ContentControl + + Protected Overrides Function MeasureOverride(ByVal availableSize As Size) As Size + Return New Size(availableSize.Width, availableSize.Width * 1.6) + End Function + End Class + ``` + + _ItemTemplate implementation_ + + ```xaml + + + + + + + + ``` + +3. Using `OneRowModeEnabled`: + + ![AdaptiveGridView OneRowMode](../resources/images/Controls/AdaptiveGridView/AdaptiveGridView-OneRowMode.gif) + + If there are not enough items to fill one row, the control will stretch the items until all available space is filled. This can result in much wider items than specified. If you prefer your items to always stay close to the DesiredWidth, you can set the **StretchContentForSingleRow** property to **false**, to prevent further stretching. + +## Sample Project + +[AdaptiveGridView Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AdaptiveGridView). You can [see this in action](uwpct://Controls?sample=AdaptiveGridView) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + +- [AdaptiveGridView source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/AdaptiveGridView) + +## Related Topics + - [GridView Class](/uwp/api/Windows.UI.Xaml.Controls.GridView) \ No newline at end of file diff --git a/docs/controls/BladeView.md b/docs/controls/BladeView.md index d674d8308..067be30b8 100644 --- a/docs/controls/BladeView.md +++ b/docs/controls/BladeView.md @@ -1,113 +1,114 @@ ---- -title: BladeView XAML Control -author: nmetulev -description: The BladeView provides a container to host blades as extra detail pages in, for example, a master-detail scenario. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, BladeView, XAML Control, xaml -dev_langs: - - csharp - - vb ---- - -# BladeView XAML Control - -The [BladeView Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.bladeview) provides a container to host [BladeItem](/dotnet/api/microsoft.toolkit.uwp.ui.controls.bladeitem) as extra detail pages in, for example, a master-detail scenario. The control is based on how the Azure Portal works. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=BladeView) - -## Syntax - -```xaml - - - - - - - - - - - -``` - -## Sample Output - -![BladeView animation](../resources/images/Controls/BladeView.gif) - -## Properties - -### BladeView Properties - -| Property | Type | Description | -|----------------------------|-------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------| -| ActiveBlades | IList<[BladeItem](/dotnet/api/microsoft.toolkit.uwp.ui.controls.bladeitem)> | Description | -| AutoCollapseCountThreshold | int | Gets or sets a value indicating what the overflow amount should be to start auto collapsing blade items | -| BladeMode | [BladeMode](/dotnet/api/microsoft.toolkit.uwp.ui.controls.blademode) | Gets or sets a value indicating whether blade mode (ex: whether blades are full screen or not) | - -### BladeItem Properties - -| Property | Type | Description | -| -- | -- | -- | -| CloseButtonBackground | Brush | Gets or sets the background color of the default close button in the title bar | -| CloseButtonForeground | Brush | Gets or sets the foreground color of the close button | -| IsOpen | bool | Gets or sets a value indicating whether this blade is opened | -| Header | string | Gets or sets the content for the header | -| TitleBarBackground | Brush | Gets or sets the background color of the title bar | -| TitleBarVisibility | Visibility | Gets or sets the visibility of the title bar for this blade | - -## Events - -### BladeView Events - -| Events | Description | -| -- | -- | -| BladeClosed | Fires whenever a BladeItem is closed | -| BladeOpened | Fires whenever a BladeItem is opened | - -### BladeItem Events - -| Events | Description | -| -- | -- | -| VisibilityChanged | Fires when the blade is opened or closed | - -## Examples - -- If you want to use the BladeView for handling a flow of actions, you can use the `AutoCollapseCountThreshold` property to tell it to start auto collapsing BladeItems after a certain threshold count has been reached. This will also help keep a clean, uncluttered screen real estate. - - For example: if you set `AutoCollapseCountThreshold` to 3, the BladeView will start counting all BladeItems that are open in the BladeView and have their `TitleBarVisibility` property set to Visible. When the n+1 BladeItem, in our case the 4th one, is being added, the BladeView will auto collapse all n BladeItems except for the last one. All additional BladeItems that are added afterwards will trigger the same effect; collapse all BladeItems except for the last open one. - - *Sample Code* - - ```xaml - - - - - - - - ..... - ..... - - ``` - -## Sample Project - -[BladeView Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/BladeView). You can [see this in action](uwpct://Controls?sample=BladeView) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -[BladeView XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/BladeView/BladeView.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: BladeView +author: nmetulev +description: The BladeView provides a container to host blades as extra detail pages in, for example, a master-detail scenario. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, BladeView, XAML Control, xaml +dev_langs: + - csharp + - vb +--- + +# BladeView + +The [BladeView](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.bladeview) control provides a container to host [BladeItem](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.bladeitem) as extra detail pages in, for example, a master-detail scenario. The control is based on how the Azure Portal works. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=BladeView) + +## Syntax + +```xaml + + + + + + + + + + + +``` + +## Sample Output + +![BladeView animation](../resources/images/Controls/BladeView.gif) + +## Properties + +### BladeView Properties + +| Property | Type | Description | +|----------------------------|-------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------| +| ActiveBlades | IList<[BladeItem](/dotnet/api/microsoft.toolkit.uwp.ui.controls.bladeitem)> | Description | +| AutoCollapseCountThreshold | int | Gets or sets a value indicating what the overflow amount should be to start auto collapsing blade items | +| BladeMode | [BladeMode](/dotnet/api/microsoft.toolkit.uwp.ui.controls.blademode) | Gets or sets a value indicating whether blade mode (ex: whether blades are full screen or not) | + +### BladeItem Properties + +| Property | Type | Description | +| -- | -- | -- | +| CloseButtonBackground | Brush | Gets or sets the background color of the default close button in the title bar | +| CloseButtonForeground | Brush | Gets or sets the foreground color of the close button | +| IsOpen | bool | Gets or sets a value indicating whether this blade is opened | +| Header | string | Gets or sets the content for the header | +| TitleBarBackground | Brush | Gets or sets the background color of the title bar | +| TitleBarVisibility | Visibility | Gets or sets the visibility of the title bar for this blade | + +## Events + +### BladeView Events + +| Events | Description | +| -- | -- | +| BladeClosed | Fires whenever a BladeItem is closed | +| BladeOpened | Fires whenever a BladeItem is opened | + +### BladeItem Events + +| Events | Description | +| -- | -- | +| VisibilityChanged | Fires when the blade is opened or closed | + +## Examples + +- If you want to use the BladeView for handling a flow of actions, you can use the `AutoCollapseCountThreshold` property to tell it to start auto collapsing BladeItems after a certain threshold count has been reached. This will also help keep a clean, uncluttered screen real estate. + + For example: if you set `AutoCollapseCountThreshold` to 3, the BladeView will start counting all BladeItems that are open in the BladeView and have their `TitleBarVisibility` property set to Visible. When the n+1 BladeItem, in our case the 4th one, is being added, the BladeView will auto collapse all n BladeItems except for the last one. All additional BladeItems that are added afterward will trigger the same effect; collapse all BladeItems except for the last open one. + + + *Sample Code* + + ```xaml + + + + + + + + ..... + ..... + + ``` + +## Sample Project + +[BladeView Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/BladeView). You can [see this in action](uwpct://Controls?sample=BladeView) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +[BladeView XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/BladeView/BladeView.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [BladeView source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/BladeView) \ No newline at end of file diff --git a/docs/controls/CameraPreview.md b/docs/controls/CameraPreview.md index 56badab88..c87da3531 100644 --- a/docs/controls/CameraPreview.md +++ b/docs/controls/CameraPreview.md @@ -117,7 +117,7 @@ if(availableFrameSourceGroups != null) ## Sample Project -[CameraPreview Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/CameraPreview). You can [see this in action](uwpct://Controls?sample=CameraPreview) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[CameraPreview Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/CameraPreview). You can [see this in action](uwpct://Controls?sample=CameraPreview) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Requirements diff --git a/docs/controls/Carousel.md b/docs/controls/Carousel.md index 6b2b71e04..5f2565385 100644 --- a/docs/controls/Carousel.md +++ b/docs/controls/Carousel.md @@ -1,85 +1,86 @@ ---- -title: Carousel XAML Control -author: nmetulev -description: The Carousel control inherits from ItemsControl, representing a nice and smooth carousel. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, carousel, xaml control, xaml -dev_langs: - - csharp - - vb ---- - -# Carousel XAML Control - -The [Carousel](/dotnet/api/microsoft.toolkit.uwp.ui.controls.carousel) control provides a new control, inherited from the [ItemsControl](/uwp/api/Windows.UI.Xaml.Controls.ItemsControl), representing a nice and smooth carousel. -This control lets you specify a lot of properties for a flexible layouting. -The `Carousel` control works fine with mouse, touch, mouse and keyboard as well. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=Carousel) - -## Syntax - -```xaml - - - - - - - - - - - - - -``` - -## Sample Output - -![Carousel Overview](../resources/images/Controls/Carousel-Overview.gif) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| EasingFunction | EasingFunctionBase | Gets or sets easing function to apply for each Transition | -| InvertPositive | bool | Gets or sets a value indicating whether the items rendered transformations should be opposite compared to the selected item If false, all the items (except the selected item) will have the exact same transformations If true, all the items where index > selected index will have an opposite tranformation (Rotation X Y and Z will be multiply by -1) | -| ItemDepth | int | Gets or sets depth of non Selected Index Items | -| ItemMargin | int | Gets or sets the item margin | -| ItemRotationX | double | Gets or sets rotation angle on X | -| ItemRotationY | double | Gets or sets rotation angle on Y | -| ItemRotationZ | double | Gets or sets rotation angle on Z | -| Orientation | Orientation | Gets or sets the Carousel orientation. Horizontal or Vertical | -| SelectedIndex | int | Gets or sets selected Index | -| SelectedItem | object | Gets or sets the selected Item | -| TransitionDuration | int | Gets or sets duration of the easing function animation in ms | - -## Events - -| Events | Description | -| -- | -- | -| SelectionChanged | Occurs when the selected item has changed | - -## Sample Project - -[Carousel Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Carousel). You can [see this in action](uwpct://Controls?sample=Carousel) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -[Carousel XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/Carousel/Carousel.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: Carousel +author: nmetulev +description: The Carousel control inherits from ItemsControl, representing a nice and smooth carousel. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, carousel, xaml control, xaml +dev_langs: + - csharp + - vb +--- + +# Carousel + +The [Carousel](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.carousel) control provides a new control, inherited from the [ItemsControl](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.ItemsControl), representing a nice and smooth carousel. +This control lets you specify a lot of properties for a flexible layout. + +The `Carousel` control works fine with mouse, touch, mouse and keyboard as well. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=Carousel) + +## Syntax + +```xaml + + + + + + + + + + + + + +``` + +## Sample Output + +![Carousel Overview](../resources/images/Controls/Carousel-Overview.gif) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| EasingFunction | EasingFunctionBase | Gets or sets easing function to apply for each Transition | +| InvertPositive | bool | Gets or sets a value indicating whether the items rendered transformations should be opposite compared to the selected item If false, all the items (except the selected item) will have the exact same transformations If true, all the items where index > selected index will have an opposite tranformation (Rotation X Y and Z will be multiply by -1) | +| ItemDepth | int | Gets or sets depth of non Selected Index Items | +| ItemMargin | int | Gets or sets the item margin | +| ItemRotationX | double | Gets or sets rotation angle on X | +| ItemRotationY | double | Gets or sets rotation angle on Y | +| ItemRotationZ | double | Gets or sets rotation angle on Z | +| Orientation | Orientation | Gets or sets the Carousel orientation. Horizontal or Vertical | +| SelectedIndex | int | Gets or sets selected Index | +| SelectedItem | object | Gets or sets the selected Item | +| TransitionDuration | int | Gets or sets duration of the easing function animation in ms | + +## Events + +| Events | Description | +| -- | -- | +| SelectionChanged | Occurs when the selected item has changed | + +## Sample Project + +[Carousel Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Carousel). You can [see this in action](uwpct://Controls?sample=Carousel) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +[Carousel XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/Carousel/Carousel.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [Carousel source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/Carousel) \ No newline at end of file diff --git a/docs/controls/DataGrid.md b/docs/controls/DataGrid.md index 6f4f60a04..5e66a95ec 100644 --- a/docs/controls/DataGrid.md +++ b/docs/controls/DataGrid.md @@ -1,11 +1,11 @@ --- -title: DataGrid XAML Control +title: DataGrid author: harinikmsft description: The DataGrid Control presents data in a customizable table of rows and columns. keywords: windows 10, uwp, uwp community toolkit, uwp toolkit, DataGrid, xaml control, xaml --- -# DataGrid XAML control +# DataGrid The DataGrid control provides a flexible way to display a collection of data in rows and columns. diff --git a/docs/controls/DockPanel.md b/docs/controls/DockPanel.md index 3de77ea99..5e205aa3d 100644 --- a/docs/controls/DockPanel.md +++ b/docs/controls/DockPanel.md @@ -1,56 +1,56 @@ ---- -title: DockPanel XAML Control -author: IbraheemOsama -description: Defines an area where you can arrange child elements either horizontally or vertically, relative to each other. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, DockPanel, XAML Control, xaml ---- - -# DockPanel XAML Control - -The [DockPanel Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.dockpanel) defines an area where you can arrange child elements either horizontally or vertically, relative to each other. - -The DockPanel position child controls based on the child Dock property, you have 4 options to Dock, left (Default), right, top, bottom. -You can set DockPanel LastChildFill property to true if you want the last item added to the DockPanel to fill the rest empty space. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=DockPanel) - -## Syntax - -```xaml - - - - - - - - -``` - -## Sample Output - -![DockPanel animation](../resources/images/Controls/DockPanel.gif) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| LastChildFill | bool | Gets or sets a value indicating whether the last child element within a DockPanel stretches to fill the remaining available space | -| Padding | Thickness | The dimensions of the space between the edge and its child as a Thickness value. Thickness is a structure that stores dimension values using pixel measures. | - -## Sample Project - -[DockPanel Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/DockPanel). You can [see this in action](uwpct://Controls?sample=DockPanel) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API Source Code - +--- +title: DockPanel +author: IbraheemOsama +description: Defines an area where you can arrange child elements either horizontally or vertically, relative to each other. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, DockPanel, XAML Control, xaml +--- + +# DockPanel + +The [DockPanel](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.dockpanel) control defines an area where you can arrange child elements either horizontally or vertically, relative to each other. + +The DockPanel positions child controls based on the child Dock property. You have 4 options to Dock, left (Default), right, top, bottom. +You can set DockPanel LastChildFill property to true if you want the last item added to the DockPanel to fill the rest empty space. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=DockPanel) + +## Syntax + +```xaml + + + + + + + + +``` + +## Sample Output + +![DockPanel animation](../resources/images/Controls/DockPanel.gif) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| LastChildFill | bool | Gets or sets a value indicating whether the last child element within a DockPanel stretches to fill the remaining available space | +| Padding | Thickness | The dimensions of the space between the edge and its child as a Thickness value. Thickness is a structure that stores dimension values using pixel measures. | + +## Sample Project + +[DockPanel Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/DockPanel). You can [see this in action](uwpct://Controls?sample=DockPanel) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API Source Code + * [DockPanel source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/DockPanel) \ No newline at end of file diff --git a/docs/controls/DropShadowPanel.md b/docs/controls/DropShadowPanel.md index 4fa6a5998..6f3e4e221 100644 --- a/docs/controls/DropShadowPanel.md +++ b/docs/controls/DropShadowPanel.md @@ -1,79 +1,79 @@ ---- -title: DropShadowPanel XAML Control -author: nmetulev -description: The DropShadowPanel Control allows the creation of a drop shadow effect for any Xaml FrameworkElement in the markup. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, DropShadowPanel, DropShadow, xaml Control, xaml -dev_langs: - - csharp - - vb ---- - -# DropShadowPanel XAML Control - -The [DropShadowPanel Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.dropshadowpanel) allows the creation of a drop shadow effect for any Xaml FrameworkElement in the markup. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=DropShadowPanel) - -## Syntax - -```xaml - - - - - -``` - -## Sample Output - -![DropShadowPanel animation](../resources/images/Controls/DropShadowPanel.png) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| BlurRadius | double | Gets or sets the blur radius of the drop shadow | -| Color | Color | Gets or sets the color of the drop shadow | -| IsSupported | bool | Gets a value indicating whether the platform supports drop shadows | -| OffsetX | double | Gets or sets the x offset of the drop shadow | -| OffsetY | double | Gets or sets the y offset of the drop shadow | -| OffsetZ | double | Gets or sets the z offset of the drop shadow | -| ShadowOpacity | double | Gets or sets the opacity of the drop shadow | - -## Examples - -- Use IsSupported property to verify the availability of drop shadow and take necessary action if not available - - ```csharp - if(!DropShadowPanel.IsSupported) - { - // Change something to counter the lack of drop shadow - } - ``` - ```vb - If Not DropShadowPanel.IsSupported Then - ' Change something to counter the lack of drop shadow - End If - ``` - -## Sample Project - -[DropShadowPanel Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/DropShadowPanel). You can [see this in action](uwpct://Controls?sample=DropShadowPanel) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -[DropShadowPanel XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/DropShadowPanel/DropShadowPanel.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: DropShadowPanel +author: nmetulev +description: The DropShadowPanel Control allows the creation of a drop shadow effect for any Xaml FrameworkElement in the markup. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, DropShadowPanel, DropShadow, xaml Control, xaml +dev_langs: + - csharp + - vb +--- + +# DropShadowPanel + +The [DropShadowPanel](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.dropshadowpanel) control allows the creation of a drop shadow effect for any XAML FrameworkElement in the markup. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=DropShadowPanel) + +## Syntax + +```xaml + + + + + +``` + +## Sample Output + +![DropShadowPanel animation](../resources/images/Controls/DropShadowPanel.png) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| BlurRadius | double | Gets or sets the blur radius of the drop shadow | +| Color | Color | Gets or sets the color of the drop shadow | +| IsSupported | bool | Gets a value indicating whether the platform supports drop shadows | +| OffsetX | double | Gets or sets the x offset of the drop shadow | +| OffsetY | double | Gets or sets the y offset of the drop shadow | +| OffsetZ | double | Gets or sets the z offset of the drop shadow | +| ShadowOpacity | double | Gets or sets the opacity of the drop shadow | + +## Examples + +- Use IsSupported property to verify the availability of drop shadow and take necessary action if not available + + ```csharp + if(!DropShadowPanel.IsSupported) + { + // Change something to counter the lack of drop shadow + } + ``` + ```vb + If Not DropShadowPanel.IsSupported Then + ' Change something to counter the lack of drop shadow + End If + ``` + +## Sample Project + +[DropShadowPanel Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/DropShadowPanel). You can [see this in action](uwpct://Controls?sample=DropShadowPanel) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +[DropShadowPanel XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/DropShadowPanel/DropShadowPanel.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [DropShadowPanel source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/DropShadowPanel) \ No newline at end of file diff --git a/docs/controls/Expander.md b/docs/controls/Expander.md index e01def042..4588dac66 100644 --- a/docs/controls/Expander.md +++ b/docs/controls/Expander.md @@ -1,13 +1,14 @@ --- -title: Expander Control +title: Expander author: nmetulev description: The Expander Control provides an expandable container to host any content. keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, Expander, xaml Control, xaml --- -# Expander Control +# Expander + +The [Expander](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.expander) control provides an expandable container to host any content. It is a specialized form of a [HeaderedContentControl](HeaderedContentControl.md) -The [Expander Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.expander) provides an expandable container to host any content. It is a specialized form of a [HeaderedContentControl](HeaderedContentControl.md) You can show or hide this content by interacting with the Header. > [!div class="nextstepaction"] @@ -94,7 +95,7 @@ For instance to remove the header entirely from the Expander: ## Sample Project -[Expander Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Expander). You can [see this in action](uwpct://Controls?sample=Expander) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[Expander Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Expander). You can [see this in action](uwpct://Controls?sample=Expander) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Default Template @@ -114,4 +115,4 @@ For instance to remove the header entirely from the Expander: ## Related Topics * [HeaderedControlControl](HeaderedContentControl.md) -* [ToggleButton](/uwp/api/Windows.UI.Xaml.Controls.Primitives.ToggleButton) \ No newline at end of file +* [ToggleButton](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.Primitives.ToggleButton) diff --git a/docs/controls/Eyedropper.md b/docs/controls/Eyedropper.md index 5663ff83e..b6a7432e3 100644 --- a/docs/controls/Eyedropper.md +++ b/docs/controls/Eyedropper.md @@ -1,5 +1,5 @@ --- -title: Eyedropper XAML Control +title: Eyedropper author: HHChaos description: The Eyedropper Control can pick up a color from anywhere in your application. keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, Eyedropper, xaml Control, xaml @@ -8,12 +8,12 @@ dev_langs: - vb --- -# Eyedropper XAML Control +# Eyedropper -The [Eyedropper Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.eyedropper) can pick up a color from anywhere in your application. +The [Eyedropper](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.eyedropper) control can pick up a color from anywhere in your application. > [!NOTE] -> The Eyedropper Control uses [RenderTargetBitmap](/uwp/api/windows.ui.xaml.media.imaging.rendertargetbitmap) to get a screenshot of your app. In some cases RenderTargetBitmap may render incorrectly, which will cause eyedropper not to get the correct color value. Please make sure your xaml layout is reasonable, see [here](/uwp/api/windows.ui.xaml.media.imaging.rendertargetbitmap#xaml-visuals-and-rendertargetbitmap-capture-capabilities) for details. +> The Eyedropper Control uses [RenderTargetBitmap](https://docs.microsoft.com/uwp/api/windows.ui.xaml.media.imaging.rendertargetbitmap) to get a screenshot of your app. In some cases, RenderTargetBitmap may render incorrectly, which will cause eyedropper not to get the correct color value. Please make sure your xaml layout is reasonable, see [here](https://docs.microsoft.com/uwp/api/windows.ui.xaml.media.imaging.rendertargetbitmap#xaml-visuals-and-rendertargetbitmap-capture-capabilities) for details. > [!div class="nextstepaction"] > [Try it in the sample app](uwpct://Controls?sample=Eyedropper) @@ -105,7 +105,7 @@ Dim color = Await eyedropper.Open() ## Sample Project -[Eyedropper Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Eyedropper). You can [see this in action](uwpct://Controls?sample=Eyedropper) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[Eyedropper Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Eyedropper). You can [see this in action](uwpct://Controls?sample=Eyedropper) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Default Template diff --git a/docs/controls/GridSplitter.md b/docs/controls/GridSplitter.md index eb4bf03fc..598e184dc 100644 --- a/docs/controls/GridSplitter.md +++ b/docs/controls/GridSplitter.md @@ -1,119 +1,119 @@ ---- -title: GridSplitter XAML Control -author: nmetulev -description: The GridSplitter Control provides an easy-to-use Splitter that redistributes space between columns or rows of a Grid Control. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, GridSplitter, XAML Control, xaml ---- - -# GridSplitter XAML Control - -The [GridSplitter Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.gridsplitter) provides an easy-to-use Splitter that redistributes space between columns or rows of a Grid Control. By dragging the control, the control will resize the targeted columns or rows. - -The control automatically detects the targeted columns/rows to resize, while dragging the control it starts to resize the columns/rows and redistributes space between columns/rows, you can manually specify the Resize Direction Auto, Column, Row and the Resize Behavior to select which columns/rows to resize. - -> [!NOTE] -> You can use the control to resize fixed and star (*) width/height columns/rows. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=GridSplitter) - -## Syntax - -```xaml - - - - - - - - - -``` - -## Sample Output - -![GridSplitter animation](../resources/images/Controls/GridSplitter.png) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| CursorBehavior | [GridSplitter.SplitterCursorBehavior](/dotnet/api/microsoft.toolkit.uwp.ui.controls.gridsplitter.splittercursorbehavior) | Gets or sets splitter cursor on hover behavior | -| Element | UIElement | Gets or sets the visual content of this Grid Splitter | -| GripperCursor | [GridSplitter.GripperCursorType](/dotnet/api/microsoft.toolkit.uwp.ui.controls.gridsplitter.grippercursortype) | Gets or sets the gripper Cursor type | -| GripperCustomCursorResource | int | Gets or sets the gripper Custom Cursor resource number | -| GripperForeground | Brush | Gets or sets the foreground color of grid splitter grip | -| ParentLevel | int | Gets or sets the level of the parent grid to resize | -| ResizeBehavior | [GridSplitter.GridResizeBehavior](/dotnet/api/microsoft.toolkit.uwp.ui.controls.gridsplitter.gridresizebehavior) | Gets or sets which Columns or Rows the Splitter resizes | -| ResizeDirection | [GridSplitter.GridResizeDirection](/dotnet/api/microsoft.toolkit.uwp.ui.controls.gridsplitter.gridresizedirection) | Gets or sets whether the Splitter resizes the Columns, Rows, or Both | - -## Examples - -The following sample demonstrates how to add Grid Splitter Control - -```xaml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -## Sample Code - -[GridSplitter Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GridSplitter). You can [see this in action](uwpct://Controls?sample=GridSplitter) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -[GridSplitter XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/GridSplitter/GridSplitter.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: GridSplitter +author: nmetulev +description: The GridSplitter Control provides an easy-to-use Splitter that redistributes space between columns or rows of a Grid Control. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, GridSplitter, XAML Control, xaml +--- + +# GridSplitter + +The [GridSplitter](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.gridsplitter) control provides an easy-to-use Splitter that redistributes space between columns or rows of a Grid Control. By dragging the control, the control will resize the targeted columns or rows. + +The control automatically detects the targeted columns/rows to resize, while dragging the control it starts to resize the columns/rows and redistributes space between columns/rows, you can manually specify the Resize Direction Auto, Column, Row, and the Resize Behavior to select which columns/rows to resize. + +> [!NOTE] +> You can use the control to resize fixed and star (*) width/height columns/rows. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=GridSplitter) + +## Syntax + +```xaml + + + + + + + + + +``` + +## Sample Output + +![GridSplitter animation](../resources/images/Controls/GridSplitter.png) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| CursorBehavior | [GridSplitter.SplitterCursorBehavior](/dotnet/api/microsoft.toolkit.uwp.ui.controls.gridsplitter.splittercursorbehavior) | Gets or sets splitter cursor on hover behavior | +| Element | UIElement | Gets or sets the visual content of this Grid Splitter | +| GripperCursor | [GridSplitter.GripperCursorType](/dotnet/api/microsoft.toolkit.uwp.ui.controls.gridsplitter.grippercursortype) | Gets or sets the gripper Cursor type | +| GripperCustomCursorResource | int | Gets or sets the gripper Custom Cursor resource number | +| GripperForeground | Brush | Gets or sets the foreground color of grid splitter grip | +| ParentLevel | int | Gets or sets the level of the parent grid to resize | +| ResizeBehavior | [GridSplitter.GridResizeBehavior](/dotnet/api/microsoft.toolkit.uwp.ui.controls.gridsplitter.gridresizebehavior) | Gets or sets which Columns or Rows the Splitter resizes | +| ResizeDirection | [GridSplitter.GridResizeDirection](/dotnet/api/microsoft.toolkit.uwp.ui.controls.gridsplitter.gridresizedirection) | Gets or sets whether the Splitter resizes the Columns, Rows, or Both | + +## Examples + +The following sample demonstrates how to add Grid Splitter Control + +```xaml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +## Sample Code + +[GridSplitter Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GridSplitter). You can [see this in action](uwpct://Controls?sample=GridSplitter) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +[GridSplitter XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/GridSplitter/GridSplitter.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [GridSplitter source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/GridSplitter) \ No newline at end of file diff --git a/docs/controls/HeaderedContentControl.md b/docs/controls/HeaderedContentControl.md index 502f70f97..da915f191 100644 --- a/docs/controls/HeaderedContentControl.md +++ b/docs/controls/HeaderedContentControl.md @@ -1,11 +1,11 @@ --- -title: HeaderedContentControl XAML Control +title: HeaderedContentControl author: skendrot description: The HeaderedContentControl allows content to be displayed with a specified header. keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, HeaderedContentControl, XAML Control, xaml --- -# HeaderedContentControl XAML Control +# HeaderedContentControl The [HeaderedContentControl](/dotnet/api/microsoft.toolkit.uwp.ui.controls.headeredcontentcontrol) is a UI control that allows content to be displayed with a specified header. The `Header` property can be any object and you can use the `HeaderTemplate` to specify a custom look to the header. Content for the HeaderedContentControl will align to the top left. This is to maintain the same functionality as the ContentControl. @@ -70,7 +70,7 @@ The [HeaderedContentControl](/dotnet/api/microsoft.toolkit.uwp.ui.controls.heade ## Sample Project -[HeaderedContentControl Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/HeaderedContentControl). You can [see this in action](uwpct://Controls?sample=HeaderedContentControl) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[HeaderedContentControl Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/HeaderedContentControl). You can [see this in action](uwpct://Controls?sample=HeaderedContentControl) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Default Template diff --git a/docs/controls/HeaderedItemsControl.md b/docs/controls/HeaderedItemsControl.md index 3caedc2c8..2da805e13 100644 --- a/docs/controls/HeaderedItemsControl.md +++ b/docs/controls/HeaderedItemsControl.md @@ -1,11 +1,11 @@ --- -title: HeaderedItemsControl XAML Control +title: HeaderedItemsControl author: skendrot description: The HeaderedItemsControl allows items to be displayed with a specified header. keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, HeaderedItemsControl, XAML Control, xaml --- -# HeaderedItemsControl XAML Control +# HeaderedItemsControl The [HeaderedItemsControl](/dotnet/api/microsoft.toolkit.uwp.ui.controls.headereditemscontrol) is a UI control that allows content to be displayed with a specified header. The `Header` property can be any object and you can use the `HeaderTemplate` to specify a custom look to the header. @@ -72,7 +72,7 @@ The [HeaderedItemsControl](/dotnet/api/microsoft.toolkit.uwp.ui.controls.headere ## Sample Project -[HeaderedItemsControl Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/HeaderedItemsControl). You can [see this in action](uwpct://Controls?sample=HeaderedItemsControl) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[HeaderedItemsControl Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/HeaderedItemsControl). You can [see this in action](uwpct://Controls?sample=HeaderedItemsControl) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Default Template diff --git a/docs/controls/HeaderedTextBlock.md b/docs/controls/HeaderedTextBlock.md index 8ac4ad90f..d37e705a6 100644 --- a/docs/controls/HeaderedTextBlock.md +++ b/docs/controls/HeaderedTextBlock.md @@ -1,57 +1,57 @@ ---- -title: HeaderedTextBlock XAML Control -author: nmetulev -description: The HeaderedTextBlock Control provides a header for read-only text. This control is useful for displaying read-only forms, content, or a collection of items depending on the type. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, HeaderedTextBlock, XAML Control, xaml ---- - -# HeaderedTextBlock XAML Control - -The [HeaderedTextBlock Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.headeredtextblock) provides a header for read-only text. This control is useful for displaying read-only forms, content, or a collection of items depending on the type. - -> [!NOTE] -> The HeaderedTextBlock control will be removed in a future major release. Please use [HeaderedContentControl](/dotnet/api/microsoft.toolkit.uwp.ui.controls.headeredcontentcontrol) instead. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=HeaderedTextBlock) - -## Syntax - -```xaml - -``` - -## Sample Output - -![HeaderedTextBlock animation](../resources/images/Controls/HeaderedTextBlock.png) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| Header | object | Gets or sets the header | -| HeaderTemplate | DataTemplate | Gets or sets the header style | -| HideTextIfEmpty | bool | Gets or sets a value indicating whether the Text TextBlock is hidden if its value is empty | -| Orientation | Orientation | Gets or sets the orientation | -| Text | string | Gets or sets the text | -| TextStyle | Style | Gets or sets the text style | - -## Sample Project - -[HeaderedTextBlock Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/HeaderedTextBlock). You can [see this in action](uwpct://Controls?sample=HeaderedTextBlock) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -[HeaderedTextBlock XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/HeaderedTextBlock/HeaderedTextBlock.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: HeaderedTextBlock +author: nmetulev +description: The HeaderedTextBlock control provides a header for read-only text. This control is useful for displaying read-only forms, content, or a collection of items depending on the type. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, HeaderedTextBlock, XAML Control, xaml +--- + +# HeaderedTextBlock XAML Control + +The [HeaderedTextBlock](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.headeredtextblock) control provides a header for read-only text. This control is useful for displaying read-only forms, content, or a collection of items depending on the type. + +> [!NOTE] +> The HeaderedTextBlock control will be removed in a future major release. Please use [HeaderedContentControl](/dotnet/api/microsoft.toolkit.uwp.ui.controls.headeredcontentcontrol) instead. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=HeaderedTextBlock) + +## Syntax + +```xaml + +``` + +## Sample Output + +![HeaderedTextBlock animation](../resources/images/Controls/HeaderedTextBlock.png) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| Header | object | Gets or sets the header | +| HeaderTemplate | DataTemplate | Gets or sets the header style | +| HideTextIfEmpty | bool | Gets or sets a value indicating whether the Text TextBlock is hidden if its value is empty | +| Orientation | Orientation | Gets or sets the orientation | +| Text | string | Gets or sets the text | +| TextStyle | Style | Gets or sets the text style | + +## Sample Project + +[HeaderedTextBlock Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/HeaderedTextBlock). You can [see this in action](uwpct://Controls?sample=HeaderedTextBlock) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +[HeaderedTextBlock XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/HeaderedTextBlock/HeaderedTextBlock.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [HeaderedTextBlock source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/HeaderedTextBlock) \ No newline at end of file diff --git a/docs/controls/ImageCropper.md b/docs/controls/ImageCropper.md index 4eeed1d9b..9e0cb72ad 100644 --- a/docs/controls/ImageCropper.md +++ b/docs/controls/ImageCropper.md @@ -8,9 +8,9 @@ dev_langs: - vb --- -# ImageCropper XAML Control +# ImageCropper -The [ImageCropper Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.imagecropper) allows a user to freely crop an image. +The [ImageCropper](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.imagecropper) control allows a user to freely crop an image. > [!div class="nextstepaction"] > [Try it in the sample app](uwpct://Controls?sample=ImageCropper) @@ -115,7 +115,7 @@ ImageCropper.AspectRatio = Nothing ## Sample Project -[ImageCropper Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ImageCropper). You can [see this in action](uwpct://Controls?sample=ImageCropper) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[ImageCropper Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ImageCropper). You can [see this in action](uwpct://Controls?sample=ImageCropper) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Default Template diff --git a/docs/controls/ImageEx.md b/docs/controls/ImageEx.md index bdc5226d0..bfa4089f1 100644 --- a/docs/controls/ImageEx.md +++ b/docs/controls/ImageEx.md @@ -1,58 +1,58 @@ ---- -title: ImageEx XAML Control -author: nmetulev -description: The ImageEx Control and downloads images asynchronously, while showing a loading indicator. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, ImageEx, xaml control, xaml ---- - -# ImageEx XAML Control - -The [ImageEx Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.imageex) downloads images asynchronously, while showing a loading indicator. Source images are then stored in the application's local cache to preserve resources and load time. ImageEx also extends the default *Image* and *ImageBrush* Platform controls respectively to improve performance through caching. You can also use a placeholder image that will be displayed while loading the main image. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=ImageEx) - -## Syntax - -```xaml - -``` - -## Sample Output - -![ImageEx animation](../resources/images/Controls/ImageEx.gif) - -## ImageEx Properties - -| Property | Type | Description | -| -- | -- | -- | -| NineGrid | Thickness | Gets or sets the nine-grid used by the image | -| IsCacheEnabled | bool | Gets or sets a value indicating whether gets or sets cache state | -| ImageExCachingStrategy | enum | Gets or sets a value indicating how the Image will be cached | -| CornerRadius | double | Get or set the radius of image corner | -| EnableLazyLoading | bool | Gets or sets a value indicating is lazy loading enabled. (17763 or higher supported) | - -## Sample Project - -[ImageExControl Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ImageEx). You can [see this in action](uwpct://Controls?sample=ImageEx) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -ImageEx control supports use of Progress Indicator. This can be enabled by adding ImageEx template from previous release of the control. - -- [ImageEx Control with Progress Indicator XAML File](https://github.com/Microsoft/WindowsCommunityToolkit/blob/rel/2.2.0/Microsoft.Toolkit.Uwp.UI.Controls/ImageEx/ImageEx.xaml) is the XAML template used in v2.2.0.0 of toolkit. - -- [ImageEx Control XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/ImageEx/ImageEx.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - -* [ImageEx source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/ImageEx) \ No newline at end of file +--- +title: ImageEx +author: nmetulev +description: The ImageEx Control and downloads images asynchronously, while showing a loading indicator. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, ImageEx, xaml control, xaml +--- + +# ImageEx + +The [ImageEx](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.imageex) control downloads images asynchronously, while showing a loading indicator. Source images are then stored in the application's local cache to preserve resources and load time. ImageEx also extends the default *Image* and *ImageBrush* Platform controls respectively to improve performance through caching. You can also use a placeholder image that will be displayed while loading the main image. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=ImageEx) + +## Syntax + +```xaml + +``` + +## Sample Output + +![ImageEx animation](../resources/images/Controls/ImageEx.gif) + +## ImageEx Properties + +| Property | Type | Description | +| -- | -- | -- | +| NineGrid | Thickness | Gets or sets the nine-grid used by the image | +| IsCacheEnabled | bool | Gets or sets a value indicating whether gets or sets cache state | +| ImageExCachingStrategy | enum | Gets or sets a value indicating how the Image will be cached | +| CornerRadius | double | Get or set the radius of image corner | +| EnableLazyLoading | bool | Gets or sets a value indicating is lazy loading enabled. (17763 or higher supported) | + +## Sample Project + +[ImageExControl Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ImageEx). You can [see this in action](uwpct://Controls?sample=ImageEx) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +ImageEx control supports use of Progress Indicator. This can be enabled by adding ImageEx template from previous release of the control. + +- [ImageEx Control with Progress Indicator XAML File](https://github.com/Microsoft/WindowsCommunityToolkit/blob/rel/2.2.0/Microsoft.Toolkit.Uwp.UI.Controls/ImageEx/ImageEx.xaml) is the XAML template used in v2.2.0.0 of toolkit. + +- [ImageEx Control XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/ImageEx/ImageEx.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + +* [ImageEx source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/ImageEx) diff --git a/docs/controls/InAppNotification.md b/docs/controls/InAppNotification.md index ec8e0f350..e784778e6 100644 --- a/docs/controls/InAppNotification.md +++ b/docs/controls/InAppNotification.md @@ -1,5 +1,5 @@ --- -title: InAppNotification XAML Control +title: InAppNotification author: nmetulev description: The InAppNotification control offers the ability to show local notifications in your application. keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, InAppNotification, in app notification, xaml control, xaml @@ -219,7 +219,7 @@ If you want to add styles to the Toolkit, please follow these steps : ## Sample Project -[InAppNotification Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/InAppNotification). You can [see this in action](uwpct://Controls?sample=InAppNotification) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[InAppNotification Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/InAppNotification). You can [see this in action](uwpct://Controls?sample=InAppNotification) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Default Template diff --git a/docs/controls/InfiniteCanvas.md b/docs/controls/InfiniteCanvas.md index 451d91b15..ffdf46233 100644 --- a/docs/controls/InfiniteCanvas.md +++ b/docs/controls/InfiniteCanvas.md @@ -1,85 +1,85 @@ ---- -title: InfiniteCanvas XAML Control -author: IbraheemOsama -description: InfiniteCanvas is a canvas that supports Infinite Scrolling, Ink, Text, Format Text, Zoom in/out, Redo, Undo, Export canvas data, Import canvas data. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, InfiniteCanvas, XAML Control, xaml ---- - -# InfiniteCanvas XAML Control - -The [InfiniteCanvas Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.infinitecanvas) is a canvas that supports Infinite Scrolling, Ink, Text, Format Text, Zoom in/out, Redo, Undo, Export canvas data, Import canvas data. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=InfiniteCanvas) - -## Syntax - -```xaml - - - -``` - -## Sample Output - -![InfiniteCanvas animation](../resources/images/Controls/InfiniteCanvas.gif) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| CanvasWidth | double | Gets or sets the width of the drawing area, default value is 2097152. This is different from the `Width` property which specifies the Width of the control | -| CanvasHeight | double | Gets or sets the height of the drawing area, default value is 2097152. This is different from the `Height` property which specifies the Height of the control | -| IsToolbarVisible | bool | Gets or sets a value indicating whether the toolbar is visible or not. | -| MaxZoomFactor | double | Gets or sets the MaxZoomFactor for the canvas, range between 1 to 10 and the default value is 4. | -| MinZoomFactor | double | Gets or sets the MinZoomFactor for the canvas, range between .1 to 1 the default value is .25. | - -## Methods - -| Method | Return Type | Description | -| -- | -- | -- | -| Redo() | void | Redo the last action. | -| Undo() | void | Undo the last action. | -| ExportAsJson() | string | Export the InfiniteCanvas as json string. | -| ImportFromJson(string json) | void | Import InfiniteCanvas from json string and render the new canvas, this function will empty the Redo/Undo queue. | - -## Events - -### ReRenderCompleted - -This event triggered after each render happened because of any change in the canvas elements. -This event could be used to do the Auto Save functionality. - -## Examples - -The following sample demonstrates how to add InfiniteCanvas Control - -```xaml - - - - - - -``` - -## Sample Project - -[InfiniteCanvas Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/InfiniteCanvas). You can [see this in action](uwpct://Controls?sample=InfiniteCanvas) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -[InfiniteCanvas XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/InfiniteCanvas/InfiniteCanvas.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: InfiniteCanvas +author: IbraheemOsama +description: InfiniteCanvas is a canvas that supports Infinite Scrolling, Ink, Text, Format Text, Zoom in/out, Redo, Undo, Export canvas data, Import canvas data. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, InfiniteCanvas, XAML Control, xaml +--- + +# InfiniteCanvas + +The [InfiniteCanvas](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.infinitecanvas) control is a canvas that supports Infinite Scrolling, Ink, Text, Format Text, Zoom in/out, Redo, Undo, Export canvas data, Import canvas data. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=InfiniteCanvas) + +## Syntax + +```xaml + + + +``` + +## Sample Output + +![InfiniteCanvas animation](../resources/images/Controls/InfiniteCanvas.gif) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| CanvasWidth | double | Gets or sets the width of the drawing area, default value is 2097152. This is different from the `Width` property which specifies the Width of the control | +| CanvasHeight | double | Gets or sets the height of the drawing area, default value is 2097152. This is different from the `Height` property which specifies the Height of the control | +| IsToolbarVisible | bool | Gets or sets a value indicating whether the toolbar is visible or not. | +| MaxZoomFactor | double | Gets or sets the MaxZoomFactor for the canvas, range between 1 to 10 and the default value is 4. | +| MinZoomFactor | double | Gets or sets the MinZoomFactor for the canvas, range between .1 to 1 the default value is .25. | + +## Methods + +| Method | Return Type | Description | +| -- | -- | -- | +| Redo() | void | Redo the last action. | +| Undo() | void | Undo the last action. | +| ExportAsJson() | string | Export the InfiniteCanvas as json string. | +| ImportFromJson(string json) | void | Import InfiniteCanvas from json string and render the new canvas, this function will empty the Redo/Undo queue. | + +## Events + +### ReRenderCompleted + +This event triggered after each render happened because of any change in the canvas elements. +This event could be used to do the Auto Save functionality. + +## Examples + +The following sample demonstrates how to add InfiniteCanvas Control + +```xaml + + + + + + +``` + +## Sample Project + +[InfiniteCanvas Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/InfiniteCanvas). You can [see this in action](uwpct://Controls?sample=InfiniteCanvas) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +[InfiniteCanvas XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/InfiniteCanvas/InfiniteCanvas.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [InfiniteCanvas source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/InfiniteCanvas) \ No newline at end of file diff --git a/docs/controls/LayoutTransformControl.md b/docs/controls/LayoutTransformControl.md index d74e6d480..9a0d66e3c 100644 --- a/docs/controls/LayoutTransformControl.md +++ b/docs/controls/LayoutTransformControl.md @@ -53,7 +53,7 @@ The transformations that can be applied are one of the following: ## Sample Project -[LayoutTransformControl Sample Page](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/LayoutTransformControl). You can [see this in action](uwpct://Controls?sample=LayoutTransformControl) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[LayoutTransformControl Sample Page](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/LayoutTransformControl). You can [see this in action](uwpct://Controls?sample=LayoutTransformControl) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Requirements diff --git a/docs/controls/Loading.md b/docs/controls/Loading.md index 64527719a..c8002d1d6 100644 --- a/docs/controls/Loading.md +++ b/docs/controls/Loading.md @@ -1,85 +1,85 @@ ---- -title: Loading XAML Control -author: nmetulev -description: The loading control is for showing an animation with some content when the user should wait in some tasks of the app. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, Loading, XAML Control , xaml -dev_langs: - - csharp - - vb ---- - -# Loading XAML Control - -The [loading control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.loading) is for showing an animation with some content when the user should wait in some tasks of the app. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=Loading) - -## Syntax - -```xaml - - - - - -``` - -## Sample Output - -![Loading animation](../resources/images/Controls/LoadingXamlControl.gif) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| IsLoading | bool | Gets or sets a value indicating whether the control is in the loading state | - -## Examples - -An example of how we can build the loading control. - -- `Background` and `Opacity` are for the panel who appears and disappears behind our custom control. -- Use the `LoadingControl` to show specialized content. -- You can also use `BorderBrush` and `BorderThickness` to change the `LoadingControl`. - -```xaml - - - - - - - - - -``` - -Finally that the loading control appears, we must set the `IsLoading` property to `true` - -```csharp -LoadingControl.IsLoading = true; -``` -```vb -LoadingControl.IsLoading = true -``` - -## Sample Project - -[Loading Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Loading). You can [see this in action](uwpct://Controls?sample=Loading) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -[Loading XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/Loading/Loading.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: Loading +author: nmetulev +description: The loading control is for showing an animation with some content when the user should wait in some tasks of the app. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, Loading, XAML Control , xaml +dev_langs: + - csharp + - vb +--- + +# Loading + +The [loading](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.loading) control is for showing an animation with some content when the user should wait in some tasks of the app. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=Loading) + +## Syntax + +```xaml + + + + + +``` + +## Sample Output + +![Loading animation](../resources/images/Controls/LoadingXamlControl.gif) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| IsLoading | bool | Gets or sets a value indicating whether the control is in the loading state | + +## Examples + +An example of how we can build the loading control. + +- `Background` and `Opacity` are for the panel who appears and disappears behind our custom control. +- Use the `LoadingControl` to show specialized content. +- You can also use `BorderBrush` and `BorderThickness` to change the `LoadingControl`. + +```xaml + + + + + + + + + +``` + +Finally that the loading control appears, we must set the `IsLoading` property to `true` + +```csharp +LoadingControl.IsLoading = true; +``` +```vb +LoadingControl.IsLoading = true +``` + +## Sample Project + +[Loading Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Loading). You can [see this in action](uwpct://Controls?sample=Loading) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +[Loading XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/Loading/Loading.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [Loading source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/Loading) \ No newline at end of file diff --git a/docs/controls/MarkdownTextBlock.md b/docs/controls/MarkdownTextBlock.md index 775b10814..fc7bdc1bc 100644 --- a/docs/controls/MarkdownTextBlock.md +++ b/docs/controls/MarkdownTextBlock.md @@ -1,15 +1,15 @@ --- -title: MarkdownTextBlock XAML Control +title: MarkdownTextBlock author: williamabradley description: The MarkdownTextBlock control provides full markdown parsing and rendering for Universal Windows Apps. keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, MarkdownTextBlock, xaml, xaml control --- -# MarkdownTextBlock XAML Control +# MarkdownTextBlock -The [MarkdownTextBlock control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.markdowntextblock) provides full markdown parsing and rendering for Universal Windows Apps. Originally created for the open source reddit app Baconit, the control was engineered to be simple to use and very efficient. One of the main design considerations for the control was it needed to be performant enough to provide a great user experience in virtualized lists. With the custom markdown parser and efficient XAML rendering, we were able to achieve excellent performance; providing a smooth UI experience even with complex Markdown on low end hardware. +The [MarkdownTextBlock](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.markdowntextblock) control provides full markdown parsing and rendering for Universal Windows Apps. Originally created for the open source reddit app Baconit, the control was engineered to be simple to use and very efficient. One of the main design considerations for the control was it needed to be performant enough to provide a great user experience in virtualized lists. With the custom markdown parser and efficient XAML rendering, we were able to achieve excellent performance; providing a smooth UI experience even with complex Markdown on low end hardware. -Under the hood, the control uses XAML sub elements to build the visual rendering tree for the Markdown input. We chose to use full XAML elements over using the RichEditTextBlock control because the RichEditTextBlock isn't flexible enough to correctly render all of the standard Markdown styles. +Under the hood, the control uses XAML sub-elements to build the visual rendering tree for the Markdown input. We chose to use full XAML elements overusing the RichEditTextBlock control because the RichEditTextBlock isn't flexible enough to correctly render all of the standard Markdown styles. > [!div class="nextstepaction"] > [Try it in the sample app](uwpct://Controls?sample=MarkdownTextBlock) @@ -217,7 +217,7 @@ This will likely require intimate knowledge of the implementation of the `Markdo ## Sample Project -[MarkdownTextBlock Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock). You can [see this in action](uwpct://Controls?sample=MarkdownTextBlock) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[MarkdownTextBlock Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock). You can [see this in action](uwpct://Controls?sample=MarkdownTextBlock) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Default Template diff --git a/docs/controls/MasterDetailsView.md b/docs/controls/MasterDetailsView.md index 970eae27a..2f764ce4c 100644 --- a/docs/controls/MasterDetailsView.md +++ b/docs/controls/MasterDetailsView.md @@ -1,11 +1,11 @@ --- -title: MasterDetailsView XAML Control +title: MasterDetailsView author: nmetulev description: The MasterDetailsView Control presents items in a master/details pattern. keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, MasterDetailsView, XAML Control, xaml --- -# MasterDetailsView XAML Control +# MasterDetailsView The [MasterDetailsView Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.masterdetailsview) presents items in a master/details pattern. It shows a collection of items within the "master panel" and the details for that item within the "details panel". The MasterDetailsView reacts to the width it is given to determine if it should show both the master and details or just one of the two. There is a dependency property `ViewState` or an event `ViewStateChanged` that can be used to track which state the control is in. @@ -31,9 +31,10 @@ The [MasterDetailsView Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.ma ## BackButtonBehavior When in compact mode, the MasterDetailsView will either show the Master or the Details view, not both. If an item is selected, the control will *navigate* forward to the Details view. If the CurrentItem is set to `null`, the control will navigate *back* to the Master view. -If there is a Frame in the parent visual tree, the MasterDetailsView control will use the Frame navigation events to transition from the Details view to the Master view. If the host Frame is attempting back navigation while the Details view state is active, the MasterDetailsView will transition to the the Master view and cancel the back navigation. +If there is a Frame in the parent visual tree, the MasterDetailsView control will use the Frame navigation events to transition from the Details view to the Master view. If the host Frame is attempting back navigation while the Details view state is active, the MasterDetailsView will transition to the Master view and cancel the back navigation. -To help with back navigation, The MasterDetailsView can handle back button visibility of the SystemNavigationManager back button, a parent NavigationView back button, or an inline back button. Use the `BackButtonehavior` property to control the behaviour: + +To help with back navigation, The MasterDetailsView can handle back button visibility of the SystemNavigationManager back button, a parent NavigationView back button, or an inline back button. Use the `BackButtonehavior` property to control the behavior: - `Automatic` will let the control decide which back button to make visible/enabled. - If the system back button is visible the control won't use any other buttons - Else, if the control parent tree contains a Frame hosted in a NavigationView, the NavigationView back button will be used @@ -58,7 +59,7 @@ To help with back navigation, The MasterDetailsView can handle back button visib | MasterHeaderTemplate | DataTemplate | Gets or sets the DataTemplate used to display the content of the master pane's header | | MasterPaneBackground | Brush | Gets or sets the Brush to apply to the background of the list area of the control | | MasterPaneWidth | double | Gets or sets the width of the master pane when the view is expanded | -| NoSelectionContent | object | Gets or sets the content to dsiplay when there is no item selected in the master list | +| NoSelectionContent | object | Gets or sets the content to display when there is no item selected in the master list | | NoSelectionContentTemplate | DataTemplate | Gets or sets the DataTemplate used to display the content when there is no selection | | SelectedIndex | int | Gets or sets the selected index (-1 if nothing is selected) | | SelectedItem | object | Gets or sets the selected item | @@ -73,7 +74,7 @@ To help with back navigation, The MasterDetailsView can handle back button visib ## Sample Project -[MasterDetailsView Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MasterDetailsView). You can [see this in action](uwpct://Controls?sample=MasterDetailsView) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[MasterDetailsView Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MasterDetailsView). You can [see this in action](uwpct://Controls?sample=MasterDetailsView) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Default Template diff --git a/docs/controls/Menu.md b/docs/controls/Menu.md index 4d54a2ab7..b69d4f0ba 100644 --- a/docs/controls/Menu.md +++ b/docs/controls/Menu.md @@ -1,11 +1,11 @@ --- -title: Menu Control +title: Menu author: nmetulev description: The Windows Community Toolkit Menu control defines a top level menu for commands, options, properties and much more within your UWP apps. keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, Menu, xaml, xaml control --- -# Menu Control +# Menu > [!NOTE] > This control will be removed in a future major release. @@ -145,7 +145,7 @@ internal class NewProjectCommand : ICommand ## Sample Project -[Menu Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Menu). You can [see this in action](uwpct://Controls?sample=Menu) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[Menu Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Menu). You can [see this in action](uwpct://Controls?sample=Menu) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Default Template diff --git a/docs/controls/OrbitView.md b/docs/controls/OrbitView.md index 49be0b8d9..c95bc4785 100644 --- a/docs/controls/OrbitView.md +++ b/docs/controls/OrbitView.md @@ -1,151 +1,152 @@ ---- -title: OrbitView XAML Control -author: nmetulev -description: The OrbitView is an ItemsControl where all items are arranged in circle around a center element -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, OrbitView, xaml control, xaml ---- - -# OrbitView XAML Control - -The [OrbitView control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.orbitview) provides a new control, inherited from the `ItemsControl`. All items are arranged in circle around a center element - -[OrbitViewDataItem](/dotnet/api/microsoft.toolkit.uwp.ui.controls.orbitviewdataitem) is a helper class used for specifying size and distance of each item of the `OrbitView`. To work properly, the `ItemSource` of the `OrbitView` should be set to en `IEnumerable`. Objects extending OrbitViewDataItem will also work. Alternatively, OrbitViewDataItem has the `Item` object property that can be used to store additional objects and properties. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=OrbitView) - -## Syntax - -```xaml - - - - - - - - - - - - - - - - - - - -``` - -## Sample Output - -![OrbitView Overview](../resources/images/Controls/OrbitView.gif) - -## Properties - -### OrbitView Properties - -| Property | Type | Description | -| -- | -- | -- | -| AnchorColor | Brush | Gets or sets a value indicating the color of anchors | -| AnchorsEnabled | bool | Gets or sets a value indicating whether anchors are enabled | -| AnchorThickness | double | Gets or sets a value indicating the thickness of the anchors | -| CenterContent | object | Gets or sets a value representing the center element | -| IsItemClickEnabled | bool | Gets or sets a value indicating whether elements are clickable | -| MaxItemSize | double | Gets or sets a value indicating the maximum size of items | -| MinItemSize | double | Gets or sets a value indicating the minimum size of items Note: for this property to work, Data Context must be derived from OrbitViewItems and Diameter must be between 0 and 1 | -| OrbitColor | Brush | Gets or sets a value indicating the color of orbits | -| OrbitDashArray | DoubleCollection | Gets or sets a value indicating the dash array for the orbit | -| OrbitsEnabled | bool | Gets or sets a value indicating whether orbits are enabled or not | -| OrbitThickness | double | Gets or sets a value indicating the thickness of the orbits | - -> [!IMPORTANT] -> For `MaxItemSize` and `MinItemSize` property to work, Data Context must be derived from OrbitViewItems and Diameter must be between 0 and 1 - -### OrbitViewDataItem Properties - -| Property | Type | Description | -| -- | -- | -- | -| Diameter | double | Gets or sets a value indicating the diameter of the item. Expected value betweeen 0 and 1 | -| Distance | double | Gets or sets a value indicating the distance from the center. Expected value betweeen 0 and 1 | -| Image | ImageSource | Gets or sets a value indicating the image of the item | -| Item | object | Gets or sets a value of an object that can be used to store model data | -| Label | string | Gets or sets a value indicating the name of the item. Used for [AutomationProperties](/uwp/api/Windows.UI.Xaml.Automation.AutomationProperties) | - -## Events - -### OrbitView Events - -| Events | Description | -| -- | -- | -| ItemClick | Raised when an item has been clicked or activated with keyboard/controller | - -> [!IMPORTANT] -> `IsItemClickedEnabled` should be true for this event to work - -## Examples - -The following sample demonstrates how to add OrbitView Control. - -```xaml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -## Sample Project - -[Carousel Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/OrbitView).You can [see this in action](uwpct://Controls?sample=OrbitView) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -[OrbitView XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/OrbitView/OrbitView.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: OrbitView +author: nmetulev +description: The OrbitView is an ItemsControl where all items are arranged in a circle around a center element + +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, OrbitView, xaml control, xaml +--- + +# OrbitView + +The [OrbitView](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.orbitview) control provides a new control, inherited from the `ItemsControl`. All items are arranged in circle around a center element + +[OrbitViewDataItem](/dotnet/api/microsoft.toolkit.uwp.ui.controls.orbitviewdataitem) is a helper class used for specifying size and distance of each item of the `OrbitView`. To work properly, the `ItemSource` of the `OrbitView` should be set to en `IEnumerable`. Objects extending OrbitViewDataItem will also work. Alternatively, OrbitViewDataItem has the `Item` object property that can be used to store additional objects and properties. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=OrbitView) + +## Syntax + +```xaml + + + + + + + + + + + + + + + + + + + +``` + +## Sample Output + +![OrbitView Overview](../resources/images/Controls/OrbitView.gif) + +## Properties + +### OrbitView Properties + +| Property | Type | Description | +| -- | -- | -- | +| AnchorColor | Brush | Gets or sets a value indicating the color of anchors | +| AnchorsEnabled | bool | Gets or sets a value indicating whether anchors are enabled | +| AnchorThickness | double | Gets or sets a value indicating the thickness of the anchors | +| CenterContent | object | Gets or sets a value representing the center element | +| IsItemClickEnabled | bool | Gets or sets a value indicating whether elements are clickable | +| MaxItemSize | double | Gets or sets a value indicating the maximum size of items | +| MinItemSize | double | Gets or sets a value indicating the minimum size of items Note: for this property to work, Data Context must be derived from OrbitViewItems and Diameter must be between 0 and 1 | +| OrbitColor | Brush | Gets or sets a value indicating the color of orbits | +| OrbitDashArray | DoubleCollection | Gets or sets a value indicating the dash array for the orbit | +| OrbitsEnabled | bool | Gets or sets a value indicating whether orbits are enabled or not | +| OrbitThickness | double | Gets or sets a value indicating the thickness of the orbits | + +> [!IMPORTANT] +> For `MaxItemSize` and `MinItemSize` property to work, Data Context must be derived from OrbitViewItems and Diameter must be between 0 and 1 + +### OrbitViewDataItem Properties + +| Property | Type | Description | +| -- | -- | -- | +| Diameter | double | Gets or sets a value indicating the diameter of the item. Expected value betweeen 0 and 1 | +| Distance | double | Gets or sets a value indicating the distance from the center. Expected value betweeen 0 and 1 | +| Image | ImageSource | Gets or sets a value indicating the image of the item | +| Item | object | Gets or sets a value of an object that can be used to store model data | +| Label | string | Gets or sets a value indicating the name of the item. Used for [AutomationProperties](/uwp/api/Windows.UI.Xaml.Automation.AutomationProperties) | + +## Events + +### OrbitView Events + +| Events | Description | +| -- | -- | +| ItemClick | Raised when an item has been clicked or activated with keyboard/controller | + +> [!IMPORTANT] +> `IsItemClickedEnabled` should be true for this event to work + +## Examples + +The following sample demonstrates how to add OrbitView Control. + +```xaml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +## Sample Project + +[Carousel Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/OrbitView).You can [see this in action](uwpct://Controls?sample=OrbitView) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +[OrbitView XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/OrbitView/OrbitView.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [OrbitView source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/OrbitView) \ No newline at end of file diff --git a/docs/controls/RadialGauge.md b/docs/controls/RadialGauge.md index 8aec4a8c4..11f7bb117 100644 --- a/docs/controls/RadialGauge.md +++ b/docs/controls/RadialGauge.md @@ -1,95 +1,96 @@ ---- -title: RadialGauge XAML Control -author: nmetulev -description: The Radial Gauge Control displays a value in a certain range using a needle on a circular face. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, Radial Gauge, RadialGauge, xaml control, xaml ---- - -# RadialGauge XAML Control - -The [Radial Gauge Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.radialgauge) displays a value in a certain range using a needle on a circular face. This control will make data visualizations and dashboards more engaging with rich style and interactivity. -The round gauges are powerful, easy to use, and highly configurable to present dashboards capable of displaying clocks, industrial panels, automotive dashboards, and even aircraft cockpits. - -The Radial Gauge supports animated transitions between configuration states. The control gradually animates as it redraws changes to the needle, needle position, scale range, color range, and more. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=RadialGauge) - -## Syntax - -```xaml - - - - -``` - -## Sample Output - -![RadialGauge animation](../resources/images/Controls/RadialGauge.gif) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| IsInteractive | bool | Gets or sets a value indicating whether the control accepts setting its value through interaction | -| MaxAngle | int | Gets or sets the end angle of the scale, which corresponds with the Maximum value, in degrees | -| Maximum | double | Gets or sets the maximum value of the scale | -| MinAngle | int | Gets or sets the start angle of the scale, which corresponds with the Minimum value, in degrees | -| Minimum | double | Gets or sets the minimum value of the scale | -| NeedleBrush | SolidColorBrush | Gets or sets the needle brush | -| NeedleLength | double | Gets or sets the needle length, in percentage of the gauge radius | -| NeedleWidth | double | Gets or sets the needle width, in percentage of the gauge radius | -| NormalizedMaxAngle | double | Gets the normalized maximum angle | -| NormalizedMinAngle | double | Gets the normalized minimum angle | -| ScaleBrush | Brush | Gets or sets the scale brush | -| ScalePadding | double | Gets or sets the distance of the scale from the outside of the control, in percentage of the gauge radius | -| ScaleTickBrush | SolidColorBrush | Gets or sets the scale tick brush | -| ScaleTickWidth | double | Gets or sets the width of the scale ticks, in percentage of the gauge radius | -| ScaleWidth | double | Gets or sets the width of the scale, in percentage of the gauge radius | -| StepSize | double | Gets or sets the rounding interval for the Value | -| TickBrush | SolidColorBrush | Gets or sets the outer tick brush | -| TickLength | double | Gets or sets the length of the ticks, in percentage of the gauge radius | -| TickSpacing | int | Gets or sets the tick spacing, in units | -| TickWidth | double | Gets or sets the width of the ticks, in percentage of the gauge radius | -| TrailBrush | Brush | Gets or sets the trail brush | -| Unit | string | Gets or sets the displayed unit measure | -| Value | double | Gets or sets the current value | -| ValueAngle | double | Gets or sets the current angle of the needle (between MinAngle and MaxAngle). Setting the angle will update the Value | -| ValueStringFormat | string | Gets or sets the value string format | - -## Control style and template - -You can modify the default [Style](/uwp/api/windows.ui.xaml.style) and [ControlTemplate](/uwp/api/windows.ui.xaml.controls.controltemplate) to give the control a unique appearance. For information about modifying a control's style and template, see [Styling controls](/windows/uwp/design/controls-and-patterns/xaml-styles). The default style, template, and resources that define the look of the control are included in the RadialGauge.xaml file. For design purposes, RadialGauge.xaml is available on [GitHub](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/RadialGauge/RadialGauge.xaml). Styles and resources from different versions of the SDK might have different values. - -Starting in Toolkit version 2.2, RadialGauge.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article. - -This table shows the resources used by the [RadialGauge](/dotnet/api/microsoft.toolkit.uwp.ui.controls.radialgauge) control. - -| Resource key | Description | -| -- | -- | -- | -| RadialGaugeForegroundBrush | Label text color for the value of the gauge | -| RadialGaugeAccentBrush | Label text color for the units of the gauge | - -## Sample Project - -[RadialGauge Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialGauge). You can [see this in action](uwpct://Controls?sample=RadialGauge) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -[RadialGauge XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/RadialGauge/RadialGauge.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: RadialGauge +author: nmetulev +description: The Radial Gauge Control displays a value in a certain range using a needle on a circular face. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, Radial Gauge, RadialGauge, xaml control, xaml +--- + +# RadialGauge + +The [Radial Gauge](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.radialgauge) control displays a value in a certain range using a needle on a circular face. This control will make data visualizations and dashboards more engaging with rich style and interactivity. + +The round gauges are powerful, easy to use, and highly configurable to present dashboards capable of displaying clocks, industrial panels, automotive dashboards, and even aircraft cockpits. + +The Radial Gauge supports animated transitions between configuration states. The control gradually animates as it redraws changes to the needle, needle position, scale range, color range, and more. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=RadialGauge) + +## Syntax + +```xaml + + + + +``` + +## Sample Output + +![RadialGauge animation](../resources/images/Controls/RadialGauge.gif) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| IsInteractive | bool | Gets or sets a value indicating whether the control accepts setting its value through interaction | +| MaxAngle | int | Gets or sets the end angle of the scale, which corresponds with the Maximum value, in degrees | +| Maximum | double | Gets or sets the maximum value of the scale | +| MinAngle | int | Gets or sets the start angle of the scale, which corresponds with the Minimum value, in degrees | +| Minimum | double | Gets or sets the minimum value of the scale | +| NeedleBrush | SolidColorBrush | Gets or sets the needle brush | +| NeedleLength | double | Gets or sets the needle length, in percentage of the gauge radius | +| NeedleWidth | double | Gets or sets the needle width, in percentage of the gauge radius | +| NormalizedMaxAngle | double | Gets the normalized maximum angle | +| NormalizedMinAngle | double | Gets the normalized minimum angle | +| ScaleBrush | Brush | Gets or sets the scale brush | +| ScalePadding | double | Gets or sets the distance of the scale from the outside of the control, in percentage of the gauge radius | +| ScaleTickBrush | SolidColorBrush | Gets or sets the scale tick brush | +| ScaleTickWidth | double | Gets or sets the width of the scale ticks, in percentage of the gauge radius | +| ScaleWidth | double | Gets or sets the width of the scale, in percentage of the gauge radius | +| StepSize | double | Gets or sets the rounding interval for the Value | +| TickBrush | SolidColorBrush | Gets or sets the outer tick brush | +| TickLength | double | Gets or sets the length of the ticks, in percentage of the gauge radius | +| TickSpacing | int | Gets or sets the tick spacing, in units | +| TickWidth | double | Gets or sets the width of the ticks, in percentage of the gauge radius | +| TrailBrush | Brush | Gets or sets the trail brush | +| Unit | string | Gets or sets the displayed unit measure | +| Value | double | Gets or sets the current value | +| ValueAngle | double | Gets or sets the current angle of the needle (between MinAngle and MaxAngle). Setting the angle will update the Value | +| ValueStringFormat | string | Gets or sets the value string format | + +## Control style and template + +You can modify the default [Style](/uwp/api/windows.ui.xaml.style) and [ControlTemplate](/uwp/api/windows.ui.xaml.controls.controltemplate) to give the control a unique appearance. For information about modifying a control's style and template, see [Styling controls](/windows/uwp/design/controls-and-patterns/xaml-styles). The default style, template, and resources that define the look of the control are included in the RadialGauge.xaml file. For design purposes, RadialGauge.xaml is available on [GitHub](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/RadialGauge/RadialGauge.xaml). Styles and resources from different versions of the SDK might have different values. + +Starting in Toolkit version 2.2, RadialGauge.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article. + +This table shows the resources used by the [RadialGauge](/dotnet/api/microsoft.toolkit.uwp.ui.controls.radialgauge) control. + +| Resource key | Description | +| -- | -- | -- | +| RadialGaugeForegroundBrush | Label text color for the value of the gauge | +| RadialGaugeAccentBrush | Label text color for the units of the gauge | + +## Sample Project + +[RadialGauge Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialGauge). You can [see this in action](uwpct://Controls?sample=RadialGauge) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +[RadialGauge XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/RadialGauge/RadialGauge.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [RadialGauge source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/RadialGauge) \ No newline at end of file diff --git a/docs/controls/RadialProgressBar.md b/docs/controls/RadialProgressBar.md index 31189b04f..ff3f776cb 100644 --- a/docs/controls/RadialProgressBar.md +++ b/docs/controls/RadialProgressBar.md @@ -1,60 +1,61 @@ ---- -title: RadialProgressBar XAML Control -author: nmetulev -description: The Radial Progress Bar Control displays a value in a certain range using a cicular sector that grows clockwise until it becomes a full ring. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, Radial Progress Bar, RadialProgressBar, xaml control, xaml ---- - -# RadialProgressBar XAML Control - -The [Radial Progress Bar Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.radialprogressbar) displays a value in a certain range using a cicular sector that grows clockwise until it becomes a full ring. - -The control uses the same dependency properties as the standard Progress Bar, with the addition of: - -- A Thickness parameter, which sets the thickness of the circular sector and the outline it's drawn on -- An Outline property, which sets the brush of the circular outline - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=RadialProgressBar) - -## Syntax - -```xaml - - - - -``` - -## Sample Output - -![RadialProgressBar image](../resources/images/Controls/RadialProgressBar.png) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| Outline | Brush | Gets or sets the color of the circular ouline on which the segment is drawn | -| Thickness | double | Gets or sets the thickness of the circular ouline and segment | - -## Sample Project - -[RadialProgressBar Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar). You can [see this in action](uwpct://Controls?sample=RadialProgressBar) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -[RadialProgressBar XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: RadialProgressBar +author: nmetulev +description: The Radial Progress Bar Control displays a value in a certain range using a circular sector that grows clockwise until it becomes a full ring. + +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, Radial Progress Bar, RadialProgressBar, xaml control, xaml +--- + +# RadialProgressBar + +The [RadialProgressBar](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.radialprogressbar) control displays a value in a certain range using a circular sector that grows clockwise until it becomes a full ring. + +The control uses the same dependency properties as the standard Progress Bar, with the addition of: + +- A Thickness parameter, which sets the thickness of the circular sector and the outline it's drawn on +- An Outline property, which sets the brush of the circular outline + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=RadialProgressBar) + +## Syntax + +```xaml + + + + +``` + +## Sample Output + +![RadialProgressBar image](../resources/images/Controls/RadialProgressBar.png) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| Outline | Brush | Gets or sets the color of the circular outline on which the segment is drawn | +| Thickness | double | Gets or sets the thickness of the circular outline and segment | + +## Sample Project + +[RadialProgressBar Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar). You can [see this in action](uwpct://Controls?sample=RadialProgressBar) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +[RadialProgressBar XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [RadialProgressBar source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar) \ No newline at end of file diff --git a/docs/controls/RangeSelector.md b/docs/controls/RangeSelector.md index 0dc59d63d..0daa828e6 100644 --- a/docs/controls/RangeSelector.md +++ b/docs/controls/RangeSelector.md @@ -1,99 +1,99 @@ ---- -title: RangeSelector XAML Control -author: nmetulev -description: The RangeSelector Control is a Double Slider control that allows the user to select a sub-range of values from a larger range of possible values. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, RangeSelector, XAML Control, xaml, double slider -dev_langs: - - csharp - - vb ---- - -# RangeSelector XAML Control - -The [RangeSelector Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.rangeselector) is a Double Slider control that allows the user to select a sub-range of values from a larger range of possible values. The user can slide from the left or right of the range. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=RangeSelector) - -## Syntax - -```xaml - - - - -``` - -## Sample Output - -![RangeSelector animation](../resources/images/Controls/RangeSelector.gif) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| IsTouchOptimized | bool | Gets or sets a value indicating whether the control is optimized for touch use | -| Maximum | double | Gets or sets the maximum value of the range | -| Minimum | double | Gets or sets the minimum value of the range | -| RangeMax | double | Gets or sets the current upper limit value of the range | -| RangeMin | double | Gets or sets the current lower limit value of the range | -| StepFrequency | int | Get or set the interval between the values on the RangeSelector. For example; if you set `StepFrequency` to 2, using Minimum at 0 and Maximum at 10, the range values you can set will be 0,2,4,6,8,10 | - -## Examples - -> [!NOTE] -> If you are using a RangeSelector within a ScrollViewer you'll need to add some codes. This is because by default, the ScrollViewer will block the thumbs of the RangeSelector to capture the pointer. - -Here is an example of using RangeSelector within a ScrollViewer - -```xaml - -``` - -```csharp -private void Selector_OnDragStarted(object sender, DragStartedEventArgs e) -{ - ScrollViewer.HorizontalScrollMode = ScrollMode.Disabled; - ScrollViewer.VerticalScrollMode = ScrollMode.Disabled; -} - -private void Selector_OnDragCompleted(object sender, DragCompletedEventArgs e) -{ - ScrollViewer.HorizontalScrollMode = ScrollMode.Auto; - ScrollViewer.VerticalScrollMode = ScrollMode.Auto; -} -``` -```vb -Private Sub Selector_OnDragStarted(ByVal sender As Object, ByVal e As DragStartedEventArgs) - ScrollViewer.HorizontalScrollMode = ScrollMode.Disabled - ScrollViewer.VerticalScrollMode = ScrollMode.Disabled -End Sub - -Private Sub Selector_OnDragCompleted(ByVal sender As Object, ByVal e As DragCompletedEventArgs) - ScrollViewer.HorizontalScrollMode = ScrollMode.Auto - ScrollViewer.VerticalScrollMode = ScrollMode.Auto -End Sub -``` - -## Sample Project - -[RangeSelector Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RangeSelector). You can [see this in action](uwpct://Controls?sample=RangeSelector) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -[RangeSelector XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/RangeSelector/RangeSelector.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: RangeSelector +author: nmetulev +description: The RangeSelector Control is a Double Slider control that allows the user to select a sub-range of values from a larger range of possible values. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, RangeSelector, XAML Control, xaml, double slider +dev_langs: + - csharp + - vb +--- + +# RangeSelector + +The [RangeSelector](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.rangeselector) control is a Double Slider control that allows the user to select a sub-range of values from a larger range of possible values. The user can slide from the left or right of the range. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=RangeSelector) + +## Syntax + +```xaml + + + + +``` + +## Sample Output + +![RangeSelector animation](../resources/images/Controls/RangeSelector.gif) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| IsTouchOptimized | bool | Gets or sets a value indicating whether the control is optimized for touch use | +| Maximum | double | Gets or sets the maximum value of the range | +| Minimum | double | Gets or sets the minimum value of the range | +| RangeMax | double | Gets or sets the current upper limit value of the range | +| RangeMin | double | Gets or sets the current lower limit value of the range | +| StepFrequency | int | Get or set the interval between the values on the RangeSelector. For example; if you set `StepFrequency` to 2, using Minimum at 0 and Maximum at 10, the range values you can set will be 0,2,4,6,8,10 | + +## Examples + +> [!NOTE] +> If you are using a RangeSelector within a ScrollViewer you'll need to add some codes. This is because by default, the ScrollViewer will block the thumbs of the RangeSelector to capture the pointer. + +Here is an example of using RangeSelector within a ScrollViewer + +```xaml + +``` + +```csharp +private void Selector_OnDragStarted(object sender, DragStartedEventArgs e) +{ + ScrollViewer.HorizontalScrollMode = ScrollMode.Disabled; + ScrollViewer.VerticalScrollMode = ScrollMode.Disabled; +} + +private void Selector_OnDragCompleted(object sender, DragCompletedEventArgs e) +{ + ScrollViewer.HorizontalScrollMode = ScrollMode.Auto; + ScrollViewer.VerticalScrollMode = ScrollMode.Auto; +} +``` +```vb +Private Sub Selector_OnDragStarted(ByVal sender As Object, ByVal e As DragStartedEventArgs) + ScrollViewer.HorizontalScrollMode = ScrollMode.Disabled + ScrollViewer.VerticalScrollMode = ScrollMode.Disabled +End Sub + +Private Sub Selector_OnDragCompleted(ByVal sender As Object, ByVal e As DragCompletedEventArgs) + ScrollViewer.HorizontalScrollMode = ScrollMode.Auto + ScrollViewer.VerticalScrollMode = ScrollMode.Auto +End Sub +``` + +## Sample Project + +[RangeSelector Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RangeSelector). You can [see this in action](uwpct://Controls?sample=RangeSelector) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +[RangeSelector XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/RangeSelector/RangeSelector.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [RangeSelector source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/RangeSelector) \ No newline at end of file diff --git a/docs/controls/RemoteDevicePicker.md b/docs/controls/RemoteDevicePicker.md index f4a7e2e9c..aac940a61 100644 --- a/docs/controls/RemoteDevicePicker.md +++ b/docs/controls/RemoteDevicePicker.md @@ -1,5 +1,5 @@ --- -title: RemoteDevicePicker Control +title: RemoteDevicePicker author: avknaidu description: The RemoteDevicePicker control helps you to pick a device that you can use to Remote Launch Apps, Services. keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, RemoteDevicePicker, picker @@ -7,7 +7,7 @@ dev_langs: - csharp --- -# RemoteDevicePicker Control +# RemoteDevicePicker The [RemoteDevicePicker](/dotnet/api/microsoft.toolkit.uwp.ui.controls.remotedevicepicker) gives you a list of Remote Systems. All the systems must be signed in with the same Microsoft Account (MSA) @@ -51,7 +51,7 @@ await new MessageDialog($"You picked {remoteSystems.Count().ToString()} Device(s ## Sample Project -[RemoteDevicePicker Sample Page Source](https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RemoteDevicePicker). You can [see this in action](uwpct://Controls?sample=RemoteDevicePicker) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[RemoteDevicePicker Sample Page Source](https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RemoteDevicePicker). You can [see this in action](uwpct://Controls?sample=RemoteDevicePicker) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Default Template diff --git a/docs/controls/RotatorTile.md b/docs/controls/RotatorTile.md index 0e78df228..c487294de 100644 --- a/docs/controls/RotatorTile.md +++ b/docs/controls/RotatorTile.md @@ -43,7 +43,7 @@ The [Rotator Tile Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.rotator ## Sample Project -[RotatorTile Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RotatorTile). You can [see this in action](uwpct://Controls?sample=RotatorTile) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[RotatorTile Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RotatorTile). You can [see this in action](uwpct://Controls?sample=RotatorTile) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Default Template diff --git a/docs/controls/ScrollHeader.md b/docs/controls/ScrollHeader.md index 799fa72d1..6d97312fb 100644 --- a/docs/controls/ScrollHeader.md +++ b/docs/controls/ScrollHeader.md @@ -1,67 +1,67 @@ ---- -title: ScrollHeader XAML Control -author: nmetulev -description: The ScrollHeader Control provides a header for ListViews or GridViews that adds the ability to keep its content visible or fade it out while scrolling down. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, ScrollHeader, XAML Control, xaml ---- - -# ScrollHeader XAML Control - -The [ScrollHeader Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.scrollheader) provides a header for ListViews or GridViews that adds the ability to keep its content visible or fade it out while scrolling down. It also has a quick return mode where the header hides when the ListView is scrolled down and reappears immediately as soon as the ListView is scrolled up again. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=ScrollHeader) - -## Syntax - -```xaml - - - - - - - - - - - - - - - - - - - -``` - -## Sample Output - -![ScrollHeader animation](../resources/images/Controls/ScrollHeader.gif) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| Mode | [ScrollHeaderMode](/dotnet/api/microsoft.toolkit.uwp.ui.controls.scrollheadermode) | Gets or sets a value indicating whether the current mode. Default is none | -| TargetListViewBase | ListViewBase | Gets or sets the container this header belongs to | - -## Sample Project - -[ScrollHeader Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollHeader). You can [see this in action](uwpct://Controls?sample=ScrollHeader) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -[ScrollHeader XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/ScrollHeader/ScrollHeader.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: ScrollHeader +author: nmetulev +description: The ScrollHeader Control provides a header for ListViews or GridViews that adds the ability to keep its content visible or fade it out while scrolling down. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, ScrollHeader, XAML Control, xaml +--- + +# ScrollHeader + +The [ScrollHeader](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.scrollheader) control provides a header for ListViews or GridViews that adds the ability to keep its content visible or fade it out while scrolling down. It also has a quick return mode where the header hides when the ListView is scrolled down and reappears immediately as soon as the ListView is scrolled up again. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=ScrollHeader) + +## Syntax + +```xaml + + + + + + + + + + + + + + + + + + + +``` + +## Sample Output + +![ScrollHeader animation](../resources/images/Controls/ScrollHeader.gif) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| Mode | [ScrollHeaderMode](/dotnet/api/microsoft.toolkit.uwp.ui.controls.scrollheadermode) | Gets or sets a value indicating whether the current mode. Default is none | +| TargetListViewBase | ListViewBase | Gets or sets the container this header belongs to | + +## Sample Project + +[ScrollHeader Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollHeader). You can [see this in action](uwpct://Controls?sample=ScrollHeader) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +[ScrollHeader XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/ScrollHeader/ScrollHeader.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [ScrollHeader source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/ScrollHeader) \ No newline at end of file diff --git a/docs/controls/StaggeredPanel.md b/docs/controls/StaggeredPanel.md index 722225f0a..05744a147 100644 --- a/docs/controls/StaggeredPanel.md +++ b/docs/controls/StaggeredPanel.md @@ -46,7 +46,7 @@ The [StaggeredPanel](/dotnet/api/microsoft.toolkit.uwp.ui.controls.staggeredpane ## Sample Project -[StaggeredPanel Sample Page](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/StaggeredPanel). You can [see this in action](uwpct://Controls?sample=StaggeredPanel) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[StaggeredPanel Sample Page](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/StaggeredPanel). You can [see this in action](uwpct://Controls?sample=StaggeredPanel) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Default Template diff --git a/docs/controls/TabView.md b/docs/controls/TabView.md index e2a9ae06a..919fcbc42 100644 --- a/docs/controls/TabView.md +++ b/docs/controls/TabView.md @@ -1,5 +1,5 @@ --- -title: TabView XAML Control +title: TabView author: michael-hawker description: Learn how to use the TabView XAML control. TabView is a control for displaying a set of tabs and their content. keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, TabView, TabControl @@ -7,8 +7,8 @@ dev_langs: - csharp --- -# TabView XAML Control -The [TabView](/dotnet/api/microsoft.toolkit.uwp.ui.controls.tabview) displays a set of [TabViewItem](/dotnet/api/microsoft.toolkit.uwp.ui.controls.tabviewitem) in a shared container. +# TabView +The [TabView](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.tabview) displays a set of [TabViewItem](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.tabviewitem) in a shared container. > [!div class="nextstepaction"] > [Try it in the sample app](uwpct://Controls?sample=TabView) @@ -128,7 +128,7 @@ The TabView supports data binding as well. The following example shows binding ## Sample Project -[TabView Sample Page Source](https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabView). You can [see this in action](uwpct://Controls?sample=TabView) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[TabView Sample Page Source](https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabView). You can [see this in action](uwpct://Controls?sample=TabView) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Default Template diff --git a/docs/controls/TextToolbar.md b/docs/controls/TextToolbar.md index 7ea87fbd6..859d95049 100644 --- a/docs/controls/TextToolbar.md +++ b/docs/controls/TextToolbar.md @@ -1,127 +1,128 @@ ---- -title: TextToolbar XAML Control -author: williamabradley -description: The TextToolbar Control is a universal Text Editing Control for the RichEditBox Control. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, TextToolbar, RichEditBox, XAML Control, xaml -dev_langs: - - csharp - - vb ---- - -# TextToolbar XAML Control - -The [TextToolbar Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbar) is a universal Text Editing Control for the [RichEditBox Control](/uwp/api/Windows.UI.Xaml.Controls.RichEditBox). It can format with Markdown Formatting, Rich Text Format (RTF) Formatting, and it also allows you to implement your own Formatter, so you can edit Text for any other format using the Toolbar. -It supports Keyboard Shortcuts, Button Toggling for indicating whether a Format is enabled, such as putting the cursor on Bold Text in Rich Text Formatting. -You can also Remove Default Buttons from any format, or Add Custom buttons to any format, without restyling the whole control, or inheriting a Formatter Class. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=TextToolbar) - -## Syntax - -```xaml - - -``` - -## Sample Output - -![TextToolbar](../resources/images/Controls/TextToolbar.png) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| ButtonModifications | [DefaultButtonModificationList](/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbarbuttons.defaultbuttonmodificationlist) | Gets or sets a list of Default buttons to remove from the UI | -| ControlKeyDown | bool | Gets a value indicating whether Control is pressed down | -| CustomButtons | [ButtonMap](/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbarbuttons.buttonmap) | Gets or sets a list of buttons to add to the Default Button set | -| DefaultButtons | [ButtonMap](/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbarbuttons.buttonmap) | Gets the default buttons for this format | -| Editor | RichEditBox | Gets or sets the RichEditBox to Attach to, this is required for any formatting to work | -| Format | [Format](/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbarformats.format) | Gets or sets which formatter to use, and which buttons to provide | -| Formatter | [Formatter](/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbarformats.formatter) | Gets or sets the formatter which is used to format the text from the buttons | -| Labels | [TextToolbarStrings](/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbarstrings) | Gets or sets the default string Labels | -| LastKeyPress | [VirtualKey](/uwp/api/Windows.System.VirtualKey) | Gets the last key pressed using the Editor | -| ShiftKeyDown | bool | Gets a value indicating whether Shift is pressed down | -| UseURIChecker | bool | Gets or sets a value indicating whether to enable use of URI Checker for Link Creator. This allows you to verify Absolute URIs, before creating the Link | - -## Create a Custom Formatter -In order to create your own Formatter, you need to Inherit from the **Formatter** Class. Then on the TextToolbar, Set the `Format` property to `Custom` and then Set the `Formatter` property with your instantiated Custom Formatter. - -When you create the Class, you will need to override the `DefaultButtons` Property. This will allow you to define what buttons you want your Format to display on the **Toolbar**. - -If you want to use a Common Button Template, such as Bold, Italics, etc. You can get those by Instantiating a `CommonButtons` Instance in your Formatter Class, however, you will need to implement the **ButtonActions** Class, and Instantiate it in your Formatter's `ButtonActions` property, or replace the `Action`/`Shift Action` Property on each button you use. - -_See the MarkDownFormatter Class for reference on how to create a Formatter:_ -[MarkDownFormatter Code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/TextToolbar/Formats/MarkDown) - -_See the Sample Formatter Class from the Sample App:_ -[SampleFormatter Code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TextToolbar/SampleFormatter.cs) - -_Available CommonButtons:_ -[CommonButton Definitions](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/TextToolbar/ToolbarItems/Common) - -## Examples - -Example of adding Add/Remove Buttons - -**XAML** - -```xaml - - - - - - - - - - -``` - -**C#** - -```csharp -var button = Toolbar.GetDefaultButton(ButtonType.Headers); -button.Visibility = Windows.UI.Xaml.Visibility.Collapsed; -Toolbar.CustomButtons.Add(new ToolbarButton -{ - Name = "CustomButton", - Icon = new SymbolIcon(Symbol.ReportHacked), - Position = 1, - Activation = button => System.Diagnostics.Debug.WriteLine($"{button.Name} Activated"), - ShortcutKey = Windows.System.VirtualKey.H -}); -Toolbar.CustomButtons.Add(new ToolbarSeparator { Position = 2 }); -``` -```vb -Dim button = Toolbar.GetDefaultButton(ButtonType.Headers) -button.Visibility = Windows.UI.Xaml.Visibility.Collapsed -Toolbar.CustomButtons.Add(New ToolbarButton With { - .Name = "CustomButton", - .Icon = New SymbolIcon(Symbol.ReportHacked), - .Position = 1, - .Activation = Sub(btn) Debug.WriteLine($"{btn.Name} Activated"), - .ShortcutKey = Windows.System.VirtualKey.H}) -Toolbar.CustomButtons.Add(New ToolbarSeparator With {.Position = 2}) -``` - -## Sample Project - -[TextToolbar Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TextToolbar). You can [see this in action](uwpct://Controls?sample=TextToolbar) in [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: TextToolbar +author: williamabradley +description: The TextToolbar Control is a universal Text Editing Control for the RichEditBox Control. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, TextToolbar, RichEditBox, XAML Control, xaml +dev_langs: + - csharp + - vb +--- + +# TextToolbar + +The [TextToolbar](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbar) control is a universal Text Editing Control for the [RichEditBox Control](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.RichEditBox). It can format with Markdown Formatting, Rich Text Format (RTF) Formatting, and it also allows you to implement your own Formatter, so you can edit Text for any other format using the Toolbar. + +It supports Keyboard Shortcuts, Button Toggling for indicating whether a Format is enabled, such as putting the cursor on Bold Text in Rich Text Formatting. +You can also Remove Default Buttons from any format, or Add Custom buttons to any format, without restyling the whole control, or inheriting a Formatter Class. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=TextToolbar) + +## Syntax + +```xaml + + +``` + +## Sample Output + +![TextToolbar](../resources/images/Controls/TextToolbar.png) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| ButtonModifications | [DefaultButtonModificationList](/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbarbuttons.defaultbuttonmodificationlist) | Gets or sets a list of Default buttons to remove from the UI | +| ControlKeyDown | bool | Gets a value indicating whether Control is pressed down | +| CustomButtons | [ButtonMap](/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbarbuttons.buttonmap) | Gets or sets a list of buttons to add to the Default Button set | +| DefaultButtons | [ButtonMap](/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbarbuttons.buttonmap) | Gets the default buttons for this format | +| Editor | RichEditBox | Gets or sets the RichEditBox to Attach to, this is required for any formatting to work | +| Format | [Format](/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbarformats.format) | Gets or sets which formatter to use, and which buttons to provide | +| Formatter | [Formatter](/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbarformats.formatter) | Gets or sets the formatter which is used to format the text from the buttons | +| Labels | [TextToolbarStrings](/dotnet/api/microsoft.toolkit.uwp.ui.controls.texttoolbarstrings) | Gets or sets the default string Labels | +| LastKeyPress | [VirtualKey](/uwp/api/Windows.System.VirtualKey) | Gets the last key pressed using the Editor | +| ShiftKeyDown | bool | Gets a value indicating whether Shift is pressed down | +| UseURIChecker | bool | Gets or sets a value indicating whether to enable use of URI Checker for Link Creator. This allows you to verify Absolute URIs, before creating the Link | + +## Create a Custom Formatter +In order to create your own Formatter, you need to Inherit from the **Formatter** Class. Then on the TextToolbar, Set the `Format` property to `Custom` and then Set the `Formatter` property with your instantiated Custom Formatter. + +When you create the Class, you will need to override the `DefaultButtons` Property. This will allow you to define what buttons you want your Format to display on the **Toolbar**. + +If you want to use a Common Button Template, such as Bold, Italics, etc. You can get those by Instantiating a `CommonButtons` Instance in your Formatter Class, however, you will need to implement the **ButtonActions** Class, and Instantiate it in your Formatter's `ButtonActions` property, or replace the `Action`/`Shift Action` Property on each button you use. + +_See the MarkDownFormatter Class for reference on how to create a Formatter:_ +[MarkDownFormatter Code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/TextToolbar/Formats/MarkDown) + +_See the Sample Formatter Class from the Sample App:_ +[SampleFormatter Code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TextToolbar/SampleFormatter.cs) + +_Available CommonButtons:_ +[CommonButton Definitions](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/TextToolbar/ToolbarItems/Common) + +## Examples + +Example of adding Add/Remove Buttons + +**XAML** + +```xaml + + + + + + + + + + +``` + +**C#** + +```csharp +var button = Toolbar.GetDefaultButton(ButtonType.Headers); +button.Visibility = Windows.UI.Xaml.Visibility.Collapsed; +Toolbar.CustomButtons.Add(new ToolbarButton +{ + Name = "CustomButton", + Icon = new SymbolIcon(Symbol.ReportHacked), + Position = 1, + Activation = button => System.Diagnostics.Debug.WriteLine($"{button.Name} Activated"), + ShortcutKey = Windows.System.VirtualKey.H +}); +Toolbar.CustomButtons.Add(new ToolbarSeparator { Position = 2 }); +``` +```vb +Dim button = Toolbar.GetDefaultButton(ButtonType.Headers) +button.Visibility = Windows.UI.Xaml.Visibility.Collapsed +Toolbar.CustomButtons.Add(New ToolbarButton With { + .Name = "CustomButton", + .Icon = New SymbolIcon(Symbol.ReportHacked), + .Position = 1, + .Activation = Sub(btn) Debug.WriteLine($"{btn.Name} Activated"), + .ShortcutKey = Windows.System.VirtualKey.H}) +Toolbar.CustomButtons.Add(New ToolbarSeparator With {.Position = 2}) +``` + +## Sample Project + +[TextToolbar Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TextToolbar). You can [see this in action](uwpct://Controls?sample=TextToolbar) in [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [TextToolbar source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/TextToolbar) \ No newline at end of file diff --git a/docs/controls/TileControl.md b/docs/controls/TileControl.md index 73fc573a5..a34c91d68 100644 --- a/docs/controls/TileControl.md +++ b/docs/controls/TileControl.md @@ -1,66 +1,66 @@ ---- -title: TileControl XAML Control -author: samoteph -description: The Tile Control is a control that repeats an image many times. It enables you to use animation and synchronization with a ScrollViewer to create parallax effect. XAML or Microsoft Composition are automatically used to render the control. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, TileControl, XAML Control, xaml ---- - -# TileControl XAML Control - -The [Tile Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.tilecontrol) is a control that repeats an image many times. It enables you to use animation and synchronization with a ScrollViewer to create parallax effect. XAML or Microsoft Composition are automatically used to render the control. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=TileControl) - -## Syntax - -```xaml - -``` - -## Sample Output - -![TileControl animation](../resources/images/Controls/TileControl.gif) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| AnimationDuration | double | Gets or sets a duration for the animation of the tile | -| AnimationStepX | double | Gets or sets the animation step of the OffsetX | -| AnimationStepY | double | Gets or sets the animation step of the OffsetY | -| ImageAlignment | [ImageAlignment](/dotnet/api/microsoft.toolkit.uwp.ui.controls.imagealignment) | Gets or sets the alignment of the tile when the `ScrollOrientation` is set to Vertical or Horizontal. Valid values are Left or Right for `ScrollOrientation` set to Horizontal and Top or Bottom for `ScrollOrientation` set to Vertical | -| ImageSource | Uri | Gets or sets the uri of the image to load | -| IsAnimated | bool | Gets or sets a value indicating whether the tile is animated or not | -| IsCompositionSupported | bool | Gets a value indicating whether the platform supports Composition | -| OffsetX | double | Gets or sets an X offset of the image | -| OffsetY | double | Gets or sets an Y offset of the image | -| ParallaxSpeedRatio | int | Gets or sets the speed ratio of the parallax effect with the `ScrollViewerContainer` | -| ScrollOrientation | [ScrollOrientation](/dotnet/api/microsoft.toolkit.uwp.ui.controls.scrollorientation) | Gets or sets the scroll orientation of the tile. Less images are drawn when you choose the Horizontal or Vertical value | -| ScrollViewerContainer | FrameworkElement | Gets or sets a ScrollViewer or a frameworkElement containing a ScrollViewer. The tile control is synchronized with the offset of the scrollviewer | - -## Events - -| Events | Description | -| -- | -- | -| ImageLoaded | The image loaded event | - -## Sample Project - -[TileControl Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TileControl). You can [see this in action](uwpct://Controls?sample=TileControl) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). - -## Default Template - -[TileControl XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/TileControl/TileControl.xaml) is the XAML template used in the toolkit for the default styling. - -## Requirements - -| Device family | Universal, 10.0.16299.0 or higher | -| -- | -- | -| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | -| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | - -## API - +--- +title: TileControl +author: samoteph +description: The Tile Control is a control that repeats an image many times. It enables you to use animation and synchronization with a ScrollViewer to create parallax effect. XAML or Microsoft Composition are automatically used to render the control. +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, TileControl, XAML Control, xaml +--- + +# TileControl + +The [Tile](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.tilecontrol) control is a control that repeats an image many times. It enables you to use animation and synchronization with a ScrollViewer to create parallax effect. XAML or Microsoft Composition are automatically used to render the control. + +> [!div class="nextstepaction"] +> [Try it in the sample app](uwpct://Controls?sample=TileControl) + +## Syntax + +```xaml + +``` + +## Sample Output + +![TileControl animation](../resources/images/Controls/TileControl.gif) + +## Properties + +| Property | Type | Description | +| -- | -- | -- | +| AnimationDuration | double | Gets or sets a duration for the animation of the tile | +| AnimationStepX | double | Gets or sets the animation step of the OffsetX | +| AnimationStepY | double | Gets or sets the animation step of the OffsetY | +| ImageAlignment | [ImageAlignment](/dotnet/api/microsoft.toolkit.uwp.ui.controls.imagealignment) | Gets or sets the alignment of the tile when the `ScrollOrientation` is set to Vertical or Horizontal. Valid values are Left or Right for `ScrollOrientation` set to Horizontal and Top or Bottom for `ScrollOrientation` set to Vertical | +| ImageSource | Uri | Gets or sets the uri of the image to load | +| IsAnimated | bool | Gets or sets a value indicating whether the tile is animated or not | +| IsCompositionSupported | bool | Gets a value indicating whether the platform supports Composition | +| OffsetX | double | Gets or sets an X offset of the image | +| OffsetY | double | Gets or sets an Y offset of the image | +| ParallaxSpeedRatio | int | Gets or sets the speed ratio of the parallax effect with the `ScrollViewerContainer` | +| ScrollOrientation | [ScrollOrientation](/dotnet/api/microsoft.toolkit.uwp.ui.controls.scrollorientation) | Gets or sets the scroll orientation of the tile. Less images are drawn when you choose the Horizontal or Vertical value | +| ScrollViewerContainer | FrameworkElement | Gets or sets a ScrollViewer or a frameworkElement containing a ScrollViewer. The tile control is synchronized with the offset of the scrollviewer | + +## Events + +| Events | Description | +| -- | -- | +| ImageLoaded | The image loaded event | + +## Sample Project + +[TileControl Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TileControl). You can [see this in action](uwpct://Controls?sample=TileControl) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). + +## Default Template + +[TileControl XAML File](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI.Controls/TileControl/TileControl.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements + +| Device family | Universal, 10.0.16299.0 or higher | +| -- | -- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | + +## API + * [TileControl source code](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.UI.Controls/TileControl) \ No newline at end of file diff --git a/docs/controls/TokenizingTextBox.md b/docs/controls/TokenizingTextBox.md index 3198ecdcf..c158a509c 100644 --- a/docs/controls/TokenizingTextBox.md +++ b/docs/controls/TokenizingTextBox.md @@ -1,5 +1,5 @@ --- -title: TokenizingTextBox XAML Control +title: TokenizingTextBox author: michael-hawker description: A text input control that auto-suggests and displays token items. keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, TokenizingTextBox @@ -7,7 +7,7 @@ dev_langs: - csharp --- -# TokenizingTextBox XAML Control +# TokenizingTextBox The [TokenizingTextBox](/dotnet/api/microsoft.toolkit.uwp.ui.controls.tokenizingtextbox) is an advanced [AutoSuggestBox](/uwp/api/Windows.UI.Xaml.Controls.AutoSuggestBox) which will display selected items as tokens within the textbox. A user can easily see the picked items or remove them easily. @@ -82,7 +82,7 @@ If you inspect the *default* `ItemsSource` or `Items` of the `TokenizingTextBox` ## Sample Project -[TokenizingTextBox sample page Source](https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TokenizingTextBox). You can [see this in action](uwpct://Controls?sample=TokenizingTextBox) in [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[TokenizingTextBox sample page Source](https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TokenizingTextBox). You can [see this in action](uwpct://Controls?sample=TokenizingTextBox) in [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Requirements diff --git a/docs/controls/UniformGrid.md b/docs/controls/UniformGrid.md index 6eab4fadf..8f727b41d 100644 --- a/docs/controls/UniformGrid.md +++ b/docs/controls/UniformGrid.md @@ -1,13 +1,13 @@ --- -title: UniformGrid XAML Control +title: UniformGrid author: michael-hawker description: The UniformGrid Control presents items in a evenly-spaced set of rows or columns to fill the total available display space. keywords: windows 10, uwp, uwp community toolkit, uwp toolkit, UniformGrid, xaml control, xaml, grid, layout, responsive --- -# UniformGrid XAML Control +# UniformGrid -The **UniformGrid Control** is a responsive layout control which arranges items in a evenly-spaced set of rows or columns to fill the total available display space. Each cell in the grid, by default, will be the same size. +The **UniformGrid** control is a responsive layout control which arranges items in a evenly-spaced set of rows or columns to fill the total available display space. Each cell in the grid, by default, will be the same size. If no value for `Rows` and `Columns` are provided, the UniformGrid will create a square layout based on the total number of visible items. @@ -176,7 +176,7 @@ In addition to `FlowDirection` to layout items from Right-to-Left. The UWP Unif ## Sample Project -[UniformGrid Sample Page](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/UniformGrid). You can [see this in action](uwpct://Controls?sample=UniformGrid) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). +[UniformGrid Sample Page](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/UniformGrid). You can [see this in action](uwpct://Controls?sample=UniformGrid) in the [Windows Community Toolkit Sample App](https://aka.ms/uwptoolkitapp). ## Requirements (Windows 10 Device Family) diff --git a/docs/controls/WrapPanel.md b/docs/controls/WrapPanel.md index ec14251eb..5c9fb8ee6 100644 --- a/docs/controls/WrapPanel.md +++ b/docs/controls/WrapPanel.md @@ -1,89 +1,89 @@ ---- -title: WrapPanel XAML Control -author: nmetulev -description: The WrapPanel Control Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. -keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, WrapPanel, XAML Control, xaml ---- - -# WrapPanel XAML Control - -The [WrapPanel Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.wrappanel) Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. Subsequent ordering happens sequentially from top to bottom or from right to left, depending on the value of the Orientation property. - -The WrapPanel position child controls based on orientation, horizontal orientation (default) positions controls from left to right and vertical orientation positions controls from top to bottom, and once the max width or height is reached the control automatically create row or column based on the orientation. - -Spacing can be automatically added between items using the HorizontalSpacing and VerticalSpacing properties. When the Orientation is Horizontal, HorizontalSpacing adds uniform horizontal spacing between each individual item, and VerticalSpacing adds uniform spacing between each row of items. - -When the Orientation is Vertical, HorizontalSpacing adds uniform spacing between each column of items, and VerticalSpacing adds uniform vertical spacing between individual items. - -> [!div class="nextstepaction"] -> [Try it in the sample app](uwpct://Controls?sample=WrapPanel) - -## Syntax - -```xaml - -``` - -## Sample Output - -![WrapPanel animation](../resources/images/Controls/WrapPanel.gif) - -## Properties - -| Property | Type | Description | -| -- | -- | -- | -| HorizontalSpacing | double | Gets or sets the horizontal distance between items | -| Orientation | Orientation | Gets or sets the orientation of the WrapPanel, Horizontal or vertical means that child controls will be added horizontally until the width of the panel can't fit more control then a new row is added to fit new horizontal added child controls, vertical means that child will be added vertically until the height of the panel is recieved then a new column is added | -| Padding | Thickness | Gets or sets the distance between the border and its child object | -| VerticalSpacing | double | Gets or sets the vertical distance between items | - -## Examples - -The following example of adding WrapPanel Control. - -```xaml - - - - - - - - - - - - -