From ff16caacc25b36f25aee1bbb36b7cfe19802ed0b Mon Sep 17 00:00:00 2001 From: Peter Date: Wed, 9 Oct 2024 02:00:15 +0800 Subject: [PATCH 1/3] Add a schema for ControlInfoData.json --- .../DataModel/ControlInfoData.json | 5407 +++++++++-------- .../DataModel/ControlInfoDataSchema.json | 115 + 2 files changed, 2819 insertions(+), 2703 deletions(-) create mode 100644 source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoDataSchema.json diff --git a/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoData.json b/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoData.json index ccddb126..eeb51bef 100644 --- a/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoData.json +++ b/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoData.json @@ -1,2706 +1,2707 @@ { - "Groups": [ - { - "UniqueId": "NewControls", - "Title": "Home", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [] - }, - { - "UniqueId": "AllControls", - "Title": "All controls", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [] - }, - { - "UniqueId": "MenusAndToolbars", - "Title": "Menus and Toolbars", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "XamlUICommand", - "Title": "XamlUICommand", - "Subtitle": "An object which is used to define the look and feel of a given command.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", - "Description": "An object which is used to define the look and feel of a given command, which can be reused across your app, and which is understood natively by the standard XAML controls.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-xamluicommand-class" - }, - { - "Title": "XamlUICommand - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.input.xamluicommand" - } - ], - "RelatedControls": [ - "StandardUICommand", - "AppBarButton", - "AppBarToggleButton", - "CommandBar" - ] - }, - { - "UniqueId": "StandardUICommand", - "Title": "StandardUICommand", - "Subtitle": "A StandardUICommand is a built-in 'XamlUICommand' which represents a commonly used command, e.g. 'Save'.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", - "Description": "StandardUICommands are a set of built-in XamlUICommands represeting commonly used commands. Including the look and feel of a given command, which can be reused across your app, and which is understood natively by the standard XAML controls. E.g. Save, Open, Copy, Paste, etc.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-standarduicommand-class" - }, - { - "Title": "StandardUICommand - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.input.standarduicommand" - } - ], - "RelatedControls": [ - "XamlUICommand", - "AppBarButton", - "AppBarToggleButton", - "CommandBar" - ] - }, - { - "UniqueId": "AppBarButton", - "Title": "AppBarButton", - "Subtitle": "A button that's styled for use in a CommandBar.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarButtonIcon.png", - "Description": "App bar buttons differ from standard buttons in several ways:\n- Their default appearance is a transparent background with a smaller size.\n- You use the Label and Icon properties to set the content instead of the Content property. The Content property is ignored.\n- The button's IsCompact property controls its size.", - "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.

Use the Label and Icon properties to define the content of the app bar buttons. Set the Label property to a string to specify the text label. The label is shown by default but is hidden when the button is in its compact state, so you also need to specify a meaningful icon. To do that, set the button's Icon property to an element derived from the IconElement class. Four kinds of icon elements are provided:

FontIcon - The icon is based on a glyph from the specified font family.

BitmapIcon - The icon is based on a bitmap image file with the specified Uri.

PathIcon - The icon is based on Path data.

SymbolIcon - The icon is based on a predefined list of glyphs from the Segoe UI Symbol font.

Look at the AppBarButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AppBarButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbarbutton" - }, - { - "Title": "SymbolIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" - }, - { - "Title": "FontIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" - }, - { - "Title": "BitmapIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" - }, - { - "Title": "PathIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" - } - ], - "RelatedControls": [ - "AppBarToggleButton", - "AppBarSeparator", - "CommandBar" - ] - }, - { - "UniqueId": "AppBarSeparator", - "Title": "AppBarSeparator", - "Subtitle": "A vertical line that's used to visually separate groups of commands in an app bar.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", - "Description": "An AppBarSeparator creates a vertical line to visually separate groups of commands in a app bar. It has a compact state with reduced padding to match the compact state of the AppBarButton and AppBarToggleButton controls.", - "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons and separators on this page change.

When the IsCompact property is true, the padding around the AppBarSeparator is reduced.

Look at the AppBarSeparatorPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AppBarSeparator - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbarseparator" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" - } - ], - "RelatedControls": [ - "AppBarButton", - "AppBarToggleButton", - "CommandBar" - ] - }, - { - "UniqueId": "AppBarToggleButton", - "Title": "AppBarToggleButton", - "Subtitle": "A button that can be on, off, or indeterminate like a CheckBox, and is styled for use in an app bar or other specialized UI.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarToggleButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarToggleButtonIcon.png", - "Description": "An AppBarToggleButton looks like an AppBarButton, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.", - "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.

Look at the AppBarToggleButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AppBarToggleButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbartogglebutton" - }, - { - "Title": "SymbolIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" - }, - { - "Title": "FontIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" - }, - { - "Title": "BitmapIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" - }, - { - "Title": "PathIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" - } - ], - "RelatedControls": [ - "AppBarButton", - "AppBarSeparator", - "CommandBar" - ] - }, - { - "UniqueId": "CommandBar", - "Title": "CommandBar", - "Subtitle": "A toolbar for displaying application-specific commands that handles layout and resizing of its contents.", - "ImagePath": "ms-appx:///Assets/ControlImages/CommandBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CommandBarIcon.png", - "Description": "The CommandBar simplifies the creation of basic app bars by providing:\n- Automatic layout of commands, with primary commands on the right and secondary commands on the left.\n- Automatic resizing of app bar commands when the app size changes.\nWhen you need an app bar that contains only AppBarButton,AppBarToggleButton , and AppBarSeparator controls, use a CommandBar. If you need more complex content, such as images, progress bars, or text blocks, use an AppBar control.", - "Content": "

The bottom app bar on this page is a CommandBar control.

Add secondary commands and then resize the app to see how the CommandBar automatically adapts to different widths.

This CommandBar element is in the ItemPage so it can be shared across all control pages in the app. Look at the ItemPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CommandBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.commandbar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" - } - ], - "RelatedControls": [ - "AppBarButton", - "AppBarToggleButton", - "AppBarSeparator" - ] - }, - { - "UniqueId": "MenuBar", - "Title": "MenuBar", - "Subtitle": "A classic menu, allowing the display of MenuItems containing MenuFlyoutItems.", - "ImagePath": "ms-appx:///Assets/ControlImages/MenuBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", - "Description": "The Menubar simplifies the creation of basic applications by providing a set of menus at the top of the app or window.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "MenuBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.MenuBar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/menus" - } - ], - "RelatedControls": [ - "CommandBar", - "MenuFlyout", - "StandardUICommand", - "XamlUICommand" - ] - }, - { - "UniqueId": "CommandBarFlyout", - "Title": "CommandBarFlyout", - "Subtitle": "A mini-toolbar displaying proactive commands, and an optional menu of commands.", - "ImagePath": "ms-appx:///Assets/ControlImages/CommandBarFlyout.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CommandBarFlyoutIcon.png", - "Description": "A mini-toolbar which displays a set of proactive commands, as well as a secondary menu of commands if desired.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CommandBarFlyout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.commandbarflyout" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar-flyout" - } - ], - "RelatedControls": [ - "CommandBar", - "MenuFlyout", - "RichEditBox", - "TextBox", - "StandardUICommand", - "XamlUICommand" - ] - }, - { - "UniqueId": "MenuFlyout", - "Title": "MenuFlyout", - "Subtitle": "Shows a contextual list of simple commands or options.", - "ImagePath": "ms-appx:///Assets/ControlImages/MenuFlyout.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuFlyoutIcon.png", - "Description": "A MenuFlyout displays lightweight UI that is light dismissed by clicking or tapping off of it. Use it to let the user choose from a contextual list of simple commands or options.", - "Content": "

Look at the MenuFlyoutPage.xaml file in Visual Studio to see the full code.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "MenuFlyout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyout" - }, - { - "Title": "MenuFlyoutItem - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyoutitem" - }, - { - "Title": "MenuFlyoutSeparator - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyoutseparator" - }, - { - "Title": "ToggleMenuFlyoutItem - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.togglemenuflyoutitem" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/menus" - } - ], - "RelatedControls": [ - "Flyout", - "ContentDialog", - "Button", - "AppBarButton" - ] - }, - { - "UniqueId": "SwipeControl", - "Title": "SwipeControl", - "Subtitle": "Touch gesture for quick menu actions on items.", - "ImagePath": "ms-appx:///Assets/ControlImages/SwipeControl.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SwipeIcon.png", - "Description": "Touch gesture for quick menu actions on items.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "SwipeControl - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.swipecontrol" - }, - { - "Title": "SwipeItems - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.swipeitems" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/swipe" - }, - { - "Title": "Gesture Actions", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/collection-commanding" - } - ], - "RelatedControls": [ - "GridView", - "ListView" - ] - } - ] - }, - { - "UniqueId": "Collections", - "Title": "Collections", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "FlipView", - "Title": "FlipView", - "Subtitle": "Presents a collection of items that the user can flip through, one item at a time.", - "ImagePath": "ms-appx:///Assets/ControlImages/FlipView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/FlipViewIcon.png", - "Description": "The FlipView lets you flip through a collection of items, one at a time. It's great for displaying images from a gallery, pages of a magazine, or similar items.", - "Content": "

FlipView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Look at the FlipViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "FlipView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.flipview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/flipview" - } - ], - "RelatedControls": [ - "GridView", - "ListView", - "SemanticZoom" - ] - }, - { - "UniqueId": "GridView", - "Title": "GridView", - "Subtitle": "A control that presents a collection of items in rows and columns.", - "ImagePath": "ms-appx:///Assets/ControlImages/GridView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridViewIcon.png", - "Description": "The GridView lets you show a collection of items arranged in rows and columns that scroll horizontally.", - "Content": "

GridView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the GridViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "GridView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.gridview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/lists" - } - ], - "RelatedControls": [ - "ListView", - "FlipView", - "SemanticZoom" - ] - }, - { - "UniqueId": "ListBox", - "Title": "ListBox", - "Subtitle": "A control that presents an inline list of items that the user can select from.", - "ImagePath": "ms-appx:///Assets/ControlImages/ListBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListBoxIcon.png", - "Description": "Use a ListBox when you want the options to be visible all the time or when users can select more than one option at a time. ListBox controls are always open, which allows several items to be displayed to the user without user interaction.", - "Content": "

Look at the ListBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ListBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listbox" - }, - { - "Title": "ListBoxItem - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listboxitem" - } - ], - "RelatedControls": [ - "ComboBox", - "RadioButton", - "CheckBox", - "AutoSuggestBox" - ] - }, - { - "UniqueId": "ListView", - "Title": "ListView", - "Subtitle": "A control that presents a collection of items in a vertical list.", - "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListViewIcon.png", - "Description": "The ListView lets you show a collection of items in a list that scrolls vertically.", - "Content": "

ListView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "ListView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/listview-and-gridview" - }, - { - "Title": "Drag and Drop - Full Sample", - "Uri": "https://github.com/microsoft/Windows-universal-samples/tree/master/Samples/XamlDragAndDrop" - }, - { - "Title": "CollectionViewSource - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.Data.CollectionViewSource" - }, - { - "Title": "Filtering collections and lists through user input", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/listview-filtering" - }, - { - "Title": "Inverted Lists", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/inverted-lists" - }, - { - "Title": "Inverted Lists - Full Sample", - "Uri": "https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlBottomUpList" - } - ], - "RelatedControls": [ - "GridView", - "StandardUICommand", - "FlipView", - "SemanticZoom" - ] - }, - { - "UniqueId": "PullToRefresh", - "Title": "PullToRefresh", - "Subtitle": "Provides the ability to pull on a collection of items in a list/grid to refresh the contents of the collection.", - "ImagePath": "ms-appx:///Assets/ControlImages/PullToRefresh.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/PullToRefreshIcon.png", - "Description": "PullToRefresh lets a user pull down on a list of data using touch in order to retrieve more data. PullToRefresh is widely used on devices with a touch screen.", - "Content": "

PullToRefresh can be used for a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RefreshContainer - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RefreshContainer" - }, - { - "Title": "RefreshVisualizer - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RefreshVisualizer" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pull-to-refresh" - } - ] - }, - { - "UniqueId": "TreeView", - "Title": "TreeView", - "Subtitle": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items.", - "ImagePath": "ms-appx:///Assets/ControlImages/TreeView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TreeViewIcon.png", - "Description": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items. ", - "Content": "

PullToRefresh can be used for a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TreeView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.TreeView" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tree-view" - } - ] - }, - { - "UniqueId": "DataGrid", - "Title": "DataGrid", - "Subtitle": "The DataGrid control presents data in a customizable table of rows and columns.", - "ImagePath": "ms-appx:///Assets/ControlImages/GridView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridViewIcon.png", - "Description": "The DataGrid control provides a flexible way to display a collection of data in rows and columns.", - "Content": "The DataGrid control presents data in a customizable table of rows and columns.", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "DataGrid - API", - "Uri": "https://aka.ms/win10datagridapidoc" - }, - { - "Title": "Guidelines", - "Uri": "https://aka.ms/win10datagriddoc" - }, - { - "Title": "Windows Community Toolkit", - "Uri": "https://docs.microsoft.com/windows/communitytoolkit" - } - ], - "RelatedControls": [ - "GridView", - "TreeView" - ] - } - ] - }, - { - "UniqueId": "DateAndTime", - "Title": "Date and Time", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "CalendarDatePicker", - "Title": "CalendarDatePicker", - "Subtitle": "A control that lets users pick a date value using a calendar.", - "ImagePath": "ms-appx:///Assets/ControlImages/CalendarDatePicker.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CalendarDatePickerIcon.png", - "Description": "A control that lets users pick a date value using a calendar.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CalendarDatePicker - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.calendardatepicker" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/calendar-date-picker" - } - ], - "RelatedControls": [ - "DatePicker", - "CalendarView" - ] - }, - { - "UniqueId": "CalendarView", - "Title": "CalendarView", - "Subtitle": "A control that presents a calendar for a user to choose a date from.", - "ImagePath": "ms-appx:///Assets/ControlImages/CalendarView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CalendarViewIcon.png", - "Description": "CalendarView shows a larger view for showing and selecting dates. DatePicker by contrast has a compact view with inline selection.", - "Content": "

Look at the CalendarView.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CalendarView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.calendarview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/calendar-view" - } - ], - "RelatedControls": [ - "CalendarDatePicker", - "DatePicker", - "TimePicker" - ] - }, - { - "UniqueId": "DatePicker", - "Title": "DatePicker", - "Subtitle": "A control that lets a user pick a date value.", - "ImagePath": "ms-appx:///Assets/ControlImages/DatePicker.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DatePickerIcon.png", - "Description": "Use a DatePicker to let users set a date in your app, for example to schedule an appointment. The DatePicker displays three controls for month, date, and year. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.", - "Content": "

Look at the DatePickerPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "DatePicker - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.datepicker" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/date-picker" - } - ], - "RelatedControls": [ - "CalendarDatePicker", - "CalendarView", - "TimePicker" - ] - }, - { - "UniqueId": "TimePicker", - "Title": "TimePicker", - "Subtitle": "A configurable control that lets a user pick a time value.", - "ImagePath": "ms-appx:///Assets/ControlImages/TimePicker.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TimePickerIcon.png", - "Description": "Use a TimePicker to let users set a time in your app, for example to set a reminder. The TimePicker displays three controls for hour, minute, and AM/PM. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.", - "Content": "

Look at the TimePickerPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TimePicker - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.timepicker" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/time-picker" - } - ], - "RelatedControls": [ - "DatePicker", - "CalendarView" - ] - } - ] - }, - { - "UniqueId": "BasicInput", - "Title": "Basic Input", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "InputValidation", - "Title": "InputValidation", - "Subtitle": "A feature that will display an error for invalid text. The app is notified when text has been changed by the user and is responsible for determining whether the text is valid and the error message", - "ImagePath": "ms-appx:///Assets/ControlImages/TextBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBoxIcon.png", - "Description": "A feature to display developer-defined errors for text values", - "Content": "

Look at the InputValidationPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [], - "RelatedControls": [ - "TextBox", - "PasswordBox" - ] - }, - { - "UniqueId": "Button", - "Title": "Button", - "Subtitle": "A control that responds to user input and raises a Click event.", - "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", - "Description": "The Button control provides a Click event to respond to user input from a touch, mouse, keyboard, stylus, or other input device. You can put different kinds of content in a button, such as text or an image, or you can restyle a button to give it a new look.", - "Content": "

The main purpose of a Button is to make something happen when a user clicks it. There are two ways you can make something happen:

Buttons often have only simple string content, but you can use any object as content. You can also change the style and template to give them any look you want.

Look at the ButtonPage.xaml file in Visual Studio to see the custom button style and template definitions used on this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "Button - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.button" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" - } - ], - "RelatedControls": [ - "ToggleButton", - "RepeatButton", - "HyperlinkButton", - "AppBarButton" - ] - }, - { - "UniqueId": "DropDownButton", - "Title": "DropDownButton", - "Subtitle": "A button that displays a flyout of choices when clicked.", - "ImagePath": "ms-appx:///Assets/ControlImages/DropDownButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DropDownButtonIcon.png", - "Description": "A control that drops down a flyout of choices from which one can be chosen.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "DropDownButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.dropdownbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" - } - ], - "RelatedControls": [ - "SplitButton", - "ToggleSplitButton", - "ToggleButton", - "RepeatButton", - "HyperlinkButton", - "AppBarButton", - "CommandBar" - ] - }, - { - "UniqueId": "HyperlinkButton", - "Title": "HyperlinkButton", - "Subtitle": "A button that appears as hyperlink text, and can navigate to a URI or handle a Click event.", - "ImagePath": "ms-appx:///Assets/ControlImages/HyperlinkButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/HyperlinkButtonIcon.png", - "Description": "A HyperlinkButton appears as a text hyperlink. When a user clicks it, it opens the page you specify in the NavigateUri property in the default browser. Or you can handle its Click event, typically to navigate within your app.", - "Content": "

A HyperlinkButton looks like hyperlink text, but works like a button. You can use it in two ways:

Each control page in this app has two sets of hyperlink buttons, one set to open documentation in Internet Explorer, and one set to navigate to related control pages in the app.

Look at the HyperlinkButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "HyperlinkButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.hyperlinkbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/hyperlinks" - } - ], - "RelatedControls": [ - "Button", - "ToggleButton", - "RepeatButton", - "AppBarButton" - ] - }, - { - "UniqueId": "RepeatButton", - "Title": "RepeatButton", - "Subtitle": "A button that raises its Click event repeatedly from the time it's pressed until it's released.", - "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", - "Description": "The RepeatButton control is like a standard Button, except that the Click event occurs continuously while the user presses the RepeatButton.", - "Content": "

A RepeatButton looks just like a regular Button, but it's Click event occurs continuously while the button is pressed.

Look at the RepeatButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RepeatButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.primitives.repeatbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" - } - ], - "RelatedControls": [ - "Button", - "ToggleButton", - "HyperlinkButton", - "AppBarButton" - ] - }, - { - "UniqueId": "ToggleButton", - "Title": "ToggleButton", - "Subtitle": "A button that can be switched between two states like a CheckBox.", - "ImagePath": "ms-appx:///Assets/ControlImages/ToggleButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleButtonIcon.png", - "Description": "A ToggleButton looks like a Button, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.", - "Content": "

ToggleButton is used as a base class for similar controls like CheckBox and RadioButton. It can be used on its own, but don't use it if a CheckBox, RadioButton, or ToggleSwitch would convey your intent better.

Look at the ToggleButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ToggleButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.primitives.togglebutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons#create-a-toggle-split-button" - } - ], - "RelatedControls": [ - "Button", - "AppBarToggleButton", - "ToggleSwitch", - "CheckBox", - "CommandBarFlyout", - "CommandBar" - ] - }, - { - "UniqueId": "SplitButton", - "Title": "SplitButton", - "Subtitle": "A two-part button that displays a flyout when its secondary part is clicked.", - "ImagePath": "ms-appx:///Assets/ControlImages/SplitButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SplitButtonIcon.png", - "Description": "The splitbutton is a dropdown button, but with an addition execution hit target.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "SplitButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.splitbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons#create-a-split-button" - } - ], - "RelatedControls": [ - "Button", - "AppBarToggleButton", - "CommandBar", - "ToggleSwitch", - "CheckBox", - "CommandBarFlyout", - "CommandBar" - ] - }, - { - "UniqueId": "ToggleSplitButton", - "Title": "ToggleSplitButton", - "Subtitle": "A version of the SplitButton where the activation target toggles on/off.", - "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSplitButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleSplitButtonIcon.png", - "Description": "A version of the SplitButton where the activation target toggles on/off.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ToggleSplitButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.togglesplitbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" - } - ], - "RelatedControls": [ - "Button", - "AppBarToggleButton", - "ToggleSwitch", - "CheckBox", - "CommandBarFlyout", - "CommandBar" - ] - }, - { - "UniqueId": "CheckBox", - "Title": "CheckBox", - "Subtitle": "A control that a user can select or clear.", - "ImagePath": "ms-appx:///Assets/ControlImages/CheckBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CheckBoxIcon.png", - "Description": "CheckBox controls let the user select a combination of binary options. In contrast, RadioButton controls allow the user to select from mutually exclusive options. The indeterminate state is used to indicate that an option is set for some, but not all, child options. Don't allow users to set an indeterminate state directly to indicate a third option.", - "Content": "

Check and uncheck these controls to see how they look in each state. The label for each CheckBox is defined by its Content property.

Use a three-state CheckBox to show that none, some, or all of an items sub-options are checked. You have to add some code to do this. Take a look at the methods in the SelectAllMethods region of CheckBoxPage.xaml.cs to see how we did it.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CheckBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.checkbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/checkbox" - } - ], - "RelatedControls": [ - "RadioButton", - "ToggleSwitch", - "ToggleButton" - ] - }, - { - "UniqueId": "ColorPicker", - "Title": "ColorPicker", - "Subtitle": "A control that displays a selectable color spectrum.", - "ImagePath": "ms-appx:///Assets/ControlImages/ColorPicker.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ColorPickerIcon.png", - "Description": "A selectable color spectrum.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ColorPicker - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.ColorPicker" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/color-picker" - } - ], - "RelatedControls": [ - "ComboBox" - ] - }, - { - "UniqueId": "ComboBox", - "Title": "ComboBox", - "Subtitle": "A drop-down list of items a user can select from.", - "ImagePath": "ms-appx:///Assets/ControlImages/ComboBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ComboBoxIcon.png", - "Description": "Use a ComboBox when you need to conserve on-screen space and when users select only one option at a time. A ComboBox shows only the currently selected item.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ComboBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.combobox" - }, - { - "Title": "ComboBoxItem - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.comboboxitem" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/combo-box" - } - ], - "RelatedControls": [ - "ListBox", - "RadioButton", - "CheckBox", - "ListView", - "AutoSuggestBox", - "RatingControl" - ] - }, - { - "UniqueId": "RadioButton", - "Title": "RadioButton", - "Subtitle": "A control that allows a user to select a single option from a group of options.", - "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RadioButtonIcon.png", - "Description": "Use RadioButtons to let a user choose between mutually exclusive, related options. Generally contained within a RadioButtons group control.", - "Content": "

Look at the RadioButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RadioButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.radiobutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/radio-button" - } - ], - "RelatedControls": [ - "CheckBox", - "RadioButtons", - "ToggleSwitch", - "ToggleButton" - ] - }, - { - "UniqueId": "RatingControl", - "Title": "RatingControl", - "Subtitle": "Rate something 1 to 5 stars.", - "ImagePath": "ms-appx:///Assets/ControlImages/RatingControl.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RatingControlIcon.png", - "Description": "Rate something 1 to 5 stars.", - "Content": "", - "IsNew": false, - "Docs": [ - { - "Title": "RatingControl - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RatingControl" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/rating" - } - ], - "RelatedControls": [ - "Slider", - "ComboBox" - ] - }, - { - "UniqueId": "Slider", - "Title": "Slider", - "Subtitle": "A control that lets the user select from a range of values by moving a Thumb control along a track.", - "ImagePath": "ms-appx:///Assets/ControlImages/Slider.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SliderIcon.png", - "Description": "Use a Slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).", - "Content": "

Look at the SliderPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Slider - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.slider" - }, - { - "Title": "Guidelines", - "Uri": "http://docs.microsoft.com/windows/apps/design/controls/slider" - } - ], - "RelatedControls": [ - "ComboBox", - "ListBox", - "RatingControl" - ] - }, - { - "UniqueId": "ToggleSwitch", - "Title": "ToggleSwitch", - "Subtitle": "A switch that can be toggled between 2 states.", - "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSwitch.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleSwitchIcon.png", - "Description": "Use ToggleSwitch controls to present users with exactly two mutually exclusive options (like on/off), where choosing an option results in an immediate commit. A toggle switch should have a single label.", - "Content": "

Look at the ToggleSwitchPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ToggleSwitch - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.toggleswitch" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/toggles" - } - ], - "RelatedControls": [ - "ToggleButton", - "RadioButton", - "CheckBox", - "AppBarToggleButton" - ] - } - ] - }, - { - "UniqueId": "StatusAndInfo", - "Title": "Status and Info", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "AutomationProperties", - "Title": "AutomationProperties", - "Subtitle": "Attributes that help with writing accessible XAML.", - "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", - "Description": "The AutomationProperties attributes provide functionality around accessible components.", - "Content": "

The aim of AutomationProperties is to enable components that are accessible to screen readers.", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AutomationProperties - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.automation.automationproperties" - }, - { - "Title": "Accessibility Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/accessibility/accessibility" - } - ], - "RelatedControls": [ - "TextBlock", - "Image" - ] - }, - { - "UniqueId": "InfoBadge", - "Title": "InfoBadge", - "Subtitle": "An non-intrusive UI to display notifications or bring focus to an area", - "ImagePath": "ms-appx:///Assets/ControlImages/InfoBadge.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", - "Description": "Badging is a non-intrusive and intuitive way to display notifications or bring focus to an area within an app - whether that be for notifications, indicating new content, or showing an alert.", - "Content": "

Look at the InfoBadgePage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "InfoBadge - API", - "Uri": "https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.infobadge" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/infobadge" - } - ], - "RelatedControls": [ - "InfoBar", - "TeachingTip" - ] - }, - { - "UniqueId": "InfoBar", - "Title": "InfoBar", - "Subtitle": "An inline message to display app-wide status change information", - "ImagePath": "ms-appx:///Assets/ControlImages/InfoBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", - "Description": "Use an InfoBar control when a user should be informed of, acknowledge, or take action on a changed application state. By default the notification will remain in the content area until closed by the user but will not necessarily break user flow.", - "Content": "

Look at the InfoBarPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "InfoBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.infobar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/infobar" - } - ], - "RelatedControls": [ - "TeachingTip", - "ContentDialog" - ] - }, - { - "UniqueId": "ProgressBar", - "Title": "ProgressBar", - "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that doesn't block user interaction.", - "ImagePath": "ms-appx:///Assets/ControlImages/ProgressBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ProgressBarIcon.png", - "Description": "The ProgressBar has two different visual representations:\nIndeterminate - shows that a task is ongoing, but doesn't block user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.", - "Content": "

Look at the ProgressBarPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ProgressBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.ProgressBar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/progress-controls" - } - ], - "RelatedControls": [ - "ProgressRing" - ] - }, - { - "UniqueId": "ProgressRing", - "Title": "ProgressRing", - "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that does block user interaction.", - "ImagePath": "ms-appx:///Assets/ControlImages/ProgressRing.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ProgressRingIcon.png", - "Description": "The ProgressRing has two different visual representations:\nIndeterminate - shows that a task is ongoing, but blocks user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.", - "Content": "

Look at the ProgressRingPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "ProgressRing - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.progressring" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/progress-controls" - } - ], - "RelatedControls": [ - "ProgressBar" - ] - }, - { - "UniqueId": "ToolTip", - "Title": "ToolTip", - "Subtitle": "Displays information for an element in a pop-up window.", - "ImagePath": "ms-appx:///Assets/ControlImages/ToolTip.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToolTipIcon.png", - "Description": "A ToolTip shows more information about a UI element. You might show information about what the element does, or what the user should do. The ToolTip is shown when a user hovers over or presses and holds the UI element.", - "Content": "

Look at the ToolTipPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ToolTip - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.tooltip" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tooltips" - } - ], - "RelatedControls": [ - "TeachingTip", - "Flyout", - "ContentDialog" - ] - } - ] - }, - { - "UniqueId": "DialogsAndFlyouts", - "Title": "Dialogs and Flyouts", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "ContentDialog", - "Title": "ContentDialog", - "Subtitle": "A dialog box that can be customized to contain any XAML content.", - "ImagePath": "ms-appx:///Assets/ControlImages/ContentDialog.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "Use a ContentDialog to show relavant information or to provide a modal dialog experience that can show any XAML content.", - "Content": "

Look at the ContentDialog.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "ContentDialog - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.contentdialog" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/dialogs" - } - ], - "RelatedControls": [ - "Flyout", - "MenuFlyout", - "TeachingTip", - "ToolTip" - ] - }, - { - "UniqueId": "Flyout", - "Title": "Flyout", - "Subtitle": "Shows contextual information and enables user interaction.", - "ImagePath": "ms-appx:///Assets/ControlImages/Flyout.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/FlyoutIcon.png", - "Description": "A Flyout displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be light dismissed by clicking or tapping off of it. Use it to collect input from the user, show more details about an item, or ask the user to confirm an action.", - "Content": "

Look at the FlyoutPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Flyout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.flyout" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts" - } - ], - "RelatedControls": [ - "TeachingTip", - "ContentDialog", - "MenuFlyout", - "Button", - "AppBarButton" - ] - }, - { - "UniqueId": "TeachingTip", - "Title": "TeachingTip", - "Subtitle": "A content-rich flyout for guiding users and enabling teaching moments.", - "ImagePath": "ms-appx:///Assets/ControlImages/TeachingTip.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TeachingTipIcon.png", - "Description": "The XAML TeachingTip Control provides a way for your app to guide and inform users in your application with a non-invasive and content rich notification. TeachingTip can be used for bringing focus to a new or important feature, teaching users how to perform a task, or enhancing the user workflow by providing contextually relevant information to their task at hand.", - "Content": "

Look at the TeachingTip.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TeachingTip - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.teachingtip" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/teaching-tip" - } - ], - "RelatedControls": [ - "ContentDialog", - "Flyout", - "ToolTip" - ] - } - ] - }, - { - "UniqueId": "Scrolling", - "Title": "Scrolling", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "PipsPager", - "Title": "PipsPager", - "Subtitle": "A control to let the user navigate through a paginated collection when the page numbers do not need to be visually known.", - "ImagePath": "ms-appx:///Assets/ControlImages/PipsPager.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "A PipsPager allows the user to navigate through a paginated collection and is independent of the content shown. Use this control when the content in the layout is not explicitly ordered by relevancy or you desire a glyph-based representation of numbered pages. PipsPagers are commonly used in photo viewers, app lists, carousels, and when display space is limited.", - "Content": "

Look at the PipsPagerPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "PipsPager - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pipspager" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pipspager" - } - ], - "RelatedControls": [ - "ScrollViewer", - "FlipView", - "ItemsRepeater" - ] - }, - { - "UniqueId": "ScrollViewer", - "Title": "ScrollViewer", - "Subtitle": "A container control that lets the user pan and zoom its content.", - "ImagePath": "ms-appx:///Assets/ControlImages/ScrollViewer.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ScrollViewerIcon.png", - "Description": "A ScrollViewer lets a user scroll, pan, and zoom to see content that's larger than the viewable area. Many content controls, like ListView, have ScrollViewers built into their control templates to provide automatic scrolling.", - "Content": "

Look at the ScrollViewerPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ScrollViewer - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.scrollviewer" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/scroll-controls" - } - ], - "RelatedControls": [ - "ViewBox", - "Canvas", - "Grid", - "StackPanel", - "RelativePanel", - "ParallaxView" - ] - }, - { - "UniqueId": "SemanticZoom", - "Title": "SemanticZoom", - "Subtitle": "Lets the user zoom between two different views of a collection, making it easier to navigate through large collections of items.", - "ImagePath": "ms-appx:///Assets/ControlImages/SemanticZoom.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "The SemanticZoom lets you show grouped data in two different ways, and is useful for quickly navigating through large sets of data.", - "Content": "

Look at the SemanticZoomPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "SemanticZoom - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.semanticzoom" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/semantic-zoom" - } - ], - "RelatedControls": [ - "GridView", - "ListView" - ] - } - ] - }, - { - "UniqueId": "Layout", - "Title": "Layout", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "Use layout controls to arrange the controls and content in your app.", - "Items": [ - { - "UniqueId": "Border", - "Title": "Border", - "Subtitle": "A container control that draws a boundary line, background, or both, around another object.", - "ImagePath": "ms-appx:///Assets/ControlImages/Border.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/BorderIcon.png", - "Description": "Use a Border control to draw a boundary line, background, or both, around another object. A Border can contain only one child object.", - "Content": "

A Border can contain only one child object. If you want to put a border around multiple objects, first wrap them in a container object such as StackPanel and make the StackPanel the child of the Border.

You can change the appearance of a Border by setting basic properties:

Most of the control pages in this app have XAML blocks to show basic usage. The appearance of the XAML blocks is defined by a Border control. Look at the CodeBorderStyle resource in App.xaml to see the Style that's applied to the Borders.

Look at the BorderPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Border - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.border" - } - ], - "RelatedControls": [ - "Canvas", - "Grid", - "StackPanel", - "VariableSizedWrapGrid", - "RelativePanel" - ] - }, - { - "UniqueId": "Canvas", - "Title": "Canvas", - "Subtitle": "A layout panel that supports absolute positioning of child elements relative to the top left corner of the canvas.", - "ImagePath": "ms-appx:///Assets/ControlImages/Canvas.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CanvasIcon.png", - "Description": "The Canvas provides absolute positioning of controls or content. Content is positioned relative to the Canvas using the Canvas.Top and Canvas.Left attached properties.", - "Content": "

Items are positioned on the Canvas using the Canvas.Top and Canvas.Left attached properties. Use the sliders to change these properties for the red rectangle and see how it moves around.

To see the effect of the ZIndex attached property, make sure the red rectangle is overlapping the other rectangles.

Look at the CanvasPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Canvas - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.canvas" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" - } - ], - "RelatedControls": [ - "Border", - "Grid", - "StackPanel", - "VariableSizedWrapGrid", - "RelativePanel" - ] - }, - { - "UniqueId": "Expander", - "Title": "Expander", - "Subtitle": "A container with a header that can be expanded to show a body with more content.", - "ImagePath": "ms-appx:///Assets/ControlImages/Expander.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "The Expander has a header and can expand to show a body with more content. Use an Expander when some content is only relevant some of the time (for example to read more information or access additional options for an item).", - "Content": "Look at the ExpanderPage.xaml file in Visual Studio to see the full code for this page.", - "IsNew": true, - "Docs": [ - { - "Title": "Expander - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.expander" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/expander" - } - ], - "RelatedControls": [ - "Flyout", - "ItemsRepeater", - "SplitView" - ] - }, - { - "UniqueId": "ItemsRepeater", - "Title": "ItemsRepeater", - "Subtitle": "A flexible, primitive control for data-driven layouts.", - "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListViewIcon.png", - "Description": "The ItemsRepeater is like a markup-based loop that supports virtualization.", - "Content": "

A ItemsRepeater is more basic than an ItemsControl. It does not have default styling or a control template. It can contain a collection of items of any type. To populate the view, set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

And, optionally set the Layout to define how items are sized and positioned. By default, it uses a simple vertical stacking layout.

Look at the ItemsRepeaterPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ItemsRepeater - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.itemsrepeater" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/items-repeater" - }, - { - "Title": "StackLayout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.stacklayout" - }, - { - "Title": "UniformGridLayout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.uniformgridlayout" - } - ], - "RelatedControls": [ - "ScrollViewer", - "ListView", - "GridView" - ] - }, - { - "UniqueId": "Grid", - "Title": "Grid", - "Subtitle": "A layout panel that supports arranging child elements in rows and columns. ", - "ImagePath": "ms-appx:///Assets/ControlImages/Grid.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridIcon.png", - "Description": "The Grid is used to arrange controls and content in rows and columns. Content is positioned in the grid using Grid.Row and Grid.Column attached properties.", - "Content": "

Look at the GridPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Grid - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.grid" - }, - { - "Title": "Tutorial", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/grid-tutorial" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels#grid" - } - ], - "RelatedControls": [ - "Border", - "Canvas", - "StackPanel", - "VariableSizedWrapGrid", - "RelativePanel" - ] - }, - { - "UniqueId": "RadioButtons", - "Title": "RadioButtons", - "Subtitle": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.", - "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RadioButtonsIcon.png", - "Description": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.", - "Content": "

Look at the RadioButtonsPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RadioButtons - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.radiobuttons" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/radio-button" - } - ], - "RelatedControls": [ - "CheckBox", - "RadioButton", - "ToggleSwitch", - "ToggleButton" - ] - }, - { - "UniqueId": "RelativePanel", - "Title": "RelativePanel", - "Subtitle": "A panel that uses relationships between elements to define layout.", - "ImagePath": "ms-appx:///Assets/ControlImages/RelativePanel.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RelativePanelIcon.png", - "Description": "Use a RelativePanel to layout elements by defining the relationships between elements and in relation to the panel.", - "Content": "

Look at the RelativePanelPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RelativePanel - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.relativepanel" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" - } - ], - "RelatedControls": [ - "Grid", - "StackPanel", - "Border", - "Canvas", - "ViewBox" - ] - }, - { - "UniqueId": "SplitView", - "Title": "SplitView", - "Subtitle": "A container that has 2 content areas, with multiple display options for the pane.", - "ImagePath": "ms-appx:///Assets/ControlImages/SplitView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SplitViewIcon.png", - "Description": "Use a SplitView to display content, such as navigation options, in a pane on the side. There are multiple options for displaying the pane, namely CompactOverlay, Compact, Overlay, Inline. If you are looking for a reference to the hamburger pattern, please see the links in the documentation below.", - "Content": "

Look at the SplitViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "SplitView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.splitview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/split-view" - } - ], - "RelatedControls": [ - "StackPanel", - "ListView", - "GridView", - "Grid", - "RelativePanel" - ] - }, - { - "UniqueId": "StackPanel", - "Title": "StackPanel", - "Subtitle": "A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.", - "ImagePath": "ms-appx:///Assets/ControlImages/StackPanel.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/StackPanelIcon.png", - "Description": "A StackPanel is used to arrange items in a line, either horizontally or vertically.", - "Content": "

Look at the StackPanelPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "StackPanel - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.stackpanel" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" - } - ], - "RelatedControls": [ - "Border", - "Canvas", - "Grid", - "VariableSizedWrapGrid", - "RelativePanel" - ] - }, - { - "UniqueId": "VariableSizedWrapGrid", - "Title": "VariableSizedWrapGrid", - "Subtitle": "A layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns.", - "ImagePath": "ms-appx:///Assets/ControlImages/VariableSizedWrapGrid.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/VariableSizedWrapGridIcon.png", - "Description": "A VariableSizedWrapGrip is used to create grid layouts where content can span multiple rows and columns.", - "Content": "

Elements are arranged in rows or columns that automatically wrap to a new row or column when the MaximumRowsOrColumns value is reached.

Whether elements are arranged in rows or columns is specified by the Orientation property.

Elements can span multiple rows and columns using VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties.

Elements are sized as specified by the ItemHeight and ItemWidth properties.

Look at the VariableSizedWrapGridPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "VariableSizedWrapGrid - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.variablesizedwrapgrid" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" - } - ], - "RelatedControls": [ - "Border", - "Canvas", - "Grid", - "StackPanel", - "RelativePanel" - ] - }, - { - "UniqueId": "ViewBox", - "Title": "ViewBox", - "Subtitle": "A container control that scales its content to a specified size.", - "ImagePath": "ms-appx:///Assets/ControlImages/ViewBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ViewBoxIcon.png", - "Description": "Use a ViewBox control scale content up or down to a specified size.", - "Content": "

Look at the ViewBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Viewbox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.viewbox" - } - ], - "RelatedControls": [ - "ScrollViewer", - "Canvas", - "Grid", - "StackPanel", - "RelativePanel" - ] - } - ] - }, - { - "UniqueId": "Navigation", - "Title": "Navigation", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "BreadcrumbBar", - "Title": "BreadcrumbBar", - "Subtitle": "Shows the trail of navigation taken to the current location.", - "ImagePath": "ms-appx:///Assets/ControlImages/BreadcrumbBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "The BreadcrumbBar control provides a common horizontal layout to display the trail of navigation taken to the current location. Resize to see the nodes crumble, starting at the root.", - "Content": "

Look at the BreadcrumbBarPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "BreadcrumbBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.breadcrumbbar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/breadcrumbbar" - } - ], - "RelatedControls": [ - "NavigationView", - "Pivot", - "TabView" - ] - }, - { - "UniqueId": "NavigationView", - "Title": "NavigationView", - "Subtitle": "Common vertical layout for top-level areas of your app via a collapsible navigation menu.", - "ImagePath": "ms-appx:///Assets/ControlImages/NavigationView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/NavigationViewIcon.png", - "Description": "The navigation view control provides a common vertical layout for top-level areas of your app via a collapsible navigation menu.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "NavigationView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.NavigationView" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/navigationview" - } - ], - "RelatedControls": [ - "SplitView", - "Pivot" - ] - }, - { - "UniqueId": "Pivot", - "Title": "Pivot", - "Subtitle": "Presents information from different sources in a tabbed view.", - "ImagePath": "ms-appx:///Assets/ControlImages/Pivot.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/PivotIcon.png", - "Description": "A Pivot allows you to show a collection of items from different sources in a tabbed view.", - "Content": "

This page shows a simplified Pivot control with minimal content to demonstrate basic Pivot usage. Look at the PivotPage.xaml file in Visual Studio to see the full code for this page.

A Pivot control typically takes up the full page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Pivot - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pivot" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pivot" - } - ], - "RelatedControls": [ - "SemanticZoom", - "ListView", - "GridView" - ] - }, - { - "UniqueId": "TabView", - "Title": "TabView", - "Subtitle": "A control that displays a collection of tabs that can be used to display several documents.", - "ImagePath": "ms-appx:///Assets/ControlImages/TabView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "TabView provides the user with a collection of tabs that can be used to display several documents.", - "Content": "", - "IsNew": false, - "IsUpdated": true, - "IsPreview": false, - "Docs": [ - { - "Title": "TabView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.tabview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tab-view" - }, - { - "Title": "Show multiple views for an app", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/show-multiple-views" - } - ], - "RelatedControls": [ - "Pivot", - "NavigationView", - "ListView" - ] - } - ] - }, - { - "UniqueId": "Media", - "Title": "Media", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "AnimatedVisualPlayer", - "Title": "AnimatedVisualPlayer", - "Subtitle": "An element to render and control playback of motion graphics.", - "ImagePath": "ms-appx:///Assets/ControlImages/AnimatedVisualPlayer.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AnimationsIcon.png", - "Description": "An element to render and control playback of motion graphics.", - "Content": "

Look at the AnimatedVisualPlayerPage.xaml and AnimatedVisualPlayerPage.xaml.cs files in Visual Studio to see the full code for this page.

", - "IsNew": false, - "Docs": [ - { - "Title": "AnimatedVisualPlayer - API", - "Uri": "https://www.docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedvisualplayer" - }, - { - "Title": "Full Samples", - "Uri": "ms-windows-store://pdp/?productid=9N3J5TG8FF7F" - }, - { - "Title": "Tutorials", - "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie#tutorials" - }, - { - "Title": "Lottie Overview", - "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie" - }, - { - "Title": "Lottie Windows - GitHub", - "Uri": "https://github.com/CommunityToolkit/Lottie-Windows" - } - ] - }, - { - "UniqueId": "Image", - "Title": "Image", - "Subtitle": "A control to display image content.", - "ImagePath": "ms-appx:///Assets/ControlImages/Image.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ImageIcon.png", - "Description": "You can use an Image control to show and scale images.", - "Content": "

Look at the ImagePage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Image - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.image" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/images-imagebrushes" - } - ], - "RelatedControls": [ - "MediaPlayerElement", - "PersonPicture" - ] - }, - { - "UniqueId": "MediaPlayerElement", - "Title": "MediaPlayerElement", - "Subtitle": "A control to display video and image content.", - "ImagePath": "ms-appx:///Assets/ControlImages/MediaPlayerElement.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MediaElementIcon.png", - "Description": "You can use a MediaPlayerElement control to playback videos and show images. You can show transport controls or make the video autoplay.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "MediaPlayerElement - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.MediaPlayerElement" - }, - { - "Title": "Media Playback", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/media-playback" - } - ], - "RelatedControls": [ - "Image" - ] - }, - { - "UniqueId": "PersonPicture", - "Title": "PersonPicture", - "Subtitle": "Displays the picture of a person/contact.", - "ImagePath": "ms-appx:///Assets/ControlImages/PersonPicture.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/PersonPictureIcon.png", - "Description": "Displays the picture of a person/contact.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "PersonPicture - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.PersonPicture" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/person-picture" - } - ], - "RelatedControls": [ - "Image" - ] - }, - { - "UniqueId": "Sound", - "Title": "Sound", - "Subtitle": "A code-behind only API that enables 2D and 3D UI sounds on all XAML controls.", - "ImagePath": "ms-appx:///Assets/ControlImages/Sound.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SoundIcon.png", - "Description": "Sound is enabled by default for UWP apps running on Xbox, but can be set to always play on all devices if desired. Sound may also be put into Spatial Audio mode for a more immersive 10ft experience.", - "Content": "

Look at the SoundPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Sound - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.elementsoundplayer" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/sound" - } - ] - }, - { - "UniqueId": "WebView2", - "Title": "WebView2", - "Subtitle": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", - "ImagePath": "ms-appx:///Assets/ControlImages/WebView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/WebViewIcon.png", - "Description": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", - "Content": "", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "WebView2 - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.webview2?view=winui-3.0" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/winui" - }, - { - "Title": "Examples", - "Uri": "https://github.com/MicrosoftEdge/WebView2Samples" - } - ] - } - ] - }, - { - "UniqueId": "Styles", - "Title": "Styles", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "Acrylic", - "Title": "AcrylicBrush", - "Subtitle": "A translucent material recommended for panel backgrounds.", - "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AcrylicBrushIcon.png", - "Description": "A translucent material recommended for panel backgrounds.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AcrylicBrush - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.acrylicbrush" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/acrylic" - } - ], - "RelatedControls": [ - "SystemBackdrops" - ] - }, - { - "UniqueId": "AnimatedIcon", - "Title": "AnimatedIcon", - "Subtitle": "An element that displays and controls an icon that animates when the user interacts with the control.", - "ImagePath": "ms-appx:///Assets/ControlImages/AnimatedIcon.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AnimationsIcon.png", - "Description": "An element that displays and controls an icon that animates when the user interacts with the control.", - "Content": "

Look at the AnimatedIconPage.xaml and AnimatedIconPage.xaml.cs files in Visual Studio to see the full code for this page.

", - "IsNew": true, - "Docs": [ - { - "Title": "AnimatedIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedicon" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/animated-icon" - }, - { - "Title": "Lottie Overview", - "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie" - }, - { - "Title": "Lottie Windows - GitHub", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedvisualplayer" - } - ] - }, - { - "UniqueId": "IconElement", - "Title": "IconElement", - "Subtitle": "Represents icon controls that use different image types as its content.", - "ImagePath": "ms-appx:///Assets/ControlImages/IconElement.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ImageIcon.png", - "Description": "Represents icon controls that use different image types as its content.", - "Content": "

Look at the IconElementPage.xaml and IconElementPage.xaml.cs files in Visual Studio to see the full code for this page.

", - "IsNew": true, - "Docs": [ - { - "Title": "BitmapIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" - }, - { - "Title": "FontIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" - }, - { - "Title": "ImageIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.imageicon" - }, - { - "Title": "PathIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" - }, - { - "Title": "SymbolIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" - }, - { - "Title": "Icon Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/icons" - } - ], - "RelatedControls": [ - "AnimatedIcon", - "AppBarButton", - "MenuFlyoutItem" - ] - }, - { - "UniqueId": "RadialGradientBrush", - "Title": "RadialGradientBrush", - "Subtitle": "A brush to show radial gradients", - "ImagePath": "ms-appx:///Assets/ControlImages/Canvas.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CanvasIcon.png", - "Description": "Paints an area with a radial gradient. A center point defines the beginning of the gradient, and a radius defines the end point of the gradient.", - "Content": "The RadialGradientBrush is similar in programming model to the LinearGradientBrush. However, the linear gradient has a start and an end point to define the gradient vector, while the radial gradient has a circle, along with a focal point, to define the gradient behavior. The circle defines the end point of the gradient. The parameters can be provided as a ratio or absolute value by picking the mapping mode.", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RadialGradientBrush - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.RadialGradientBrush" - } - ], - "RelatedControls": [ - "Acrylic", - "ColorPaletteResources" - ] - }, - { - "UniqueId": "RevealFocus", - "Title": "Reveal Focus", - "Subtitle": "Customize the style of your focus rectangles.", - "ImagePath": "ms-appx:///Assets/ControlImages/RevealFocus.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RevealFocusIcon.png", - "Description": "Reveal focus allows you to adapt focus rectangles to look like the focus rectangles available on Xbox.", - "Content": "

Look at the RevealFocusPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Reveal Focus - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.application.focusvisualkind#Windows_UI_Xaml_Application_FocusVisualKind" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/reveal-focus" - } - ], - "RelatedControls": [ - ] - }, - { - "UniqueId": "ColorPaletteResources", - "Title": "ColorPaletteResources", - "Subtitle": "A type of resource that allows you to apply custom colors to your controls.", - "ImagePath": "ms-appx:///Assets/ControlImages/ColorPaletteResources.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "Apply custom colors to your controls through this cascading API, or scope them to a local subset.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Theme Editor (GitHub)", - "Uri": "https://github.com/Microsoft/fluent-xaml-theme-editor" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/color#scoping-with-a-resourcedictionary" - }, - { - "Title": "ColorPaletteResources - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.colorpaletteresources" - } - ] - }, - { - "UniqueId": "CompactSizing", - "Title": "Compact Sizing", - "Subtitle": "How to use a Resource Dictionary to enable compact sizing.", - "ImagePath": "ms-appx:///Assets/ControlImages/CompactSizing.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CompactSizingIcon.png", - "Description": "Compact dictionary included in WinUI 2.1. Allows you to create compact smaller apps by adding this at the page or the grid level.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Spacing", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/spacing" - } - ] - }, - { - "UniqueId": "SystemBackdrops", - "Title": "System Backdrops (Mica/Acrylic)", - "Subtitle": "System backdrops, like Mica and Acrylic, for the window.", - "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SystemBackdropsIcon.png", - "Description": "System backdrops are used to provide a different background for a Window other than the default white or black (depending on Light or Dark theme). Mica and Desktop Acrylic are the current supported backdrops. Applying a backdrop currently requires a bunch of app code, but this will be easier in a future release.", - "Content": "

Look at the SampleSystemBackdropsWindow.xaml.cs file in Visual Studio to see the full code for applying a backdrop.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "MicaController - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.composition.systembackdrops.micacontroller" - }, - { - "Title": "DesktopAcrylicController - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.composition.systembackdrops.desktopacryliccontroller" - } - ], - "RelatedControls": [ - ] - } - ] - }, - { - "UniqueId": "Text", - "Title": "Text", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "AutoSuggestBox", - "Title": "AutoSuggestBox", - "Subtitle": "A control to provide suggestions as a user is typing.", - "ImagePath": "ms-appx:///Assets/ControlImages/AutoSuggestBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AutoSuggestBoxIcon.png", - "Description": "A text control that makes suggestions to users as they type. The app is notified when text has been changed by the user and is responsible for providing relevant suggestions for this control to display.", - "Content": "

Look at the AutoSuggestBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "AutoSuggestBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.autosuggestbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/auto-suggest-box" - } - ], - "RelatedControls": [ - "ListBox", - "ComboBox", - "TextBox" - ] - }, - { - "UniqueId": "NumberBox", - "Title": "NumberBox", - "Subtitle": "A text control used for numeric input and evaluation of algebraic equations.", - "ImagePath": "ms-appx:///Assets/ControlImages/NumberBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/NumberBoxIcon.png", - "Description": "Use NumberBox to allow users to enter algebraic equations and numeric input in your app.", - "Content": "

Look at the NumberBox.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "NumberBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.numberbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/number-box" - } - ], - "RelatedControls": [ - "TextBox", - "TextBlock", - "RichTextBlock", - "RichEditBox" - ] - }, - { - "UniqueId": "PasswordBox", - "Title": "PasswordBox", - "Subtitle": "A control for entering passwords.", - "ImagePath": "ms-appx:///Assets/ControlImages/PasswordBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/PasswordBoxIcon.png", - "Description": "A user can enter a single line of non-wrapping text in a PasswordBox control. The text is masked by characters that you can specify by using the PasswordChar property, and you can specify the maximum number of characters that the user can enter by setting the MaxLength property.", - "Content": "

Look at the PasswordBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "PasswordBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.passwordbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "TextBox", - "TextBlock", - "RichTextBlock", - "RichEditBox" - ] - }, - { - "UniqueId": "RichEditBox", - "Title": "RichEditBox", - "Subtitle": "A rich text editing control that supports formatted text, hyperlinks, and other rich content.", - "ImagePath": "ms-appx:///Assets/ControlImages/RichEditBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RichEditBoxIcon.png", - "Description": "You can use a RichEditBox control to enter and edit rich text documents that contain formatted text, hyperlinks, and images. By default, the RichEditBox supports spell checking. You can make a RichEditBox read-only by setting its IsReadOnly property to true.", - "Content": "

On this page, you can type into the RichTextBox control and save it as a RichTextFormat (.rtf) document, or load an existing .rtf document. You can format the text as Bold or Underlined, and change the text color.

Look at the RichEditBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "RichEditBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.richeditbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "NumberBox", - "TextBox", - "RichTextBlock", - "TextBlock" - ] - }, - { - "UniqueId": "RichTextBlock", - "Title": "RichTextBlock", - "Subtitle": "A control that displays formatted text, hyperlinks, inline images, and other rich content.", - "ImagePath": "ms-appx:///Assets/ControlImages/RichTextBlock.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RichTextBlockIcon.png", - "Description": "RichTextBlock provides more advanced formatting features than the TextBlock control. You can apply character and paragraph formatting to the text in the RichTextBlock. For example, you can apply Bold, Italic, and Underline to any portion of the text in the control. You can use linked text containers (a RichTextBlock linked to RichTextBlockOverflow elements) to create advanced page layouts.", - "Content": "

Change the width of the app to see how the RichTextBlock overflows into additional columns as the app gets narrower.

Look at the RichTextBlockPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "RichTextBlock - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.richtextblock" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "NumberBox", - "TextBlock", - "TextBox", - "PasswordBox", - "RichEditBox" - ] - }, - { - "UniqueId": "TextBlock", - "Title": "TextBlock", - "Subtitle": "A lightweight control for displaying small amounts of text.", - "ImagePath": "ms-appx:///Assets/ControlImages/TextBlock.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBlockIcon.png", - "Description": "TextBlock is the primary control for displaying read-only text in your app. You typically display text by setting the Text property to a simple string. You can also display a series of strings in Run elements and give each different formatting.", - "Content": "

Look at the TextBlockPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TextBlock - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.textblock" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "NumberBox", - "TextBox", - "RichTextBlock", - "PasswordBox", - "RichEditBox" - ] - }, - { - "UniqueId": "TextBox", - "Title": "TextBox", - "Subtitle": "A single-line or multi-line plain text field.", - "ImagePath": "ms-appx:///Assets/ControlImages/TextBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBoxIcon.png", - "Description": "Use a TextBox to let a user enter simple text input in your app. You can add a header and placeholder text to let the user know what the TextBox is for, and you can customize it in other ways.", - "Content": "

Look at the TextBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TextBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.textbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "NumberBox", - "TextBlock", - "RichTextBlock", - "PasswordBox", - "RichEditBox", - "AutoSuggestBox" - ] - } - ] - }, - { - "UniqueId": "Motion", - "Title": "Motion", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "ConnectedAnimation", - "Title": "Connected Animation", - "Subtitle": "Connected animations continue elements during page navigation and help the user maintain their context between views.", - "ImagePath": "ms-appx:///Assets/ControlImages/ConnectedAnimation.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ConnectedAnimationsIcon.png", - "Description": "Connected animations continue elements during page navigation and help the user maintain their context between views.", - "Content": "

Look at the ConnectedAnimationPage.xaml and ConnectedAnimationPage.xaml.cs files in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ConnectedAnimation - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.connectedanimation" - }, - { - "Title": "ConnectedAnimationService - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.connectedanimationservice" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/connected-animation" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "PageTransition", - "ThemeTransition" - ] - }, - { - "UniqueId": "EasingFunction", - "Title": "Easing Functions", - "Subtitle": "Easing is a way to manipulate the velocity of an object as it animates.", - "ImagePath": "ms-appx:///Assets/ControlImages/EasingFunction.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/EasingFunctionsIcon.png", - "Description": "Easing is a way to manipulate the velocity of an object as it animates.", - "Content": "

Look at the EasingFunctionPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "EasingFunctionBase - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.easingfunctionbase" - }, - { - "Title": "Timing and Easing", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/timing-and-easing" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "ConnectedAnimation", - "PageTransition", - "ThemeTransition" - ] - }, - { - "UniqueId": "PageTransition", - "Title": "Page Transitions", - "Subtitle": "Page transitions provide visual feedback about the relationship between pages.", - "ImagePath": "ms-appx:///Assets/ControlImages/PageTransition.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", - "Description": "Page transitions provide visual feedback about the relationship between pages.", - "Content": "

Look at the PageTransitionPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "NavigationThemeTransition - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Media.Animation.NavigationThemeTransition" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/page-transitions" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "ConnectedAnimation", - "ThemeTransition" - ] - }, - { - "UniqueId": "ThemeTransition", - "Title": "Theme Transitions", - "Subtitle": "Theme transitions are pre-packaged, easy-to-apply animations.", - "ImagePath": "ms-appx:///Assets/ControlImages/ThemeTransition.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", - "Description": "Theme transitions are pre-packaged, easy-to-apply animations.", - "Content": "

Look at the ThemeTransitionPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Transitions - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/xaml-animation#animations-available-in-the-library" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "ImplicitTransition", - "PageTransition" - ] - }, - { - "UniqueId": "XamlCompInterop", - "Title": "Animation interop", - "Subtitle": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more.", - "ImagePath": "ms-appx:///Assets/ControlImages/AnimationInterop.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/StoryboardAnimationIcon.png", - "IsNew": false, - "IsUpdated": false, - "Description": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more", - "Content": "

Look at the XamlCompInteropPage.xaml.cs file in Visual Studio to see the full code for this page.

", - "Docs": [ - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - }, - { - "Title": "Composition Animation - API", - "Uri": "https://docs.microsoft.com/windows/uwp/composition/composition-animation" - }, - { - "Title": "Guidelines - Xaml Property Animations", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/xaml-property-animations" - }, - { - "Title": "Using the Visual Layer with XAML", - "Uri": "https://docs.microsoft.com/windows/uwp/composition/using-the-visual-layer-with-xaml" - } - ], - "RelatedControls": [ - "EasingFunction" - ] - }, - { - "UniqueId": "ImplicitTransition", - "Title": "Implicit Transitions", - "Subtitle": "Use Implicit Transitions to automatically animate changes to properties.", - "ImagePath": "ms-appx:///Assets/ControlImages/ImplicitTransition.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", - "IsNew": false, - "IsUpdated": false, - "Description": "Use Implicit Transitions to automatically animate changes to properties.", - "Content": "

Look at the ImplicitTransitionPage.xaml file in Visual Studio to see the full code for this page.

", - "Docs": [ - { - "Title": "Transitions - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/motion-in-practice#implicit-animations" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "PageTransition", - "ThemeTransition" - ] - }, - { - "UniqueId": "ParallaxView", - "Title": "ParallaxView", - "Subtitle": "A container control that provides the parallax effect when scrolling.", - "ImagePath": "ms-appx:///Assets/ControlImages/ParallaxView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ParallaxViewIcon.png", - "Description": "A container control that provides the parallax effect when scrolling.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ParallaxView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.Parallaxview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/parallax" - } - ], - "RelatedControls": [ - "ScrollViewer" - ] - } - ] - }, - { - "UniqueId": "MultipleWindows", - "Title": "Windows", - "Subtitle": "", - "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "", - "Items": [ - { - "UniqueId": "CreateMultipleWindows", - "Title": "Create Multiple Windows", - "Subtitle": "An example showing the creation of single-threaded top level Xaml windows.", - "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "With Windows App SDK 1.0 we are allowing creation of single-threaded multiple top level Xaml windows in Desktop apps", - "Content": "

Look at the CreateMultipleWindowsPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "MultipleWindow - API", - "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" - } - ], - "RelatedControls": [ - ] - }, - { - "UniqueId": "TitleBar", - "Title": "TitleBar", - "Subtitle": "An example showing a custom UIElement used as the titlebar for the app's window.", - "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "This sample shows how to use a custom UIElement as titlebar for app's window.", - "Content": "

Look at the TitleBarPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "TitleBar - API", - "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window.extendscontentintotitlebar?view=winui-3.0" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" - } - ], - "RelatedControls": [ - ] + "$schema": "ControlInfoDataSchema.json", + "Groups": [ + { + "UniqueId": "NewControls", + "Title": "Home", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [] + }, + { + "UniqueId": "AllControls", + "Title": "All controls", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [] + }, + { + "UniqueId": "MenusAndToolbars", + "Title": "Menus and Toolbars", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "XamlUICommand", + "Title": "XamlUICommand", + "Subtitle": "An object which is used to define the look and feel of a given command.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", + "Description": "An object which is used to define the look and feel of a given command, which can be reused across your app, and which is understood natively by the standard XAML controls.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-xamluicommand-class" + }, + { + "Title": "XamlUICommand - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.input.xamluicommand" + } + ], + "RelatedControls": [ + "StandardUICommand", + "AppBarButton", + "AppBarToggleButton", + "CommandBar" + ] + }, + { + "UniqueId": "StandardUICommand", + "Title": "StandardUICommand", + "Subtitle": "A StandardUICommand is a built-in 'XamlUICommand' which represents a commonly used command, e.g. 'Save'.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", + "Description": "StandardUICommands are a set of built-in XamlUICommands represeting commonly used commands. Including the look and feel of a given command, which can be reused across your app, and which is understood natively by the standard XAML controls. E.g. Save, Open, Copy, Paste, etc.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-standarduicommand-class" + }, + { + "Title": "StandardUICommand - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.input.standarduicommand" + } + ], + "RelatedControls": [ + "XamlUICommand", + "AppBarButton", + "AppBarToggleButton", + "CommandBar" + ] + }, + { + "UniqueId": "AppBarButton", + "Title": "AppBarButton", + "Subtitle": "A button that's styled for use in a CommandBar.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarButtonIcon.png", + "Description": "App bar buttons differ from standard buttons in several ways:\n- Their default appearance is a transparent background with a smaller size.\n- You use the Label and Icon properties to set the content instead of the Content property. The Content property is ignored.\n- The button's IsCompact property controls its size.", + "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.

Use the Label and Icon properties to define the content of the app bar buttons. Set the Label property to a string to specify the text label. The label is shown by default but is hidden when the button is in its compact state, so you also need to specify a meaningful icon. To do that, set the button's Icon property to an element derived from the IconElement class. Four kinds of icon elements are provided:

FontIcon - The icon is based on a glyph from the specified font family.

BitmapIcon - The icon is based on a bitmap image file with the specified Uri.

PathIcon - The icon is based on Path data.

SymbolIcon - The icon is based on a predefined list of glyphs from the Segoe UI Symbol font.

Look at the AppBarButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AppBarButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbarbutton" + }, + { + "Title": "SymbolIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" + }, + { + "Title": "FontIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" + }, + { + "Title": "BitmapIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" + }, + { + "Title": "PathIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" + } + ], + "RelatedControls": [ + "AppBarToggleButton", + "AppBarSeparator", + "CommandBar" + ] + }, + { + "UniqueId": "AppBarSeparator", + "Title": "AppBarSeparator", + "Subtitle": "A vertical line that's used to visually separate groups of commands in an app bar.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", + "Description": "An AppBarSeparator creates a vertical line to visually separate groups of commands in a app bar. It has a compact state with reduced padding to match the compact state of the AppBarButton and AppBarToggleButton controls.", + "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons and separators on this page change.

When the IsCompact property is true, the padding around the AppBarSeparator is reduced.

Look at the AppBarSeparatorPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AppBarSeparator - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbarseparator" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" + } + ], + "RelatedControls": [ + "AppBarButton", + "AppBarToggleButton", + "CommandBar" + ] + }, + { + "UniqueId": "AppBarToggleButton", + "Title": "AppBarToggleButton", + "Subtitle": "A button that can be on, off, or indeterminate like a CheckBox, and is styled for use in an app bar or other specialized UI.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarToggleButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarToggleButtonIcon.png", + "Description": "An AppBarToggleButton looks like an AppBarButton, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.", + "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.

Look at the AppBarToggleButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AppBarToggleButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbartogglebutton" + }, + { + "Title": "SymbolIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" + }, + { + "Title": "FontIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" + }, + { + "Title": "BitmapIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" + }, + { + "Title": "PathIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" + } + ], + "RelatedControls": [ + "AppBarButton", + "AppBarSeparator", + "CommandBar" + ] + }, + { + "UniqueId": "CommandBar", + "Title": "CommandBar", + "Subtitle": "A toolbar for displaying application-specific commands that handles layout and resizing of its contents.", + "ImagePath": "ms-appx:///Assets/ControlImages/CommandBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CommandBarIcon.png", + "Description": "The CommandBar simplifies the creation of basic app bars by providing:\n- Automatic layout of commands, with primary commands on the right and secondary commands on the left.\n- Automatic resizing of app bar commands when the app size changes.\nWhen you need an app bar that contains only AppBarButton,AppBarToggleButton , and AppBarSeparator controls, use a CommandBar. If you need more complex content, such as images, progress bars, or text blocks, use an AppBar control.", + "Content": "

The bottom app bar on this page is a CommandBar control.

Add secondary commands and then resize the app to see how the CommandBar automatically adapts to different widths.

This CommandBar element is in the ItemPage so it can be shared across all control pages in the app. Look at the ItemPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CommandBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.commandbar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" + } + ], + "RelatedControls": [ + "AppBarButton", + "AppBarToggleButton", + "AppBarSeparator" + ] + }, + { + "UniqueId": "MenuBar", + "Title": "MenuBar", + "Subtitle": "A classic menu, allowing the display of MenuItems containing MenuFlyoutItems.", + "ImagePath": "ms-appx:///Assets/ControlImages/MenuBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", + "Description": "The Menubar simplifies the creation of basic applications by providing a set of menus at the top of the app or window.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "MenuBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.MenuBar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/menus" + } + ], + "RelatedControls": [ + "CommandBar", + "MenuFlyout", + "StandardUICommand", + "XamlUICommand" + ] + }, + { + "UniqueId": "CommandBarFlyout", + "Title": "CommandBarFlyout", + "Subtitle": "A mini-toolbar displaying proactive commands, and an optional menu of commands.", + "ImagePath": "ms-appx:///Assets/ControlImages/CommandBarFlyout.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CommandBarFlyoutIcon.png", + "Description": "A mini-toolbar which displays a set of proactive commands, as well as a secondary menu of commands if desired.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CommandBarFlyout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.commandbarflyout" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar-flyout" + } + ], + "RelatedControls": [ + "CommandBar", + "MenuFlyout", + "RichEditBox", + "TextBox", + "StandardUICommand", + "XamlUICommand" + ] + }, + { + "UniqueId": "MenuFlyout", + "Title": "MenuFlyout", + "Subtitle": "Shows a contextual list of simple commands or options.", + "ImagePath": "ms-appx:///Assets/ControlImages/MenuFlyout.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuFlyoutIcon.png", + "Description": "A MenuFlyout displays lightweight UI that is light dismissed by clicking or tapping off of it. Use it to let the user choose from a contextual list of simple commands or options.", + "Content": "

Look at the MenuFlyoutPage.xaml file in Visual Studio to see the full code.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "MenuFlyout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyout" + }, + { + "Title": "MenuFlyoutItem - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyoutitem" + }, + { + "Title": "MenuFlyoutSeparator - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyoutseparator" + }, + { + "Title": "ToggleMenuFlyoutItem - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.togglemenuflyoutitem" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/menus" + } + ], + "RelatedControls": [ + "Flyout", + "ContentDialog", + "Button", + "AppBarButton" + ] + }, + { + "UniqueId": "SwipeControl", + "Title": "SwipeControl", + "Subtitle": "Touch gesture for quick menu actions on items.", + "ImagePath": "ms-appx:///Assets/ControlImages/SwipeControl.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SwipeIcon.png", + "Description": "Touch gesture for quick menu actions on items.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "SwipeControl - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.swipecontrol" + }, + { + "Title": "SwipeItems - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.swipeitems" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/swipe" + }, + { + "Title": "Gesture Actions", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/collection-commanding" + } + ], + "RelatedControls": [ + "GridView", + "ListView" + ] + } + ] + }, + { + "UniqueId": "Collections", + "Title": "Collections", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "FlipView", + "Title": "FlipView", + "Subtitle": "Presents a collection of items that the user can flip through, one item at a time.", + "ImagePath": "ms-appx:///Assets/ControlImages/FlipView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/FlipViewIcon.png", + "Description": "The FlipView lets you flip through a collection of items, one at a time. It's great for displaying images from a gallery, pages of a magazine, or similar items.", + "Content": "

FlipView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Look at the FlipViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "FlipView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.flipview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/flipview" + } + ], + "RelatedControls": [ + "GridView", + "ListView", + "SemanticZoom" + ] + }, + { + "UniqueId": "GridView", + "Title": "GridView", + "Subtitle": "A control that presents a collection of items in rows and columns.", + "ImagePath": "ms-appx:///Assets/ControlImages/GridView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridViewIcon.png", + "Description": "The GridView lets you show a collection of items arranged in rows and columns that scroll horizontally.", + "Content": "

GridView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the GridViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "GridView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.gridview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/lists" + } + ], + "RelatedControls": [ + "ListView", + "FlipView", + "SemanticZoom" + ] + }, + { + "UniqueId": "ListBox", + "Title": "ListBox", + "Subtitle": "A control that presents an inline list of items that the user can select from.", + "ImagePath": "ms-appx:///Assets/ControlImages/ListBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListBoxIcon.png", + "Description": "Use a ListBox when you want the options to be visible all the time or when users can select more than one option at a time. ListBox controls are always open, which allows several items to be displayed to the user without user interaction.", + "Content": "

Look at the ListBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ListBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listbox" + }, + { + "Title": "ListBoxItem - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listboxitem" + } + ], + "RelatedControls": [ + "ComboBox", + "RadioButton", + "CheckBox", + "AutoSuggestBox" + ] + }, + { + "UniqueId": "ListView", + "Title": "ListView", + "Subtitle": "A control that presents a collection of items in a vertical list.", + "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListViewIcon.png", + "Description": "The ListView lets you show a collection of items in a list that scrolls vertically.", + "Content": "

ListView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "ListView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/listview-and-gridview" + }, + { + "Title": "Drag and Drop - Full Sample", + "Uri": "https://github.com/microsoft/Windows-universal-samples/tree/master/Samples/XamlDragAndDrop" + }, + { + "Title": "CollectionViewSource - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.Data.CollectionViewSource" + }, + { + "Title": "Filtering collections and lists through user input", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/listview-filtering" + }, + { + "Title": "Inverted Lists", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/inverted-lists" + }, + { + "Title": "Inverted Lists - Full Sample", + "Uri": "https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlBottomUpList" + } + ], + "RelatedControls": [ + "GridView", + "StandardUICommand", + "FlipView", + "SemanticZoom" + ] + }, + { + "UniqueId": "PullToRefresh", + "Title": "PullToRefresh", + "Subtitle": "Provides the ability to pull on a collection of items in a list/grid to refresh the contents of the collection.", + "ImagePath": "ms-appx:///Assets/ControlImages/PullToRefresh.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/PullToRefreshIcon.png", + "Description": "PullToRefresh lets a user pull down on a list of data using touch in order to retrieve more data. PullToRefresh is widely used on devices with a touch screen.", + "Content": "

PullToRefresh can be used for a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RefreshContainer - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RefreshContainer" + }, + { + "Title": "RefreshVisualizer - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RefreshVisualizer" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pull-to-refresh" + } + ] + }, + { + "UniqueId": "TreeView", + "Title": "TreeView", + "Subtitle": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items.", + "ImagePath": "ms-appx:///Assets/ControlImages/TreeView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TreeViewIcon.png", + "Description": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items. ", + "Content": "

PullToRefresh can be used for a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TreeView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.TreeView" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tree-view" + } + ] + }, + { + "UniqueId": "DataGrid", + "Title": "DataGrid", + "Subtitle": "The DataGrid control presents data in a customizable table of rows and columns.", + "ImagePath": "ms-appx:///Assets/ControlImages/GridView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridViewIcon.png", + "Description": "The DataGrid control provides a flexible way to display a collection of data in rows and columns.", + "Content": "The DataGrid control presents data in a customizable table of rows and columns.", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "DataGrid - API", + "Uri": "https://aka.ms/win10datagridapidoc" + }, + { + "Title": "Guidelines", + "Uri": "https://aka.ms/win10datagriddoc" + }, + { + "Title": "Windows Community Toolkit", + "Uri": "https://docs.microsoft.com/windows/communitytoolkit" + } + ], + "RelatedControls": [ + "GridView", + "TreeView" + ] + } + ] + }, + { + "UniqueId": "DateAndTime", + "Title": "Date and Time", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "CalendarDatePicker", + "Title": "CalendarDatePicker", + "Subtitle": "A control that lets users pick a date value using a calendar.", + "ImagePath": "ms-appx:///Assets/ControlImages/CalendarDatePicker.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CalendarDatePickerIcon.png", + "Description": "A control that lets users pick a date value using a calendar.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CalendarDatePicker - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.calendardatepicker" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/calendar-date-picker" + } + ], + "RelatedControls": [ + "DatePicker", + "CalendarView" + ] + }, + { + "UniqueId": "CalendarView", + "Title": "CalendarView", + "Subtitle": "A control that presents a calendar for a user to choose a date from.", + "ImagePath": "ms-appx:///Assets/ControlImages/CalendarView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CalendarViewIcon.png", + "Description": "CalendarView shows a larger view for showing and selecting dates. DatePicker by contrast has a compact view with inline selection.", + "Content": "

Look at the CalendarView.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CalendarView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.calendarview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/calendar-view" + } + ], + "RelatedControls": [ + "CalendarDatePicker", + "DatePicker", + "TimePicker" + ] + }, + { + "UniqueId": "DatePicker", + "Title": "DatePicker", + "Subtitle": "A control that lets a user pick a date value.", + "ImagePath": "ms-appx:///Assets/ControlImages/DatePicker.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DatePickerIcon.png", + "Description": "Use a DatePicker to let users set a date in your app, for example to schedule an appointment. The DatePicker displays three controls for month, date, and year. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.", + "Content": "

Look at the DatePickerPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "DatePicker - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.datepicker" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/date-picker" + } + ], + "RelatedControls": [ + "CalendarDatePicker", + "CalendarView", + "TimePicker" + ] + }, + { + "UniqueId": "TimePicker", + "Title": "TimePicker", + "Subtitle": "A configurable control that lets a user pick a time value.", + "ImagePath": "ms-appx:///Assets/ControlImages/TimePicker.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TimePickerIcon.png", + "Description": "Use a TimePicker to let users set a time in your app, for example to set a reminder. The TimePicker displays three controls for hour, minute, and AM/PM. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.", + "Content": "

Look at the TimePickerPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TimePicker - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.timepicker" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/time-picker" + } + ], + "RelatedControls": [ + "DatePicker", + "CalendarView" + ] + } + ] + }, + { + "UniqueId": "BasicInput", + "Title": "Basic Input", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "InputValidation", + "Title": "InputValidation", + "Subtitle": "A feature that will display an error for invalid text. The app is notified when text has been changed by the user and is responsible for determining whether the text is valid and the error message", + "ImagePath": "ms-appx:///Assets/ControlImages/TextBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBoxIcon.png", + "Description": "A feature to display developer-defined errors for text values", + "Content": "

Look at the InputValidationPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [], + "RelatedControls": [ + "TextBox", + "PasswordBox" + ] + }, + { + "UniqueId": "Button", + "Title": "Button", + "Subtitle": "A control that responds to user input and raises a Click event.", + "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", + "Description": "The Button control provides a Click event to respond to user input from a touch, mouse, keyboard, stylus, or other input device. You can put different kinds of content in a button, such as text or an image, or you can restyle a button to give it a new look.", + "Content": "

The main purpose of a Button is to make something happen when a user clicks it. There are two ways you can make something happen:

Buttons often have only simple string content, but you can use any object as content. You can also change the style and template to give them any look you want.

Look at the ButtonPage.xaml file in Visual Studio to see the custom button style and template definitions used on this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "Button - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.button" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" + } + ], + "RelatedControls": [ + "ToggleButton", + "RepeatButton", + "HyperlinkButton", + "AppBarButton" + ] + }, + { + "UniqueId": "DropDownButton", + "Title": "DropDownButton", + "Subtitle": "A button that displays a flyout of choices when clicked.", + "ImagePath": "ms-appx:///Assets/ControlImages/DropDownButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DropDownButtonIcon.png", + "Description": "A control that drops down a flyout of choices from which one can be chosen.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "DropDownButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.dropdownbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" + } + ], + "RelatedControls": [ + "SplitButton", + "ToggleSplitButton", + "ToggleButton", + "RepeatButton", + "HyperlinkButton", + "AppBarButton", + "CommandBar" + ] + }, + { + "UniqueId": "HyperlinkButton", + "Title": "HyperlinkButton", + "Subtitle": "A button that appears as hyperlink text, and can navigate to a URI or handle a Click event.", + "ImagePath": "ms-appx:///Assets/ControlImages/HyperlinkButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/HyperlinkButtonIcon.png", + "Description": "A HyperlinkButton appears as a text hyperlink. When a user clicks it, it opens the page you specify in the NavigateUri property in the default browser. Or you can handle its Click event, typically to navigate within your app.", + "Content": "

A HyperlinkButton looks like hyperlink text, but works like a button. You can use it in two ways:

Each control page in this app has two sets of hyperlink buttons, one set to open documentation in Internet Explorer, and one set to navigate to related control pages in the app.

Look at the HyperlinkButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "HyperlinkButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.hyperlinkbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/hyperlinks" + } + ], + "RelatedControls": [ + "Button", + "ToggleButton", + "RepeatButton", + "AppBarButton" + ] + }, + { + "UniqueId": "RepeatButton", + "Title": "RepeatButton", + "Subtitle": "A button that raises its Click event repeatedly from the time it's pressed until it's released.", + "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", + "Description": "The RepeatButton control is like a standard Button, except that the Click event occurs continuously while the user presses the RepeatButton.", + "Content": "

A RepeatButton looks just like a regular Button, but it's Click event occurs continuously while the button is pressed.

Look at the RepeatButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RepeatButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.primitives.repeatbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" + } + ], + "RelatedControls": [ + "Button", + "ToggleButton", + "HyperlinkButton", + "AppBarButton" + ] + }, + { + "UniqueId": "ToggleButton", + "Title": "ToggleButton", + "Subtitle": "A button that can be switched between two states like a CheckBox.", + "ImagePath": "ms-appx:///Assets/ControlImages/ToggleButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleButtonIcon.png", + "Description": "A ToggleButton looks like a Button, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.", + "Content": "

ToggleButton is used as a base class for similar controls like CheckBox and RadioButton. It can be used on its own, but don't use it if a CheckBox, RadioButton, or ToggleSwitch would convey your intent better.

Look at the ToggleButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ToggleButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.primitives.togglebutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons#create-a-toggle-split-button" + } + ], + "RelatedControls": [ + "Button", + "AppBarToggleButton", + "ToggleSwitch", + "CheckBox", + "CommandBarFlyout", + "CommandBar" + ] + }, + { + "UniqueId": "SplitButton", + "Title": "SplitButton", + "Subtitle": "A two-part button that displays a flyout when its secondary part is clicked.", + "ImagePath": "ms-appx:///Assets/ControlImages/SplitButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SplitButtonIcon.png", + "Description": "The splitbutton is a dropdown button, but with an addition execution hit target.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "SplitButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.splitbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons#create-a-split-button" + } + ], + "RelatedControls": [ + "Button", + "AppBarToggleButton", + "CommandBar", + "ToggleSwitch", + "CheckBox", + "CommandBarFlyout", + "CommandBar" + ] + }, + { + "UniqueId": "ToggleSplitButton", + "Title": "ToggleSplitButton", + "Subtitle": "A version of the SplitButton where the activation target toggles on/off.", + "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSplitButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleSplitButtonIcon.png", + "Description": "A version of the SplitButton where the activation target toggles on/off.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ToggleSplitButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.togglesplitbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" + } + ], + "RelatedControls": [ + "Button", + "AppBarToggleButton", + "ToggleSwitch", + "CheckBox", + "CommandBarFlyout", + "CommandBar" + ] + }, + { + "UniqueId": "CheckBox", + "Title": "CheckBox", + "Subtitle": "A control that a user can select or clear.", + "ImagePath": "ms-appx:///Assets/ControlImages/CheckBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CheckBoxIcon.png", + "Description": "CheckBox controls let the user select a combination of binary options. In contrast, RadioButton controls allow the user to select from mutually exclusive options. The indeterminate state is used to indicate that an option is set for some, but not all, child options. Don't allow users to set an indeterminate state directly to indicate a third option.", + "Content": "

Check and uncheck these controls to see how they look in each state. The label for each CheckBox is defined by its Content property.

Use a three-state CheckBox to show that none, some, or all of an items sub-options are checked. You have to add some code to do this. Take a look at the methods in the SelectAllMethods region of CheckBoxPage.xaml.cs to see how we did it.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CheckBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.checkbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/checkbox" + } + ], + "RelatedControls": [ + "RadioButton", + "ToggleSwitch", + "ToggleButton" + ] + }, + { + "UniqueId": "ColorPicker", + "Title": "ColorPicker", + "Subtitle": "A control that displays a selectable color spectrum.", + "ImagePath": "ms-appx:///Assets/ControlImages/ColorPicker.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ColorPickerIcon.png", + "Description": "A selectable color spectrum.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ColorPicker - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.ColorPicker" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/color-picker" + } + ], + "RelatedControls": [ + "ComboBox" + ] + }, + { + "UniqueId": "ComboBox", + "Title": "ComboBox", + "Subtitle": "A drop-down list of items a user can select from.", + "ImagePath": "ms-appx:///Assets/ControlImages/ComboBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ComboBoxIcon.png", + "Description": "Use a ComboBox when you need to conserve on-screen space and when users select only one option at a time. A ComboBox shows only the currently selected item.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ComboBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.combobox" + }, + { + "Title": "ComboBoxItem - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.comboboxitem" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/combo-box" + } + ], + "RelatedControls": [ + "ListBox", + "RadioButton", + "CheckBox", + "ListView", + "AutoSuggestBox", + "RatingControl" + ] + }, + { + "UniqueId": "RadioButton", + "Title": "RadioButton", + "Subtitle": "A control that allows a user to select a single option from a group of options.", + "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RadioButtonIcon.png", + "Description": "Use RadioButtons to let a user choose between mutually exclusive, related options. Generally contained within a RadioButtons group control.", + "Content": "

Look at the RadioButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RadioButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.radiobutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/radio-button" + } + ], + "RelatedControls": [ + "CheckBox", + "RadioButtons", + "ToggleSwitch", + "ToggleButton" + ] + }, + { + "UniqueId": "RatingControl", + "Title": "RatingControl", + "Subtitle": "Rate something 1 to 5 stars.", + "ImagePath": "ms-appx:///Assets/ControlImages/RatingControl.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RatingControlIcon.png", + "Description": "Rate something 1 to 5 stars.", + "Content": "", + "IsNew": false, + "Docs": [ + { + "Title": "RatingControl - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RatingControl" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/rating" + } + ], + "RelatedControls": [ + "Slider", + "ComboBox" + ] + }, + { + "UniqueId": "Slider", + "Title": "Slider", + "Subtitle": "A control that lets the user select from a range of values by moving a Thumb control along a track.", + "ImagePath": "ms-appx:///Assets/ControlImages/Slider.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SliderIcon.png", + "Description": "Use a Slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).", + "Content": "

Look at the SliderPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Slider - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.slider" + }, + { + "Title": "Guidelines", + "Uri": "http://docs.microsoft.com/windows/apps/design/controls/slider" + } + ], + "RelatedControls": [ + "ComboBox", + "ListBox", + "RatingControl" + ] + }, + { + "UniqueId": "ToggleSwitch", + "Title": "ToggleSwitch", + "Subtitle": "A switch that can be toggled between 2 states.", + "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSwitch.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleSwitchIcon.png", + "Description": "Use ToggleSwitch controls to present users with exactly two mutually exclusive options (like on/off), where choosing an option results in an immediate commit. A toggle switch should have a single label.", + "Content": "

Look at the ToggleSwitchPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ToggleSwitch - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.toggleswitch" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/toggles" + } + ], + "RelatedControls": [ + "ToggleButton", + "RadioButton", + "CheckBox", + "AppBarToggleButton" + ] + } + ] + }, + { + "UniqueId": "StatusAndInfo", + "Title": "Status and Info", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "AutomationProperties", + "Title": "AutomationProperties", + "Subtitle": "Attributes that help with writing accessible XAML.", + "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", + "Description": "The AutomationProperties attributes provide functionality around accessible components.", + "Content": "

The aim of AutomationProperties is to enable components that are accessible to screen readers.", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AutomationProperties - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.automation.automationproperties" + }, + { + "Title": "Accessibility Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/accessibility/accessibility" + } + ], + "RelatedControls": [ + "TextBlock", + "Image" + ] + }, + { + "UniqueId": "InfoBadge", + "Title": "InfoBadge", + "Subtitle": "An non-intrusive UI to display notifications or bring focus to an area", + "ImagePath": "ms-appx:///Assets/ControlImages/InfoBadge.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", + "Description": "Badging is a non-intrusive and intuitive way to display notifications or bring focus to an area within an app - whether that be for notifications, indicating new content, or showing an alert.", + "Content": "

Look at the InfoBadgePage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "InfoBadge - API", + "Uri": "https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.infobadge" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/infobadge" + } + ], + "RelatedControls": [ + "InfoBar", + "TeachingTip" + ] + }, + { + "UniqueId": "InfoBar", + "Title": "InfoBar", + "Subtitle": "An inline message to display app-wide status change information", + "ImagePath": "ms-appx:///Assets/ControlImages/InfoBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", + "Description": "Use an InfoBar control when a user should be informed of, acknowledge, or take action on a changed application state. By default the notification will remain in the content area until closed by the user but will not necessarily break user flow.", + "Content": "

Look at the InfoBarPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "InfoBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.infobar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/infobar" + } + ], + "RelatedControls": [ + "TeachingTip", + "ContentDialog" + ] + }, + { + "UniqueId": "ProgressBar", + "Title": "ProgressBar", + "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that doesn't block user interaction.", + "ImagePath": "ms-appx:///Assets/ControlImages/ProgressBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ProgressBarIcon.png", + "Description": "The ProgressBar has two different visual representations:\nIndeterminate - shows that a task is ongoing, but doesn't block user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.", + "Content": "

Look at the ProgressBarPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ProgressBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.ProgressBar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/progress-controls" + } + ], + "RelatedControls": [ + "ProgressRing" + ] + }, + { + "UniqueId": "ProgressRing", + "Title": "ProgressRing", + "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that does block user interaction.", + "ImagePath": "ms-appx:///Assets/ControlImages/ProgressRing.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ProgressRingIcon.png", + "Description": "The ProgressRing has two different visual representations:\nIndeterminate - shows that a task is ongoing, but blocks user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.", + "Content": "

Look at the ProgressRingPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "ProgressRing - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.progressring" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/progress-controls" + } + ], + "RelatedControls": [ + "ProgressBar" + ] + }, + { + "UniqueId": "ToolTip", + "Title": "ToolTip", + "Subtitle": "Displays information for an element in a pop-up window.", + "ImagePath": "ms-appx:///Assets/ControlImages/ToolTip.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToolTipIcon.png", + "Description": "A ToolTip shows more information about a UI element. You might show information about what the element does, or what the user should do. The ToolTip is shown when a user hovers over or presses and holds the UI element.", + "Content": "

Look at the ToolTipPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ToolTip - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.tooltip" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tooltips" + } + ], + "RelatedControls": [ + "TeachingTip", + "Flyout", + "ContentDialog" + ] + } + ] + }, + { + "UniqueId": "DialogsAndFlyouts", + "Title": "Dialogs and Flyouts", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "ContentDialog", + "Title": "ContentDialog", + "Subtitle": "A dialog box that can be customized to contain any XAML content.", + "ImagePath": "ms-appx:///Assets/ControlImages/ContentDialog.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "Use a ContentDialog to show relavant information or to provide a modal dialog experience that can show any XAML content.", + "Content": "

Look at the ContentDialog.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "ContentDialog - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.contentdialog" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/dialogs" + } + ], + "RelatedControls": [ + "Flyout", + "MenuFlyout", + "TeachingTip", + "ToolTip" + ] + }, + { + "UniqueId": "Flyout", + "Title": "Flyout", + "Subtitle": "Shows contextual information and enables user interaction.", + "ImagePath": "ms-appx:///Assets/ControlImages/Flyout.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/FlyoutIcon.png", + "Description": "A Flyout displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be light dismissed by clicking or tapping off of it. Use it to collect input from the user, show more details about an item, or ask the user to confirm an action.", + "Content": "

Look at the FlyoutPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Flyout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.flyout" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts" + } + ], + "RelatedControls": [ + "TeachingTip", + "ContentDialog", + "MenuFlyout", + "Button", + "AppBarButton" + ] + }, + { + "UniqueId": "TeachingTip", + "Title": "TeachingTip", + "Subtitle": "A content-rich flyout for guiding users and enabling teaching moments.", + "ImagePath": "ms-appx:///Assets/ControlImages/TeachingTip.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TeachingTipIcon.png", + "Description": "The XAML TeachingTip Control provides a way for your app to guide and inform users in your application with a non-invasive and content rich notification. TeachingTip can be used for bringing focus to a new or important feature, teaching users how to perform a task, or enhancing the user workflow by providing contextually relevant information to their task at hand.", + "Content": "

Look at the TeachingTip.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TeachingTip - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.teachingtip" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/teaching-tip" + } + ], + "RelatedControls": [ + "ContentDialog", + "Flyout", + "ToolTip" + ] + } + ] + }, + { + "UniqueId": "Scrolling", + "Title": "Scrolling", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "PipsPager", + "Title": "PipsPager", + "Subtitle": "A control to let the user navigate through a paginated collection when the page numbers do not need to be visually known.", + "ImagePath": "ms-appx:///Assets/ControlImages/PipsPager.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "A PipsPager allows the user to navigate through a paginated collection and is independent of the content shown. Use this control when the content in the layout is not explicitly ordered by relevancy or you desire a glyph-based representation of numbered pages. PipsPagers are commonly used in photo viewers, app lists, carousels, and when display space is limited.", + "Content": "

Look at the PipsPagerPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "PipsPager - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pipspager" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pipspager" + } + ], + "RelatedControls": [ + "ScrollViewer", + "FlipView", + "ItemsRepeater" + ] + }, + { + "UniqueId": "ScrollViewer", + "Title": "ScrollViewer", + "Subtitle": "A container control that lets the user pan and zoom its content.", + "ImagePath": "ms-appx:///Assets/ControlImages/ScrollViewer.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ScrollViewerIcon.png", + "Description": "A ScrollViewer lets a user scroll, pan, and zoom to see content that's larger than the viewable area. Many content controls, like ListView, have ScrollViewers built into their control templates to provide automatic scrolling.", + "Content": "

Look at the ScrollViewerPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ScrollViewer - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.scrollviewer" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/scroll-controls" + } + ], + "RelatedControls": [ + "ViewBox", + "Canvas", + "Grid", + "StackPanel", + "RelativePanel", + "ParallaxView" + ] + }, + { + "UniqueId": "SemanticZoom", + "Title": "SemanticZoom", + "Subtitle": "Lets the user zoom between two different views of a collection, making it easier to navigate through large collections of items.", + "ImagePath": "ms-appx:///Assets/ControlImages/SemanticZoom.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "The SemanticZoom lets you show grouped data in two different ways, and is useful for quickly navigating through large sets of data.", + "Content": "

Look at the SemanticZoomPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "SemanticZoom - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.semanticzoom" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/semantic-zoom" + } + ], + "RelatedControls": [ + "GridView", + "ListView" + ] + } + ] + }, + { + "UniqueId": "Layout", + "Title": "Layout", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "Use layout controls to arrange the controls and content in your app.", + "Items": [ + { + "UniqueId": "Border", + "Title": "Border", + "Subtitle": "A container control that draws a boundary line, background, or both, around another object.", + "ImagePath": "ms-appx:///Assets/ControlImages/Border.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/BorderIcon.png", + "Description": "Use a Border control to draw a boundary line, background, or both, around another object. A Border can contain only one child object.", + "Content": "

A Border can contain only one child object. If you want to put a border around multiple objects, first wrap them in a container object such as StackPanel and make the StackPanel the child of the Border.

You can change the appearance of a Border by setting basic properties:

Most of the control pages in this app have XAML blocks to show basic usage. The appearance of the XAML blocks is defined by a Border control. Look at the CodeBorderStyle resource in App.xaml to see the Style that's applied to the Borders.

Look at the BorderPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Border - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.border" + } + ], + "RelatedControls": [ + "Canvas", + "Grid", + "StackPanel", + "VariableSizedWrapGrid", + "RelativePanel" + ] + }, + { + "UniqueId": "Canvas", + "Title": "Canvas", + "Subtitle": "A layout panel that supports absolute positioning of child elements relative to the top left corner of the canvas.", + "ImagePath": "ms-appx:///Assets/ControlImages/Canvas.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CanvasIcon.png", + "Description": "The Canvas provides absolute positioning of controls or content. Content is positioned relative to the Canvas using the Canvas.Top and Canvas.Left attached properties.", + "Content": "

Items are positioned on the Canvas using the Canvas.Top and Canvas.Left attached properties. Use the sliders to change these properties for the red rectangle and see how it moves around.

To see the effect of the ZIndex attached property, make sure the red rectangle is overlapping the other rectangles.

Look at the CanvasPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Canvas - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.canvas" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" + } + ], + "RelatedControls": [ + "Border", + "Grid", + "StackPanel", + "VariableSizedWrapGrid", + "RelativePanel" + ] + }, + { + "UniqueId": "Expander", + "Title": "Expander", + "Subtitle": "A container with a header that can be expanded to show a body with more content.", + "ImagePath": "ms-appx:///Assets/ControlImages/Expander.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "The Expander has a header and can expand to show a body with more content. Use an Expander when some content is only relevant some of the time (for example to read more information or access additional options for an item).", + "Content": "Look at the ExpanderPage.xaml file in Visual Studio to see the full code for this page.", + "IsNew": true, + "Docs": [ + { + "Title": "Expander - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.expander" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/expander" + } + ], + "RelatedControls": [ + "Flyout", + "ItemsRepeater", + "SplitView" + ] + }, + { + "UniqueId": "ItemsRepeater", + "Title": "ItemsRepeater", + "Subtitle": "A flexible, primitive control for data-driven layouts.", + "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListViewIcon.png", + "Description": "The ItemsRepeater is like a markup-based loop that supports virtualization.", + "Content": "

A ItemsRepeater is more basic than an ItemsControl. It does not have default styling or a control template. It can contain a collection of items of any type. To populate the view, set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

And, optionally set the Layout to define how items are sized and positioned. By default, it uses a simple vertical stacking layout.

Look at the ItemsRepeaterPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ItemsRepeater - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.itemsrepeater" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/items-repeater" + }, + { + "Title": "StackLayout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.stacklayout" + }, + { + "Title": "UniformGridLayout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.uniformgridlayout" + } + ], + "RelatedControls": [ + "ScrollViewer", + "ListView", + "GridView" + ] + }, + { + "UniqueId": "Grid", + "Title": "Grid", + "Subtitle": "A layout panel that supports arranging child elements in rows and columns. ", + "ImagePath": "ms-appx:///Assets/ControlImages/Grid.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridIcon.png", + "Description": "The Grid is used to arrange controls and content in rows and columns. Content is positioned in the grid using Grid.Row and Grid.Column attached properties.", + "Content": "

Look at the GridPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Grid - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.grid" + }, + { + "Title": "Tutorial", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/grid-tutorial" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels#grid" + } + ], + "RelatedControls": [ + "Border", + "Canvas", + "StackPanel", + "VariableSizedWrapGrid", + "RelativePanel" + ] + }, + { + "UniqueId": "RadioButtons", + "Title": "RadioButtons", + "Subtitle": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.", + "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RadioButtonsIcon.png", + "Description": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.", + "Content": "

Look at the RadioButtonsPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RadioButtons - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.radiobuttons" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/radio-button" + } + ], + "RelatedControls": [ + "CheckBox", + "RadioButton", + "ToggleSwitch", + "ToggleButton" + ] + }, + { + "UniqueId": "RelativePanel", + "Title": "RelativePanel", + "Subtitle": "A panel that uses relationships between elements to define layout.", + "ImagePath": "ms-appx:///Assets/ControlImages/RelativePanel.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RelativePanelIcon.png", + "Description": "Use a RelativePanel to layout elements by defining the relationships between elements and in relation to the panel.", + "Content": "

Look at the RelativePanelPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RelativePanel - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.relativepanel" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" + } + ], + "RelatedControls": [ + "Grid", + "StackPanel", + "Border", + "Canvas", + "ViewBox" + ] + }, + { + "UniqueId": "SplitView", + "Title": "SplitView", + "Subtitle": "A container that has 2 content areas, with multiple display options for the pane.", + "ImagePath": "ms-appx:///Assets/ControlImages/SplitView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SplitViewIcon.png", + "Description": "Use a SplitView to display content, such as navigation options, in a pane on the side. There are multiple options for displaying the pane, namely CompactOverlay, Compact, Overlay, Inline. If you are looking for a reference to the hamburger pattern, please see the links in the documentation below.", + "Content": "

Look at the SplitViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "SplitView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.splitview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/split-view" + } + ], + "RelatedControls": [ + "StackPanel", + "ListView", + "GridView", + "Grid", + "RelativePanel" + ] + }, + { + "UniqueId": "StackPanel", + "Title": "StackPanel", + "Subtitle": "A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.", + "ImagePath": "ms-appx:///Assets/ControlImages/StackPanel.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/StackPanelIcon.png", + "Description": "A StackPanel is used to arrange items in a line, either horizontally or vertically.", + "Content": "

Look at the StackPanelPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "StackPanel - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.stackpanel" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" + } + ], + "RelatedControls": [ + "Border", + "Canvas", + "Grid", + "VariableSizedWrapGrid", + "RelativePanel" + ] + }, + { + "UniqueId": "VariableSizedWrapGrid", + "Title": "VariableSizedWrapGrid", + "Subtitle": "A layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns.", + "ImagePath": "ms-appx:///Assets/ControlImages/VariableSizedWrapGrid.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/VariableSizedWrapGridIcon.png", + "Description": "A VariableSizedWrapGrip is used to create grid layouts where content can span multiple rows and columns.", + "Content": "

Elements are arranged in rows or columns that automatically wrap to a new row or column when the MaximumRowsOrColumns value is reached.

Whether elements are arranged in rows or columns is specified by the Orientation property.

Elements can span multiple rows and columns using VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties.

Elements are sized as specified by the ItemHeight and ItemWidth properties.

Look at the VariableSizedWrapGridPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "VariableSizedWrapGrid - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.variablesizedwrapgrid" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" + } + ], + "RelatedControls": [ + "Border", + "Canvas", + "Grid", + "StackPanel", + "RelativePanel" + ] + }, + { + "UniqueId": "ViewBox", + "Title": "ViewBox", + "Subtitle": "A container control that scales its content to a specified size.", + "ImagePath": "ms-appx:///Assets/ControlImages/ViewBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ViewBoxIcon.png", + "Description": "Use a ViewBox control scale content up or down to a specified size.", + "Content": "

Look at the ViewBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Viewbox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.viewbox" + } + ], + "RelatedControls": [ + "ScrollViewer", + "Canvas", + "Grid", + "StackPanel", + "RelativePanel" + ] + } + ] + }, + { + "UniqueId": "Navigation", + "Title": "Navigation", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "BreadcrumbBar", + "Title": "BreadcrumbBar", + "Subtitle": "Shows the trail of navigation taken to the current location.", + "ImagePath": "ms-appx:///Assets/ControlImages/BreadcrumbBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "The BreadcrumbBar control provides a common horizontal layout to display the trail of navigation taken to the current location. Resize to see the nodes crumble, starting at the root.", + "Content": "

Look at the BreadcrumbBarPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "BreadcrumbBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.breadcrumbbar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/breadcrumbbar" + } + ], + "RelatedControls": [ + "NavigationView", + "Pivot", + "TabView" + ] + }, + { + "UniqueId": "NavigationView", + "Title": "NavigationView", + "Subtitle": "Common vertical layout for top-level areas of your app via a collapsible navigation menu.", + "ImagePath": "ms-appx:///Assets/ControlImages/NavigationView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/NavigationViewIcon.png", + "Description": "The navigation view control provides a common vertical layout for top-level areas of your app via a collapsible navigation menu.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "NavigationView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.NavigationView" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/navigationview" + } + ], + "RelatedControls": [ + "SplitView", + "Pivot" + ] + }, + { + "UniqueId": "Pivot", + "Title": "Pivot", + "Subtitle": "Presents information from different sources in a tabbed view.", + "ImagePath": "ms-appx:///Assets/ControlImages/Pivot.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/PivotIcon.png", + "Description": "A Pivot allows you to show a collection of items from different sources in a tabbed view.", + "Content": "

This page shows a simplified Pivot control with minimal content to demonstrate basic Pivot usage. Look at the PivotPage.xaml file in Visual Studio to see the full code for this page.

A Pivot control typically takes up the full page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Pivot - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pivot" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pivot" + } + ], + "RelatedControls": [ + "SemanticZoom", + "ListView", + "GridView" + ] + }, + { + "UniqueId": "TabView", + "Title": "TabView", + "Subtitle": "A control that displays a collection of tabs that can be used to display several documents.", + "ImagePath": "ms-appx:///Assets/ControlImages/TabView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "TabView provides the user with a collection of tabs that can be used to display several documents.", + "Content": "", + "IsNew": false, + "IsUpdated": true, + "IsPreview": false, + "Docs": [ + { + "Title": "TabView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.tabview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tab-view" + }, + { + "Title": "Show multiple views for an app", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/show-multiple-views" + } + ], + "RelatedControls": [ + "Pivot", + "NavigationView", + "ListView" + ] + } + ] + }, + { + "UniqueId": "Media", + "Title": "Media", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "AnimatedVisualPlayer", + "Title": "AnimatedVisualPlayer", + "Subtitle": "An element to render and control playback of motion graphics.", + "ImagePath": "ms-appx:///Assets/ControlImages/AnimatedVisualPlayer.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AnimationsIcon.png", + "Description": "An element to render and control playback of motion graphics.", + "Content": "

Look at the AnimatedVisualPlayerPage.xaml and AnimatedVisualPlayerPage.xaml.cs files in Visual Studio to see the full code for this page.

", + "IsNew": false, + "Docs": [ + { + "Title": "AnimatedVisualPlayer - API", + "Uri": "https://www.docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedvisualplayer" + }, + { + "Title": "Full Samples", + "Uri": "ms-windows-store://pdp/?productid=9N3J5TG8FF7F" + }, + { + "Title": "Tutorials", + "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie#tutorials" + }, + { + "Title": "Lottie Overview", + "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie" + }, + { + "Title": "Lottie Windows - GitHub", + "Uri": "https://github.com/CommunityToolkit/Lottie-Windows" + } + ] + }, + { + "UniqueId": "Image", + "Title": "Image", + "Subtitle": "A control to display image content.", + "ImagePath": "ms-appx:///Assets/ControlImages/Image.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ImageIcon.png", + "Description": "You can use an Image control to show and scale images.", + "Content": "

Look at the ImagePage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Image - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.image" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/images-imagebrushes" + } + ], + "RelatedControls": [ + "MediaPlayerElement", + "PersonPicture" + ] + }, + { + "UniqueId": "MediaPlayerElement", + "Title": "MediaPlayerElement", + "Subtitle": "A control to display video and image content.", + "ImagePath": "ms-appx:///Assets/ControlImages/MediaPlayerElement.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MediaElementIcon.png", + "Description": "You can use a MediaPlayerElement control to playback videos and show images. You can show transport controls or make the video autoplay.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "MediaPlayerElement - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.MediaPlayerElement" + }, + { + "Title": "Media Playback", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/media-playback" + } + ], + "RelatedControls": [ + "Image" + ] + }, + { + "UniqueId": "PersonPicture", + "Title": "PersonPicture", + "Subtitle": "Displays the picture of a person/contact.", + "ImagePath": "ms-appx:///Assets/ControlImages/PersonPicture.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/PersonPictureIcon.png", + "Description": "Displays the picture of a person/contact.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "PersonPicture - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.PersonPicture" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/person-picture" + } + ], + "RelatedControls": [ + "Image" + ] + }, + { + "UniqueId": "Sound", + "Title": "Sound", + "Subtitle": "A code-behind only API that enables 2D and 3D UI sounds on all XAML controls.", + "ImagePath": "ms-appx:///Assets/ControlImages/Sound.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SoundIcon.png", + "Description": "Sound is enabled by default for UWP apps running on Xbox, but can be set to always play on all devices if desired. Sound may also be put into Spatial Audio mode for a more immersive 10ft experience.", + "Content": "

Look at the SoundPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Sound - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.elementsoundplayer" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/sound" + } + ] + }, + { + "UniqueId": "WebView2", + "Title": "WebView2", + "Subtitle": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", + "ImagePath": "ms-appx:///Assets/ControlImages/WebView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/WebViewIcon.png", + "Description": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", + "Content": "", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "WebView2 - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.webview2?view=winui-3.0" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/winui" + }, + { + "Title": "Examples", + "Uri": "https://github.com/MicrosoftEdge/WebView2Samples" + } + ] + } + ] + }, + { + "UniqueId": "Styles", + "Title": "Styles", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "Acrylic", + "Title": "AcrylicBrush", + "Subtitle": "A translucent material recommended for panel backgrounds.", + "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AcrylicBrushIcon.png", + "Description": "A translucent material recommended for panel backgrounds.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AcrylicBrush - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.acrylicbrush" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/acrylic" + } + ], + "RelatedControls": [ + "SystemBackdrops" + ] + }, + { + "UniqueId": "AnimatedIcon", + "Title": "AnimatedIcon", + "Subtitle": "An element that displays and controls an icon that animates when the user interacts with the control.", + "ImagePath": "ms-appx:///Assets/ControlImages/AnimatedIcon.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AnimationsIcon.png", + "Description": "An element that displays and controls an icon that animates when the user interacts with the control.", + "Content": "

Look at the AnimatedIconPage.xaml and AnimatedIconPage.xaml.cs files in Visual Studio to see the full code for this page.

", + "IsNew": true, + "Docs": [ + { + "Title": "AnimatedIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedicon" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/animated-icon" + }, + { + "Title": "Lottie Overview", + "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie" + }, + { + "Title": "Lottie Windows - GitHub", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedvisualplayer" + } + ] + }, + { + "UniqueId": "IconElement", + "Title": "IconElement", + "Subtitle": "Represents icon controls that use different image types as its content.", + "ImagePath": "ms-appx:///Assets/ControlImages/IconElement.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ImageIcon.png", + "Description": "Represents icon controls that use different image types as its content.", + "Content": "

Look at the IconElementPage.xaml and IconElementPage.xaml.cs files in Visual Studio to see the full code for this page.

", + "IsNew": true, + "Docs": [ + { + "Title": "BitmapIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" + }, + { + "Title": "FontIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" + }, + { + "Title": "ImageIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.imageicon" + }, + { + "Title": "PathIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" + }, + { + "Title": "SymbolIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" + }, + { + "Title": "Icon Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/icons" + } + ], + "RelatedControls": [ + "AnimatedIcon", + "AppBarButton", + "MenuFlyoutItem" + ] + }, + { + "UniqueId": "RadialGradientBrush", + "Title": "RadialGradientBrush", + "Subtitle": "A brush to show radial gradients", + "ImagePath": "ms-appx:///Assets/ControlImages/Canvas.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CanvasIcon.png", + "Description": "Paints an area with a radial gradient. A center point defines the beginning of the gradient, and a radius defines the end point of the gradient.", + "Content": "The RadialGradientBrush is similar in programming model to the LinearGradientBrush. However, the linear gradient has a start and an end point to define the gradient vector, while the radial gradient has a circle, along with a focal point, to define the gradient behavior. The circle defines the end point of the gradient. The parameters can be provided as a ratio or absolute value by picking the mapping mode.", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RadialGradientBrush - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.RadialGradientBrush" + } + ], + "RelatedControls": [ + "Acrylic", + "ColorPaletteResources" + ] + }, + { + "UniqueId": "RevealFocus", + "Title": "Reveal Focus", + "Subtitle": "Customize the style of your focus rectangles.", + "ImagePath": "ms-appx:///Assets/ControlImages/RevealFocus.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RevealFocusIcon.png", + "Description": "Reveal focus allows you to adapt focus rectangles to look like the focus rectangles available on Xbox.", + "Content": "

Look at the RevealFocusPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Reveal Focus - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.application.focusvisualkind#Windows_UI_Xaml_Application_FocusVisualKind" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/reveal-focus" + } + ], + "RelatedControls": [ + ] + }, + { + "UniqueId": "ColorPaletteResources", + "Title": "ColorPaletteResources", + "Subtitle": "A type of resource that allows you to apply custom colors to your controls.", + "ImagePath": "ms-appx:///Assets/ControlImages/ColorPaletteResources.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "Apply custom colors to your controls through this cascading API, or scope them to a local subset.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Theme Editor (GitHub)", + "Uri": "https://github.com/Microsoft/fluent-xaml-theme-editor" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/color#scoping-with-a-resourcedictionary" + }, + { + "Title": "ColorPaletteResources - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.colorpaletteresources" + } + ] + }, + { + "UniqueId": "CompactSizing", + "Title": "Compact Sizing", + "Subtitle": "How to use a Resource Dictionary to enable compact sizing.", + "ImagePath": "ms-appx:///Assets/ControlImages/CompactSizing.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CompactSizingIcon.png", + "Description": "Compact dictionary included in WinUI 2.1. Allows you to create compact smaller apps by adding this at the page or the grid level.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Spacing", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/spacing" + } + ] + }, + { + "UniqueId": "SystemBackdrops", + "Title": "System Backdrops (Mica/Acrylic)", + "Subtitle": "System backdrops, like Mica and Acrylic, for the window.", + "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SystemBackdropsIcon.png", + "Description": "System backdrops are used to provide a different background for a Window other than the default white or black (depending on Light or Dark theme). Mica and Desktop Acrylic are the current supported backdrops. Applying a backdrop currently requires a bunch of app code, but this will be easier in a future release.", + "Content": "

Look at the SampleSystemBackdropsWindow.xaml.cs file in Visual Studio to see the full code for applying a backdrop.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "MicaController - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.composition.systembackdrops.micacontroller" + }, + { + "Title": "DesktopAcrylicController - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.composition.systembackdrops.desktopacryliccontroller" + } + ], + "RelatedControls": [ + ] + } + ] + }, + { + "UniqueId": "Text", + "Title": "Text", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "AutoSuggestBox", + "Title": "AutoSuggestBox", + "Subtitle": "A control to provide suggestions as a user is typing.", + "ImagePath": "ms-appx:///Assets/ControlImages/AutoSuggestBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AutoSuggestBoxIcon.png", + "Description": "A text control that makes suggestions to users as they type. The app is notified when text has been changed by the user and is responsible for providing relevant suggestions for this control to display.", + "Content": "

Look at the AutoSuggestBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "AutoSuggestBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.autosuggestbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/auto-suggest-box" + } + ], + "RelatedControls": [ + "ListBox", + "ComboBox", + "TextBox" + ] + }, + { + "UniqueId": "NumberBox", + "Title": "NumberBox", + "Subtitle": "A text control used for numeric input and evaluation of algebraic equations.", + "ImagePath": "ms-appx:///Assets/ControlImages/NumberBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/NumberBoxIcon.png", + "Description": "Use NumberBox to allow users to enter algebraic equations and numeric input in your app.", + "Content": "

Look at the NumberBox.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "NumberBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.numberbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/number-box" + } + ], + "RelatedControls": [ + "TextBox", + "TextBlock", + "RichTextBlock", + "RichEditBox" + ] + }, + { + "UniqueId": "PasswordBox", + "Title": "PasswordBox", + "Subtitle": "A control for entering passwords.", + "ImagePath": "ms-appx:///Assets/ControlImages/PasswordBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/PasswordBoxIcon.png", + "Description": "A user can enter a single line of non-wrapping text in a PasswordBox control. The text is masked by characters that you can specify by using the PasswordChar property, and you can specify the maximum number of characters that the user can enter by setting the MaxLength property.", + "Content": "

Look at the PasswordBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "PasswordBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.passwordbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "TextBox", + "TextBlock", + "RichTextBlock", + "RichEditBox" + ] + }, + { + "UniqueId": "RichEditBox", + "Title": "RichEditBox", + "Subtitle": "A rich text editing control that supports formatted text, hyperlinks, and other rich content.", + "ImagePath": "ms-appx:///Assets/ControlImages/RichEditBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RichEditBoxIcon.png", + "Description": "You can use a RichEditBox control to enter and edit rich text documents that contain formatted text, hyperlinks, and images. By default, the RichEditBox supports spell checking. You can make a RichEditBox read-only by setting its IsReadOnly property to true.", + "Content": "

On this page, you can type into the RichTextBox control and save it as a RichTextFormat (.rtf) document, or load an existing .rtf document. You can format the text as Bold or Underlined, and change the text color.

Look at the RichEditBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "RichEditBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.richeditbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "NumberBox", + "TextBox", + "RichTextBlock", + "TextBlock" + ] + }, + { + "UniqueId": "RichTextBlock", + "Title": "RichTextBlock", + "Subtitle": "A control that displays formatted text, hyperlinks, inline images, and other rich content.", + "ImagePath": "ms-appx:///Assets/ControlImages/RichTextBlock.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RichTextBlockIcon.png", + "Description": "RichTextBlock provides more advanced formatting features than the TextBlock control. You can apply character and paragraph formatting to the text in the RichTextBlock. For example, you can apply Bold, Italic, and Underline to any portion of the text in the control. You can use linked text containers (a RichTextBlock linked to RichTextBlockOverflow elements) to create advanced page layouts.", + "Content": "

Change the width of the app to see how the RichTextBlock overflows into additional columns as the app gets narrower.

Look at the RichTextBlockPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "RichTextBlock - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.richtextblock" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "NumberBox", + "TextBlock", + "TextBox", + "PasswordBox", + "RichEditBox" + ] + }, + { + "UniqueId": "TextBlock", + "Title": "TextBlock", + "Subtitle": "A lightweight control for displaying small amounts of text.", + "ImagePath": "ms-appx:///Assets/ControlImages/TextBlock.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBlockIcon.png", + "Description": "TextBlock is the primary control for displaying read-only text in your app. You typically display text by setting the Text property to a simple string. You can also display a series of strings in Run elements and give each different formatting.", + "Content": "

Look at the TextBlockPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TextBlock - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.textblock" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "NumberBox", + "TextBox", + "RichTextBlock", + "PasswordBox", + "RichEditBox" + ] + }, + { + "UniqueId": "TextBox", + "Title": "TextBox", + "Subtitle": "A single-line or multi-line plain text field.", + "ImagePath": "ms-appx:///Assets/ControlImages/TextBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBoxIcon.png", + "Description": "Use a TextBox to let a user enter simple text input in your app. You can add a header and placeholder text to let the user know what the TextBox is for, and you can customize it in other ways.", + "Content": "

Look at the TextBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TextBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.textbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "NumberBox", + "TextBlock", + "RichTextBlock", + "PasswordBox", + "RichEditBox", + "AutoSuggestBox" + ] + } + ] + }, + { + "UniqueId": "Motion", + "Title": "Motion", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "ConnectedAnimation", + "Title": "Connected Animation", + "Subtitle": "Connected animations continue elements during page navigation and help the user maintain their context between views.", + "ImagePath": "ms-appx:///Assets/ControlImages/ConnectedAnimation.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ConnectedAnimationsIcon.png", + "Description": "Connected animations continue elements during page navigation and help the user maintain their context between views.", + "Content": "

Look at the ConnectedAnimationPage.xaml and ConnectedAnimationPage.xaml.cs files in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ConnectedAnimation - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.connectedanimation" + }, + { + "Title": "ConnectedAnimationService - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.connectedanimationservice" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/connected-animation" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "PageTransition", + "ThemeTransition" + ] + }, + { + "UniqueId": "EasingFunction", + "Title": "Easing Functions", + "Subtitle": "Easing is a way to manipulate the velocity of an object as it animates.", + "ImagePath": "ms-appx:///Assets/ControlImages/EasingFunction.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/EasingFunctionsIcon.png", + "Description": "Easing is a way to manipulate the velocity of an object as it animates.", + "Content": "

Look at the EasingFunctionPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "EasingFunctionBase - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.easingfunctionbase" + }, + { + "Title": "Timing and Easing", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/timing-and-easing" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "ConnectedAnimation", + "PageTransition", + "ThemeTransition" + ] + }, + { + "UniqueId": "PageTransition", + "Title": "Page Transitions", + "Subtitle": "Page transitions provide visual feedback about the relationship between pages.", + "ImagePath": "ms-appx:///Assets/ControlImages/PageTransition.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", + "Description": "Page transitions provide visual feedback about the relationship between pages.", + "Content": "

Look at the PageTransitionPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "NavigationThemeTransition - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Media.Animation.NavigationThemeTransition" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/page-transitions" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "ConnectedAnimation", + "ThemeTransition" + ] + }, + { + "UniqueId": "ThemeTransition", + "Title": "Theme Transitions", + "Subtitle": "Theme transitions are pre-packaged, easy-to-apply animations.", + "ImagePath": "ms-appx:///Assets/ControlImages/ThemeTransition.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", + "Description": "Theme transitions are pre-packaged, easy-to-apply animations.", + "Content": "

Look at the ThemeTransitionPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Transitions - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/xaml-animation#animations-available-in-the-library" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "ImplicitTransition", + "PageTransition" + ] + }, + { + "UniqueId": "XamlCompInterop", + "Title": "Animation interop", + "Subtitle": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more.", + "ImagePath": "ms-appx:///Assets/ControlImages/AnimationInterop.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/StoryboardAnimationIcon.png", + "IsNew": false, + "IsUpdated": false, + "Description": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more", + "Content": "

Look at the XamlCompInteropPage.xaml.cs file in Visual Studio to see the full code for this page.

", + "Docs": [ + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + }, + { + "Title": "Composition Animation - API", + "Uri": "https://docs.microsoft.com/windows/uwp/composition/composition-animation" + }, + { + "Title": "Guidelines - Xaml Property Animations", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/xaml-property-animations" + }, + { + "Title": "Using the Visual Layer with XAML", + "Uri": "https://docs.microsoft.com/windows/uwp/composition/using-the-visual-layer-with-xaml" + } + ], + "RelatedControls": [ + "EasingFunction" + ] + }, + { + "UniqueId": "ImplicitTransition", + "Title": "Implicit Transitions", + "Subtitle": "Use Implicit Transitions to automatically animate changes to properties.", + "ImagePath": "ms-appx:///Assets/ControlImages/ImplicitTransition.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", + "IsNew": false, + "IsUpdated": false, + "Description": "Use Implicit Transitions to automatically animate changes to properties.", + "Content": "

Look at the ImplicitTransitionPage.xaml file in Visual Studio to see the full code for this page.

", + "Docs": [ + { + "Title": "Transitions - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/motion-in-practice#implicit-animations" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "PageTransition", + "ThemeTransition" + ] + }, + { + "UniqueId": "ParallaxView", + "Title": "ParallaxView", + "Subtitle": "A container control that provides the parallax effect when scrolling.", + "ImagePath": "ms-appx:///Assets/ControlImages/ParallaxView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ParallaxViewIcon.png", + "Description": "A container control that provides the parallax effect when scrolling.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ParallaxView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.Parallaxview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/parallax" + } + ], + "RelatedControls": [ + "ScrollViewer" + ] + } + ] + }, + { + "UniqueId": "MultipleWindows", + "Title": "Windows", + "Subtitle": "", + "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "", + "Items": [ + { + "UniqueId": "CreateMultipleWindows", + "Title": "Create Multiple Windows", + "Subtitle": "An example showing the creation of single-threaded top level Xaml windows.", + "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "With Windows App SDK 1.0 we are allowing creation of single-threaded multiple top level Xaml windows in Desktop apps", + "Content": "

Look at the CreateMultipleWindowsPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "MultipleWindow - API", + "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" + } + ], + "RelatedControls": [ + ] + }, + { + "UniqueId": "TitleBar", + "Title": "TitleBar", + "Subtitle": "An example showing a custom UIElement used as the titlebar for the app's window.", + "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "This sample shows how to use a custom UIElement as titlebar for app's window.", + "Content": "

Look at the TitleBarPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "TitleBar - API", + "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window.extendscontentintotitlebar?view=winui-3.0" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" + } + ], + "RelatedControls": [ + ] + } + ] } - ] - } - ] + ] } \ No newline at end of file diff --git a/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoDataSchema.json b/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoDataSchema.json new file mode 100644 index 00000000..55b56130 --- /dev/null +++ b/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoDataSchema.json @@ -0,0 +1,115 @@ +{ + "$schema": "http://json-schema.org/draft-04/schema#", + "type": "object", + "properties": { + "Groups": { + "type": "array", + "items": { + "type": "object", + "properties": { + "UniqueId": { + "type": "string", + "description": "Globally unique id of this group", + "uniqueItems": true + }, + "Title": { + "type": "string", + "description": "Title appears on the overview card and control page" + }, + "Subtitle": { + "type": "string", + "description": "Subtitle appears on the overview card of a specific control" + }, + "ImagePath": { + "type": "string", + "description": "Not used." + }, + "ImageIconPath": { + "type": "string", + "description": "ImageIconPath appears as an icon of this control group on the NavigationViewItem. Should be a Unicode glyph of the icon" + }, + "Description": { + "type": "string", + "description": "Not used. Leave empty" + }, + "Items": { + "type": "array", + "description": "Individual control info", + "items": { + "type": "object", + "properties": { + "UniqueId": { + "type": "string", + "description": "Globally unique id of this control", + "uniqueItems": true + }, + "Title": { + "type": "string", + "description": "Title appears on the overview card and control page of this control" + }, + "Subtitle": { + "type": "string", + "description": "Subtitle appears on the overview card of this control" + }, + "ImagePath": { + "type": "string", + "description": "Appears as the image of this control on the overriew card. Should be a uri starts with ms-appx:///Assets/ControlImages/..." + }, + "ImageIconPath": { + "type": "string", + "description": "Appears as the icon image of this control on the NavigationViewItem. Should be a uri starts with ms-appx:///Assets/ControlIcons/..." + }, + "Description": { + "type": "string", + "description": "Appears on the control page" + }, + "Content": { + "type": "string", + "description": "Not used. Leave empty" + }, + "IsNew": { + "type": "boolean", + "default": true, + "description": "Show on the Recently Added Sample section on the main page and will add a dot on the overview card of this control" + }, + "IsUpdated": { + "type": "boolean", + "default": false, + "description": "Show on the Recently Updated Sample section on the main page and will add a dot on the overview card of this control" + }, + "Docs": { + "type": "array", + "items": { + "type": "object", + "properties": { + "Title": { + "type": "string", + "description": "Link name that appears in the Documentation dropdown" + }, + "Uri": { + "type": "string", + "description": "Documentation link url" + } + }, + "required": [ "Title", "Uri" ] + }, + "description": "Add a link to the doc in the Documentation dropdown on the detail page of this control" + }, + "RelatedControls": { + "type": "array", + "items": { + "type": "string", + "description": "Name of the related control" + }, + "description": "Array of names of the related control" + } + }, + "required": [ "UniqueId", "Title", "Subtitle", "ImagePath", "ImageIconPath", "Description", "Content" ] + } + } + }, + "required": [ "UniqueId", "Title", "Subtitle", "ImagePath", "ImageIconPath", "Description", "Items" ] + } + } + } +} \ No newline at end of file From 877e69d5461f71b13af9b0c1c21aca58b0e06773 Mon Sep 17 00:00:00 2001 From: Peter Date: Wed, 9 Oct 2024 02:04:33 +0800 Subject: [PATCH 2/3] Format using 2 space tab --- .../DataModel/ControlInfoData.json | 5406 ++++++++--------- 1 file changed, 2701 insertions(+), 2705 deletions(-) diff --git a/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoData.json b/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoData.json index eeb51bef..41aede01 100644 --- a/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoData.json +++ b/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoData.json @@ -1,2707 +1,2703 @@ { - "$schema": "ControlInfoDataSchema.json", - "Groups": [ - { - "UniqueId": "NewControls", - "Title": "Home", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [] - }, - { - "UniqueId": "AllControls", - "Title": "All controls", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [] - }, - { - "UniqueId": "MenusAndToolbars", - "Title": "Menus and Toolbars", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "XamlUICommand", - "Title": "XamlUICommand", - "Subtitle": "An object which is used to define the look and feel of a given command.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", - "Description": "An object which is used to define the look and feel of a given command, which can be reused across your app, and which is understood natively by the standard XAML controls.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-xamluicommand-class" - }, - { - "Title": "XamlUICommand - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.input.xamluicommand" - } - ], - "RelatedControls": [ - "StandardUICommand", - "AppBarButton", - "AppBarToggleButton", - "CommandBar" - ] - }, - { - "UniqueId": "StandardUICommand", - "Title": "StandardUICommand", - "Subtitle": "A StandardUICommand is a built-in 'XamlUICommand' which represents a commonly used command, e.g. 'Save'.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", - "Description": "StandardUICommands are a set of built-in XamlUICommands represeting commonly used commands. Including the look and feel of a given command, which can be reused across your app, and which is understood natively by the standard XAML controls. E.g. Save, Open, Copy, Paste, etc.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-standarduicommand-class" - }, - { - "Title": "StandardUICommand - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.input.standarduicommand" - } - ], - "RelatedControls": [ - "XamlUICommand", - "AppBarButton", - "AppBarToggleButton", - "CommandBar" - ] - }, - { - "UniqueId": "AppBarButton", - "Title": "AppBarButton", - "Subtitle": "A button that's styled for use in a CommandBar.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarButtonIcon.png", - "Description": "App bar buttons differ from standard buttons in several ways:\n- Their default appearance is a transparent background with a smaller size.\n- You use the Label and Icon properties to set the content instead of the Content property. The Content property is ignored.\n- The button's IsCompact property controls its size.", - "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.

Use the Label and Icon properties to define the content of the app bar buttons. Set the Label property to a string to specify the text label. The label is shown by default but is hidden when the button is in its compact state, so you also need to specify a meaningful icon. To do that, set the button's Icon property to an element derived from the IconElement class. Four kinds of icon elements are provided:

FontIcon - The icon is based on a glyph from the specified font family.

BitmapIcon - The icon is based on a bitmap image file with the specified Uri.

PathIcon - The icon is based on Path data.

SymbolIcon - The icon is based on a predefined list of glyphs from the Segoe UI Symbol font.

Look at the AppBarButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AppBarButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbarbutton" - }, - { - "Title": "SymbolIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" - }, - { - "Title": "FontIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" - }, - { - "Title": "BitmapIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" - }, - { - "Title": "PathIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" - } - ], - "RelatedControls": [ - "AppBarToggleButton", - "AppBarSeparator", - "CommandBar" - ] - }, - { - "UniqueId": "AppBarSeparator", - "Title": "AppBarSeparator", - "Subtitle": "A vertical line that's used to visually separate groups of commands in an app bar.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", - "Description": "An AppBarSeparator creates a vertical line to visually separate groups of commands in a app bar. It has a compact state with reduced padding to match the compact state of the AppBarButton and AppBarToggleButton controls.", - "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons and separators on this page change.

When the IsCompact property is true, the padding around the AppBarSeparator is reduced.

Look at the AppBarSeparatorPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AppBarSeparator - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbarseparator" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" - } - ], - "RelatedControls": [ - "AppBarButton", - "AppBarToggleButton", - "CommandBar" - ] - }, - { - "UniqueId": "AppBarToggleButton", - "Title": "AppBarToggleButton", - "Subtitle": "A button that can be on, off, or indeterminate like a CheckBox, and is styled for use in an app bar or other specialized UI.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarToggleButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarToggleButtonIcon.png", - "Description": "An AppBarToggleButton looks like an AppBarButton, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.", - "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.

Look at the AppBarToggleButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AppBarToggleButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbartogglebutton" - }, - { - "Title": "SymbolIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" - }, - { - "Title": "FontIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" - }, - { - "Title": "BitmapIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" - }, - { - "Title": "PathIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" - } - ], - "RelatedControls": [ - "AppBarButton", - "AppBarSeparator", - "CommandBar" - ] - }, - { - "UniqueId": "CommandBar", - "Title": "CommandBar", - "Subtitle": "A toolbar for displaying application-specific commands that handles layout and resizing of its contents.", - "ImagePath": "ms-appx:///Assets/ControlImages/CommandBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CommandBarIcon.png", - "Description": "The CommandBar simplifies the creation of basic app bars by providing:\n- Automatic layout of commands, with primary commands on the right and secondary commands on the left.\n- Automatic resizing of app bar commands when the app size changes.\nWhen you need an app bar that contains only AppBarButton,AppBarToggleButton , and AppBarSeparator controls, use a CommandBar. If you need more complex content, such as images, progress bars, or text blocks, use an AppBar control.", - "Content": "

The bottom app bar on this page is a CommandBar control.

Add secondary commands and then resize the app to see how the CommandBar automatically adapts to different widths.

This CommandBar element is in the ItemPage so it can be shared across all control pages in the app. Look at the ItemPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CommandBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.commandbar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" - } - ], - "RelatedControls": [ - "AppBarButton", - "AppBarToggleButton", - "AppBarSeparator" - ] - }, - { - "UniqueId": "MenuBar", - "Title": "MenuBar", - "Subtitle": "A classic menu, allowing the display of MenuItems containing MenuFlyoutItems.", - "ImagePath": "ms-appx:///Assets/ControlImages/MenuBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", - "Description": "The Menubar simplifies the creation of basic applications by providing a set of menus at the top of the app or window.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "MenuBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.MenuBar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/menus" - } - ], - "RelatedControls": [ - "CommandBar", - "MenuFlyout", - "StandardUICommand", - "XamlUICommand" - ] - }, - { - "UniqueId": "CommandBarFlyout", - "Title": "CommandBarFlyout", - "Subtitle": "A mini-toolbar displaying proactive commands, and an optional menu of commands.", - "ImagePath": "ms-appx:///Assets/ControlImages/CommandBarFlyout.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CommandBarFlyoutIcon.png", - "Description": "A mini-toolbar which displays a set of proactive commands, as well as a secondary menu of commands if desired.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CommandBarFlyout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.commandbarflyout" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar-flyout" - } - ], - "RelatedControls": [ - "CommandBar", - "MenuFlyout", - "RichEditBox", - "TextBox", - "StandardUICommand", - "XamlUICommand" - ] - }, - { - "UniqueId": "MenuFlyout", - "Title": "MenuFlyout", - "Subtitle": "Shows a contextual list of simple commands or options.", - "ImagePath": "ms-appx:///Assets/ControlImages/MenuFlyout.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuFlyoutIcon.png", - "Description": "A MenuFlyout displays lightweight UI that is light dismissed by clicking or tapping off of it. Use it to let the user choose from a contextual list of simple commands or options.", - "Content": "

Look at the MenuFlyoutPage.xaml file in Visual Studio to see the full code.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "MenuFlyout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyout" - }, - { - "Title": "MenuFlyoutItem - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyoutitem" - }, - { - "Title": "MenuFlyoutSeparator - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyoutseparator" - }, - { - "Title": "ToggleMenuFlyoutItem - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.togglemenuflyoutitem" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/menus" - } - ], - "RelatedControls": [ - "Flyout", - "ContentDialog", - "Button", - "AppBarButton" - ] - }, - { - "UniqueId": "SwipeControl", - "Title": "SwipeControl", - "Subtitle": "Touch gesture for quick menu actions on items.", - "ImagePath": "ms-appx:///Assets/ControlImages/SwipeControl.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SwipeIcon.png", - "Description": "Touch gesture for quick menu actions on items.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "SwipeControl - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.swipecontrol" - }, - { - "Title": "SwipeItems - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.swipeitems" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/swipe" - }, - { - "Title": "Gesture Actions", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/collection-commanding" - } - ], - "RelatedControls": [ - "GridView", - "ListView" - ] - } - ] - }, - { - "UniqueId": "Collections", - "Title": "Collections", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "FlipView", - "Title": "FlipView", - "Subtitle": "Presents a collection of items that the user can flip through, one item at a time.", - "ImagePath": "ms-appx:///Assets/ControlImages/FlipView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/FlipViewIcon.png", - "Description": "The FlipView lets you flip through a collection of items, one at a time. It's great for displaying images from a gallery, pages of a magazine, or similar items.", - "Content": "

FlipView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Look at the FlipViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "FlipView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.flipview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/flipview" - } - ], - "RelatedControls": [ - "GridView", - "ListView", - "SemanticZoom" - ] - }, - { - "UniqueId": "GridView", - "Title": "GridView", - "Subtitle": "A control that presents a collection of items in rows and columns.", - "ImagePath": "ms-appx:///Assets/ControlImages/GridView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridViewIcon.png", - "Description": "The GridView lets you show a collection of items arranged in rows and columns that scroll horizontally.", - "Content": "

GridView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the GridViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "GridView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.gridview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/lists" - } - ], - "RelatedControls": [ - "ListView", - "FlipView", - "SemanticZoom" - ] - }, - { - "UniqueId": "ListBox", - "Title": "ListBox", - "Subtitle": "A control that presents an inline list of items that the user can select from.", - "ImagePath": "ms-appx:///Assets/ControlImages/ListBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListBoxIcon.png", - "Description": "Use a ListBox when you want the options to be visible all the time or when users can select more than one option at a time. ListBox controls are always open, which allows several items to be displayed to the user without user interaction.", - "Content": "

Look at the ListBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ListBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listbox" - }, - { - "Title": "ListBoxItem - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listboxitem" - } - ], - "RelatedControls": [ - "ComboBox", - "RadioButton", - "CheckBox", - "AutoSuggestBox" - ] - }, - { - "UniqueId": "ListView", - "Title": "ListView", - "Subtitle": "A control that presents a collection of items in a vertical list.", - "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListViewIcon.png", - "Description": "The ListView lets you show a collection of items in a list that scrolls vertically.", - "Content": "

ListView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "ListView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/listview-and-gridview" - }, - { - "Title": "Drag and Drop - Full Sample", - "Uri": "https://github.com/microsoft/Windows-universal-samples/tree/master/Samples/XamlDragAndDrop" - }, - { - "Title": "CollectionViewSource - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.Data.CollectionViewSource" - }, - { - "Title": "Filtering collections and lists through user input", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/listview-filtering" - }, - { - "Title": "Inverted Lists", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/inverted-lists" - }, - { - "Title": "Inverted Lists - Full Sample", - "Uri": "https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlBottomUpList" - } - ], - "RelatedControls": [ - "GridView", - "StandardUICommand", - "FlipView", - "SemanticZoom" - ] - }, - { - "UniqueId": "PullToRefresh", - "Title": "PullToRefresh", - "Subtitle": "Provides the ability to pull on a collection of items in a list/grid to refresh the contents of the collection.", - "ImagePath": "ms-appx:///Assets/ControlImages/PullToRefresh.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/PullToRefreshIcon.png", - "Description": "PullToRefresh lets a user pull down on a list of data using touch in order to retrieve more data. PullToRefresh is widely used on devices with a touch screen.", - "Content": "

PullToRefresh can be used for a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RefreshContainer - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RefreshContainer" - }, - { - "Title": "RefreshVisualizer - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RefreshVisualizer" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pull-to-refresh" - } - ] - }, - { - "UniqueId": "TreeView", - "Title": "TreeView", - "Subtitle": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items.", - "ImagePath": "ms-appx:///Assets/ControlImages/TreeView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TreeViewIcon.png", - "Description": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items. ", - "Content": "

PullToRefresh can be used for a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TreeView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.TreeView" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tree-view" - } - ] - }, - { - "UniqueId": "DataGrid", - "Title": "DataGrid", - "Subtitle": "The DataGrid control presents data in a customizable table of rows and columns.", - "ImagePath": "ms-appx:///Assets/ControlImages/GridView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridViewIcon.png", - "Description": "The DataGrid control provides a flexible way to display a collection of data in rows and columns.", - "Content": "The DataGrid control presents data in a customizable table of rows and columns.", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "DataGrid - API", - "Uri": "https://aka.ms/win10datagridapidoc" - }, - { - "Title": "Guidelines", - "Uri": "https://aka.ms/win10datagriddoc" - }, - { - "Title": "Windows Community Toolkit", - "Uri": "https://docs.microsoft.com/windows/communitytoolkit" - } - ], - "RelatedControls": [ - "GridView", - "TreeView" - ] - } - ] - }, - { - "UniqueId": "DateAndTime", - "Title": "Date and Time", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "CalendarDatePicker", - "Title": "CalendarDatePicker", - "Subtitle": "A control that lets users pick a date value using a calendar.", - "ImagePath": "ms-appx:///Assets/ControlImages/CalendarDatePicker.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CalendarDatePickerIcon.png", - "Description": "A control that lets users pick a date value using a calendar.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CalendarDatePicker - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.calendardatepicker" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/calendar-date-picker" - } - ], - "RelatedControls": [ - "DatePicker", - "CalendarView" - ] - }, - { - "UniqueId": "CalendarView", - "Title": "CalendarView", - "Subtitle": "A control that presents a calendar for a user to choose a date from.", - "ImagePath": "ms-appx:///Assets/ControlImages/CalendarView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CalendarViewIcon.png", - "Description": "CalendarView shows a larger view for showing and selecting dates. DatePicker by contrast has a compact view with inline selection.", - "Content": "

Look at the CalendarView.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CalendarView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.calendarview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/calendar-view" - } - ], - "RelatedControls": [ - "CalendarDatePicker", - "DatePicker", - "TimePicker" - ] - }, - { - "UniqueId": "DatePicker", - "Title": "DatePicker", - "Subtitle": "A control that lets a user pick a date value.", - "ImagePath": "ms-appx:///Assets/ControlImages/DatePicker.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DatePickerIcon.png", - "Description": "Use a DatePicker to let users set a date in your app, for example to schedule an appointment. The DatePicker displays three controls for month, date, and year. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.", - "Content": "

Look at the DatePickerPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "DatePicker - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.datepicker" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/date-picker" - } - ], - "RelatedControls": [ - "CalendarDatePicker", - "CalendarView", - "TimePicker" - ] - }, - { - "UniqueId": "TimePicker", - "Title": "TimePicker", - "Subtitle": "A configurable control that lets a user pick a time value.", - "ImagePath": "ms-appx:///Assets/ControlImages/TimePicker.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TimePickerIcon.png", - "Description": "Use a TimePicker to let users set a time in your app, for example to set a reminder. The TimePicker displays three controls for hour, minute, and AM/PM. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.", - "Content": "

Look at the TimePickerPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TimePicker - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.timepicker" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/time-picker" - } - ], - "RelatedControls": [ - "DatePicker", - "CalendarView" - ] - } - ] - }, - { - "UniqueId": "BasicInput", - "Title": "Basic Input", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "InputValidation", - "Title": "InputValidation", - "Subtitle": "A feature that will display an error for invalid text. The app is notified when text has been changed by the user and is responsible for determining whether the text is valid and the error message", - "ImagePath": "ms-appx:///Assets/ControlImages/TextBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBoxIcon.png", - "Description": "A feature to display developer-defined errors for text values", - "Content": "

Look at the InputValidationPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [], - "RelatedControls": [ - "TextBox", - "PasswordBox" - ] - }, - { - "UniqueId": "Button", - "Title": "Button", - "Subtitle": "A control that responds to user input and raises a Click event.", - "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", - "Description": "The Button control provides a Click event to respond to user input from a touch, mouse, keyboard, stylus, or other input device. You can put different kinds of content in a button, such as text or an image, or you can restyle a button to give it a new look.", - "Content": "

The main purpose of a Button is to make something happen when a user clicks it. There are two ways you can make something happen:

Buttons often have only simple string content, but you can use any object as content. You can also change the style and template to give them any look you want.

Look at the ButtonPage.xaml file in Visual Studio to see the custom button style and template definitions used on this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "Button - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.button" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" - } - ], - "RelatedControls": [ - "ToggleButton", - "RepeatButton", - "HyperlinkButton", - "AppBarButton" - ] - }, - { - "UniqueId": "DropDownButton", - "Title": "DropDownButton", - "Subtitle": "A button that displays a flyout of choices when clicked.", - "ImagePath": "ms-appx:///Assets/ControlImages/DropDownButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DropDownButtonIcon.png", - "Description": "A control that drops down a flyout of choices from which one can be chosen.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "DropDownButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.dropdownbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" - } - ], - "RelatedControls": [ - "SplitButton", - "ToggleSplitButton", - "ToggleButton", - "RepeatButton", - "HyperlinkButton", - "AppBarButton", - "CommandBar" - ] - }, - { - "UniqueId": "HyperlinkButton", - "Title": "HyperlinkButton", - "Subtitle": "A button that appears as hyperlink text, and can navigate to a URI or handle a Click event.", - "ImagePath": "ms-appx:///Assets/ControlImages/HyperlinkButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/HyperlinkButtonIcon.png", - "Description": "A HyperlinkButton appears as a text hyperlink. When a user clicks it, it opens the page you specify in the NavigateUri property in the default browser. Or you can handle its Click event, typically to navigate within your app.", - "Content": "

A HyperlinkButton looks like hyperlink text, but works like a button. You can use it in two ways:

Each control page in this app has two sets of hyperlink buttons, one set to open documentation in Internet Explorer, and one set to navigate to related control pages in the app.

Look at the HyperlinkButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "HyperlinkButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.hyperlinkbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/hyperlinks" - } - ], - "RelatedControls": [ - "Button", - "ToggleButton", - "RepeatButton", - "AppBarButton" - ] - }, - { - "UniqueId": "RepeatButton", - "Title": "RepeatButton", - "Subtitle": "A button that raises its Click event repeatedly from the time it's pressed until it's released.", - "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", - "Description": "The RepeatButton control is like a standard Button, except that the Click event occurs continuously while the user presses the RepeatButton.", - "Content": "

A RepeatButton looks just like a regular Button, but it's Click event occurs continuously while the button is pressed.

Look at the RepeatButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RepeatButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.primitives.repeatbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" - } - ], - "RelatedControls": [ - "Button", - "ToggleButton", - "HyperlinkButton", - "AppBarButton" - ] - }, - { - "UniqueId": "ToggleButton", - "Title": "ToggleButton", - "Subtitle": "A button that can be switched between two states like a CheckBox.", - "ImagePath": "ms-appx:///Assets/ControlImages/ToggleButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleButtonIcon.png", - "Description": "A ToggleButton looks like a Button, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.", - "Content": "

ToggleButton is used as a base class for similar controls like CheckBox and RadioButton. It can be used on its own, but don't use it if a CheckBox, RadioButton, or ToggleSwitch would convey your intent better.

Look at the ToggleButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ToggleButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.primitives.togglebutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons#create-a-toggle-split-button" - } - ], - "RelatedControls": [ - "Button", - "AppBarToggleButton", - "ToggleSwitch", - "CheckBox", - "CommandBarFlyout", - "CommandBar" - ] - }, - { - "UniqueId": "SplitButton", - "Title": "SplitButton", - "Subtitle": "A two-part button that displays a flyout when its secondary part is clicked.", - "ImagePath": "ms-appx:///Assets/ControlImages/SplitButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SplitButtonIcon.png", - "Description": "The splitbutton is a dropdown button, but with an addition execution hit target.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "SplitButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.splitbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons#create-a-split-button" - } - ], - "RelatedControls": [ - "Button", - "AppBarToggleButton", - "CommandBar", - "ToggleSwitch", - "CheckBox", - "CommandBarFlyout", - "CommandBar" - ] - }, - { - "UniqueId": "ToggleSplitButton", - "Title": "ToggleSplitButton", - "Subtitle": "A version of the SplitButton where the activation target toggles on/off.", - "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSplitButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleSplitButtonIcon.png", - "Description": "A version of the SplitButton where the activation target toggles on/off.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ToggleSplitButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.togglesplitbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" - } - ], - "RelatedControls": [ - "Button", - "AppBarToggleButton", - "ToggleSwitch", - "CheckBox", - "CommandBarFlyout", - "CommandBar" - ] - }, - { - "UniqueId": "CheckBox", - "Title": "CheckBox", - "Subtitle": "A control that a user can select or clear.", - "ImagePath": "ms-appx:///Assets/ControlImages/CheckBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CheckBoxIcon.png", - "Description": "CheckBox controls let the user select a combination of binary options. In contrast, RadioButton controls allow the user to select from mutually exclusive options. The indeterminate state is used to indicate that an option is set for some, but not all, child options. Don't allow users to set an indeterminate state directly to indicate a third option.", - "Content": "

Check and uncheck these controls to see how they look in each state. The label for each CheckBox is defined by its Content property.

Use a three-state CheckBox to show that none, some, or all of an items sub-options are checked. You have to add some code to do this. Take a look at the methods in the SelectAllMethods region of CheckBoxPage.xaml.cs to see how we did it.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CheckBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.checkbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/checkbox" - } - ], - "RelatedControls": [ - "RadioButton", - "ToggleSwitch", - "ToggleButton" - ] - }, - { - "UniqueId": "ColorPicker", - "Title": "ColorPicker", - "Subtitle": "A control that displays a selectable color spectrum.", - "ImagePath": "ms-appx:///Assets/ControlImages/ColorPicker.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ColorPickerIcon.png", - "Description": "A selectable color spectrum.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ColorPicker - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.ColorPicker" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/color-picker" - } - ], - "RelatedControls": [ - "ComboBox" - ] - }, - { - "UniqueId": "ComboBox", - "Title": "ComboBox", - "Subtitle": "A drop-down list of items a user can select from.", - "ImagePath": "ms-appx:///Assets/ControlImages/ComboBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ComboBoxIcon.png", - "Description": "Use a ComboBox when you need to conserve on-screen space and when users select only one option at a time. A ComboBox shows only the currently selected item.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ComboBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.combobox" - }, - { - "Title": "ComboBoxItem - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.comboboxitem" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/combo-box" - } - ], - "RelatedControls": [ - "ListBox", - "RadioButton", - "CheckBox", - "ListView", - "AutoSuggestBox", - "RatingControl" - ] - }, - { - "UniqueId": "RadioButton", - "Title": "RadioButton", - "Subtitle": "A control that allows a user to select a single option from a group of options.", - "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RadioButtonIcon.png", - "Description": "Use RadioButtons to let a user choose between mutually exclusive, related options. Generally contained within a RadioButtons group control.", - "Content": "

Look at the RadioButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RadioButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.radiobutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/radio-button" - } - ], - "RelatedControls": [ - "CheckBox", - "RadioButtons", - "ToggleSwitch", - "ToggleButton" - ] - }, - { - "UniqueId": "RatingControl", - "Title": "RatingControl", - "Subtitle": "Rate something 1 to 5 stars.", - "ImagePath": "ms-appx:///Assets/ControlImages/RatingControl.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RatingControlIcon.png", - "Description": "Rate something 1 to 5 stars.", - "Content": "", - "IsNew": false, - "Docs": [ - { - "Title": "RatingControl - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RatingControl" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/rating" - } - ], - "RelatedControls": [ - "Slider", - "ComboBox" - ] - }, - { - "UniqueId": "Slider", - "Title": "Slider", - "Subtitle": "A control that lets the user select from a range of values by moving a Thumb control along a track.", - "ImagePath": "ms-appx:///Assets/ControlImages/Slider.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SliderIcon.png", - "Description": "Use a Slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).", - "Content": "

Look at the SliderPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Slider - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.slider" - }, - { - "Title": "Guidelines", - "Uri": "http://docs.microsoft.com/windows/apps/design/controls/slider" - } - ], - "RelatedControls": [ - "ComboBox", - "ListBox", - "RatingControl" - ] - }, - { - "UniqueId": "ToggleSwitch", - "Title": "ToggleSwitch", - "Subtitle": "A switch that can be toggled between 2 states.", - "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSwitch.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleSwitchIcon.png", - "Description": "Use ToggleSwitch controls to present users with exactly two mutually exclusive options (like on/off), where choosing an option results in an immediate commit. A toggle switch should have a single label.", - "Content": "

Look at the ToggleSwitchPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ToggleSwitch - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.toggleswitch" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/toggles" - } - ], - "RelatedControls": [ - "ToggleButton", - "RadioButton", - "CheckBox", - "AppBarToggleButton" - ] - } - ] - }, - { - "UniqueId": "StatusAndInfo", - "Title": "Status and Info", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "AutomationProperties", - "Title": "AutomationProperties", - "Subtitle": "Attributes that help with writing accessible XAML.", - "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", - "Description": "The AutomationProperties attributes provide functionality around accessible components.", - "Content": "

The aim of AutomationProperties is to enable components that are accessible to screen readers.", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AutomationProperties - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.automation.automationproperties" - }, - { - "Title": "Accessibility Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/accessibility/accessibility" - } - ], - "RelatedControls": [ - "TextBlock", - "Image" - ] - }, - { - "UniqueId": "InfoBadge", - "Title": "InfoBadge", - "Subtitle": "An non-intrusive UI to display notifications or bring focus to an area", - "ImagePath": "ms-appx:///Assets/ControlImages/InfoBadge.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", - "Description": "Badging is a non-intrusive and intuitive way to display notifications or bring focus to an area within an app - whether that be for notifications, indicating new content, or showing an alert.", - "Content": "

Look at the InfoBadgePage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "InfoBadge - API", - "Uri": "https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.infobadge" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/infobadge" - } - ], - "RelatedControls": [ - "InfoBar", - "TeachingTip" - ] - }, - { - "UniqueId": "InfoBar", - "Title": "InfoBar", - "Subtitle": "An inline message to display app-wide status change information", - "ImagePath": "ms-appx:///Assets/ControlImages/InfoBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", - "Description": "Use an InfoBar control when a user should be informed of, acknowledge, or take action on a changed application state. By default the notification will remain in the content area until closed by the user but will not necessarily break user flow.", - "Content": "

Look at the InfoBarPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "InfoBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.infobar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/infobar" - } - ], - "RelatedControls": [ - "TeachingTip", - "ContentDialog" - ] - }, - { - "UniqueId": "ProgressBar", - "Title": "ProgressBar", - "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that doesn't block user interaction.", - "ImagePath": "ms-appx:///Assets/ControlImages/ProgressBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ProgressBarIcon.png", - "Description": "The ProgressBar has two different visual representations:\nIndeterminate - shows that a task is ongoing, but doesn't block user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.", - "Content": "

Look at the ProgressBarPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ProgressBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.ProgressBar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/progress-controls" - } - ], - "RelatedControls": [ - "ProgressRing" - ] - }, - { - "UniqueId": "ProgressRing", - "Title": "ProgressRing", - "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that does block user interaction.", - "ImagePath": "ms-appx:///Assets/ControlImages/ProgressRing.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ProgressRingIcon.png", - "Description": "The ProgressRing has two different visual representations:\nIndeterminate - shows that a task is ongoing, but blocks user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.", - "Content": "

Look at the ProgressRingPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "ProgressRing - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.progressring" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/progress-controls" - } - ], - "RelatedControls": [ - "ProgressBar" - ] - }, - { - "UniqueId": "ToolTip", - "Title": "ToolTip", - "Subtitle": "Displays information for an element in a pop-up window.", - "ImagePath": "ms-appx:///Assets/ControlImages/ToolTip.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToolTipIcon.png", - "Description": "A ToolTip shows more information about a UI element. You might show information about what the element does, or what the user should do. The ToolTip is shown when a user hovers over or presses and holds the UI element.", - "Content": "

Look at the ToolTipPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ToolTip - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.tooltip" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tooltips" - } - ], - "RelatedControls": [ - "TeachingTip", - "Flyout", - "ContentDialog" - ] - } - ] - }, - { - "UniqueId": "DialogsAndFlyouts", - "Title": "Dialogs and Flyouts", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "ContentDialog", - "Title": "ContentDialog", - "Subtitle": "A dialog box that can be customized to contain any XAML content.", - "ImagePath": "ms-appx:///Assets/ControlImages/ContentDialog.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "Use a ContentDialog to show relavant information or to provide a modal dialog experience that can show any XAML content.", - "Content": "

Look at the ContentDialog.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "ContentDialog - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.contentdialog" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/dialogs" - } - ], - "RelatedControls": [ - "Flyout", - "MenuFlyout", - "TeachingTip", - "ToolTip" - ] - }, - { - "UniqueId": "Flyout", - "Title": "Flyout", - "Subtitle": "Shows contextual information and enables user interaction.", - "ImagePath": "ms-appx:///Assets/ControlImages/Flyout.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/FlyoutIcon.png", - "Description": "A Flyout displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be light dismissed by clicking or tapping off of it. Use it to collect input from the user, show more details about an item, or ask the user to confirm an action.", - "Content": "

Look at the FlyoutPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Flyout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.flyout" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts" - } - ], - "RelatedControls": [ - "TeachingTip", - "ContentDialog", - "MenuFlyout", - "Button", - "AppBarButton" - ] - }, - { - "UniqueId": "TeachingTip", - "Title": "TeachingTip", - "Subtitle": "A content-rich flyout for guiding users and enabling teaching moments.", - "ImagePath": "ms-appx:///Assets/ControlImages/TeachingTip.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TeachingTipIcon.png", - "Description": "The XAML TeachingTip Control provides a way for your app to guide and inform users in your application with a non-invasive and content rich notification. TeachingTip can be used for bringing focus to a new or important feature, teaching users how to perform a task, or enhancing the user workflow by providing contextually relevant information to their task at hand.", - "Content": "

Look at the TeachingTip.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TeachingTip - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.teachingtip" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/teaching-tip" - } - ], - "RelatedControls": [ - "ContentDialog", - "Flyout", - "ToolTip" - ] - } - ] - }, - { - "UniqueId": "Scrolling", - "Title": "Scrolling", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "PipsPager", - "Title": "PipsPager", - "Subtitle": "A control to let the user navigate through a paginated collection when the page numbers do not need to be visually known.", - "ImagePath": "ms-appx:///Assets/ControlImages/PipsPager.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "A PipsPager allows the user to navigate through a paginated collection and is independent of the content shown. Use this control when the content in the layout is not explicitly ordered by relevancy or you desire a glyph-based representation of numbered pages. PipsPagers are commonly used in photo viewers, app lists, carousels, and when display space is limited.", - "Content": "

Look at the PipsPagerPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "PipsPager - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pipspager" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pipspager" - } - ], - "RelatedControls": [ - "ScrollViewer", - "FlipView", - "ItemsRepeater" - ] - }, - { - "UniqueId": "ScrollViewer", - "Title": "ScrollViewer", - "Subtitle": "A container control that lets the user pan and zoom its content.", - "ImagePath": "ms-appx:///Assets/ControlImages/ScrollViewer.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ScrollViewerIcon.png", - "Description": "A ScrollViewer lets a user scroll, pan, and zoom to see content that's larger than the viewable area. Many content controls, like ListView, have ScrollViewers built into their control templates to provide automatic scrolling.", - "Content": "

Look at the ScrollViewerPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ScrollViewer - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.scrollviewer" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/scroll-controls" - } - ], - "RelatedControls": [ - "ViewBox", - "Canvas", - "Grid", - "StackPanel", - "RelativePanel", - "ParallaxView" - ] - }, - { - "UniqueId": "SemanticZoom", - "Title": "SemanticZoom", - "Subtitle": "Lets the user zoom between two different views of a collection, making it easier to navigate through large collections of items.", - "ImagePath": "ms-appx:///Assets/ControlImages/SemanticZoom.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "The SemanticZoom lets you show grouped data in two different ways, and is useful for quickly navigating through large sets of data.", - "Content": "

Look at the SemanticZoomPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "SemanticZoom - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.semanticzoom" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/semantic-zoom" - } - ], - "RelatedControls": [ - "GridView", - "ListView" - ] - } - ] - }, - { - "UniqueId": "Layout", - "Title": "Layout", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "Use layout controls to arrange the controls and content in your app.", - "Items": [ - { - "UniqueId": "Border", - "Title": "Border", - "Subtitle": "A container control that draws a boundary line, background, or both, around another object.", - "ImagePath": "ms-appx:///Assets/ControlImages/Border.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/BorderIcon.png", - "Description": "Use a Border control to draw a boundary line, background, or both, around another object. A Border can contain only one child object.", - "Content": "

A Border can contain only one child object. If you want to put a border around multiple objects, first wrap them in a container object such as StackPanel and make the StackPanel the child of the Border.

You can change the appearance of a Border by setting basic properties:

Most of the control pages in this app have XAML blocks to show basic usage. The appearance of the XAML blocks is defined by a Border control. Look at the CodeBorderStyle resource in App.xaml to see the Style that's applied to the Borders.

Look at the BorderPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Border - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.border" - } - ], - "RelatedControls": [ - "Canvas", - "Grid", - "StackPanel", - "VariableSizedWrapGrid", - "RelativePanel" - ] - }, - { - "UniqueId": "Canvas", - "Title": "Canvas", - "Subtitle": "A layout panel that supports absolute positioning of child elements relative to the top left corner of the canvas.", - "ImagePath": "ms-appx:///Assets/ControlImages/Canvas.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CanvasIcon.png", - "Description": "The Canvas provides absolute positioning of controls or content. Content is positioned relative to the Canvas using the Canvas.Top and Canvas.Left attached properties.", - "Content": "

Items are positioned on the Canvas using the Canvas.Top and Canvas.Left attached properties. Use the sliders to change these properties for the red rectangle and see how it moves around.

To see the effect of the ZIndex attached property, make sure the red rectangle is overlapping the other rectangles.

Look at the CanvasPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Canvas - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.canvas" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" - } - ], - "RelatedControls": [ - "Border", - "Grid", - "StackPanel", - "VariableSizedWrapGrid", - "RelativePanel" - ] - }, - { - "UniqueId": "Expander", - "Title": "Expander", - "Subtitle": "A container with a header that can be expanded to show a body with more content.", - "ImagePath": "ms-appx:///Assets/ControlImages/Expander.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "The Expander has a header and can expand to show a body with more content. Use an Expander when some content is only relevant some of the time (for example to read more information or access additional options for an item).", - "Content": "Look at the ExpanderPage.xaml file in Visual Studio to see the full code for this page.", - "IsNew": true, - "Docs": [ - { - "Title": "Expander - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.expander" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/expander" - } - ], - "RelatedControls": [ - "Flyout", - "ItemsRepeater", - "SplitView" - ] - }, - { - "UniqueId": "ItemsRepeater", - "Title": "ItemsRepeater", - "Subtitle": "A flexible, primitive control for data-driven layouts.", - "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListViewIcon.png", - "Description": "The ItemsRepeater is like a markup-based loop that supports virtualization.", - "Content": "

A ItemsRepeater is more basic than an ItemsControl. It does not have default styling or a control template. It can contain a collection of items of any type. To populate the view, set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

And, optionally set the Layout to define how items are sized and positioned. By default, it uses a simple vertical stacking layout.

Look at the ItemsRepeaterPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ItemsRepeater - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.itemsrepeater" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/items-repeater" - }, - { - "Title": "StackLayout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.stacklayout" - }, - { - "Title": "UniformGridLayout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.uniformgridlayout" - } - ], - "RelatedControls": [ - "ScrollViewer", - "ListView", - "GridView" - ] - }, - { - "UniqueId": "Grid", - "Title": "Grid", - "Subtitle": "A layout panel that supports arranging child elements in rows and columns. ", - "ImagePath": "ms-appx:///Assets/ControlImages/Grid.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridIcon.png", - "Description": "The Grid is used to arrange controls and content in rows and columns. Content is positioned in the grid using Grid.Row and Grid.Column attached properties.", - "Content": "

Look at the GridPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Grid - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.grid" - }, - { - "Title": "Tutorial", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/grid-tutorial" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels#grid" - } - ], - "RelatedControls": [ - "Border", - "Canvas", - "StackPanel", - "VariableSizedWrapGrid", - "RelativePanel" - ] - }, - { - "UniqueId": "RadioButtons", - "Title": "RadioButtons", - "Subtitle": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.", - "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RadioButtonsIcon.png", - "Description": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.", - "Content": "

Look at the RadioButtonsPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RadioButtons - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.radiobuttons" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/radio-button" - } - ], - "RelatedControls": [ - "CheckBox", - "RadioButton", - "ToggleSwitch", - "ToggleButton" - ] - }, - { - "UniqueId": "RelativePanel", - "Title": "RelativePanel", - "Subtitle": "A panel that uses relationships between elements to define layout.", - "ImagePath": "ms-appx:///Assets/ControlImages/RelativePanel.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RelativePanelIcon.png", - "Description": "Use a RelativePanel to layout elements by defining the relationships between elements and in relation to the panel.", - "Content": "

Look at the RelativePanelPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RelativePanel - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.relativepanel" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" - } - ], - "RelatedControls": [ - "Grid", - "StackPanel", - "Border", - "Canvas", - "ViewBox" - ] - }, - { - "UniqueId": "SplitView", - "Title": "SplitView", - "Subtitle": "A container that has 2 content areas, with multiple display options for the pane.", - "ImagePath": "ms-appx:///Assets/ControlImages/SplitView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SplitViewIcon.png", - "Description": "Use a SplitView to display content, such as navigation options, in a pane on the side. There are multiple options for displaying the pane, namely CompactOverlay, Compact, Overlay, Inline. If you are looking for a reference to the hamburger pattern, please see the links in the documentation below.", - "Content": "

Look at the SplitViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "SplitView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.splitview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/split-view" - } - ], - "RelatedControls": [ - "StackPanel", - "ListView", - "GridView", - "Grid", - "RelativePanel" - ] - }, - { - "UniqueId": "StackPanel", - "Title": "StackPanel", - "Subtitle": "A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.", - "ImagePath": "ms-appx:///Assets/ControlImages/StackPanel.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/StackPanelIcon.png", - "Description": "A StackPanel is used to arrange items in a line, either horizontally or vertically.", - "Content": "

Look at the StackPanelPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "StackPanel - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.stackpanel" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" - } - ], - "RelatedControls": [ - "Border", - "Canvas", - "Grid", - "VariableSizedWrapGrid", - "RelativePanel" - ] - }, - { - "UniqueId": "VariableSizedWrapGrid", - "Title": "VariableSizedWrapGrid", - "Subtitle": "A layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns.", - "ImagePath": "ms-appx:///Assets/ControlImages/VariableSizedWrapGrid.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/VariableSizedWrapGridIcon.png", - "Description": "A VariableSizedWrapGrip is used to create grid layouts where content can span multiple rows and columns.", - "Content": "

Elements are arranged in rows or columns that automatically wrap to a new row or column when the MaximumRowsOrColumns value is reached.

Whether elements are arranged in rows or columns is specified by the Orientation property.

Elements can span multiple rows and columns using VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties.

Elements are sized as specified by the ItemHeight and ItemWidth properties.

Look at the VariableSizedWrapGridPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "VariableSizedWrapGrid - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.variablesizedwrapgrid" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" - } - ], - "RelatedControls": [ - "Border", - "Canvas", - "Grid", - "StackPanel", - "RelativePanel" - ] - }, - { - "UniqueId": "ViewBox", - "Title": "ViewBox", - "Subtitle": "A container control that scales its content to a specified size.", - "ImagePath": "ms-appx:///Assets/ControlImages/ViewBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ViewBoxIcon.png", - "Description": "Use a ViewBox control scale content up or down to a specified size.", - "Content": "

Look at the ViewBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Viewbox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.viewbox" - } - ], - "RelatedControls": [ - "ScrollViewer", - "Canvas", - "Grid", - "StackPanel", - "RelativePanel" - ] - } - ] - }, - { - "UniqueId": "Navigation", - "Title": "Navigation", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "BreadcrumbBar", - "Title": "BreadcrumbBar", - "Subtitle": "Shows the trail of navigation taken to the current location.", - "ImagePath": "ms-appx:///Assets/ControlImages/BreadcrumbBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "The BreadcrumbBar control provides a common horizontal layout to display the trail of navigation taken to the current location. Resize to see the nodes crumble, starting at the root.", - "Content": "

Look at the BreadcrumbBarPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "BreadcrumbBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.breadcrumbbar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/breadcrumbbar" - } - ], - "RelatedControls": [ - "NavigationView", - "Pivot", - "TabView" - ] - }, - { - "UniqueId": "NavigationView", - "Title": "NavigationView", - "Subtitle": "Common vertical layout for top-level areas of your app via a collapsible navigation menu.", - "ImagePath": "ms-appx:///Assets/ControlImages/NavigationView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/NavigationViewIcon.png", - "Description": "The navigation view control provides a common vertical layout for top-level areas of your app via a collapsible navigation menu.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "NavigationView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.NavigationView" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/navigationview" - } - ], - "RelatedControls": [ - "SplitView", - "Pivot" - ] - }, - { - "UniqueId": "Pivot", - "Title": "Pivot", - "Subtitle": "Presents information from different sources in a tabbed view.", - "ImagePath": "ms-appx:///Assets/ControlImages/Pivot.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/PivotIcon.png", - "Description": "A Pivot allows you to show a collection of items from different sources in a tabbed view.", - "Content": "

This page shows a simplified Pivot control with minimal content to demonstrate basic Pivot usage. Look at the PivotPage.xaml file in Visual Studio to see the full code for this page.

A Pivot control typically takes up the full page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Pivot - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pivot" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pivot" - } - ], - "RelatedControls": [ - "SemanticZoom", - "ListView", - "GridView" - ] - }, - { - "UniqueId": "TabView", - "Title": "TabView", - "Subtitle": "A control that displays a collection of tabs that can be used to display several documents.", - "ImagePath": "ms-appx:///Assets/ControlImages/TabView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "TabView provides the user with a collection of tabs that can be used to display several documents.", - "Content": "", - "IsNew": false, - "IsUpdated": true, - "IsPreview": false, - "Docs": [ - { - "Title": "TabView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.tabview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tab-view" - }, - { - "Title": "Show multiple views for an app", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/show-multiple-views" - } - ], - "RelatedControls": [ - "Pivot", - "NavigationView", - "ListView" - ] - } - ] - }, - { - "UniqueId": "Media", - "Title": "Media", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "AnimatedVisualPlayer", - "Title": "AnimatedVisualPlayer", - "Subtitle": "An element to render and control playback of motion graphics.", - "ImagePath": "ms-appx:///Assets/ControlImages/AnimatedVisualPlayer.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AnimationsIcon.png", - "Description": "An element to render and control playback of motion graphics.", - "Content": "

Look at the AnimatedVisualPlayerPage.xaml and AnimatedVisualPlayerPage.xaml.cs files in Visual Studio to see the full code for this page.

", - "IsNew": false, - "Docs": [ - { - "Title": "AnimatedVisualPlayer - API", - "Uri": "https://www.docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedvisualplayer" - }, - { - "Title": "Full Samples", - "Uri": "ms-windows-store://pdp/?productid=9N3J5TG8FF7F" - }, - { - "Title": "Tutorials", - "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie#tutorials" - }, - { - "Title": "Lottie Overview", - "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie" - }, - { - "Title": "Lottie Windows - GitHub", - "Uri": "https://github.com/CommunityToolkit/Lottie-Windows" - } - ] - }, - { - "UniqueId": "Image", - "Title": "Image", - "Subtitle": "A control to display image content.", - "ImagePath": "ms-appx:///Assets/ControlImages/Image.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ImageIcon.png", - "Description": "You can use an Image control to show and scale images.", - "Content": "

Look at the ImagePage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Image - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.image" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/images-imagebrushes" - } - ], - "RelatedControls": [ - "MediaPlayerElement", - "PersonPicture" - ] - }, - { - "UniqueId": "MediaPlayerElement", - "Title": "MediaPlayerElement", - "Subtitle": "A control to display video and image content.", - "ImagePath": "ms-appx:///Assets/ControlImages/MediaPlayerElement.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MediaElementIcon.png", - "Description": "You can use a MediaPlayerElement control to playback videos and show images. You can show transport controls or make the video autoplay.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "MediaPlayerElement - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.MediaPlayerElement" - }, - { - "Title": "Media Playback", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/media-playback" - } - ], - "RelatedControls": [ - "Image" - ] - }, - { - "UniqueId": "PersonPicture", - "Title": "PersonPicture", - "Subtitle": "Displays the picture of a person/contact.", - "ImagePath": "ms-appx:///Assets/ControlImages/PersonPicture.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/PersonPictureIcon.png", - "Description": "Displays the picture of a person/contact.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "PersonPicture - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.PersonPicture" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/person-picture" - } - ], - "RelatedControls": [ - "Image" - ] - }, - { - "UniqueId": "Sound", - "Title": "Sound", - "Subtitle": "A code-behind only API that enables 2D and 3D UI sounds on all XAML controls.", - "ImagePath": "ms-appx:///Assets/ControlImages/Sound.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SoundIcon.png", - "Description": "Sound is enabled by default for UWP apps running on Xbox, but can be set to always play on all devices if desired. Sound may also be put into Spatial Audio mode for a more immersive 10ft experience.", - "Content": "

Look at the SoundPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Sound - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.elementsoundplayer" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/sound" - } - ] - }, - { - "UniqueId": "WebView2", - "Title": "WebView2", - "Subtitle": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", - "ImagePath": "ms-appx:///Assets/ControlImages/WebView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/WebViewIcon.png", - "Description": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", - "Content": "", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "WebView2 - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.webview2?view=winui-3.0" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/winui" - }, - { - "Title": "Examples", - "Uri": "https://github.com/MicrosoftEdge/WebView2Samples" - } - ] - } - ] - }, - { - "UniqueId": "Styles", - "Title": "Styles", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "Acrylic", - "Title": "AcrylicBrush", - "Subtitle": "A translucent material recommended for panel backgrounds.", - "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AcrylicBrushIcon.png", - "Description": "A translucent material recommended for panel backgrounds.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AcrylicBrush - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.acrylicbrush" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/acrylic" - } - ], - "RelatedControls": [ - "SystemBackdrops" - ] - }, - { - "UniqueId": "AnimatedIcon", - "Title": "AnimatedIcon", - "Subtitle": "An element that displays and controls an icon that animates when the user interacts with the control.", - "ImagePath": "ms-appx:///Assets/ControlImages/AnimatedIcon.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AnimationsIcon.png", - "Description": "An element that displays and controls an icon that animates when the user interacts with the control.", - "Content": "

Look at the AnimatedIconPage.xaml and AnimatedIconPage.xaml.cs files in Visual Studio to see the full code for this page.

", - "IsNew": true, - "Docs": [ - { - "Title": "AnimatedIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedicon" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/animated-icon" - }, - { - "Title": "Lottie Overview", - "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie" - }, - { - "Title": "Lottie Windows - GitHub", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedvisualplayer" - } - ] - }, - { - "UniqueId": "IconElement", - "Title": "IconElement", - "Subtitle": "Represents icon controls that use different image types as its content.", - "ImagePath": "ms-appx:///Assets/ControlImages/IconElement.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ImageIcon.png", - "Description": "Represents icon controls that use different image types as its content.", - "Content": "

Look at the IconElementPage.xaml and IconElementPage.xaml.cs files in Visual Studio to see the full code for this page.

", - "IsNew": true, - "Docs": [ - { - "Title": "BitmapIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" - }, - { - "Title": "FontIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" - }, - { - "Title": "ImageIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.imageicon" - }, - { - "Title": "PathIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" - }, - { - "Title": "SymbolIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" - }, - { - "Title": "Icon Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/icons" - } - ], - "RelatedControls": [ - "AnimatedIcon", - "AppBarButton", - "MenuFlyoutItem" - ] - }, - { - "UniqueId": "RadialGradientBrush", - "Title": "RadialGradientBrush", - "Subtitle": "A brush to show radial gradients", - "ImagePath": "ms-appx:///Assets/ControlImages/Canvas.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CanvasIcon.png", - "Description": "Paints an area with a radial gradient. A center point defines the beginning of the gradient, and a radius defines the end point of the gradient.", - "Content": "The RadialGradientBrush is similar in programming model to the LinearGradientBrush. However, the linear gradient has a start and an end point to define the gradient vector, while the radial gradient has a circle, along with a focal point, to define the gradient behavior. The circle defines the end point of the gradient. The parameters can be provided as a ratio or absolute value by picking the mapping mode.", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RadialGradientBrush - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.RadialGradientBrush" - } - ], - "RelatedControls": [ - "Acrylic", - "ColorPaletteResources" - ] - }, - { - "UniqueId": "RevealFocus", - "Title": "Reveal Focus", - "Subtitle": "Customize the style of your focus rectangles.", - "ImagePath": "ms-appx:///Assets/ControlImages/RevealFocus.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RevealFocusIcon.png", - "Description": "Reveal focus allows you to adapt focus rectangles to look like the focus rectangles available on Xbox.", - "Content": "

Look at the RevealFocusPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Reveal Focus - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.application.focusvisualkind#Windows_UI_Xaml_Application_FocusVisualKind" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/reveal-focus" - } - ], - "RelatedControls": [ - ] - }, - { - "UniqueId": "ColorPaletteResources", - "Title": "ColorPaletteResources", - "Subtitle": "A type of resource that allows you to apply custom colors to your controls.", - "ImagePath": "ms-appx:///Assets/ControlImages/ColorPaletteResources.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "Apply custom colors to your controls through this cascading API, or scope them to a local subset.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Theme Editor (GitHub)", - "Uri": "https://github.com/Microsoft/fluent-xaml-theme-editor" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/color#scoping-with-a-resourcedictionary" - }, - { - "Title": "ColorPaletteResources - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.colorpaletteresources" - } - ] - }, - { - "UniqueId": "CompactSizing", - "Title": "Compact Sizing", - "Subtitle": "How to use a Resource Dictionary to enable compact sizing.", - "ImagePath": "ms-appx:///Assets/ControlImages/CompactSizing.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CompactSizingIcon.png", - "Description": "Compact dictionary included in WinUI 2.1. Allows you to create compact smaller apps by adding this at the page or the grid level.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Spacing", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/spacing" - } - ] - }, - { - "UniqueId": "SystemBackdrops", - "Title": "System Backdrops (Mica/Acrylic)", - "Subtitle": "System backdrops, like Mica and Acrylic, for the window.", - "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SystemBackdropsIcon.png", - "Description": "System backdrops are used to provide a different background for a Window other than the default white or black (depending on Light or Dark theme). Mica and Desktop Acrylic are the current supported backdrops. Applying a backdrop currently requires a bunch of app code, but this will be easier in a future release.", - "Content": "

Look at the SampleSystemBackdropsWindow.xaml.cs file in Visual Studio to see the full code for applying a backdrop.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "MicaController - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.composition.systembackdrops.micacontroller" - }, - { - "Title": "DesktopAcrylicController - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.composition.systembackdrops.desktopacryliccontroller" - } - ], - "RelatedControls": [ - ] - } - ] - }, - { - "UniqueId": "Text", - "Title": "Text", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "AutoSuggestBox", - "Title": "AutoSuggestBox", - "Subtitle": "A control to provide suggestions as a user is typing.", - "ImagePath": "ms-appx:///Assets/ControlImages/AutoSuggestBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AutoSuggestBoxIcon.png", - "Description": "A text control that makes suggestions to users as they type. The app is notified when text has been changed by the user and is responsible for providing relevant suggestions for this control to display.", - "Content": "

Look at the AutoSuggestBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "AutoSuggestBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.autosuggestbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/auto-suggest-box" - } - ], - "RelatedControls": [ - "ListBox", - "ComboBox", - "TextBox" - ] - }, - { - "UniqueId": "NumberBox", - "Title": "NumberBox", - "Subtitle": "A text control used for numeric input and evaluation of algebraic equations.", - "ImagePath": "ms-appx:///Assets/ControlImages/NumberBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/NumberBoxIcon.png", - "Description": "Use NumberBox to allow users to enter algebraic equations and numeric input in your app.", - "Content": "

Look at the NumberBox.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "NumberBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.numberbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/number-box" - } - ], - "RelatedControls": [ - "TextBox", - "TextBlock", - "RichTextBlock", - "RichEditBox" - ] - }, - { - "UniqueId": "PasswordBox", - "Title": "PasswordBox", - "Subtitle": "A control for entering passwords.", - "ImagePath": "ms-appx:///Assets/ControlImages/PasswordBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/PasswordBoxIcon.png", - "Description": "A user can enter a single line of non-wrapping text in a PasswordBox control. The text is masked by characters that you can specify by using the PasswordChar property, and you can specify the maximum number of characters that the user can enter by setting the MaxLength property.", - "Content": "

Look at the PasswordBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "PasswordBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.passwordbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "TextBox", - "TextBlock", - "RichTextBlock", - "RichEditBox" - ] - }, - { - "UniqueId": "RichEditBox", - "Title": "RichEditBox", - "Subtitle": "A rich text editing control that supports formatted text, hyperlinks, and other rich content.", - "ImagePath": "ms-appx:///Assets/ControlImages/RichEditBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RichEditBoxIcon.png", - "Description": "You can use a RichEditBox control to enter and edit rich text documents that contain formatted text, hyperlinks, and images. By default, the RichEditBox supports spell checking. You can make a RichEditBox read-only by setting its IsReadOnly property to true.", - "Content": "

On this page, you can type into the RichTextBox control and save it as a RichTextFormat (.rtf) document, or load an existing .rtf document. You can format the text as Bold or Underlined, and change the text color.

Look at the RichEditBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "RichEditBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.richeditbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "NumberBox", - "TextBox", - "RichTextBlock", - "TextBlock" - ] - }, - { - "UniqueId": "RichTextBlock", - "Title": "RichTextBlock", - "Subtitle": "A control that displays formatted text, hyperlinks, inline images, and other rich content.", - "ImagePath": "ms-appx:///Assets/ControlImages/RichTextBlock.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RichTextBlockIcon.png", - "Description": "RichTextBlock provides more advanced formatting features than the TextBlock control. You can apply character and paragraph formatting to the text in the RichTextBlock. For example, you can apply Bold, Italic, and Underline to any portion of the text in the control. You can use linked text containers (a RichTextBlock linked to RichTextBlockOverflow elements) to create advanced page layouts.", - "Content": "

Change the width of the app to see how the RichTextBlock overflows into additional columns as the app gets narrower.

Look at the RichTextBlockPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "RichTextBlock - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.richtextblock" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "NumberBox", - "TextBlock", - "TextBox", - "PasswordBox", - "RichEditBox" - ] - }, - { - "UniqueId": "TextBlock", - "Title": "TextBlock", - "Subtitle": "A lightweight control for displaying small amounts of text.", - "ImagePath": "ms-appx:///Assets/ControlImages/TextBlock.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBlockIcon.png", - "Description": "TextBlock is the primary control for displaying read-only text in your app. You typically display text by setting the Text property to a simple string. You can also display a series of strings in Run elements and give each different formatting.", - "Content": "

Look at the TextBlockPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TextBlock - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.textblock" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "NumberBox", - "TextBox", - "RichTextBlock", - "PasswordBox", - "RichEditBox" - ] - }, - { - "UniqueId": "TextBox", - "Title": "TextBox", - "Subtitle": "A single-line or multi-line plain text field.", - "ImagePath": "ms-appx:///Assets/ControlImages/TextBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBoxIcon.png", - "Description": "Use a TextBox to let a user enter simple text input in your app. You can add a header and placeholder text to let the user know what the TextBox is for, and you can customize it in other ways.", - "Content": "

Look at the TextBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TextBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.textbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "NumberBox", - "TextBlock", - "RichTextBlock", - "PasswordBox", - "RichEditBox", - "AutoSuggestBox" - ] - } - ] - }, - { - "UniqueId": "Motion", - "Title": "Motion", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "ConnectedAnimation", - "Title": "Connected Animation", - "Subtitle": "Connected animations continue elements during page navigation and help the user maintain their context between views.", - "ImagePath": "ms-appx:///Assets/ControlImages/ConnectedAnimation.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ConnectedAnimationsIcon.png", - "Description": "Connected animations continue elements during page navigation and help the user maintain their context between views.", - "Content": "

Look at the ConnectedAnimationPage.xaml and ConnectedAnimationPage.xaml.cs files in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ConnectedAnimation - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.connectedanimation" - }, - { - "Title": "ConnectedAnimationService - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.connectedanimationservice" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/connected-animation" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "PageTransition", - "ThemeTransition" - ] - }, - { - "UniqueId": "EasingFunction", - "Title": "Easing Functions", - "Subtitle": "Easing is a way to manipulate the velocity of an object as it animates.", - "ImagePath": "ms-appx:///Assets/ControlImages/EasingFunction.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/EasingFunctionsIcon.png", - "Description": "Easing is a way to manipulate the velocity of an object as it animates.", - "Content": "

Look at the EasingFunctionPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "EasingFunctionBase - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.easingfunctionbase" - }, - { - "Title": "Timing and Easing", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/timing-and-easing" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "ConnectedAnimation", - "PageTransition", - "ThemeTransition" - ] - }, - { - "UniqueId": "PageTransition", - "Title": "Page Transitions", - "Subtitle": "Page transitions provide visual feedback about the relationship between pages.", - "ImagePath": "ms-appx:///Assets/ControlImages/PageTransition.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", - "Description": "Page transitions provide visual feedback about the relationship between pages.", - "Content": "

Look at the PageTransitionPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "NavigationThemeTransition - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Media.Animation.NavigationThemeTransition" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/page-transitions" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "ConnectedAnimation", - "ThemeTransition" - ] - }, - { - "UniqueId": "ThemeTransition", - "Title": "Theme Transitions", - "Subtitle": "Theme transitions are pre-packaged, easy-to-apply animations.", - "ImagePath": "ms-appx:///Assets/ControlImages/ThemeTransition.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", - "Description": "Theme transitions are pre-packaged, easy-to-apply animations.", - "Content": "

Look at the ThemeTransitionPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Transitions - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/xaml-animation#animations-available-in-the-library" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "ImplicitTransition", - "PageTransition" - ] - }, - { - "UniqueId": "XamlCompInterop", - "Title": "Animation interop", - "Subtitle": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more.", - "ImagePath": "ms-appx:///Assets/ControlImages/AnimationInterop.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/StoryboardAnimationIcon.png", - "IsNew": false, - "IsUpdated": false, - "Description": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more", - "Content": "

Look at the XamlCompInteropPage.xaml.cs file in Visual Studio to see the full code for this page.

", - "Docs": [ - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - }, - { - "Title": "Composition Animation - API", - "Uri": "https://docs.microsoft.com/windows/uwp/composition/composition-animation" - }, - { - "Title": "Guidelines - Xaml Property Animations", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/xaml-property-animations" - }, - { - "Title": "Using the Visual Layer with XAML", - "Uri": "https://docs.microsoft.com/windows/uwp/composition/using-the-visual-layer-with-xaml" - } - ], - "RelatedControls": [ - "EasingFunction" - ] - }, - { - "UniqueId": "ImplicitTransition", - "Title": "Implicit Transitions", - "Subtitle": "Use Implicit Transitions to automatically animate changes to properties.", - "ImagePath": "ms-appx:///Assets/ControlImages/ImplicitTransition.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", - "IsNew": false, - "IsUpdated": false, - "Description": "Use Implicit Transitions to automatically animate changes to properties.", - "Content": "

Look at the ImplicitTransitionPage.xaml file in Visual Studio to see the full code for this page.

", - "Docs": [ - { - "Title": "Transitions - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/motion-in-practice#implicit-animations" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "PageTransition", - "ThemeTransition" - ] - }, - { - "UniqueId": "ParallaxView", - "Title": "ParallaxView", - "Subtitle": "A container control that provides the parallax effect when scrolling.", - "ImagePath": "ms-appx:///Assets/ControlImages/ParallaxView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ParallaxViewIcon.png", - "Description": "A container control that provides the parallax effect when scrolling.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ParallaxView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.Parallaxview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/parallax" - } - ], - "RelatedControls": [ - "ScrollViewer" - ] - } - ] - }, - { - "UniqueId": "MultipleWindows", - "Title": "Windows", - "Subtitle": "", - "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "", - "Items": [ - { - "UniqueId": "CreateMultipleWindows", - "Title": "Create Multiple Windows", - "Subtitle": "An example showing the creation of single-threaded top level Xaml windows.", - "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "With Windows App SDK 1.0 we are allowing creation of single-threaded multiple top level Xaml windows in Desktop apps", - "Content": "

Look at the CreateMultipleWindowsPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "MultipleWindow - API", - "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" - } - ], - "RelatedControls": [ - ] - }, - { - "UniqueId": "TitleBar", - "Title": "TitleBar", - "Subtitle": "An example showing a custom UIElement used as the titlebar for the app's window.", - "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "This sample shows how to use a custom UIElement as titlebar for app's window.", - "Content": "

Look at the TitleBarPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "TitleBar - API", - "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window.extendscontentintotitlebar?view=winui-3.0" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" - } - ], - "RelatedControls": [ - ] - } - ] - } - ] + "$schema": "ControlInfoDataSchema.json", + "Groups": [ + { + "UniqueId": "NewControls", + "Title": "Home", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [] + }, + { + "UniqueId": "AllControls", + "Title": "All controls", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [] + }, + { + "UniqueId": "MenusAndToolbars", + "Title": "Menus and Toolbars", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "XamlUICommand", + "Title": "XamlUICommand", + "Subtitle": "An object which is used to define the look and feel of a given command.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", + "Description": "An object which is used to define the look and feel of a given command, which can be reused across your app, and which is understood natively by the standard XAML controls.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-xamluicommand-class" + }, + { + "Title": "XamlUICommand - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.input.xamluicommand" + } + ], + "RelatedControls": [ + "StandardUICommand", + "AppBarButton", + "AppBarToggleButton", + "CommandBar" + ] + }, + { + "UniqueId": "StandardUICommand", + "Title": "StandardUICommand", + "Subtitle": "A StandardUICommand is a built-in 'XamlUICommand' which represents a commonly used command, e.g. 'Save'.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", + "Description": "StandardUICommands are a set of built-in XamlUICommands represeting commonly used commands. Including the look and feel of a given command, which can be reused across your app, and which is understood natively by the standard XAML controls. E.g. Save, Open, Copy, Paste, etc.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-standarduicommand-class" + }, + { + "Title": "StandardUICommand - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.input.standarduicommand" + } + ], + "RelatedControls": [ + "XamlUICommand", + "AppBarButton", + "AppBarToggleButton", + "CommandBar" + ] + }, + { + "UniqueId": "AppBarButton", + "Title": "AppBarButton", + "Subtitle": "A button that's styled for use in a CommandBar.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarButtonIcon.png", + "Description": "App bar buttons differ from standard buttons in several ways:\n- Their default appearance is a transparent background with a smaller size.\n- You use the Label and Icon properties to set the content instead of the Content property. The Content property is ignored.\n- The button's IsCompact property controls its size.", + "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.

Use the Label and Icon properties to define the content of the app bar buttons. Set the Label property to a string to specify the text label. The label is shown by default but is hidden when the button is in its compact state, so you also need to specify a meaningful icon. To do that, set the button's Icon property to an element derived from the IconElement class. Four kinds of icon elements are provided:

FontIcon - The icon is based on a glyph from the specified font family.

BitmapIcon - The icon is based on a bitmap image file with the specified Uri.

PathIcon - The icon is based on Path data.

SymbolIcon - The icon is based on a predefined list of glyphs from the Segoe UI Symbol font.

Look at the AppBarButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AppBarButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbarbutton" + }, + { + "Title": "SymbolIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" + }, + { + "Title": "FontIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" + }, + { + "Title": "BitmapIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" + }, + { + "Title": "PathIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" + } + ], + "RelatedControls": [ + "AppBarToggleButton", + "AppBarSeparator", + "CommandBar" + ] + }, + { + "UniqueId": "AppBarSeparator", + "Title": "AppBarSeparator", + "Subtitle": "A vertical line that's used to visually separate groups of commands in an app bar.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", + "Description": "An AppBarSeparator creates a vertical line to visually separate groups of commands in a app bar. It has a compact state with reduced padding to match the compact state of the AppBarButton and AppBarToggleButton controls.", + "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons and separators on this page change.

When the IsCompact property is true, the padding around the AppBarSeparator is reduced.

Look at the AppBarSeparatorPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AppBarSeparator - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbarseparator" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" + } + ], + "RelatedControls": [ + "AppBarButton", + "AppBarToggleButton", + "CommandBar" + ] + }, + { + "UniqueId": "AppBarToggleButton", + "Title": "AppBarToggleButton", + "Subtitle": "A button that can be on, off, or indeterminate like a CheckBox, and is styled for use in an app bar or other specialized UI.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarToggleButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarToggleButtonIcon.png", + "Description": "An AppBarToggleButton looks like an AppBarButton, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.", + "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.

Look at the AppBarToggleButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AppBarToggleButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbartogglebutton" + }, + { + "Title": "SymbolIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" + }, + { + "Title": "FontIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" + }, + { + "Title": "BitmapIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" + }, + { + "Title": "PathIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" + } + ], + "RelatedControls": [ + "AppBarButton", + "AppBarSeparator", + "CommandBar" + ] + }, + { + "UniqueId": "CommandBar", + "Title": "CommandBar", + "Subtitle": "A toolbar for displaying application-specific commands that handles layout and resizing of its contents.", + "ImagePath": "ms-appx:///Assets/ControlImages/CommandBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CommandBarIcon.png", + "Description": "The CommandBar simplifies the creation of basic app bars by providing:\n- Automatic layout of commands, with primary commands on the right and secondary commands on the left.\n- Automatic resizing of app bar commands when the app size changes.\nWhen you need an app bar that contains only AppBarButton,AppBarToggleButton , and AppBarSeparator controls, use a CommandBar. If you need more complex content, such as images, progress bars, or text blocks, use an AppBar control.", + "Content": "

The bottom app bar on this page is a CommandBar control.

Add secondary commands and then resize the app to see how the CommandBar automatically adapts to different widths.

This CommandBar element is in the ItemPage so it can be shared across all control pages in the app. Look at the ItemPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CommandBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.commandbar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" + } + ], + "RelatedControls": [ + "AppBarButton", + "AppBarToggleButton", + "AppBarSeparator" + ] + }, + { + "UniqueId": "MenuBar", + "Title": "MenuBar", + "Subtitle": "A classic menu, allowing the display of MenuItems containing MenuFlyoutItems.", + "ImagePath": "ms-appx:///Assets/ControlImages/MenuBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", + "Description": "The Menubar simplifies the creation of basic applications by providing a set of menus at the top of the app or window.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "MenuBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.MenuBar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/menus" + } + ], + "RelatedControls": [ + "CommandBar", + "MenuFlyout", + "StandardUICommand", + "XamlUICommand" + ] + }, + { + "UniqueId": "CommandBarFlyout", + "Title": "CommandBarFlyout", + "Subtitle": "A mini-toolbar displaying proactive commands, and an optional menu of commands.", + "ImagePath": "ms-appx:///Assets/ControlImages/CommandBarFlyout.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CommandBarFlyoutIcon.png", + "Description": "A mini-toolbar which displays a set of proactive commands, as well as a secondary menu of commands if desired.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CommandBarFlyout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.commandbarflyout" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar-flyout" + } + ], + "RelatedControls": [ + "CommandBar", + "MenuFlyout", + "RichEditBox", + "TextBox", + "StandardUICommand", + "XamlUICommand" + ] + }, + { + "UniqueId": "MenuFlyout", + "Title": "MenuFlyout", + "Subtitle": "Shows a contextual list of simple commands or options.", + "ImagePath": "ms-appx:///Assets/ControlImages/MenuFlyout.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuFlyoutIcon.png", + "Description": "A MenuFlyout displays lightweight UI that is light dismissed by clicking or tapping off of it. Use it to let the user choose from a contextual list of simple commands or options.", + "Content": "

Look at the MenuFlyoutPage.xaml file in Visual Studio to see the full code.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "MenuFlyout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyout" + }, + { + "Title": "MenuFlyoutItem - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyoutitem" + }, + { + "Title": "MenuFlyoutSeparator - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyoutseparator" + }, + { + "Title": "ToggleMenuFlyoutItem - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.togglemenuflyoutitem" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/menus" + } + ], + "RelatedControls": [ + "Flyout", + "ContentDialog", + "Button", + "AppBarButton" + ] + }, + { + "UniqueId": "SwipeControl", + "Title": "SwipeControl", + "Subtitle": "Touch gesture for quick menu actions on items.", + "ImagePath": "ms-appx:///Assets/ControlImages/SwipeControl.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SwipeIcon.png", + "Description": "Touch gesture for quick menu actions on items.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "SwipeControl - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.swipecontrol" + }, + { + "Title": "SwipeItems - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.swipeitems" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/swipe" + }, + { + "Title": "Gesture Actions", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/collection-commanding" + } + ], + "RelatedControls": [ + "GridView", + "ListView" + ] + } + ] + }, + { + "UniqueId": "Collections", + "Title": "Collections", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "FlipView", + "Title": "FlipView", + "Subtitle": "Presents a collection of items that the user can flip through, one item at a time.", + "ImagePath": "ms-appx:///Assets/ControlImages/FlipView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/FlipViewIcon.png", + "Description": "The FlipView lets you flip through a collection of items, one at a time. It's great for displaying images from a gallery, pages of a magazine, or similar items.", + "Content": "

FlipView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Look at the FlipViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "FlipView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.flipview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/flipview" + } + ], + "RelatedControls": [ + "GridView", + "ListView", + "SemanticZoom" + ] + }, + { + "UniqueId": "GridView", + "Title": "GridView", + "Subtitle": "A control that presents a collection of items in rows and columns.", + "ImagePath": "ms-appx:///Assets/ControlImages/GridView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridViewIcon.png", + "Description": "The GridView lets you show a collection of items arranged in rows and columns that scroll horizontally.", + "Content": "

GridView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the GridViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "GridView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.gridview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/lists" + } + ], + "RelatedControls": [ + "ListView", + "FlipView", + "SemanticZoom" + ] + }, + { + "UniqueId": "ListBox", + "Title": "ListBox", + "Subtitle": "A control that presents an inline list of items that the user can select from.", + "ImagePath": "ms-appx:///Assets/ControlImages/ListBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListBoxIcon.png", + "Description": "Use a ListBox when you want the options to be visible all the time or when users can select more than one option at a time. ListBox controls are always open, which allows several items to be displayed to the user without user interaction.", + "Content": "

Look at the ListBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ListBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listbox" + }, + { + "Title": "ListBoxItem - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listboxitem" + } + ], + "RelatedControls": [ + "ComboBox", + "RadioButton", + "CheckBox", + "AutoSuggestBox" + ] + }, + { + "UniqueId": "ListView", + "Title": "ListView", + "Subtitle": "A control that presents a collection of items in a vertical list.", + "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListViewIcon.png", + "Description": "The ListView lets you show a collection of items in a list that scrolls vertically.", + "Content": "

ListView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "ListView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/listview-and-gridview" + }, + { + "Title": "Drag and Drop - Full Sample", + "Uri": "https://github.com/microsoft/Windows-universal-samples/tree/master/Samples/XamlDragAndDrop" + }, + { + "Title": "CollectionViewSource - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.Data.CollectionViewSource" + }, + { + "Title": "Filtering collections and lists through user input", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/listview-filtering" + }, + { + "Title": "Inverted Lists", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/inverted-lists" + }, + { + "Title": "Inverted Lists - Full Sample", + "Uri": "https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlBottomUpList" + } + ], + "RelatedControls": [ + "GridView", + "StandardUICommand", + "FlipView", + "SemanticZoom" + ] + }, + { + "UniqueId": "PullToRefresh", + "Title": "PullToRefresh", + "Subtitle": "Provides the ability to pull on a collection of items in a list/grid to refresh the contents of the collection.", + "ImagePath": "ms-appx:///Assets/ControlImages/PullToRefresh.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/PullToRefreshIcon.png", + "Description": "PullToRefresh lets a user pull down on a list of data using touch in order to retrieve more data. PullToRefresh is widely used on devices with a touch screen.", + "Content": "

PullToRefresh can be used for a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RefreshContainer - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RefreshContainer" + }, + { + "Title": "RefreshVisualizer - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RefreshVisualizer" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pull-to-refresh" + } + ] + }, + { + "UniqueId": "TreeView", + "Title": "TreeView", + "Subtitle": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items.", + "ImagePath": "ms-appx:///Assets/ControlImages/TreeView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TreeViewIcon.png", + "Description": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items. ", + "Content": "

PullToRefresh can be used for a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TreeView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.TreeView" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tree-view" + } + ] + }, + { + "UniqueId": "DataGrid", + "Title": "DataGrid", + "Subtitle": "The DataGrid control presents data in a customizable table of rows and columns.", + "ImagePath": "ms-appx:///Assets/ControlImages/GridView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridViewIcon.png", + "Description": "The DataGrid control provides a flexible way to display a collection of data in rows and columns.", + "Content": "The DataGrid control presents data in a customizable table of rows and columns.", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "DataGrid - API", + "Uri": "https://aka.ms/win10datagridapidoc" + }, + { + "Title": "Guidelines", + "Uri": "https://aka.ms/win10datagriddoc" + }, + { + "Title": "Windows Community Toolkit", + "Uri": "https://docs.microsoft.com/windows/communitytoolkit" + } + ], + "RelatedControls": [ + "GridView", + "TreeView" + ] + } + ] + }, + { + "UniqueId": "DateAndTime", + "Title": "Date and Time", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "CalendarDatePicker", + "Title": "CalendarDatePicker", + "Subtitle": "A control that lets users pick a date value using a calendar.", + "ImagePath": "ms-appx:///Assets/ControlImages/CalendarDatePicker.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CalendarDatePickerIcon.png", + "Description": "A control that lets users pick a date value using a calendar.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CalendarDatePicker - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.calendardatepicker" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/calendar-date-picker" + } + ], + "RelatedControls": [ + "DatePicker", + "CalendarView" + ] + }, + { + "UniqueId": "CalendarView", + "Title": "CalendarView", + "Subtitle": "A control that presents a calendar for a user to choose a date from.", + "ImagePath": "ms-appx:///Assets/ControlImages/CalendarView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CalendarViewIcon.png", + "Description": "CalendarView shows a larger view for showing and selecting dates. DatePicker by contrast has a compact view with inline selection.", + "Content": "

Look at the CalendarView.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CalendarView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.calendarview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/calendar-view" + } + ], + "RelatedControls": [ + "CalendarDatePicker", + "DatePicker", + "TimePicker" + ] + }, + { + "UniqueId": "DatePicker", + "Title": "DatePicker", + "Subtitle": "A control that lets a user pick a date value.", + "ImagePath": "ms-appx:///Assets/ControlImages/DatePicker.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DatePickerIcon.png", + "Description": "Use a DatePicker to let users set a date in your app, for example to schedule an appointment. The DatePicker displays three controls for month, date, and year. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.", + "Content": "

Look at the DatePickerPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "DatePicker - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.datepicker" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/date-picker" + } + ], + "RelatedControls": [ + "CalendarDatePicker", + "CalendarView", + "TimePicker" + ] + }, + { + "UniqueId": "TimePicker", + "Title": "TimePicker", + "Subtitle": "A configurable control that lets a user pick a time value.", + "ImagePath": "ms-appx:///Assets/ControlImages/TimePicker.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TimePickerIcon.png", + "Description": "Use a TimePicker to let users set a time in your app, for example to set a reminder. The TimePicker displays three controls for hour, minute, and AM/PM. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.", + "Content": "

Look at the TimePickerPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TimePicker - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.timepicker" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/time-picker" + } + ], + "RelatedControls": [ + "DatePicker", + "CalendarView" + ] + } + ] + }, + { + "UniqueId": "BasicInput", + "Title": "Basic Input", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "InputValidation", + "Title": "InputValidation", + "Subtitle": "A feature that will display an error for invalid text. The app is notified when text has been changed by the user and is responsible for determining whether the text is valid and the error message", + "ImagePath": "ms-appx:///Assets/ControlImages/TextBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBoxIcon.png", + "Description": "A feature to display developer-defined errors for text values", + "Content": "

Look at the InputValidationPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [], + "RelatedControls": [ + "TextBox", + "PasswordBox" + ] + }, + { + "UniqueId": "Button", + "Title": "Button", + "Subtitle": "A control that responds to user input and raises a Click event.", + "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", + "Description": "The Button control provides a Click event to respond to user input from a touch, mouse, keyboard, stylus, or other input device. You can put different kinds of content in a button, such as text or an image, or you can restyle a button to give it a new look.", + "Content": "

The main purpose of a Button is to make something happen when a user clicks it. There are two ways you can make something happen:

Buttons often have only simple string content, but you can use any object as content. You can also change the style and template to give them any look you want.

Look at the ButtonPage.xaml file in Visual Studio to see the custom button style and template definitions used on this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "Button - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.button" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" + } + ], + "RelatedControls": [ + "ToggleButton", + "RepeatButton", + "HyperlinkButton", + "AppBarButton" + ] + }, + { + "UniqueId": "DropDownButton", + "Title": "DropDownButton", + "Subtitle": "A button that displays a flyout of choices when clicked.", + "ImagePath": "ms-appx:///Assets/ControlImages/DropDownButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DropDownButtonIcon.png", + "Description": "A control that drops down a flyout of choices from which one can be chosen.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "DropDownButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.dropdownbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" + } + ], + "RelatedControls": [ + "SplitButton", + "ToggleSplitButton", + "ToggleButton", + "RepeatButton", + "HyperlinkButton", + "AppBarButton", + "CommandBar" + ] + }, + { + "UniqueId": "HyperlinkButton", + "Title": "HyperlinkButton", + "Subtitle": "A button that appears as hyperlink text, and can navigate to a URI or handle a Click event.", + "ImagePath": "ms-appx:///Assets/ControlImages/HyperlinkButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/HyperlinkButtonIcon.png", + "Description": "A HyperlinkButton appears as a text hyperlink. When a user clicks it, it opens the page you specify in the NavigateUri property in the default browser. Or you can handle its Click event, typically to navigate within your app.", + "Content": "

A HyperlinkButton looks like hyperlink text, but works like a button. You can use it in two ways:

Each control page in this app has two sets of hyperlink buttons, one set to open documentation in Internet Explorer, and one set to navigate to related control pages in the app.

Look at the HyperlinkButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "HyperlinkButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.hyperlinkbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/hyperlinks" + } + ], + "RelatedControls": [ + "Button", + "ToggleButton", + "RepeatButton", + "AppBarButton" + ] + }, + { + "UniqueId": "RepeatButton", + "Title": "RepeatButton", + "Subtitle": "A button that raises its Click event repeatedly from the time it's pressed until it's released.", + "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", + "Description": "The RepeatButton control is like a standard Button, except that the Click event occurs continuously while the user presses the RepeatButton.", + "Content": "

A RepeatButton looks just like a regular Button, but it's Click event occurs continuously while the button is pressed.

Look at the RepeatButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RepeatButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.primitives.repeatbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" + } + ], + "RelatedControls": [ + "Button", + "ToggleButton", + "HyperlinkButton", + "AppBarButton" + ] + }, + { + "UniqueId": "ToggleButton", + "Title": "ToggleButton", + "Subtitle": "A button that can be switched between two states like a CheckBox.", + "ImagePath": "ms-appx:///Assets/ControlImages/ToggleButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleButtonIcon.png", + "Description": "A ToggleButton looks like a Button, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.", + "Content": "

ToggleButton is used as a base class for similar controls like CheckBox and RadioButton. It can be used on its own, but don't use it if a CheckBox, RadioButton, or ToggleSwitch would convey your intent better.

Look at the ToggleButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ToggleButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.primitives.togglebutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons#create-a-toggle-split-button" + } + ], + "RelatedControls": [ + "Button", + "AppBarToggleButton", + "ToggleSwitch", + "CheckBox", + "CommandBarFlyout", + "CommandBar" + ] + }, + { + "UniqueId": "SplitButton", + "Title": "SplitButton", + "Subtitle": "A two-part button that displays a flyout when its secondary part is clicked.", + "ImagePath": "ms-appx:///Assets/ControlImages/SplitButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SplitButtonIcon.png", + "Description": "The splitbutton is a dropdown button, but with an addition execution hit target.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "SplitButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.splitbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons#create-a-split-button" + } + ], + "RelatedControls": [ + "Button", + "AppBarToggleButton", + "CommandBar", + "ToggleSwitch", + "CheckBox", + "CommandBarFlyout", + "CommandBar" + ] + }, + { + "UniqueId": "ToggleSplitButton", + "Title": "ToggleSplitButton", + "Subtitle": "A version of the SplitButton where the activation target toggles on/off.", + "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSplitButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleSplitButtonIcon.png", + "Description": "A version of the SplitButton where the activation target toggles on/off.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ToggleSplitButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.togglesplitbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" + } + ], + "RelatedControls": [ + "Button", + "AppBarToggleButton", + "ToggleSwitch", + "CheckBox", + "CommandBarFlyout", + "CommandBar" + ] + }, + { + "UniqueId": "CheckBox", + "Title": "CheckBox", + "Subtitle": "A control that a user can select or clear.", + "ImagePath": "ms-appx:///Assets/ControlImages/CheckBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CheckBoxIcon.png", + "Description": "CheckBox controls let the user select a combination of binary options. In contrast, RadioButton controls allow the user to select from mutually exclusive options. The indeterminate state is used to indicate that an option is set for some, but not all, child options. Don't allow users to set an indeterminate state directly to indicate a third option.", + "Content": "

Check and uncheck these controls to see how they look in each state. The label for each CheckBox is defined by its Content property.

Use a three-state CheckBox to show that none, some, or all of an items sub-options are checked. You have to add some code to do this. Take a look at the methods in the SelectAllMethods region of CheckBoxPage.xaml.cs to see how we did it.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CheckBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.checkbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/checkbox" + } + ], + "RelatedControls": [ + "RadioButton", + "ToggleSwitch", + "ToggleButton" + ] + }, + { + "UniqueId": "ColorPicker", + "Title": "ColorPicker", + "Subtitle": "A control that displays a selectable color spectrum.", + "ImagePath": "ms-appx:///Assets/ControlImages/ColorPicker.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ColorPickerIcon.png", + "Description": "A selectable color spectrum.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ColorPicker - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.ColorPicker" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/color-picker" + } + ], + "RelatedControls": [ + "ComboBox" + ] + }, + { + "UniqueId": "ComboBox", + "Title": "ComboBox", + "Subtitle": "A drop-down list of items a user can select from.", + "ImagePath": "ms-appx:///Assets/ControlImages/ComboBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ComboBoxIcon.png", + "Description": "Use a ComboBox when you need to conserve on-screen space and when users select only one option at a time. A ComboBox shows only the currently selected item.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ComboBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.combobox" + }, + { + "Title": "ComboBoxItem - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.comboboxitem" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/combo-box" + } + ], + "RelatedControls": [ + "ListBox", + "RadioButton", + "CheckBox", + "ListView", + "AutoSuggestBox", + "RatingControl" + ] + }, + { + "UniqueId": "RadioButton", + "Title": "RadioButton", + "Subtitle": "A control that allows a user to select a single option from a group of options.", + "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RadioButtonIcon.png", + "Description": "Use RadioButtons to let a user choose between mutually exclusive, related options. Generally contained within a RadioButtons group control.", + "Content": "

Look at the RadioButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RadioButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.radiobutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/radio-button" + } + ], + "RelatedControls": [ + "CheckBox", + "RadioButtons", + "ToggleSwitch", + "ToggleButton" + ] + }, + { + "UniqueId": "RatingControl", + "Title": "RatingControl", + "Subtitle": "Rate something 1 to 5 stars.", + "ImagePath": "ms-appx:///Assets/ControlImages/RatingControl.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RatingControlIcon.png", + "Description": "Rate something 1 to 5 stars.", + "Content": "", + "IsNew": false, + "Docs": [ + { + "Title": "RatingControl - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RatingControl" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/rating" + } + ], + "RelatedControls": [ + "Slider", + "ComboBox" + ] + }, + { + "UniqueId": "Slider", + "Title": "Slider", + "Subtitle": "A control that lets the user select from a range of values by moving a Thumb control along a track.", + "ImagePath": "ms-appx:///Assets/ControlImages/Slider.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SliderIcon.png", + "Description": "Use a Slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).", + "Content": "

Look at the SliderPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Slider - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.slider" + }, + { + "Title": "Guidelines", + "Uri": "http://docs.microsoft.com/windows/apps/design/controls/slider" + } + ], + "RelatedControls": [ + "ComboBox", + "ListBox", + "RatingControl" + ] + }, + { + "UniqueId": "ToggleSwitch", + "Title": "ToggleSwitch", + "Subtitle": "A switch that can be toggled between 2 states.", + "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSwitch.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleSwitchIcon.png", + "Description": "Use ToggleSwitch controls to present users with exactly two mutually exclusive options (like on/off), where choosing an option results in an immediate commit. A toggle switch should have a single label.", + "Content": "

Look at the ToggleSwitchPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ToggleSwitch - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.toggleswitch" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/toggles" + } + ], + "RelatedControls": [ + "ToggleButton", + "RadioButton", + "CheckBox", + "AppBarToggleButton" + ] + } + ] + }, + { + "UniqueId": "StatusAndInfo", + "Title": "Status and Info", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "AutomationProperties", + "Title": "AutomationProperties", + "Subtitle": "Attributes that help with writing accessible XAML.", + "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", + "Description": "The AutomationProperties attributes provide functionality around accessible components.", + "Content": "

The aim of AutomationProperties is to enable components that are accessible to screen readers.", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AutomationProperties - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.automation.automationproperties" + }, + { + "Title": "Accessibility Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/accessibility/accessibility" + } + ], + "RelatedControls": [ + "TextBlock", + "Image" + ] + }, + { + "UniqueId": "InfoBadge", + "Title": "InfoBadge", + "Subtitle": "An non-intrusive UI to display notifications or bring focus to an area", + "ImagePath": "ms-appx:///Assets/ControlImages/InfoBadge.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", + "Description": "Badging is a non-intrusive and intuitive way to display notifications or bring focus to an area within an app - whether that be for notifications, indicating new content, or showing an alert.", + "Content": "

Look at the InfoBadgePage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "InfoBadge - API", + "Uri": "https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.infobadge" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/infobadge" + } + ], + "RelatedControls": [ + "InfoBar", + "TeachingTip" + ] + }, + { + "UniqueId": "InfoBar", + "Title": "InfoBar", + "Subtitle": "An inline message to display app-wide status change information", + "ImagePath": "ms-appx:///Assets/ControlImages/InfoBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", + "Description": "Use an InfoBar control when a user should be informed of, acknowledge, or take action on a changed application state. By default the notification will remain in the content area until closed by the user but will not necessarily break user flow.", + "Content": "

Look at the InfoBarPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "InfoBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.infobar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/infobar" + } + ], + "RelatedControls": [ + "TeachingTip", + "ContentDialog" + ] + }, + { + "UniqueId": "ProgressBar", + "Title": "ProgressBar", + "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that doesn't block user interaction.", + "ImagePath": "ms-appx:///Assets/ControlImages/ProgressBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ProgressBarIcon.png", + "Description": "The ProgressBar has two different visual representations:\nIndeterminate - shows that a task is ongoing, but doesn't block user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.", + "Content": "

Look at the ProgressBarPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ProgressBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.ProgressBar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/progress-controls" + } + ], + "RelatedControls": [ + "ProgressRing" + ] + }, + { + "UniqueId": "ProgressRing", + "Title": "ProgressRing", + "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that does block user interaction.", + "ImagePath": "ms-appx:///Assets/ControlImages/ProgressRing.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ProgressRingIcon.png", + "Description": "The ProgressRing has two different visual representations:\nIndeterminate - shows that a task is ongoing, but blocks user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.", + "Content": "

Look at the ProgressRingPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "ProgressRing - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.progressring" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/progress-controls" + } + ], + "RelatedControls": [ + "ProgressBar" + ] + }, + { + "UniqueId": "ToolTip", + "Title": "ToolTip", + "Subtitle": "Displays information for an element in a pop-up window.", + "ImagePath": "ms-appx:///Assets/ControlImages/ToolTip.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToolTipIcon.png", + "Description": "A ToolTip shows more information about a UI element. You might show information about what the element does, or what the user should do. The ToolTip is shown when a user hovers over or presses and holds the UI element.", + "Content": "

Look at the ToolTipPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ToolTip - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.tooltip" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tooltips" + } + ], + "RelatedControls": [ + "TeachingTip", + "Flyout", + "ContentDialog" + ] + } + ] + }, + { + "UniqueId": "DialogsAndFlyouts", + "Title": "Dialogs and Flyouts", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "ContentDialog", + "Title": "ContentDialog", + "Subtitle": "A dialog box that can be customized to contain any XAML content.", + "ImagePath": "ms-appx:///Assets/ControlImages/ContentDialog.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "Use a ContentDialog to show relavant information or to provide a modal dialog experience that can show any XAML content.", + "Content": "

Look at the ContentDialog.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "ContentDialog - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.contentdialog" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/dialogs" + } + ], + "RelatedControls": [ + "Flyout", + "MenuFlyout", + "TeachingTip", + "ToolTip" + ] + }, + { + "UniqueId": "Flyout", + "Title": "Flyout", + "Subtitle": "Shows contextual information and enables user interaction.", + "ImagePath": "ms-appx:///Assets/ControlImages/Flyout.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/FlyoutIcon.png", + "Description": "A Flyout displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be light dismissed by clicking or tapping off of it. Use it to collect input from the user, show more details about an item, or ask the user to confirm an action.", + "Content": "

Look at the FlyoutPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Flyout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.flyout" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts" + } + ], + "RelatedControls": [ + "TeachingTip", + "ContentDialog", + "MenuFlyout", + "Button", + "AppBarButton" + ] + }, + { + "UniqueId": "TeachingTip", + "Title": "TeachingTip", + "Subtitle": "A content-rich flyout for guiding users and enabling teaching moments.", + "ImagePath": "ms-appx:///Assets/ControlImages/TeachingTip.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TeachingTipIcon.png", + "Description": "The XAML TeachingTip Control provides a way for your app to guide and inform users in your application with a non-invasive and content rich notification. TeachingTip can be used for bringing focus to a new or important feature, teaching users how to perform a task, or enhancing the user workflow by providing contextually relevant information to their task at hand.", + "Content": "

Look at the TeachingTip.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TeachingTip - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.teachingtip" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/teaching-tip" + } + ], + "RelatedControls": [ + "ContentDialog", + "Flyout", + "ToolTip" + ] + } + ] + }, + { + "UniqueId": "Scrolling", + "Title": "Scrolling", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "PipsPager", + "Title": "PipsPager", + "Subtitle": "A control to let the user navigate through a paginated collection when the page numbers do not need to be visually known.", + "ImagePath": "ms-appx:///Assets/ControlImages/PipsPager.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "A PipsPager allows the user to navigate through a paginated collection and is independent of the content shown. Use this control when the content in the layout is not explicitly ordered by relevancy or you desire a glyph-based representation of numbered pages. PipsPagers are commonly used in photo viewers, app lists, carousels, and when display space is limited.", + "Content": "

Look at the PipsPagerPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "PipsPager - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pipspager" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pipspager" + } + ], + "RelatedControls": [ + "ScrollViewer", + "FlipView", + "ItemsRepeater" + ] + }, + { + "UniqueId": "ScrollViewer", + "Title": "ScrollViewer", + "Subtitle": "A container control that lets the user pan and zoom its content.", + "ImagePath": "ms-appx:///Assets/ControlImages/ScrollViewer.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ScrollViewerIcon.png", + "Description": "A ScrollViewer lets a user scroll, pan, and zoom to see content that's larger than the viewable area. Many content controls, like ListView, have ScrollViewers built into their control templates to provide automatic scrolling.", + "Content": "

Look at the ScrollViewerPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ScrollViewer - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.scrollviewer" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/scroll-controls" + } + ], + "RelatedControls": [ + "ViewBox", + "Canvas", + "Grid", + "StackPanel", + "RelativePanel", + "ParallaxView" + ] + }, + { + "UniqueId": "SemanticZoom", + "Title": "SemanticZoom", + "Subtitle": "Lets the user zoom between two different views of a collection, making it easier to navigate through large collections of items.", + "ImagePath": "ms-appx:///Assets/ControlImages/SemanticZoom.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "The SemanticZoom lets you show grouped data in two different ways, and is useful for quickly navigating through large sets of data.", + "Content": "

Look at the SemanticZoomPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "SemanticZoom - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.semanticzoom" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/semantic-zoom" + } + ], + "RelatedControls": [ + "GridView", + "ListView" + ] + } + ] + }, + { + "UniqueId": "Layout", + "Title": "Layout", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "Use layout controls to arrange the controls and content in your app.", + "Items": [ + { + "UniqueId": "Border", + "Title": "Border", + "Subtitle": "A container control that draws a boundary line, background, or both, around another object.", + "ImagePath": "ms-appx:///Assets/ControlImages/Border.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/BorderIcon.png", + "Description": "Use a Border control to draw a boundary line, background, or both, around another object. A Border can contain only one child object.", + "Content": "

A Border can contain only one child object. If you want to put a border around multiple objects, first wrap them in a container object such as StackPanel and make the StackPanel the child of the Border.

You can change the appearance of a Border by setting basic properties:

Most of the control pages in this app have XAML blocks to show basic usage. The appearance of the XAML blocks is defined by a Border control. Look at the CodeBorderStyle resource in App.xaml to see the Style that's applied to the Borders.

Look at the BorderPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Border - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.border" + } + ], + "RelatedControls": [ + "Canvas", + "Grid", + "StackPanel", + "VariableSizedWrapGrid", + "RelativePanel" + ] + }, + { + "UniqueId": "Canvas", + "Title": "Canvas", + "Subtitle": "A layout panel that supports absolute positioning of child elements relative to the top left corner of the canvas.", + "ImagePath": "ms-appx:///Assets/ControlImages/Canvas.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CanvasIcon.png", + "Description": "The Canvas provides absolute positioning of controls or content. Content is positioned relative to the Canvas using the Canvas.Top and Canvas.Left attached properties.", + "Content": "

Items are positioned on the Canvas using the Canvas.Top and Canvas.Left attached properties. Use the sliders to change these properties for the red rectangle and see how it moves around.

To see the effect of the ZIndex attached property, make sure the red rectangle is overlapping the other rectangles.

Look at the CanvasPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Canvas - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.canvas" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" + } + ], + "RelatedControls": [ + "Border", + "Grid", + "StackPanel", + "VariableSizedWrapGrid", + "RelativePanel" + ] + }, + { + "UniqueId": "Expander", + "Title": "Expander", + "Subtitle": "A container with a header that can be expanded to show a body with more content.", + "ImagePath": "ms-appx:///Assets/ControlImages/Expander.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "The Expander has a header and can expand to show a body with more content. Use an Expander when some content is only relevant some of the time (for example to read more information or access additional options for an item).", + "Content": "Look at the ExpanderPage.xaml file in Visual Studio to see the full code for this page.", + "IsNew": true, + "Docs": [ + { + "Title": "Expander - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.expander" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/expander" + } + ], + "RelatedControls": [ + "Flyout", + "ItemsRepeater", + "SplitView" + ] + }, + { + "UniqueId": "ItemsRepeater", + "Title": "ItemsRepeater", + "Subtitle": "A flexible, primitive control for data-driven layouts.", + "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListViewIcon.png", + "Description": "The ItemsRepeater is like a markup-based loop that supports virtualization.", + "Content": "

A ItemsRepeater is more basic than an ItemsControl. It does not have default styling or a control template. It can contain a collection of items of any type. To populate the view, set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

And, optionally set the Layout to define how items are sized and positioned. By default, it uses a simple vertical stacking layout.

Look at the ItemsRepeaterPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ItemsRepeater - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.itemsrepeater" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/items-repeater" + }, + { + "Title": "StackLayout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.stacklayout" + }, + { + "Title": "UniformGridLayout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.uniformgridlayout" + } + ], + "RelatedControls": [ + "ScrollViewer", + "ListView", + "GridView" + ] + }, + { + "UniqueId": "Grid", + "Title": "Grid", + "Subtitle": "A layout panel that supports arranging child elements in rows and columns. ", + "ImagePath": "ms-appx:///Assets/ControlImages/Grid.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridIcon.png", + "Description": "The Grid is used to arrange controls and content in rows and columns. Content is positioned in the grid using Grid.Row and Grid.Column attached properties.", + "Content": "

Look at the GridPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Grid - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.grid" + }, + { + "Title": "Tutorial", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/grid-tutorial" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels#grid" + } + ], + "RelatedControls": [ + "Border", + "Canvas", + "StackPanel", + "VariableSizedWrapGrid", + "RelativePanel" + ] + }, + { + "UniqueId": "RadioButtons", + "Title": "RadioButtons", + "Subtitle": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.", + "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RadioButtonsIcon.png", + "Description": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.", + "Content": "

Look at the RadioButtonsPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RadioButtons - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.radiobuttons" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/radio-button" + } + ], + "RelatedControls": [ + "CheckBox", + "RadioButton", + "ToggleSwitch", + "ToggleButton" + ] + }, + { + "UniqueId": "RelativePanel", + "Title": "RelativePanel", + "Subtitle": "A panel that uses relationships between elements to define layout.", + "ImagePath": "ms-appx:///Assets/ControlImages/RelativePanel.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RelativePanelIcon.png", + "Description": "Use a RelativePanel to layout elements by defining the relationships between elements and in relation to the panel.", + "Content": "

Look at the RelativePanelPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RelativePanel - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.relativepanel" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" + } + ], + "RelatedControls": [ + "Grid", + "StackPanel", + "Border", + "Canvas", + "ViewBox" + ] + }, + { + "UniqueId": "SplitView", + "Title": "SplitView", + "Subtitle": "A container that has 2 content areas, with multiple display options for the pane.", + "ImagePath": "ms-appx:///Assets/ControlImages/SplitView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SplitViewIcon.png", + "Description": "Use a SplitView to display content, such as navigation options, in a pane on the side. There are multiple options for displaying the pane, namely CompactOverlay, Compact, Overlay, Inline. If you are looking for a reference to the hamburger pattern, please see the links in the documentation below.", + "Content": "

Look at the SplitViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "SplitView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.splitview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/split-view" + } + ], + "RelatedControls": [ + "StackPanel", + "ListView", + "GridView", + "Grid", + "RelativePanel" + ] + }, + { + "UniqueId": "StackPanel", + "Title": "StackPanel", + "Subtitle": "A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.", + "ImagePath": "ms-appx:///Assets/ControlImages/StackPanel.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/StackPanelIcon.png", + "Description": "A StackPanel is used to arrange items in a line, either horizontally or vertically.", + "Content": "

Look at the StackPanelPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "StackPanel - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.stackpanel" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" + } + ], + "RelatedControls": [ + "Border", + "Canvas", + "Grid", + "VariableSizedWrapGrid", + "RelativePanel" + ] + }, + { + "UniqueId": "VariableSizedWrapGrid", + "Title": "VariableSizedWrapGrid", + "Subtitle": "A layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns.", + "ImagePath": "ms-appx:///Assets/ControlImages/VariableSizedWrapGrid.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/VariableSizedWrapGridIcon.png", + "Description": "A VariableSizedWrapGrip is used to create grid layouts where content can span multiple rows and columns.", + "Content": "

Elements are arranged in rows or columns that automatically wrap to a new row or column when the MaximumRowsOrColumns value is reached.

Whether elements are arranged in rows or columns is specified by the Orientation property.

Elements can span multiple rows and columns using VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties.

Elements are sized as specified by the ItemHeight and ItemWidth properties.

Look at the VariableSizedWrapGridPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "VariableSizedWrapGrid - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.variablesizedwrapgrid" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" + } + ], + "RelatedControls": [ + "Border", + "Canvas", + "Grid", + "StackPanel", + "RelativePanel" + ] + }, + { + "UniqueId": "ViewBox", + "Title": "ViewBox", + "Subtitle": "A container control that scales its content to a specified size.", + "ImagePath": "ms-appx:///Assets/ControlImages/ViewBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ViewBoxIcon.png", + "Description": "Use a ViewBox control scale content up or down to a specified size.", + "Content": "

Look at the ViewBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Viewbox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.viewbox" + } + ], + "RelatedControls": [ + "ScrollViewer", + "Canvas", + "Grid", + "StackPanel", + "RelativePanel" + ] + } + ] + }, + { + "UniqueId": "Navigation", + "Title": "Navigation", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "BreadcrumbBar", + "Title": "BreadcrumbBar", + "Subtitle": "Shows the trail of navigation taken to the current location.", + "ImagePath": "ms-appx:///Assets/ControlImages/BreadcrumbBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "The BreadcrumbBar control provides a common horizontal layout to display the trail of navigation taken to the current location. Resize to see the nodes crumble, starting at the root.", + "Content": "

Look at the BreadcrumbBarPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "BreadcrumbBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.breadcrumbbar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/breadcrumbbar" + } + ], + "RelatedControls": [ + "NavigationView", + "Pivot", + "TabView" + ] + }, + { + "UniqueId": "NavigationView", + "Title": "NavigationView", + "Subtitle": "Common vertical layout for top-level areas of your app via a collapsible navigation menu.", + "ImagePath": "ms-appx:///Assets/ControlImages/NavigationView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/NavigationViewIcon.png", + "Description": "The navigation view control provides a common vertical layout for top-level areas of your app via a collapsible navigation menu.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "NavigationView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.NavigationView" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/navigationview" + } + ], + "RelatedControls": [ + "SplitView", + "Pivot" + ] + }, + { + "UniqueId": "Pivot", + "Title": "Pivot", + "Subtitle": "Presents information from different sources in a tabbed view.", + "ImagePath": "ms-appx:///Assets/ControlImages/Pivot.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/PivotIcon.png", + "Description": "A Pivot allows you to show a collection of items from different sources in a tabbed view.", + "Content": "

This page shows a simplified Pivot control with minimal content to demonstrate basic Pivot usage. Look at the PivotPage.xaml file in Visual Studio to see the full code for this page.

A Pivot control typically takes up the full page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Pivot - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pivot" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pivot" + } + ], + "RelatedControls": [ + "SemanticZoom", + "ListView", + "GridView" + ] + }, + { + "UniqueId": "TabView", + "Title": "TabView", + "Subtitle": "A control that displays a collection of tabs that can be used to display several documents.", + "ImagePath": "ms-appx:///Assets/ControlImages/TabView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "TabView provides the user with a collection of tabs that can be used to display several documents.", + "Content": "", + "IsNew": false, + "IsUpdated": true, + "IsPreview": false, + "Docs": [ + { + "Title": "TabView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.tabview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tab-view" + }, + { + "Title": "Show multiple views for an app", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/show-multiple-views" + } + ], + "RelatedControls": [ + "Pivot", + "NavigationView", + "ListView" + ] + } + ] + }, + { + "UniqueId": "Media", + "Title": "Media", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "AnimatedVisualPlayer", + "Title": "AnimatedVisualPlayer", + "Subtitle": "An element to render and control playback of motion graphics.", + "ImagePath": "ms-appx:///Assets/ControlImages/AnimatedVisualPlayer.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AnimationsIcon.png", + "Description": "An element to render and control playback of motion graphics.", + "Content": "

Look at the AnimatedVisualPlayerPage.xaml and AnimatedVisualPlayerPage.xaml.cs files in Visual Studio to see the full code for this page.

", + "IsNew": false, + "Docs": [ + { + "Title": "AnimatedVisualPlayer - API", + "Uri": "https://www.docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedvisualplayer" + }, + { + "Title": "Full Samples", + "Uri": "ms-windows-store://pdp/?productid=9N3J5TG8FF7F" + }, + { + "Title": "Tutorials", + "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie#tutorials" + }, + { + "Title": "Lottie Overview", + "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie" + }, + { + "Title": "Lottie Windows - GitHub", + "Uri": "https://github.com/CommunityToolkit/Lottie-Windows" + } + ] + }, + { + "UniqueId": "Image", + "Title": "Image", + "Subtitle": "A control to display image content.", + "ImagePath": "ms-appx:///Assets/ControlImages/Image.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ImageIcon.png", + "Description": "You can use an Image control to show and scale images.", + "Content": "

Look at the ImagePage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Image - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.image" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/images-imagebrushes" + } + ], + "RelatedControls": [ + "MediaPlayerElement", + "PersonPicture" + ] + }, + { + "UniqueId": "MediaPlayerElement", + "Title": "MediaPlayerElement", + "Subtitle": "A control to display video and image content.", + "ImagePath": "ms-appx:///Assets/ControlImages/MediaPlayerElement.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MediaElementIcon.png", + "Description": "You can use a MediaPlayerElement control to playback videos and show images. You can show transport controls or make the video autoplay.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "MediaPlayerElement - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.MediaPlayerElement" + }, + { + "Title": "Media Playback", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/media-playback" + } + ], + "RelatedControls": [ + "Image" + ] + }, + { + "UniqueId": "PersonPicture", + "Title": "PersonPicture", + "Subtitle": "Displays the picture of a person/contact.", + "ImagePath": "ms-appx:///Assets/ControlImages/PersonPicture.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/PersonPictureIcon.png", + "Description": "Displays the picture of a person/contact.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "PersonPicture - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.PersonPicture" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/person-picture" + } + ], + "RelatedControls": [ + "Image" + ] + }, + { + "UniqueId": "Sound", + "Title": "Sound", + "Subtitle": "A code-behind only API that enables 2D and 3D UI sounds on all XAML controls.", + "ImagePath": "ms-appx:///Assets/ControlImages/Sound.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SoundIcon.png", + "Description": "Sound is enabled by default for UWP apps running on Xbox, but can be set to always play on all devices if desired. Sound may also be put into Spatial Audio mode for a more immersive 10ft experience.", + "Content": "

Look at the SoundPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Sound - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.elementsoundplayer" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/sound" + } + ] + }, + { + "UniqueId": "WebView2", + "Title": "WebView2", + "Subtitle": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", + "ImagePath": "ms-appx:///Assets/ControlImages/WebView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/WebViewIcon.png", + "Description": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", + "Content": "", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "WebView2 - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.webview2?view=winui-3.0" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/winui" + }, + { + "Title": "Examples", + "Uri": "https://github.com/MicrosoftEdge/WebView2Samples" + } + ] + } + ] + }, + { + "UniqueId": "Styles", + "Title": "Styles", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "Acrylic", + "Title": "AcrylicBrush", + "Subtitle": "A translucent material recommended for panel backgrounds.", + "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AcrylicBrushIcon.png", + "Description": "A translucent material recommended for panel backgrounds.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AcrylicBrush - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.acrylicbrush" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/acrylic" + } + ], + "RelatedControls": [ + "SystemBackdrops" + ] + }, + { + "UniqueId": "AnimatedIcon", + "Title": "AnimatedIcon", + "Subtitle": "An element that displays and controls an icon that animates when the user interacts with the control.", + "ImagePath": "ms-appx:///Assets/ControlImages/AnimatedIcon.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AnimationsIcon.png", + "Description": "An element that displays and controls an icon that animates when the user interacts with the control.", + "Content": "

Look at the AnimatedIconPage.xaml and AnimatedIconPage.xaml.cs files in Visual Studio to see the full code for this page.

", + "IsNew": true, + "Docs": [ + { + "Title": "AnimatedIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedicon" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/animated-icon" + }, + { + "Title": "Lottie Overview", + "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie" + }, + { + "Title": "Lottie Windows - GitHub", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedvisualplayer" + } + ] + }, + { + "UniqueId": "IconElement", + "Title": "IconElement", + "Subtitle": "Represents icon controls that use different image types as its content.", + "ImagePath": "ms-appx:///Assets/ControlImages/IconElement.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ImageIcon.png", + "Description": "Represents icon controls that use different image types as its content.", + "Content": "

Look at the IconElementPage.xaml and IconElementPage.xaml.cs files in Visual Studio to see the full code for this page.

", + "IsNew": true, + "Docs": [ + { + "Title": "BitmapIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" + }, + { + "Title": "FontIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" + }, + { + "Title": "ImageIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.imageicon" + }, + { + "Title": "PathIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" + }, + { + "Title": "SymbolIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" + }, + { + "Title": "Icon Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/icons" + } + ], + "RelatedControls": [ + "AnimatedIcon", + "AppBarButton", + "MenuFlyoutItem" + ] + }, + { + "UniqueId": "RadialGradientBrush", + "Title": "RadialGradientBrush", + "Subtitle": "A brush to show radial gradients", + "ImagePath": "ms-appx:///Assets/ControlImages/Canvas.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CanvasIcon.png", + "Description": "Paints an area with a radial gradient. A center point defines the beginning of the gradient, and a radius defines the end point of the gradient.", + "Content": "The RadialGradientBrush is similar in programming model to the LinearGradientBrush. However, the linear gradient has a start and an end point to define the gradient vector, while the radial gradient has a circle, along with a focal point, to define the gradient behavior. The circle defines the end point of the gradient. The parameters can be provided as a ratio or absolute value by picking the mapping mode.", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RadialGradientBrush - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.RadialGradientBrush" + } + ], + "RelatedControls": [ + "Acrylic", + "ColorPaletteResources" + ] + }, + { + "UniqueId": "RevealFocus", + "Title": "Reveal Focus", + "Subtitle": "Customize the style of your focus rectangles.", + "ImagePath": "ms-appx:///Assets/ControlImages/RevealFocus.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RevealFocusIcon.png", + "Description": "Reveal focus allows you to adapt focus rectangles to look like the focus rectangles available on Xbox.", + "Content": "

Look at the RevealFocusPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Reveal Focus - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.application.focusvisualkind#Windows_UI_Xaml_Application_FocusVisualKind" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/reveal-focus" + } + ], + "RelatedControls": [] + }, + { + "UniqueId": "ColorPaletteResources", + "Title": "ColorPaletteResources", + "Subtitle": "A type of resource that allows you to apply custom colors to your controls.", + "ImagePath": "ms-appx:///Assets/ControlImages/ColorPaletteResources.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "Apply custom colors to your controls through this cascading API, or scope them to a local subset.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Theme Editor (GitHub)", + "Uri": "https://github.com/Microsoft/fluent-xaml-theme-editor" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/color#scoping-with-a-resourcedictionary" + }, + { + "Title": "ColorPaletteResources - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.colorpaletteresources" + } + ] + }, + { + "UniqueId": "CompactSizing", + "Title": "Compact Sizing", + "Subtitle": "How to use a Resource Dictionary to enable compact sizing.", + "ImagePath": "ms-appx:///Assets/ControlImages/CompactSizing.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CompactSizingIcon.png", + "Description": "Compact dictionary included in WinUI 2.1. Allows you to create compact smaller apps by adding this at the page or the grid level.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Spacing", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/spacing" + } + ] + }, + { + "UniqueId": "SystemBackdrops", + "Title": "System Backdrops (Mica/Acrylic)", + "Subtitle": "System backdrops, like Mica and Acrylic, for the window.", + "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SystemBackdropsIcon.png", + "Description": "System backdrops are used to provide a different background for a Window other than the default white or black (depending on Light or Dark theme). Mica and Desktop Acrylic are the current supported backdrops. Applying a backdrop currently requires a bunch of app code, but this will be easier in a future release.", + "Content": "

Look at the SampleSystemBackdropsWindow.xaml.cs file in Visual Studio to see the full code for applying a backdrop.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "MicaController - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.composition.systembackdrops.micacontroller" + }, + { + "Title": "DesktopAcrylicController - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.composition.systembackdrops.desktopacryliccontroller" + } + ], + "RelatedControls": [] + } + ] + }, + { + "UniqueId": "Text", + "Title": "Text", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "AutoSuggestBox", + "Title": "AutoSuggestBox", + "Subtitle": "A control to provide suggestions as a user is typing.", + "ImagePath": "ms-appx:///Assets/ControlImages/AutoSuggestBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AutoSuggestBoxIcon.png", + "Description": "A text control that makes suggestions to users as they type. The app is notified when text has been changed by the user and is responsible for providing relevant suggestions for this control to display.", + "Content": "

Look at the AutoSuggestBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "AutoSuggestBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.autosuggestbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/auto-suggest-box" + } + ], + "RelatedControls": [ + "ListBox", + "ComboBox", + "TextBox" + ] + }, + { + "UniqueId": "NumberBox", + "Title": "NumberBox", + "Subtitle": "A text control used for numeric input and evaluation of algebraic equations.", + "ImagePath": "ms-appx:///Assets/ControlImages/NumberBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/NumberBoxIcon.png", + "Description": "Use NumberBox to allow users to enter algebraic equations and numeric input in your app.", + "Content": "

Look at the NumberBox.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "NumberBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.numberbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/number-box" + } + ], + "RelatedControls": [ + "TextBox", + "TextBlock", + "RichTextBlock", + "RichEditBox" + ] + }, + { + "UniqueId": "PasswordBox", + "Title": "PasswordBox", + "Subtitle": "A control for entering passwords.", + "ImagePath": "ms-appx:///Assets/ControlImages/PasswordBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/PasswordBoxIcon.png", + "Description": "A user can enter a single line of non-wrapping text in a PasswordBox control. The text is masked by characters that you can specify by using the PasswordChar property, and you can specify the maximum number of characters that the user can enter by setting the MaxLength property.", + "Content": "

Look at the PasswordBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "PasswordBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.passwordbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "TextBox", + "TextBlock", + "RichTextBlock", + "RichEditBox" + ] + }, + { + "UniqueId": "RichEditBox", + "Title": "RichEditBox", + "Subtitle": "A rich text editing control that supports formatted text, hyperlinks, and other rich content.", + "ImagePath": "ms-appx:///Assets/ControlImages/RichEditBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RichEditBoxIcon.png", + "Description": "You can use a RichEditBox control to enter and edit rich text documents that contain formatted text, hyperlinks, and images. By default, the RichEditBox supports spell checking. You can make a RichEditBox read-only by setting its IsReadOnly property to true.", + "Content": "

On this page, you can type into the RichTextBox control and save it as a RichTextFormat (.rtf) document, or load an existing .rtf document. You can format the text as Bold or Underlined, and change the text color.

Look at the RichEditBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "RichEditBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.richeditbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "NumberBox", + "TextBox", + "RichTextBlock", + "TextBlock" + ] + }, + { + "UniqueId": "RichTextBlock", + "Title": "RichTextBlock", + "Subtitle": "A control that displays formatted text, hyperlinks, inline images, and other rich content.", + "ImagePath": "ms-appx:///Assets/ControlImages/RichTextBlock.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RichTextBlockIcon.png", + "Description": "RichTextBlock provides more advanced formatting features than the TextBlock control. You can apply character and paragraph formatting to the text in the RichTextBlock. For example, you can apply Bold, Italic, and Underline to any portion of the text in the control. You can use linked text containers (a RichTextBlock linked to RichTextBlockOverflow elements) to create advanced page layouts.", + "Content": "

Change the width of the app to see how the RichTextBlock overflows into additional columns as the app gets narrower.

Look at the RichTextBlockPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "RichTextBlock - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.richtextblock" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "NumberBox", + "TextBlock", + "TextBox", + "PasswordBox", + "RichEditBox" + ] + }, + { + "UniqueId": "TextBlock", + "Title": "TextBlock", + "Subtitle": "A lightweight control for displaying small amounts of text.", + "ImagePath": "ms-appx:///Assets/ControlImages/TextBlock.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBlockIcon.png", + "Description": "TextBlock is the primary control for displaying read-only text in your app. You typically display text by setting the Text property to a simple string. You can also display a series of strings in Run elements and give each different formatting.", + "Content": "

Look at the TextBlockPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TextBlock - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.textblock" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "NumberBox", + "TextBox", + "RichTextBlock", + "PasswordBox", + "RichEditBox" + ] + }, + { + "UniqueId": "TextBox", + "Title": "TextBox", + "Subtitle": "A single-line or multi-line plain text field.", + "ImagePath": "ms-appx:///Assets/ControlImages/TextBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBoxIcon.png", + "Description": "Use a TextBox to let a user enter simple text input in your app. You can add a header and placeholder text to let the user know what the TextBox is for, and you can customize it in other ways.", + "Content": "

Look at the TextBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TextBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.textbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "NumberBox", + "TextBlock", + "RichTextBlock", + "PasswordBox", + "RichEditBox", + "AutoSuggestBox" + ] + } + ] + }, + { + "UniqueId": "Motion", + "Title": "Motion", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "ConnectedAnimation", + "Title": "Connected Animation", + "Subtitle": "Connected animations continue elements during page navigation and help the user maintain their context between views.", + "ImagePath": "ms-appx:///Assets/ControlImages/ConnectedAnimation.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ConnectedAnimationsIcon.png", + "Description": "Connected animations continue elements during page navigation and help the user maintain their context between views.", + "Content": "

Look at the ConnectedAnimationPage.xaml and ConnectedAnimationPage.xaml.cs files in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ConnectedAnimation - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.connectedanimation" + }, + { + "Title": "ConnectedAnimationService - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.connectedanimationservice" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/connected-animation" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "PageTransition", + "ThemeTransition" + ] + }, + { + "UniqueId": "EasingFunction", + "Title": "Easing Functions", + "Subtitle": "Easing is a way to manipulate the velocity of an object as it animates.", + "ImagePath": "ms-appx:///Assets/ControlImages/EasingFunction.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/EasingFunctionsIcon.png", + "Description": "Easing is a way to manipulate the velocity of an object as it animates.", + "Content": "

Look at the EasingFunctionPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "EasingFunctionBase - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.easingfunctionbase" + }, + { + "Title": "Timing and Easing", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/timing-and-easing" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "ConnectedAnimation", + "PageTransition", + "ThemeTransition" + ] + }, + { + "UniqueId": "PageTransition", + "Title": "Page Transitions", + "Subtitle": "Page transitions provide visual feedback about the relationship between pages.", + "ImagePath": "ms-appx:///Assets/ControlImages/PageTransition.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", + "Description": "Page transitions provide visual feedback about the relationship between pages.", + "Content": "

Look at the PageTransitionPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "NavigationThemeTransition - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Media.Animation.NavigationThemeTransition" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/page-transitions" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "ConnectedAnimation", + "ThemeTransition" + ] + }, + { + "UniqueId": "ThemeTransition", + "Title": "Theme Transitions", + "Subtitle": "Theme transitions are pre-packaged, easy-to-apply animations.", + "ImagePath": "ms-appx:///Assets/ControlImages/ThemeTransition.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", + "Description": "Theme transitions are pre-packaged, easy-to-apply animations.", + "Content": "

Look at the ThemeTransitionPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Transitions - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/xaml-animation#animations-available-in-the-library" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "ImplicitTransition", + "PageTransition" + ] + }, + { + "UniqueId": "XamlCompInterop", + "Title": "Animation interop", + "Subtitle": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more.", + "ImagePath": "ms-appx:///Assets/ControlImages/AnimationInterop.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/StoryboardAnimationIcon.png", + "IsNew": false, + "IsUpdated": false, + "Description": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more", + "Content": "

Look at the XamlCompInteropPage.xaml.cs file in Visual Studio to see the full code for this page.

", + "Docs": [ + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + }, + { + "Title": "Composition Animation - API", + "Uri": "https://docs.microsoft.com/windows/uwp/composition/composition-animation" + }, + { + "Title": "Guidelines - Xaml Property Animations", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/xaml-property-animations" + }, + { + "Title": "Using the Visual Layer with XAML", + "Uri": "https://docs.microsoft.com/windows/uwp/composition/using-the-visual-layer-with-xaml" + } + ], + "RelatedControls": [ + "EasingFunction" + ] + }, + { + "UniqueId": "ImplicitTransition", + "Title": "Implicit Transitions", + "Subtitle": "Use Implicit Transitions to automatically animate changes to properties.", + "ImagePath": "ms-appx:///Assets/ControlImages/ImplicitTransition.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", + "IsNew": false, + "IsUpdated": false, + "Description": "Use Implicit Transitions to automatically animate changes to properties.", + "Content": "

Look at the ImplicitTransitionPage.xaml file in Visual Studio to see the full code for this page.

", + "Docs": [ + { + "Title": "Transitions - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/motion-in-practice#implicit-animations" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "PageTransition", + "ThemeTransition" + ] + }, + { + "UniqueId": "ParallaxView", + "Title": "ParallaxView", + "Subtitle": "A container control that provides the parallax effect when scrolling.", + "ImagePath": "ms-appx:///Assets/ControlImages/ParallaxView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ParallaxViewIcon.png", + "Description": "A container control that provides the parallax effect when scrolling.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ParallaxView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.Parallaxview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/parallax" + } + ], + "RelatedControls": [ + "ScrollViewer" + ] + } + ] + }, + { + "UniqueId": "MultipleWindows", + "Title": "Windows", + "Subtitle": "", + "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "", + "Items": [ + { + "UniqueId": "CreateMultipleWindows", + "Title": "Create Multiple Windows", + "Subtitle": "An example showing the creation of single-threaded top level Xaml windows.", + "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "With Windows App SDK 1.0 we are allowing creation of single-threaded multiple top level Xaml windows in Desktop apps", + "Content": "

Look at the CreateMultipleWindowsPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "MultipleWindow - API", + "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" + } + ], + "RelatedControls": [] + }, + { + "UniqueId": "TitleBar", + "Title": "TitleBar", + "Subtitle": "An example showing a custom UIElement used as the titlebar for the app's window.", + "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "This sample shows how to use a custom UIElement as titlebar for app's window.", + "Content": "

Look at the TitleBarPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "TitleBar - API", + "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window.extendscontentintotitlebar?view=winui-3.0" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" + } + ], + "RelatedControls": [] + } + ] + } + ] } \ No newline at end of file From ae691561ce228af6572f07475af39d6ea7bd7dee Mon Sep 17 00:00:00 2001 From: Peter Date: Wed, 9 Oct 2024 02:05:48 +0800 Subject: [PATCH 3/3] Format using 2 spaces --- .../DataModel/ControlInfoData.json | 5402 ++++++++--------- 1 file changed, 2701 insertions(+), 2701 deletions(-) diff --git a/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoData.json b/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoData.json index 41aede01..7e3eb5c4 100644 --- a/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoData.json +++ b/source/iNKORE.UI.WPF.Modern.Gallery/DataModel/ControlInfoData.json @@ -1,2703 +1,2703 @@ { - "$schema": "ControlInfoDataSchema.json", - "Groups": [ - { - "UniqueId": "NewControls", - "Title": "Home", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [] - }, - { - "UniqueId": "AllControls", - "Title": "All controls", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [] - }, - { - "UniqueId": "MenusAndToolbars", - "Title": "Menus and Toolbars", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "XamlUICommand", - "Title": "XamlUICommand", - "Subtitle": "An object which is used to define the look and feel of a given command.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", - "Description": "An object which is used to define the look and feel of a given command, which can be reused across your app, and which is understood natively by the standard XAML controls.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-xamluicommand-class" - }, - { - "Title": "XamlUICommand - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.input.xamluicommand" - } - ], - "RelatedControls": [ - "StandardUICommand", - "AppBarButton", - "AppBarToggleButton", - "CommandBar" - ] - }, - { - "UniqueId": "StandardUICommand", - "Title": "StandardUICommand", - "Subtitle": "A StandardUICommand is a built-in 'XamlUICommand' which represents a commonly used command, e.g. 'Save'.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", - "Description": "StandardUICommands are a set of built-in XamlUICommands represeting commonly used commands. Including the look and feel of a given command, which can be reused across your app, and which is understood natively by the standard XAML controls. E.g. Save, Open, Copy, Paste, etc.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-standarduicommand-class" - }, - { - "Title": "StandardUICommand - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.input.standarduicommand" - } - ], - "RelatedControls": [ - "XamlUICommand", - "AppBarButton", - "AppBarToggleButton", - "CommandBar" - ] - }, - { - "UniqueId": "AppBarButton", - "Title": "AppBarButton", - "Subtitle": "A button that's styled for use in a CommandBar.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarButtonIcon.png", - "Description": "App bar buttons differ from standard buttons in several ways:\n- Their default appearance is a transparent background with a smaller size.\n- You use the Label and Icon properties to set the content instead of the Content property. The Content property is ignored.\n- The button's IsCompact property controls its size.", - "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.

Use the Label and Icon properties to define the content of the app bar buttons. Set the Label property to a string to specify the text label. The label is shown by default but is hidden when the button is in its compact state, so you also need to specify a meaningful icon. To do that, set the button's Icon property to an element derived from the IconElement class. Four kinds of icon elements are provided:

FontIcon - The icon is based on a glyph from the specified font family.

BitmapIcon - The icon is based on a bitmap image file with the specified Uri.

PathIcon - The icon is based on Path data.

SymbolIcon - The icon is based on a predefined list of glyphs from the Segoe UI Symbol font.

Look at the AppBarButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AppBarButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbarbutton" - }, - { - "Title": "SymbolIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" - }, - { - "Title": "FontIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" - }, - { - "Title": "BitmapIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" - }, - { - "Title": "PathIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" - } - ], - "RelatedControls": [ - "AppBarToggleButton", - "AppBarSeparator", - "CommandBar" - ] - }, - { - "UniqueId": "AppBarSeparator", - "Title": "AppBarSeparator", - "Subtitle": "A vertical line that's used to visually separate groups of commands in an app bar.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", - "Description": "An AppBarSeparator creates a vertical line to visually separate groups of commands in a app bar. It has a compact state with reduced padding to match the compact state of the AppBarButton and AppBarToggleButton controls.", - "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons and separators on this page change.

When the IsCompact property is true, the padding around the AppBarSeparator is reduced.

Look at the AppBarSeparatorPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AppBarSeparator - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbarseparator" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" - } - ], - "RelatedControls": [ - "AppBarButton", - "AppBarToggleButton", - "CommandBar" - ] - }, - { - "UniqueId": "AppBarToggleButton", - "Title": "AppBarToggleButton", - "Subtitle": "A button that can be on, off, or indeterminate like a CheckBox, and is styled for use in an app bar or other specialized UI.", - "ImagePath": "ms-appx:///Assets/ControlImages/AppBarToggleButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarToggleButtonIcon.png", - "Description": "An AppBarToggleButton looks like an AppBarButton, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.", - "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.

Look at the AppBarToggleButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AppBarToggleButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbartogglebutton" - }, - { - "Title": "SymbolIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" - }, - { - "Title": "FontIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" - }, - { - "Title": "BitmapIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" - }, - { - "Title": "PathIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" - } - ], - "RelatedControls": [ - "AppBarButton", - "AppBarSeparator", - "CommandBar" - ] - }, - { - "UniqueId": "CommandBar", - "Title": "CommandBar", - "Subtitle": "A toolbar for displaying application-specific commands that handles layout and resizing of its contents.", - "ImagePath": "ms-appx:///Assets/ControlImages/CommandBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CommandBarIcon.png", - "Description": "The CommandBar simplifies the creation of basic app bars by providing:\n- Automatic layout of commands, with primary commands on the right and secondary commands on the left.\n- Automatic resizing of app bar commands when the app size changes.\nWhen you need an app bar that contains only AppBarButton,AppBarToggleButton , and AppBarSeparator controls, use a CommandBar. If you need more complex content, such as images, progress bars, or text blocks, use an AppBar control.", - "Content": "

The bottom app bar on this page is a CommandBar control.

Add secondary commands and then resize the app to see how the CommandBar automatically adapts to different widths.

This CommandBar element is in the ItemPage so it can be shared across all control pages in the app. Look at the ItemPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CommandBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.commandbar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" - } - ], - "RelatedControls": [ - "AppBarButton", - "AppBarToggleButton", - "AppBarSeparator" - ] - }, - { - "UniqueId": "MenuBar", - "Title": "MenuBar", - "Subtitle": "A classic menu, allowing the display of MenuItems containing MenuFlyoutItems.", - "ImagePath": "ms-appx:///Assets/ControlImages/MenuBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", - "Description": "The Menubar simplifies the creation of basic applications by providing a set of menus at the top of the app or window.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "MenuBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.MenuBar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/menus" - } - ], - "RelatedControls": [ - "CommandBar", - "MenuFlyout", - "StandardUICommand", - "XamlUICommand" - ] - }, - { - "UniqueId": "CommandBarFlyout", - "Title": "CommandBarFlyout", - "Subtitle": "A mini-toolbar displaying proactive commands, and an optional menu of commands.", - "ImagePath": "ms-appx:///Assets/ControlImages/CommandBarFlyout.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CommandBarFlyoutIcon.png", - "Description": "A mini-toolbar which displays a set of proactive commands, as well as a secondary menu of commands if desired.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CommandBarFlyout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.commandbarflyout" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar-flyout" - } - ], - "RelatedControls": [ - "CommandBar", - "MenuFlyout", - "RichEditBox", - "TextBox", - "StandardUICommand", - "XamlUICommand" - ] - }, - { - "UniqueId": "MenuFlyout", - "Title": "MenuFlyout", - "Subtitle": "Shows a contextual list of simple commands or options.", - "ImagePath": "ms-appx:///Assets/ControlImages/MenuFlyout.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuFlyoutIcon.png", - "Description": "A MenuFlyout displays lightweight UI that is light dismissed by clicking or tapping off of it. Use it to let the user choose from a contextual list of simple commands or options.", - "Content": "

Look at the MenuFlyoutPage.xaml file in Visual Studio to see the full code.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "MenuFlyout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyout" - }, - { - "Title": "MenuFlyoutItem - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyoutitem" - }, - { - "Title": "MenuFlyoutSeparator - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyoutseparator" - }, - { - "Title": "ToggleMenuFlyoutItem - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.togglemenuflyoutitem" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/menus" - } - ], - "RelatedControls": [ - "Flyout", - "ContentDialog", - "Button", - "AppBarButton" - ] - }, - { - "UniqueId": "SwipeControl", - "Title": "SwipeControl", - "Subtitle": "Touch gesture for quick menu actions on items.", - "ImagePath": "ms-appx:///Assets/ControlImages/SwipeControl.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SwipeIcon.png", - "Description": "Touch gesture for quick menu actions on items.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "SwipeControl - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.swipecontrol" - }, - { - "Title": "SwipeItems - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.swipeitems" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/swipe" - }, - { - "Title": "Gesture Actions", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/collection-commanding" - } - ], - "RelatedControls": [ - "GridView", - "ListView" - ] - } - ] - }, - { - "UniqueId": "Collections", - "Title": "Collections", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "FlipView", - "Title": "FlipView", - "Subtitle": "Presents a collection of items that the user can flip through, one item at a time.", - "ImagePath": "ms-appx:///Assets/ControlImages/FlipView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/FlipViewIcon.png", - "Description": "The FlipView lets you flip through a collection of items, one at a time. It's great for displaying images from a gallery, pages of a magazine, or similar items.", - "Content": "

FlipView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Look at the FlipViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "FlipView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.flipview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/flipview" - } - ], - "RelatedControls": [ - "GridView", - "ListView", - "SemanticZoom" - ] - }, - { - "UniqueId": "GridView", - "Title": "GridView", - "Subtitle": "A control that presents a collection of items in rows and columns.", - "ImagePath": "ms-appx:///Assets/ControlImages/GridView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridViewIcon.png", - "Description": "The GridView lets you show a collection of items arranged in rows and columns that scroll horizontally.", - "Content": "

GridView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the GridViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "GridView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.gridview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/lists" - } - ], - "RelatedControls": [ - "ListView", - "FlipView", - "SemanticZoom" - ] - }, - { - "UniqueId": "ListBox", - "Title": "ListBox", - "Subtitle": "A control that presents an inline list of items that the user can select from.", - "ImagePath": "ms-appx:///Assets/ControlImages/ListBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListBoxIcon.png", - "Description": "Use a ListBox when you want the options to be visible all the time or when users can select more than one option at a time. ListBox controls are always open, which allows several items to be displayed to the user without user interaction.", - "Content": "

Look at the ListBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ListBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listbox" - }, - { - "Title": "ListBoxItem - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listboxitem" - } - ], - "RelatedControls": [ - "ComboBox", - "RadioButton", - "CheckBox", - "AutoSuggestBox" - ] - }, - { - "UniqueId": "ListView", - "Title": "ListView", - "Subtitle": "A control that presents a collection of items in a vertical list.", - "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListViewIcon.png", - "Description": "The ListView lets you show a collection of items in a list that scrolls vertically.", - "Content": "

ListView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "ListView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/listview-and-gridview" - }, - { - "Title": "Drag and Drop - Full Sample", - "Uri": "https://github.com/microsoft/Windows-universal-samples/tree/master/Samples/XamlDragAndDrop" - }, - { - "Title": "CollectionViewSource - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.Data.CollectionViewSource" - }, - { - "Title": "Filtering collections and lists through user input", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/listview-filtering" - }, - { - "Title": "Inverted Lists", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/inverted-lists" - }, - { - "Title": "Inverted Lists - Full Sample", - "Uri": "https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlBottomUpList" - } - ], - "RelatedControls": [ - "GridView", - "StandardUICommand", - "FlipView", - "SemanticZoom" - ] - }, - { - "UniqueId": "PullToRefresh", - "Title": "PullToRefresh", - "Subtitle": "Provides the ability to pull on a collection of items in a list/grid to refresh the contents of the collection.", - "ImagePath": "ms-appx:///Assets/ControlImages/PullToRefresh.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/PullToRefreshIcon.png", - "Description": "PullToRefresh lets a user pull down on a list of data using touch in order to retrieve more data. PullToRefresh is widely used on devices with a touch screen.", - "Content": "

PullToRefresh can be used for a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RefreshContainer - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RefreshContainer" - }, - { - "Title": "RefreshVisualizer - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RefreshVisualizer" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pull-to-refresh" - } - ] - }, - { - "UniqueId": "TreeView", - "Title": "TreeView", - "Subtitle": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items.", - "ImagePath": "ms-appx:///Assets/ControlImages/TreeView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TreeViewIcon.png", - "Description": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items. ", - "Content": "

PullToRefresh can be used for a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TreeView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.TreeView" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tree-view" - } - ] - }, - { - "UniqueId": "DataGrid", - "Title": "DataGrid", - "Subtitle": "The DataGrid control presents data in a customizable table of rows and columns.", - "ImagePath": "ms-appx:///Assets/ControlImages/GridView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridViewIcon.png", - "Description": "The DataGrid control provides a flexible way to display a collection of data in rows and columns.", - "Content": "The DataGrid control presents data in a customizable table of rows and columns.", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "DataGrid - API", - "Uri": "https://aka.ms/win10datagridapidoc" - }, - { - "Title": "Guidelines", - "Uri": "https://aka.ms/win10datagriddoc" - }, - { - "Title": "Windows Community Toolkit", - "Uri": "https://docs.microsoft.com/windows/communitytoolkit" - } - ], - "RelatedControls": [ - "GridView", - "TreeView" - ] - } - ] - }, - { - "UniqueId": "DateAndTime", - "Title": "Date and Time", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "CalendarDatePicker", - "Title": "CalendarDatePicker", - "Subtitle": "A control that lets users pick a date value using a calendar.", - "ImagePath": "ms-appx:///Assets/ControlImages/CalendarDatePicker.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CalendarDatePickerIcon.png", - "Description": "A control that lets users pick a date value using a calendar.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CalendarDatePicker - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.calendardatepicker" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/calendar-date-picker" - } - ], - "RelatedControls": [ - "DatePicker", - "CalendarView" - ] - }, - { - "UniqueId": "CalendarView", - "Title": "CalendarView", - "Subtitle": "A control that presents a calendar for a user to choose a date from.", - "ImagePath": "ms-appx:///Assets/ControlImages/CalendarView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CalendarViewIcon.png", - "Description": "CalendarView shows a larger view for showing and selecting dates. DatePicker by contrast has a compact view with inline selection.", - "Content": "

Look at the CalendarView.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CalendarView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.calendarview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/calendar-view" - } - ], - "RelatedControls": [ - "CalendarDatePicker", - "DatePicker", - "TimePicker" - ] - }, - { - "UniqueId": "DatePicker", - "Title": "DatePicker", - "Subtitle": "A control that lets a user pick a date value.", - "ImagePath": "ms-appx:///Assets/ControlImages/DatePicker.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DatePickerIcon.png", - "Description": "Use a DatePicker to let users set a date in your app, for example to schedule an appointment. The DatePicker displays three controls for month, date, and year. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.", - "Content": "

Look at the DatePickerPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "DatePicker - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.datepicker" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/date-picker" - } - ], - "RelatedControls": [ - "CalendarDatePicker", - "CalendarView", - "TimePicker" - ] - }, - { - "UniqueId": "TimePicker", - "Title": "TimePicker", - "Subtitle": "A configurable control that lets a user pick a time value.", - "ImagePath": "ms-appx:///Assets/ControlImages/TimePicker.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TimePickerIcon.png", - "Description": "Use a TimePicker to let users set a time in your app, for example to set a reminder. The TimePicker displays three controls for hour, minute, and AM/PM. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.", - "Content": "

Look at the TimePickerPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TimePicker - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.timepicker" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/time-picker" - } - ], - "RelatedControls": [ - "DatePicker", - "CalendarView" - ] - } - ] - }, - { - "UniqueId": "BasicInput", - "Title": "Basic Input", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "InputValidation", - "Title": "InputValidation", - "Subtitle": "A feature that will display an error for invalid text. The app is notified when text has been changed by the user and is responsible for determining whether the text is valid and the error message", - "ImagePath": "ms-appx:///Assets/ControlImages/TextBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBoxIcon.png", - "Description": "A feature to display developer-defined errors for text values", - "Content": "

Look at the InputValidationPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [], - "RelatedControls": [ - "TextBox", - "PasswordBox" - ] - }, - { - "UniqueId": "Button", - "Title": "Button", - "Subtitle": "A control that responds to user input and raises a Click event.", - "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", - "Description": "The Button control provides a Click event to respond to user input from a touch, mouse, keyboard, stylus, or other input device. You can put different kinds of content in a button, such as text or an image, or you can restyle a button to give it a new look.", - "Content": "

The main purpose of a Button is to make something happen when a user clicks it. There are two ways you can make something happen:

  • Handle the Click event.
  • Bind the Command property to an ICommand implementation that describes the command logic.

Buttons often have only simple string content, but you can use any object as content. You can also change the style and template to give them any look you want.

Look at the ButtonPage.xaml file in Visual Studio to see the custom button style and template definitions used on this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "Button - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.button" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" - } - ], - "RelatedControls": [ - "ToggleButton", - "RepeatButton", - "HyperlinkButton", - "AppBarButton" - ] - }, - { - "UniqueId": "DropDownButton", - "Title": "DropDownButton", - "Subtitle": "A button that displays a flyout of choices when clicked.", - "ImagePath": "ms-appx:///Assets/ControlImages/DropDownButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DropDownButtonIcon.png", - "Description": "A control that drops down a flyout of choices from which one can be chosen.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "DropDownButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.dropdownbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" - } - ], - "RelatedControls": [ - "SplitButton", - "ToggleSplitButton", - "ToggleButton", - "RepeatButton", - "HyperlinkButton", - "AppBarButton", - "CommandBar" - ] - }, - { - "UniqueId": "HyperlinkButton", - "Title": "HyperlinkButton", - "Subtitle": "A button that appears as hyperlink text, and can navigate to a URI or handle a Click event.", - "ImagePath": "ms-appx:///Assets/ControlImages/HyperlinkButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/HyperlinkButtonIcon.png", - "Description": "A HyperlinkButton appears as a text hyperlink. When a user clicks it, it opens the page you specify in the NavigateUri property in the default browser. Or you can handle its Click event, typically to navigate within your app.", - "Content": "

A HyperlinkButton looks like hyperlink text, but works like a button. You can use it in two ways:

  • Set the NavigateUri property. When a user clicks it, it will automatically open the URI in the default browser.
  • Handle the Click event. This works just like the Click event of a standard Button, and can be used to navigate within your app.

Each control page in this app has two sets of hyperlink buttons, one set to open documentation in Internet Explorer, and one set to navigate to related control pages in the app.

Look at the HyperlinkButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "HyperlinkButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.hyperlinkbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/hyperlinks" - } - ], - "RelatedControls": [ - "Button", - "ToggleButton", - "RepeatButton", - "AppBarButton" - ] - }, - { - "UniqueId": "RepeatButton", - "Title": "RepeatButton", - "Subtitle": "A button that raises its Click event repeatedly from the time it's pressed until it's released.", - "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", - "Description": "The RepeatButton control is like a standard Button, except that the Click event occurs continuously while the user presses the RepeatButton.", - "Content": "

A RepeatButton looks just like a regular Button, but it's Click event occurs continuously while the button is pressed.

Look at the RepeatButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RepeatButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.primitives.repeatbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" - } - ], - "RelatedControls": [ - "Button", - "ToggleButton", - "HyperlinkButton", - "AppBarButton" - ] - }, - { - "UniqueId": "ToggleButton", - "Title": "ToggleButton", - "Subtitle": "A button that can be switched between two states like a CheckBox.", - "ImagePath": "ms-appx:///Assets/ControlImages/ToggleButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleButtonIcon.png", - "Description": "A ToggleButton looks like a Button, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.", - "Content": "

ToggleButton is used as a base class for similar controls like CheckBox and RadioButton. It can be used on its own, but don't use it if a CheckBox, RadioButton, or ToggleSwitch would convey your intent better.

Look at the ToggleButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ToggleButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.primitives.togglebutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons#create-a-toggle-split-button" - } - ], - "RelatedControls": [ - "Button", - "AppBarToggleButton", - "ToggleSwitch", - "CheckBox", - "CommandBarFlyout", - "CommandBar" - ] - }, - { - "UniqueId": "SplitButton", - "Title": "SplitButton", - "Subtitle": "A two-part button that displays a flyout when its secondary part is clicked.", - "ImagePath": "ms-appx:///Assets/ControlImages/SplitButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SplitButtonIcon.png", - "Description": "The splitbutton is a dropdown button, but with an addition execution hit target.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "SplitButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.splitbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons#create-a-split-button" - } - ], - "RelatedControls": [ - "Button", - "AppBarToggleButton", - "CommandBar", - "ToggleSwitch", - "CheckBox", - "CommandBarFlyout", - "CommandBar" - ] - }, - { - "UniqueId": "ToggleSplitButton", - "Title": "ToggleSplitButton", - "Subtitle": "A version of the SplitButton where the activation target toggles on/off.", - "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSplitButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleSplitButtonIcon.png", - "Description": "A version of the SplitButton where the activation target toggles on/off.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ToggleSplitButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.togglesplitbutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" - } - ], - "RelatedControls": [ - "Button", - "AppBarToggleButton", - "ToggleSwitch", - "CheckBox", - "CommandBarFlyout", - "CommandBar" - ] - }, - { - "UniqueId": "CheckBox", - "Title": "CheckBox", - "Subtitle": "A control that a user can select or clear.", - "ImagePath": "ms-appx:///Assets/ControlImages/CheckBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CheckBoxIcon.png", - "Description": "CheckBox controls let the user select a combination of binary options. In contrast, RadioButton controls allow the user to select from mutually exclusive options. The indeterminate state is used to indicate that an option is set for some, but not all, child options. Don't allow users to set an indeterminate state directly to indicate a third option.", - "Content": "

Check and uncheck these controls to see how they look in each state. The label for each CheckBox is defined by its Content property.

Use a three-state CheckBox to show that none, some, or all of an items sub-options are checked. You have to add some code to do this. Take a look at the methods in the SelectAllMethods region of CheckBoxPage.xaml.cs to see how we did it.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "CheckBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.checkbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/checkbox" - } - ], - "RelatedControls": [ - "RadioButton", - "ToggleSwitch", - "ToggleButton" - ] - }, - { - "UniqueId": "ColorPicker", - "Title": "ColorPicker", - "Subtitle": "A control that displays a selectable color spectrum.", - "ImagePath": "ms-appx:///Assets/ControlImages/ColorPicker.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ColorPickerIcon.png", - "Description": "A selectable color spectrum.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ColorPicker - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.ColorPicker" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/color-picker" - } - ], - "RelatedControls": [ - "ComboBox" - ] - }, - { - "UniqueId": "ComboBox", - "Title": "ComboBox", - "Subtitle": "A drop-down list of items a user can select from.", - "ImagePath": "ms-appx:///Assets/ControlImages/ComboBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ComboBoxIcon.png", - "Description": "Use a ComboBox when you need to conserve on-screen space and when users select only one option at a time. A ComboBox shows only the currently selected item.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ComboBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.combobox" - }, - { - "Title": "ComboBoxItem - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.comboboxitem" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/combo-box" - } - ], - "RelatedControls": [ - "ListBox", - "RadioButton", - "CheckBox", - "ListView", - "AutoSuggestBox", - "RatingControl" - ] - }, - { - "UniqueId": "RadioButton", - "Title": "RadioButton", - "Subtitle": "A control that allows a user to select a single option from a group of options.", - "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RadioButtonIcon.png", - "Description": "Use RadioButtons to let a user choose between mutually exclusive, related options. Generally contained within a RadioButtons group control.", - "Content": "

Look at the RadioButtonPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RadioButton - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.radiobutton" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/radio-button" - } - ], - "RelatedControls": [ - "CheckBox", - "RadioButtons", - "ToggleSwitch", - "ToggleButton" - ] - }, - { - "UniqueId": "RatingControl", - "Title": "RatingControl", - "Subtitle": "Rate something 1 to 5 stars.", - "ImagePath": "ms-appx:///Assets/ControlImages/RatingControl.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RatingControlIcon.png", - "Description": "Rate something 1 to 5 stars.", - "Content": "", - "IsNew": false, - "Docs": [ - { - "Title": "RatingControl - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RatingControl" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/rating" - } - ], - "RelatedControls": [ - "Slider", - "ComboBox" - ] - }, - { - "UniqueId": "Slider", - "Title": "Slider", - "Subtitle": "A control that lets the user select from a range of values by moving a Thumb control along a track.", - "ImagePath": "ms-appx:///Assets/ControlImages/Slider.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SliderIcon.png", - "Description": "Use a Slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).", - "Content": "

Look at the SliderPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Slider - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.slider" - }, - { - "Title": "Guidelines", - "Uri": "http://docs.microsoft.com/windows/apps/design/controls/slider" - } - ], - "RelatedControls": [ - "ComboBox", - "ListBox", - "RatingControl" - ] - }, - { - "UniqueId": "ToggleSwitch", - "Title": "ToggleSwitch", - "Subtitle": "A switch that can be toggled between 2 states.", - "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSwitch.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleSwitchIcon.png", - "Description": "Use ToggleSwitch controls to present users with exactly two mutually exclusive options (like on/off), where choosing an option results in an immediate commit. A toggle switch should have a single label.", - "Content": "

Look at the ToggleSwitchPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ToggleSwitch - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.toggleswitch" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/toggles" - } - ], - "RelatedControls": [ - "ToggleButton", - "RadioButton", - "CheckBox", - "AppBarToggleButton" - ] - } - ] - }, - { - "UniqueId": "StatusAndInfo", - "Title": "Status and Info", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "AutomationProperties", - "Title": "AutomationProperties", - "Subtitle": "Attributes that help with writing accessible XAML.", - "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", - "Description": "The AutomationProperties attributes provide functionality around accessible components.", - "Content": "

The aim of AutomationProperties is to enable components that are accessible to screen readers.", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AutomationProperties - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.automation.automationproperties" - }, - { - "Title": "Accessibility Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/accessibility/accessibility" - } - ], - "RelatedControls": [ - "TextBlock", - "Image" - ] - }, - { - "UniqueId": "InfoBadge", - "Title": "InfoBadge", - "Subtitle": "An non-intrusive UI to display notifications or bring focus to an area", - "ImagePath": "ms-appx:///Assets/ControlImages/InfoBadge.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", - "Description": "Badging is a non-intrusive and intuitive way to display notifications or bring focus to an area within an app - whether that be for notifications, indicating new content, or showing an alert.", - "Content": "

Look at the InfoBadgePage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "InfoBadge - API", - "Uri": "https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.infobadge" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/infobadge" - } - ], - "RelatedControls": [ - "InfoBar", - "TeachingTip" - ] - }, - { - "UniqueId": "InfoBar", - "Title": "InfoBar", - "Subtitle": "An inline message to display app-wide status change information", - "ImagePath": "ms-appx:///Assets/ControlImages/InfoBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", - "Description": "Use an InfoBar control when a user should be informed of, acknowledge, or take action on a changed application state. By default the notification will remain in the content area until closed by the user but will not necessarily break user flow.", - "Content": "

Look at the InfoBarPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "InfoBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.infobar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/infobar" - } - ], - "RelatedControls": [ - "TeachingTip", - "ContentDialog" - ] - }, - { - "UniqueId": "ProgressBar", - "Title": "ProgressBar", - "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that doesn't block user interaction.", - "ImagePath": "ms-appx:///Assets/ControlImages/ProgressBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ProgressBarIcon.png", - "Description": "The ProgressBar has two different visual representations:\nIndeterminate - shows that a task is ongoing, but doesn't block user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.", - "Content": "

Look at the ProgressBarPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ProgressBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.ProgressBar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/progress-controls" - } - ], - "RelatedControls": [ - "ProgressRing" - ] - }, - { - "UniqueId": "ProgressRing", - "Title": "ProgressRing", - "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that does block user interaction.", - "ImagePath": "ms-appx:///Assets/ControlImages/ProgressRing.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ProgressRingIcon.png", - "Description": "The ProgressRing has two different visual representations:\nIndeterminate - shows that a task is ongoing, but blocks user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.", - "Content": "

Look at the ProgressRingPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "ProgressRing - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.progressring" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/progress-controls" - } - ], - "RelatedControls": [ - "ProgressBar" - ] - }, - { - "UniqueId": "ToolTip", - "Title": "ToolTip", - "Subtitle": "Displays information for an element in a pop-up window.", - "ImagePath": "ms-appx:///Assets/ControlImages/ToolTip.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToolTipIcon.png", - "Description": "A ToolTip shows more information about a UI element. You might show information about what the element does, or what the user should do. The ToolTip is shown when a user hovers over or presses and holds the UI element.", - "Content": "

Look at the ToolTipPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ToolTip - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.tooltip" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tooltips" - } - ], - "RelatedControls": [ - "TeachingTip", - "Flyout", - "ContentDialog" - ] - } - ] - }, - { - "UniqueId": "DialogsAndFlyouts", - "Title": "Dialogs and Flyouts", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "ContentDialog", - "Title": "ContentDialog", - "Subtitle": "A dialog box that can be customized to contain any XAML content.", - "ImagePath": "ms-appx:///Assets/ControlImages/ContentDialog.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "Use a ContentDialog to show relavant information or to provide a modal dialog experience that can show any XAML content.", - "Content": "

Look at the ContentDialog.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "ContentDialog - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.contentdialog" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/dialogs" - } - ], - "RelatedControls": [ - "Flyout", - "MenuFlyout", - "TeachingTip", - "ToolTip" - ] - }, - { - "UniqueId": "Flyout", - "Title": "Flyout", - "Subtitle": "Shows contextual information and enables user interaction.", - "ImagePath": "ms-appx:///Assets/ControlImages/Flyout.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/FlyoutIcon.png", - "Description": "A Flyout displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be light dismissed by clicking or tapping off of it. Use it to collect input from the user, show more details about an item, or ask the user to confirm an action.", - "Content": "

Look at the FlyoutPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Flyout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.flyout" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts" - } - ], - "RelatedControls": [ - "TeachingTip", - "ContentDialog", - "MenuFlyout", - "Button", - "AppBarButton" - ] - }, - { - "UniqueId": "TeachingTip", - "Title": "TeachingTip", - "Subtitle": "A content-rich flyout for guiding users and enabling teaching moments.", - "ImagePath": "ms-appx:///Assets/ControlImages/TeachingTip.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TeachingTipIcon.png", - "Description": "The XAML TeachingTip Control provides a way for your app to guide and inform users in your application with a non-invasive and content rich notification. TeachingTip can be used for bringing focus to a new or important feature, teaching users how to perform a task, or enhancing the user workflow by providing contextually relevant information to their task at hand.", - "Content": "

Look at the TeachingTip.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TeachingTip - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.teachingtip" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/teaching-tip" - } - ], - "RelatedControls": [ - "ContentDialog", - "Flyout", - "ToolTip" - ] - } - ] - }, - { - "UniqueId": "Scrolling", - "Title": "Scrolling", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "PipsPager", - "Title": "PipsPager", - "Subtitle": "A control to let the user navigate through a paginated collection when the page numbers do not need to be visually known.", - "ImagePath": "ms-appx:///Assets/ControlImages/PipsPager.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "A PipsPager allows the user to navigate through a paginated collection and is independent of the content shown. Use this control when the content in the layout is not explicitly ordered by relevancy or you desire a glyph-based representation of numbered pages. PipsPagers are commonly used in photo viewers, app lists, carousels, and when display space is limited.", - "Content": "

Look at the PipsPagerPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "PipsPager - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pipspager" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pipspager" - } - ], - "RelatedControls": [ - "ScrollViewer", - "FlipView", - "ItemsRepeater" - ] - }, - { - "UniqueId": "ScrollViewer", - "Title": "ScrollViewer", - "Subtitle": "A container control that lets the user pan and zoom its content.", - "ImagePath": "ms-appx:///Assets/ControlImages/ScrollViewer.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ScrollViewerIcon.png", - "Description": "A ScrollViewer lets a user scroll, pan, and zoom to see content that's larger than the viewable area. Many content controls, like ListView, have ScrollViewers built into their control templates to provide automatic scrolling.", - "Content": "

Look at the ScrollViewerPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ScrollViewer - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.scrollviewer" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/scroll-controls" - } - ], - "RelatedControls": [ - "ViewBox", - "Canvas", - "Grid", - "StackPanel", - "RelativePanel", - "ParallaxView" - ] - }, - { - "UniqueId": "SemanticZoom", - "Title": "SemanticZoom", - "Subtitle": "Lets the user zoom between two different views of a collection, making it easier to navigate through large collections of items.", - "ImagePath": "ms-appx:///Assets/ControlImages/SemanticZoom.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "The SemanticZoom lets you show grouped data in two different ways, and is useful for quickly navigating through large sets of data.", - "Content": "

Look at the SemanticZoomPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "SemanticZoom - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.semanticzoom" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/semantic-zoom" - } - ], - "RelatedControls": [ - "GridView", - "ListView" - ] - } - ] - }, - { - "UniqueId": "Layout", - "Title": "Layout", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "Use layout controls to arrange the controls and content in your app.", - "Items": [ - { - "UniqueId": "Border", - "Title": "Border", - "Subtitle": "A container control that draws a boundary line, background, or both, around another object.", - "ImagePath": "ms-appx:///Assets/ControlImages/Border.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/BorderIcon.png", - "Description": "Use a Border control to draw a boundary line, background, or both, around another object. A Border can contain only one child object.", - "Content": "

A Border can contain only one child object. If you want to put a border around multiple objects, first wrap them in a container object such as StackPanel and make the StackPanel the child of the Border.

You can change the appearance of a Border by setting basic properties:

  • Width/Height
  • BorderBrush
  • BorderThickness
  • Background

Most of the control pages in this app have XAML blocks to show basic usage. The appearance of the XAML blocks is defined by a Border control. Look at the CodeBorderStyle resource in App.xaml to see the Style that's applied to the Borders.

Look at the BorderPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Border - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.border" - } - ], - "RelatedControls": [ - "Canvas", - "Grid", - "StackPanel", - "VariableSizedWrapGrid", - "RelativePanel" - ] - }, - { - "UniqueId": "Canvas", - "Title": "Canvas", - "Subtitle": "A layout panel that supports absolute positioning of child elements relative to the top left corner of the canvas.", - "ImagePath": "ms-appx:///Assets/ControlImages/Canvas.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CanvasIcon.png", - "Description": "The Canvas provides absolute positioning of controls or content. Content is positioned relative to the Canvas using the Canvas.Top and Canvas.Left attached properties.", - "Content": "

Items are positioned on the Canvas using the Canvas.Top and Canvas.Left attached properties. Use the sliders to change these properties for the red rectangle and see how it moves around.

To see the effect of the ZIndex attached property, make sure the red rectangle is overlapping the other rectangles.

Look at the CanvasPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Canvas - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.canvas" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" - } - ], - "RelatedControls": [ - "Border", - "Grid", - "StackPanel", - "VariableSizedWrapGrid", - "RelativePanel" - ] - }, - { - "UniqueId": "Expander", - "Title": "Expander", - "Subtitle": "A container with a header that can be expanded to show a body with more content.", - "ImagePath": "ms-appx:///Assets/ControlImages/Expander.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "The Expander has a header and can expand to show a body with more content. Use an Expander when some content is only relevant some of the time (for example to read more information or access additional options for an item).", - "Content": "Look at the ExpanderPage.xaml file in Visual Studio to see the full code for this page.", - "IsNew": true, - "Docs": [ - { - "Title": "Expander - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.expander" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/expander" - } - ], - "RelatedControls": [ - "Flyout", - "ItemsRepeater", - "SplitView" - ] - }, - { - "UniqueId": "ItemsRepeater", - "Title": "ItemsRepeater", - "Subtitle": "A flexible, primitive control for data-driven layouts.", - "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListViewIcon.png", - "Description": "The ItemsRepeater is like a markup-based loop that supports virtualization.", - "Content": "

A ItemsRepeater is more basic than an ItemsControl. It does not have default styling or a control template. It can contain a collection of items of any type. To populate the view, set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

And, optionally set the Layout to define how items are sized and positioned. By default, it uses a simple vertical stacking layout.

Look at the ItemsRepeaterPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ItemsRepeater - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.itemsrepeater" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/items-repeater" - }, - { - "Title": "StackLayout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.stacklayout" - }, - { - "Title": "UniformGridLayout - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.uniformgridlayout" - } - ], - "RelatedControls": [ - "ScrollViewer", - "ListView", - "GridView" - ] - }, - { - "UniqueId": "Grid", - "Title": "Grid", - "Subtitle": "A layout panel that supports arranging child elements in rows and columns. ", - "ImagePath": "ms-appx:///Assets/ControlImages/Grid.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridIcon.png", - "Description": "The Grid is used to arrange controls and content in rows and columns. Content is positioned in the grid using Grid.Row and Grid.Column attached properties.", - "Content": "

Look at the GridPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Grid - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.grid" - }, - { - "Title": "Tutorial", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/grid-tutorial" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels#grid" - } - ], - "RelatedControls": [ - "Border", - "Canvas", - "StackPanel", - "VariableSizedWrapGrid", - "RelativePanel" - ] - }, - { - "UniqueId": "RadioButtons", - "Title": "RadioButtons", - "Subtitle": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.", - "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RadioButtonsIcon.png", - "Description": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.", - "Content": "

Look at the RadioButtonsPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RadioButtons - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.radiobuttons" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/radio-button" - } - ], - "RelatedControls": [ - "CheckBox", - "RadioButton", - "ToggleSwitch", - "ToggleButton" - ] - }, - { - "UniqueId": "RelativePanel", - "Title": "RelativePanel", - "Subtitle": "A panel that uses relationships between elements to define layout.", - "ImagePath": "ms-appx:///Assets/ControlImages/RelativePanel.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RelativePanelIcon.png", - "Description": "Use a RelativePanel to layout elements by defining the relationships between elements and in relation to the panel.", - "Content": "

Look at the RelativePanelPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RelativePanel - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.relativepanel" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" - } - ], - "RelatedControls": [ - "Grid", - "StackPanel", - "Border", - "Canvas", - "ViewBox" - ] - }, - { - "UniqueId": "SplitView", - "Title": "SplitView", - "Subtitle": "A container that has 2 content areas, with multiple display options for the pane.", - "ImagePath": "ms-appx:///Assets/ControlImages/SplitView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SplitViewIcon.png", - "Description": "Use a SplitView to display content, such as navigation options, in a pane on the side. There are multiple options for displaying the pane, namely CompactOverlay, Compact, Overlay, Inline. If you are looking for a reference to the hamburger pattern, please see the links in the documentation below.", - "Content": "

Look at the SplitViewPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "SplitView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.splitview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/split-view" - } - ], - "RelatedControls": [ - "StackPanel", - "ListView", - "GridView", - "Grid", - "RelativePanel" - ] - }, - { - "UniqueId": "StackPanel", - "Title": "StackPanel", - "Subtitle": "A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.", - "ImagePath": "ms-appx:///Assets/ControlImages/StackPanel.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/StackPanelIcon.png", - "Description": "A StackPanel is used to arrange items in a line, either horizontally or vertically.", - "Content": "

Look at the StackPanelPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "StackPanel - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.stackpanel" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" - } - ], - "RelatedControls": [ - "Border", - "Canvas", - "Grid", - "VariableSizedWrapGrid", - "RelativePanel" - ] - }, - { - "UniqueId": "VariableSizedWrapGrid", - "Title": "VariableSizedWrapGrid", - "Subtitle": "A layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns.", - "ImagePath": "ms-appx:///Assets/ControlImages/VariableSizedWrapGrid.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/VariableSizedWrapGridIcon.png", - "Description": "A VariableSizedWrapGrip is used to create grid layouts where content can span multiple rows and columns.", - "Content": "

Elements are arranged in rows or columns that automatically wrap to a new row or column when the MaximumRowsOrColumns value is reached.

Whether elements are arranged in rows or columns is specified by the Orientation property.

Elements can span multiple rows and columns using VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties.

Elements are sized as specified by the ItemHeight and ItemWidth properties.

Look at the VariableSizedWrapGridPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "VariableSizedWrapGrid - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.variablesizedwrapgrid" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" - } - ], - "RelatedControls": [ - "Border", - "Canvas", - "Grid", - "StackPanel", - "RelativePanel" - ] - }, - { - "UniqueId": "ViewBox", - "Title": "ViewBox", - "Subtitle": "A container control that scales its content to a specified size.", - "ImagePath": "ms-appx:///Assets/ControlImages/ViewBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ViewBoxIcon.png", - "Description": "Use a ViewBox control scale content up or down to a specified size.", - "Content": "

Look at the ViewBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Viewbox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.viewbox" - } - ], - "RelatedControls": [ - "ScrollViewer", - "Canvas", - "Grid", - "StackPanel", - "RelativePanel" - ] - } - ] - }, - { - "UniqueId": "Navigation", - "Title": "Navigation", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "BreadcrumbBar", - "Title": "BreadcrumbBar", - "Subtitle": "Shows the trail of navigation taken to the current location.", - "ImagePath": "ms-appx:///Assets/ControlImages/BreadcrumbBar.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "The BreadcrumbBar control provides a common horizontal layout to display the trail of navigation taken to the current location. Resize to see the nodes crumble, starting at the root.", - "Content": "

Look at the BreadcrumbBarPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "BreadcrumbBar - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.breadcrumbbar" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/breadcrumbbar" - } - ], - "RelatedControls": [ - "NavigationView", - "Pivot", - "TabView" - ] - }, - { - "UniqueId": "NavigationView", - "Title": "NavigationView", - "Subtitle": "Common vertical layout for top-level areas of your app via a collapsible navigation menu.", - "ImagePath": "ms-appx:///Assets/ControlImages/NavigationView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/NavigationViewIcon.png", - "Description": "The navigation view control provides a common vertical layout for top-level areas of your app via a collapsible navigation menu.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "NavigationView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.NavigationView" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/navigationview" - } - ], - "RelatedControls": [ - "SplitView", - "Pivot" - ] - }, - { - "UniqueId": "Pivot", - "Title": "Pivot", - "Subtitle": "Presents information from different sources in a tabbed view.", - "ImagePath": "ms-appx:///Assets/ControlImages/Pivot.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/PivotIcon.png", - "Description": "A Pivot allows you to show a collection of items from different sources in a tabbed view.", - "Content": "

This page shows a simplified Pivot control with minimal content to demonstrate basic Pivot usage. Look at the PivotPage.xaml file in Visual Studio to see the full code for this page.

A Pivot control typically takes up the full page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Pivot - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pivot" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pivot" - } - ], - "RelatedControls": [ - "SemanticZoom", - "ListView", - "GridView" - ] - }, - { - "UniqueId": "TabView", - "Title": "TabView", - "Subtitle": "A control that displays a collection of tabs that can be used to display several documents.", - "ImagePath": "ms-appx:///Assets/ControlImages/TabView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "TabView provides the user with a collection of tabs that can be used to display several documents.", - "Content": "", - "IsNew": false, - "IsUpdated": true, - "IsPreview": false, - "Docs": [ - { - "Title": "TabView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.tabview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tab-view" - }, - { - "Title": "Show multiple views for an app", - "Uri": "https://docs.microsoft.com/windows/apps/design/layout/show-multiple-views" - } - ], - "RelatedControls": [ - "Pivot", - "NavigationView", - "ListView" - ] - } - ] - }, - { - "UniqueId": "Media", - "Title": "Media", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "AnimatedVisualPlayer", - "Title": "AnimatedVisualPlayer", - "Subtitle": "An element to render and control playback of motion graphics.", - "ImagePath": "ms-appx:///Assets/ControlImages/AnimatedVisualPlayer.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AnimationsIcon.png", - "Description": "An element to render and control playback of motion graphics.", - "Content": "

Look at the AnimatedVisualPlayerPage.xaml and AnimatedVisualPlayerPage.xaml.cs files in Visual Studio to see the full code for this page.

", - "IsNew": false, - "Docs": [ - { - "Title": "AnimatedVisualPlayer - API", - "Uri": "https://www.docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedvisualplayer" - }, - { - "Title": "Full Samples", - "Uri": "ms-windows-store://pdp/?productid=9N3J5TG8FF7F" - }, - { - "Title": "Tutorials", - "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie#tutorials" - }, - { - "Title": "Lottie Overview", - "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie" - }, - { - "Title": "Lottie Windows - GitHub", - "Uri": "https://github.com/CommunityToolkit/Lottie-Windows" - } - ] - }, - { - "UniqueId": "Image", - "Title": "Image", - "Subtitle": "A control to display image content.", - "ImagePath": "ms-appx:///Assets/ControlImages/Image.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ImageIcon.png", - "Description": "You can use an Image control to show and scale images.", - "Content": "

Look at the ImagePage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Image - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.image" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/images-imagebrushes" - } - ], - "RelatedControls": [ - "MediaPlayerElement", - "PersonPicture" - ] - }, - { - "UniqueId": "MediaPlayerElement", - "Title": "MediaPlayerElement", - "Subtitle": "A control to display video and image content.", - "ImagePath": "ms-appx:///Assets/ControlImages/MediaPlayerElement.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/MediaElementIcon.png", - "Description": "You can use a MediaPlayerElement control to playback videos and show images. You can show transport controls or make the video autoplay.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "MediaPlayerElement - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.MediaPlayerElement" - }, - { - "Title": "Media Playback", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/media-playback" - } - ], - "RelatedControls": [ - "Image" - ] - }, - { - "UniqueId": "PersonPicture", - "Title": "PersonPicture", - "Subtitle": "Displays the picture of a person/contact.", - "ImagePath": "ms-appx:///Assets/ControlImages/PersonPicture.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/PersonPictureIcon.png", - "Description": "Displays the picture of a person/contact.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "PersonPicture - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.PersonPicture" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/person-picture" - } - ], - "RelatedControls": [ - "Image" - ] - }, - { - "UniqueId": "Sound", - "Title": "Sound", - "Subtitle": "A code-behind only API that enables 2D and 3D UI sounds on all XAML controls.", - "ImagePath": "ms-appx:///Assets/ControlImages/Sound.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SoundIcon.png", - "Description": "Sound is enabled by default for UWP apps running on Xbox, but can be set to always play on all devices if desired. Sound may also be put into Spatial Audio mode for a more immersive 10ft experience.", - "Content": "

Look at the SoundPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Sound - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.elementsoundplayer" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/sound" - } - ] - }, - { - "UniqueId": "WebView2", - "Title": "WebView2", - "Subtitle": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", - "ImagePath": "ms-appx:///Assets/ControlImages/WebView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/WebViewIcon.png", - "Description": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", - "Content": "", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "WebView2 - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.webview2?view=winui-3.0" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/winui" - }, - { - "Title": "Examples", - "Uri": "https://github.com/MicrosoftEdge/WebView2Samples" - } - ] - } - ] - }, - { - "UniqueId": "Styles", - "Title": "Styles", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "Acrylic", - "Title": "AcrylicBrush", - "Subtitle": "A translucent material recommended for panel backgrounds.", - "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AcrylicBrushIcon.png", - "Description": "A translucent material recommended for panel backgrounds.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "AcrylicBrush - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.acrylicbrush" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/acrylic" - } - ], - "RelatedControls": [ - "SystemBackdrops" - ] - }, - { - "UniqueId": "AnimatedIcon", - "Title": "AnimatedIcon", - "Subtitle": "An element that displays and controls an icon that animates when the user interacts with the control.", - "ImagePath": "ms-appx:///Assets/ControlImages/AnimatedIcon.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AnimationsIcon.png", - "Description": "An element that displays and controls an icon that animates when the user interacts with the control.", - "Content": "

Look at the AnimatedIconPage.xaml and AnimatedIconPage.xaml.cs files in Visual Studio to see the full code for this page.

", - "IsNew": true, - "Docs": [ - { - "Title": "AnimatedIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedicon" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/animated-icon" - }, - { - "Title": "Lottie Overview", - "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie" - }, - { - "Title": "Lottie Windows - GitHub", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedvisualplayer" - } - ] - }, - { - "UniqueId": "IconElement", - "Title": "IconElement", - "Subtitle": "Represents icon controls that use different image types as its content.", - "ImagePath": "ms-appx:///Assets/ControlImages/IconElement.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ImageIcon.png", - "Description": "Represents icon controls that use different image types as its content.", - "Content": "

Look at the IconElementPage.xaml and IconElementPage.xaml.cs files in Visual Studio to see the full code for this page.

", - "IsNew": true, - "Docs": [ - { - "Title": "BitmapIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" - }, - { - "Title": "FontIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" - }, - { - "Title": "ImageIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.imageicon" - }, - { - "Title": "PathIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" - }, - { - "Title": "SymbolIcon - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" - }, - { - "Title": "Icon Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/icons" - } - ], - "RelatedControls": [ - "AnimatedIcon", - "AppBarButton", - "MenuFlyoutItem" - ] - }, - { - "UniqueId": "RadialGradientBrush", - "Title": "RadialGradientBrush", - "Subtitle": "A brush to show radial gradients", - "ImagePath": "ms-appx:///Assets/ControlImages/Canvas.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CanvasIcon.png", - "Description": "Paints an area with a radial gradient. A center point defines the beginning of the gradient, and a radius defines the end point of the gradient.", - "Content": "The RadialGradientBrush is similar in programming model to the LinearGradientBrush. However, the linear gradient has a start and an end point to define the gradient vector, while the radial gradient has a circle, along with a focal point, to define the gradient behavior. The circle defines the end point of the gradient. The parameters can be provided as a ratio or absolute value by picking the mapping mode.", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "RadialGradientBrush - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.RadialGradientBrush" - } - ], - "RelatedControls": [ - "Acrylic", - "ColorPaletteResources" - ] - }, - { - "UniqueId": "RevealFocus", - "Title": "Reveal Focus", - "Subtitle": "Customize the style of your focus rectangles.", - "ImagePath": "ms-appx:///Assets/ControlImages/RevealFocus.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RevealFocusIcon.png", - "Description": "Reveal focus allows you to adapt focus rectangles to look like the focus rectangles available on Xbox.", - "Content": "

Look at the RevealFocusPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Reveal Focus - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.application.focusvisualkind#Windows_UI_Xaml_Application_FocusVisualKind" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/reveal-focus" - } - ], - "RelatedControls": [] - }, - { - "UniqueId": "ColorPaletteResources", - "Title": "ColorPaletteResources", - "Subtitle": "A type of resource that allows you to apply custom colors to your controls.", - "ImagePath": "ms-appx:///Assets/ControlImages/ColorPaletteResources.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "Apply custom colors to your controls through this cascading API, or scope them to a local subset.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Theme Editor (GitHub)", - "Uri": "https://github.com/Microsoft/fluent-xaml-theme-editor" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/color#scoping-with-a-resourcedictionary" - }, - { - "Title": "ColorPaletteResources - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.colorpaletteresources" - } - ] - }, - { - "UniqueId": "CompactSizing", - "Title": "Compact Sizing", - "Subtitle": "How to use a Resource Dictionary to enable compact sizing.", - "ImagePath": "ms-appx:///Assets/ControlImages/CompactSizing.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/CompactSizingIcon.png", - "Description": "Compact dictionary included in WinUI 2.1. Allows you to create compact smaller apps by adding this at the page or the grid level.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Spacing", - "Uri": "https://docs.microsoft.com/windows/apps/design/style/spacing" - } - ] - }, - { - "UniqueId": "SystemBackdrops", - "Title": "System Backdrops (Mica/Acrylic)", - "Subtitle": "System backdrops, like Mica and Acrylic, for the window.", - "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/SystemBackdropsIcon.png", - "Description": "System backdrops are used to provide a different background for a Window other than the default white or black (depending on Light or Dark theme). Mica and Desktop Acrylic are the current supported backdrops. Applying a backdrop currently requires a bunch of app code, but this will be easier in a future release.", - "Content": "

Look at the SampleSystemBackdropsWindow.xaml.cs file in Visual Studio to see the full code for applying a backdrop.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "MicaController - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.composition.systembackdrops.micacontroller" - }, - { - "Title": "DesktopAcrylicController - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.composition.systembackdrops.desktopacryliccontroller" - } - ], - "RelatedControls": [] - } - ] - }, - { - "UniqueId": "Text", - "Title": "Text", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "AutoSuggestBox", - "Title": "AutoSuggestBox", - "Subtitle": "A control to provide suggestions as a user is typing.", - "ImagePath": "ms-appx:///Assets/ControlImages/AutoSuggestBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/AutoSuggestBoxIcon.png", - "Description": "A text control that makes suggestions to users as they type. The app is notified when text has been changed by the user and is responsible for providing relevant suggestions for this control to display.", - "Content": "

Look at the AutoSuggestBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "AutoSuggestBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.autosuggestbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/auto-suggest-box" - } - ], - "RelatedControls": [ - "ListBox", - "ComboBox", - "TextBox" - ] - }, - { - "UniqueId": "NumberBox", - "Title": "NumberBox", - "Subtitle": "A text control used for numeric input and evaluation of algebraic equations.", - "ImagePath": "ms-appx:///Assets/ControlImages/NumberBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/NumberBoxIcon.png", - "Description": "Use NumberBox to allow users to enter algebraic equations and numeric input in your app.", - "Content": "

Look at the NumberBox.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "NumberBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.numberbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/number-box" - } - ], - "RelatedControls": [ - "TextBox", - "TextBlock", - "RichTextBlock", - "RichEditBox" - ] - }, - { - "UniqueId": "PasswordBox", - "Title": "PasswordBox", - "Subtitle": "A control for entering passwords.", - "ImagePath": "ms-appx:///Assets/ControlImages/PasswordBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/PasswordBoxIcon.png", - "Description": "A user can enter a single line of non-wrapping text in a PasswordBox control. The text is masked by characters that you can specify by using the PasswordChar property, and you can specify the maximum number of characters that the user can enter by setting the MaxLength property.", - "Content": "

Look at the PasswordBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "PasswordBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.passwordbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "TextBox", - "TextBlock", - "RichTextBlock", - "RichEditBox" - ] - }, - { - "UniqueId": "RichEditBox", - "Title": "RichEditBox", - "Subtitle": "A rich text editing control that supports formatted text, hyperlinks, and other rich content.", - "ImagePath": "ms-appx:///Assets/ControlImages/RichEditBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RichEditBoxIcon.png", - "Description": "You can use a RichEditBox control to enter and edit rich text documents that contain formatted text, hyperlinks, and images. By default, the RichEditBox supports spell checking. You can make a RichEditBox read-only by setting its IsReadOnly property to true.", - "Content": "

On this page, you can type into the RichTextBox control and save it as a RichTextFormat (.rtf) document, or load an existing .rtf document. You can format the text as Bold or Underlined, and change the text color.

Look at the RichEditBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "RichEditBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.richeditbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "NumberBox", - "TextBox", - "RichTextBlock", - "TextBlock" - ] - }, - { - "UniqueId": "RichTextBlock", - "Title": "RichTextBlock", - "Subtitle": "A control that displays formatted text, hyperlinks, inline images, and other rich content.", - "ImagePath": "ms-appx:///Assets/ControlImages/RichTextBlock.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/RichTextBlockIcon.png", - "Description": "RichTextBlock provides more advanced formatting features than the TextBlock control. You can apply character and paragraph formatting to the text in the RichTextBlock. For example, you can apply Bold, Italic, and Underline to any portion of the text in the control. You can use linked text containers (a RichTextBlock linked to RichTextBlockOverflow elements) to create advanced page layouts.", - "Content": "

Change the width of the app to see how the RichTextBlock overflows into additional columns as the app gets narrower.

Look at the RichTextBlockPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": true, - "Docs": [ - { - "Title": "RichTextBlock - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.richtextblock" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "NumberBox", - "TextBlock", - "TextBox", - "PasswordBox", - "RichEditBox" - ] - }, - { - "UniqueId": "TextBlock", - "Title": "TextBlock", - "Subtitle": "A lightweight control for displaying small amounts of text.", - "ImagePath": "ms-appx:///Assets/ControlImages/TextBlock.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBlockIcon.png", - "Description": "TextBlock is the primary control for displaying read-only text in your app. You typically display text by setting the Text property to a simple string. You can also display a series of strings in Run elements and give each different formatting.", - "Content": "

Look at the TextBlockPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TextBlock - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.textblock" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "NumberBox", - "TextBox", - "RichTextBlock", - "PasswordBox", - "RichEditBox" - ] - }, - { - "UniqueId": "TextBox", - "Title": "TextBox", - "Subtitle": "A single-line or multi-line plain text field.", - "ImagePath": "ms-appx:///Assets/ControlImages/TextBox.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBoxIcon.png", - "Description": "Use a TextBox to let a user enter simple text input in your app. You can add a header and placeholder text to let the user know what the TextBox is for, and you can customize it in other ways.", - "Content": "

Look at the TextBoxPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "TextBox - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.textbox" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" - } - ], - "RelatedControls": [ - "NumberBox", - "TextBlock", - "RichTextBlock", - "PasswordBox", - "RichEditBox", - "AutoSuggestBox" - ] - } - ] - }, - { - "UniqueId": "Motion", - "Title": "Motion", - "Subtitle": "", - "ImagePath": "", - "ImageIconPath": "", - "Description": "", - "Items": [ - { - "UniqueId": "ConnectedAnimation", - "Title": "Connected Animation", - "Subtitle": "Connected animations continue elements during page navigation and help the user maintain their context between views.", - "ImagePath": "ms-appx:///Assets/ControlImages/ConnectedAnimation.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ConnectedAnimationsIcon.png", - "Description": "Connected animations continue elements during page navigation and help the user maintain their context between views.", - "Content": "

Look at the ConnectedAnimationPage.xaml and ConnectedAnimationPage.xaml.cs files in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ConnectedAnimation - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.connectedanimation" - }, - { - "Title": "ConnectedAnimationService - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.connectedanimationservice" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/connected-animation" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "PageTransition", - "ThemeTransition" - ] - }, - { - "UniqueId": "EasingFunction", - "Title": "Easing Functions", - "Subtitle": "Easing is a way to manipulate the velocity of an object as it animates.", - "ImagePath": "ms-appx:///Assets/ControlImages/EasingFunction.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/EasingFunctionsIcon.png", - "Description": "Easing is a way to manipulate the velocity of an object as it animates.", - "Content": "

Look at the EasingFunctionPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "EasingFunctionBase - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.easingfunctionbase" - }, - { - "Title": "Timing and Easing", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/timing-and-easing" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "ConnectedAnimation", - "PageTransition", - "ThemeTransition" - ] - }, - { - "UniqueId": "PageTransition", - "Title": "Page Transitions", - "Subtitle": "Page transitions provide visual feedback about the relationship between pages.", - "ImagePath": "ms-appx:///Assets/ControlImages/PageTransition.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", - "Description": "Page transitions provide visual feedback about the relationship between pages.", - "Content": "

Look at the PageTransitionPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "NavigationThemeTransition - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Media.Animation.NavigationThemeTransition" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/page-transitions" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "ConnectedAnimation", - "ThemeTransition" - ] - }, - { - "UniqueId": "ThemeTransition", - "Title": "Theme Transitions", - "Subtitle": "Theme transitions are pre-packaged, easy-to-apply animations.", - "ImagePath": "ms-appx:///Assets/ControlImages/ThemeTransition.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", - "Description": "Theme transitions are pre-packaged, easy-to-apply animations.", - "Content": "

Look at the ThemeTransitionPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "Transitions - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/xaml-animation#animations-available-in-the-library" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "ImplicitTransition", - "PageTransition" - ] - }, - { - "UniqueId": "XamlCompInterop", - "Title": "Animation interop", - "Subtitle": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more.", - "ImagePath": "ms-appx:///Assets/ControlImages/AnimationInterop.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/StoryboardAnimationIcon.png", - "IsNew": false, - "IsUpdated": false, - "Description": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more", - "Content": "

Look at the XamlCompInteropPage.xaml.cs file in Visual Studio to see the full code for this page.

", - "Docs": [ - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - }, - { - "Title": "Composition Animation - API", - "Uri": "https://docs.microsoft.com/windows/uwp/composition/composition-animation" - }, - { - "Title": "Guidelines - Xaml Property Animations", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/xaml-property-animations" - }, - { - "Title": "Using the Visual Layer with XAML", - "Uri": "https://docs.microsoft.com/windows/uwp/composition/using-the-visual-layer-with-xaml" - } - ], - "RelatedControls": [ - "EasingFunction" - ] - }, - { - "UniqueId": "ImplicitTransition", - "Title": "Implicit Transitions", - "Subtitle": "Use Implicit Transitions to automatically animate changes to properties.", - "ImagePath": "ms-appx:///Assets/ControlImages/ImplicitTransition.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", - "IsNew": false, - "IsUpdated": false, - "Description": "Use Implicit Transitions to automatically animate changes to properties.", - "Content": "

Look at the ImplicitTransitionPage.xaml file in Visual Studio to see the full code for this page.

", - "Docs": [ - { - "Title": "Transitions - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/motion-in-practice#implicit-animations" - }, - { - "Title": "Quickstart: Motion", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion" - } - ], - "RelatedControls": [ - "PageTransition", - "ThemeTransition" - ] - }, - { - "UniqueId": "ParallaxView", - "Title": "ParallaxView", - "Subtitle": "A container control that provides the parallax effect when scrolling.", - "ImagePath": "ms-appx:///Assets/ControlImages/ParallaxView.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/ParallaxViewIcon.png", - "Description": "A container control that provides the parallax effect when scrolling.", - "Content": "", - "IsNew": false, - "IsUpdated": false, - "Docs": [ - { - "Title": "ParallaxView - API", - "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.Parallaxview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/windows/apps/design/motion/parallax" - } - ], - "RelatedControls": [ - "ScrollViewer" - ] - } - ] - }, - { - "UniqueId": "MultipleWindows", - "Title": "Windows", - "Subtitle": "", - "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "", - "Items": [ - { - "UniqueId": "CreateMultipleWindows", - "Title": "Create Multiple Windows", - "Subtitle": "An example showing the creation of single-threaded top level Xaml windows.", - "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "With Windows App SDK 1.0 we are allowing creation of single-threaded multiple top level Xaml windows in Desktop apps", - "Content": "

Look at the CreateMultipleWindowsPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "MultipleWindow - API", - "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" - } - ], - "RelatedControls": [] - }, - { - "UniqueId": "TitleBar", - "Title": "TitleBar", - "Subtitle": "An example showing a custom UIElement used as the titlebar for the app's window.", - "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", - "Description": "This sample shows how to use a custom UIElement as titlebar for app's window.", - "Content": "

Look at the TitleBarPage.xaml file in Visual Studio to see the full code for this page.

", - "IsNew": true, - "IsUpdated": false, - "Docs": [ - { - "Title": "TitleBar - API", - "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window.extendscontentintotitlebar?view=winui-3.0" - }, - { - "Title": "Guidelines", - "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" - } - ], - "RelatedControls": [] - } - ] - } - ] + "$schema": "ControlInfoDataSchema.json", + "Groups": [ + { + "UniqueId": "NewControls", + "Title": "Home", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [] + }, + { + "UniqueId": "AllControls", + "Title": "All controls", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [] + }, + { + "UniqueId": "MenusAndToolbars", + "Title": "Menus and Toolbars", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "XamlUICommand", + "Title": "XamlUICommand", + "Subtitle": "An object which is used to define the look and feel of a given command.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", + "Description": "An object which is used to define the look and feel of a given command, which can be reused across your app, and which is understood natively by the standard XAML controls.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-xamluicommand-class" + }, + { + "Title": "XamlUICommand - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.input.xamluicommand" + } + ], + "RelatedControls": [ + "StandardUICommand", + "AppBarButton", + "AppBarToggleButton", + "CommandBar" + ] + }, + { + "UniqueId": "StandardUICommand", + "Title": "StandardUICommand", + "Subtitle": "A StandardUICommand is a built-in 'XamlUICommand' which represents a commonly used command, e.g. 'Save'.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", + "Description": "StandardUICommands are a set of built-in XamlUICommands represeting commonly used commands. Including the look and feel of a given command, which can be reused across your app, and which is understood natively by the standard XAML controls. E.g. Save, Open, Copy, Paste, etc.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-standarduicommand-class" + }, + { + "Title": "StandardUICommand - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.input.standarduicommand" + } + ], + "RelatedControls": [ + "XamlUICommand", + "AppBarButton", + "AppBarToggleButton", + "CommandBar" + ] + }, + { + "UniqueId": "AppBarButton", + "Title": "AppBarButton", + "Subtitle": "A button that's styled for use in a CommandBar.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarButtonIcon.png", + "Description": "App bar buttons differ from standard buttons in several ways:\n- Their default appearance is a transparent background with a smaller size.\n- You use the Label and Icon properties to set the content instead of the Content property. The Content property is ignored.\n- The button's IsCompact property controls its size.", + "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.

Use the Label and Icon properties to define the content of the app bar buttons. Set the Label property to a string to specify the text label. The label is shown by default but is hidden when the button is in its compact state, so you also need to specify a meaningful icon. To do that, set the button's Icon property to an element derived from the IconElement class. Four kinds of icon elements are provided:

FontIcon - The icon is based on a glyph from the specified font family.

BitmapIcon - The icon is based on a bitmap image file with the specified Uri.

PathIcon - The icon is based on Path data.

SymbolIcon - The icon is based on a predefined list of glyphs from the Segoe UI Symbol font.

Look at the AppBarButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AppBarButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbarbutton" + }, + { + "Title": "SymbolIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" + }, + { + "Title": "FontIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" + }, + { + "Title": "BitmapIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" + }, + { + "Title": "PathIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" + } + ], + "RelatedControls": [ + "AppBarToggleButton", + "AppBarSeparator", + "CommandBar" + ] + }, + { + "UniqueId": "AppBarSeparator", + "Title": "AppBarSeparator", + "Subtitle": "A vertical line that's used to visually separate groups of commands in an app bar.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarSeparatorIcon.png", + "Description": "An AppBarSeparator creates a vertical line to visually separate groups of commands in a app bar. It has a compact state with reduced padding to match the compact state of the AppBarButton and AppBarToggleButton controls.", + "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons and separators on this page change.

When the IsCompact property is true, the padding around the AppBarSeparator is reduced.

Look at the AppBarSeparatorPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AppBarSeparator - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbarseparator" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" + } + ], + "RelatedControls": [ + "AppBarButton", + "AppBarToggleButton", + "CommandBar" + ] + }, + { + "UniqueId": "AppBarToggleButton", + "Title": "AppBarToggleButton", + "Subtitle": "A button that can be on, off, or indeterminate like a CheckBox, and is styled for use in an app bar or other specialized UI.", + "ImagePath": "ms-appx:///Assets/ControlImages/AppBarToggleButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AppBarToggleButtonIcon.png", + "Description": "An AppBarToggleButton looks like an AppBarButton, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.", + "Content": "

You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.

Look at the AppBarToggleButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AppBarToggleButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.appbartogglebutton" + }, + { + "Title": "SymbolIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" + }, + { + "Title": "FontIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" + }, + { + "Title": "BitmapIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" + }, + { + "Title": "PathIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" + } + ], + "RelatedControls": [ + "AppBarButton", + "AppBarSeparator", + "CommandBar" + ] + }, + { + "UniqueId": "CommandBar", + "Title": "CommandBar", + "Subtitle": "A toolbar for displaying application-specific commands that handles layout and resizing of its contents.", + "ImagePath": "ms-appx:///Assets/ControlImages/CommandBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CommandBarIcon.png", + "Description": "The CommandBar simplifies the creation of basic app bars by providing:\n- Automatic layout of commands, with primary commands on the right and secondary commands on the left.\n- Automatic resizing of app bar commands when the app size changes.\nWhen you need an app bar that contains only AppBarButton,AppBarToggleButton , and AppBarSeparator controls, use a CommandBar. If you need more complex content, such as images, progress bars, or text blocks, use an AppBar control.", + "Content": "

The bottom app bar on this page is a CommandBar control.

Add secondary commands and then resize the app to see how the CommandBar automatically adapts to different widths.

This CommandBar element is in the ItemPage so it can be shared across all control pages in the app. Look at the ItemPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CommandBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.commandbar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar" + } + ], + "RelatedControls": [ + "AppBarButton", + "AppBarToggleButton", + "AppBarSeparator" + ] + }, + { + "UniqueId": "MenuBar", + "Title": "MenuBar", + "Subtitle": "A classic menu, allowing the display of MenuItems containing MenuFlyoutItems.", + "ImagePath": "ms-appx:///Assets/ControlImages/MenuBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", + "Description": "The Menubar simplifies the creation of basic applications by providing a set of menus at the top of the app or window.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "MenuBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.MenuBar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/menus" + } + ], + "RelatedControls": [ + "CommandBar", + "MenuFlyout", + "StandardUICommand", + "XamlUICommand" + ] + }, + { + "UniqueId": "CommandBarFlyout", + "Title": "CommandBarFlyout", + "Subtitle": "A mini-toolbar displaying proactive commands, and an optional menu of commands.", + "ImagePath": "ms-appx:///Assets/ControlImages/CommandBarFlyout.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CommandBarFlyoutIcon.png", + "Description": "A mini-toolbar which displays a set of proactive commands, as well as a secondary menu of commands if desired.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CommandBarFlyout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.commandbarflyout" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/command-bar-flyout" + } + ], + "RelatedControls": [ + "CommandBar", + "MenuFlyout", + "RichEditBox", + "TextBox", + "StandardUICommand", + "XamlUICommand" + ] + }, + { + "UniqueId": "MenuFlyout", + "Title": "MenuFlyout", + "Subtitle": "Shows a contextual list of simple commands or options.", + "ImagePath": "ms-appx:///Assets/ControlImages/MenuFlyout.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuFlyoutIcon.png", + "Description": "A MenuFlyout displays lightweight UI that is light dismissed by clicking or tapping off of it. Use it to let the user choose from a contextual list of simple commands or options.", + "Content": "

Look at the MenuFlyoutPage.xaml file in Visual Studio to see the full code.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "MenuFlyout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyout" + }, + { + "Title": "MenuFlyoutItem - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyoutitem" + }, + { + "Title": "MenuFlyoutSeparator - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.menuflyoutseparator" + }, + { + "Title": "ToggleMenuFlyoutItem - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.togglemenuflyoutitem" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/menus" + } + ], + "RelatedControls": [ + "Flyout", + "ContentDialog", + "Button", + "AppBarButton" + ] + }, + { + "UniqueId": "SwipeControl", + "Title": "SwipeControl", + "Subtitle": "Touch gesture for quick menu actions on items.", + "ImagePath": "ms-appx:///Assets/ControlImages/SwipeControl.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SwipeIcon.png", + "Description": "Touch gesture for quick menu actions on items.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "SwipeControl - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.swipecontrol" + }, + { + "Title": "SwipeItems - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.swipeitems" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/swipe" + }, + { + "Title": "Gesture Actions", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/collection-commanding" + } + ], + "RelatedControls": [ + "GridView", + "ListView" + ] + } + ] + }, + { + "UniqueId": "Collections", + "Title": "Collections", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "FlipView", + "Title": "FlipView", + "Subtitle": "Presents a collection of items that the user can flip through, one item at a time.", + "ImagePath": "ms-appx:///Assets/ControlImages/FlipView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/FlipViewIcon.png", + "Description": "The FlipView lets you flip through a collection of items, one at a time. It's great for displaying images from a gallery, pages of a magazine, or similar items.", + "Content": "

FlipView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Look at the FlipViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "FlipView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.flipview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/flipview" + } + ], + "RelatedControls": [ + "GridView", + "ListView", + "SemanticZoom" + ] + }, + { + "UniqueId": "GridView", + "Title": "GridView", + "Subtitle": "A control that presents a collection of items in rows and columns.", + "ImagePath": "ms-appx:///Assets/ControlImages/GridView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridViewIcon.png", + "Description": "The GridView lets you show a collection of items arranged in rows and columns that scroll horizontally.", + "Content": "

GridView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the GridViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "GridView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.gridview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/lists" + } + ], + "RelatedControls": [ + "ListView", + "FlipView", + "SemanticZoom" + ] + }, + { + "UniqueId": "ListBox", + "Title": "ListBox", + "Subtitle": "A control that presents an inline list of items that the user can select from.", + "ImagePath": "ms-appx:///Assets/ControlImages/ListBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListBoxIcon.png", + "Description": "Use a ListBox when you want the options to be visible all the time or when users can select more than one option at a time. ListBox controls are always open, which allows several items to be displayed to the user without user interaction.", + "Content": "

Look at the ListBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ListBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listbox" + }, + { + "Title": "ListBoxItem - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listboxitem" + } + ], + "RelatedControls": [ + "ComboBox", + "RadioButton", + "CheckBox", + "AutoSuggestBox" + ] + }, + { + "UniqueId": "ListView", + "Title": "ListView", + "Subtitle": "A control that presents a collection of items in a vertical list.", + "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListViewIcon.png", + "Description": "The ListView lets you show a collection of items in a list that scrolls vertically.", + "Content": "

ListView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "ListView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.listview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/listview-and-gridview" + }, + { + "Title": "Drag and Drop - Full Sample", + "Uri": "https://github.com/microsoft/Windows-universal-samples/tree/master/Samples/XamlDragAndDrop" + }, + { + "Title": "CollectionViewSource - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.Data.CollectionViewSource" + }, + { + "Title": "Filtering collections and lists through user input", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/listview-filtering" + }, + { + "Title": "Inverted Lists", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/inverted-lists" + }, + { + "Title": "Inverted Lists - Full Sample", + "Uri": "https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlBottomUpList" + } + ], + "RelatedControls": [ + "GridView", + "StandardUICommand", + "FlipView", + "SemanticZoom" + ] + }, + { + "UniqueId": "PullToRefresh", + "Title": "PullToRefresh", + "Subtitle": "Provides the ability to pull on a collection of items in a list/grid to refresh the contents of the collection.", + "ImagePath": "ms-appx:///Assets/ControlImages/PullToRefresh.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/PullToRefreshIcon.png", + "Description": "PullToRefresh lets a user pull down on a list of data using touch in order to retrieve more data. PullToRefresh is widely used on devices with a touch screen.", + "Content": "

PullToRefresh can be used for a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RefreshContainer - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RefreshContainer" + }, + { + "Title": "RefreshVisualizer - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RefreshVisualizer" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pull-to-refresh" + } + ] + }, + { + "UniqueId": "TreeView", + "Title": "TreeView", + "Subtitle": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items.", + "ImagePath": "ms-appx:///Assets/ControlImages/TreeView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TreeViewIcon.png", + "Description": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items. ", + "Content": "

PullToRefresh can be used for a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TreeView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.TreeView" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tree-view" + } + ] + }, + { + "UniqueId": "DataGrid", + "Title": "DataGrid", + "Subtitle": "The DataGrid control presents data in a customizable table of rows and columns.", + "ImagePath": "ms-appx:///Assets/ControlImages/GridView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridViewIcon.png", + "Description": "The DataGrid control provides a flexible way to display a collection of data in rows and columns.", + "Content": "The DataGrid control presents data in a customizable table of rows and columns.", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "DataGrid - API", + "Uri": "https://aka.ms/win10datagridapidoc" + }, + { + "Title": "Guidelines", + "Uri": "https://aka.ms/win10datagriddoc" + }, + { + "Title": "Windows Community Toolkit", + "Uri": "https://docs.microsoft.com/windows/communitytoolkit" + } + ], + "RelatedControls": [ + "GridView", + "TreeView" + ] + } + ] + }, + { + "UniqueId": "DateAndTime", + "Title": "Date and Time", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "CalendarDatePicker", + "Title": "CalendarDatePicker", + "Subtitle": "A control that lets users pick a date value using a calendar.", + "ImagePath": "ms-appx:///Assets/ControlImages/CalendarDatePicker.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CalendarDatePickerIcon.png", + "Description": "A control that lets users pick a date value using a calendar.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CalendarDatePicker - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.calendardatepicker" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/calendar-date-picker" + } + ], + "RelatedControls": [ + "DatePicker", + "CalendarView" + ] + }, + { + "UniqueId": "CalendarView", + "Title": "CalendarView", + "Subtitle": "A control that presents a calendar for a user to choose a date from.", + "ImagePath": "ms-appx:///Assets/ControlImages/CalendarView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CalendarViewIcon.png", + "Description": "CalendarView shows a larger view for showing and selecting dates. DatePicker by contrast has a compact view with inline selection.", + "Content": "

Look at the CalendarView.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CalendarView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.calendarview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/calendar-view" + } + ], + "RelatedControls": [ + "CalendarDatePicker", + "DatePicker", + "TimePicker" + ] + }, + { + "UniqueId": "DatePicker", + "Title": "DatePicker", + "Subtitle": "A control that lets a user pick a date value.", + "ImagePath": "ms-appx:///Assets/ControlImages/DatePicker.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DatePickerIcon.png", + "Description": "Use a DatePicker to let users set a date in your app, for example to schedule an appointment. The DatePicker displays three controls for month, date, and year. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.", + "Content": "

Look at the DatePickerPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "DatePicker - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.datepicker" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/date-picker" + } + ], + "RelatedControls": [ + "CalendarDatePicker", + "CalendarView", + "TimePicker" + ] + }, + { + "UniqueId": "TimePicker", + "Title": "TimePicker", + "Subtitle": "A configurable control that lets a user pick a time value.", + "ImagePath": "ms-appx:///Assets/ControlImages/TimePicker.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TimePickerIcon.png", + "Description": "Use a TimePicker to let users set a time in your app, for example to set a reminder. The TimePicker displays three controls for hour, minute, and AM/PM. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.", + "Content": "

Look at the TimePickerPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TimePicker - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.timepicker" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/time-picker" + } + ], + "RelatedControls": [ + "DatePicker", + "CalendarView" + ] + } + ] + }, + { + "UniqueId": "BasicInput", + "Title": "Basic Input", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "InputValidation", + "Title": "InputValidation", + "Subtitle": "A feature that will display an error for invalid text. The app is notified when text has been changed by the user and is responsible for determining whether the text is valid and the error message", + "ImagePath": "ms-appx:///Assets/ControlImages/TextBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBoxIcon.png", + "Description": "A feature to display developer-defined errors for text values", + "Content": "

Look at the InputValidationPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [], + "RelatedControls": [ + "TextBox", + "PasswordBox" + ] + }, + { + "UniqueId": "Button", + "Title": "Button", + "Subtitle": "A control that responds to user input and raises a Click event.", + "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", + "Description": "The Button control provides a Click event to respond to user input from a touch, mouse, keyboard, stylus, or other input device. You can put different kinds of content in a button, such as text or an image, or you can restyle a button to give it a new look.", + "Content": "

The main purpose of a Button is to make something happen when a user clicks it. There are two ways you can make something happen:

  • Handle the Click event.
  • Bind the Command property to an ICommand implementation that describes the command logic.

Buttons often have only simple string content, but you can use any object as content. You can also change the style and template to give them any look you want.

Look at the ButtonPage.xaml file in Visual Studio to see the custom button style and template definitions used on this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "Button - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.button" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" + } + ], + "RelatedControls": [ + "ToggleButton", + "RepeatButton", + "HyperlinkButton", + "AppBarButton" + ] + }, + { + "UniqueId": "DropDownButton", + "Title": "DropDownButton", + "Subtitle": "A button that displays a flyout of choices when clicked.", + "ImagePath": "ms-appx:///Assets/ControlImages/DropDownButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DropDownButtonIcon.png", + "Description": "A control that drops down a flyout of choices from which one can be chosen.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "DropDownButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.dropdownbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" + } + ], + "RelatedControls": [ + "SplitButton", + "ToggleSplitButton", + "ToggleButton", + "RepeatButton", + "HyperlinkButton", + "AppBarButton", + "CommandBar" + ] + }, + { + "UniqueId": "HyperlinkButton", + "Title": "HyperlinkButton", + "Subtitle": "A button that appears as hyperlink text, and can navigate to a URI or handle a Click event.", + "ImagePath": "ms-appx:///Assets/ControlImages/HyperlinkButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/HyperlinkButtonIcon.png", + "Description": "A HyperlinkButton appears as a text hyperlink. When a user clicks it, it opens the page you specify in the NavigateUri property in the default browser. Or you can handle its Click event, typically to navigate within your app.", + "Content": "

A HyperlinkButton looks like hyperlink text, but works like a button. You can use it in two ways:

  • Set the NavigateUri property. When a user clicks it, it will automatically open the URI in the default browser.
  • Handle the Click event. This works just like the Click event of a standard Button, and can be used to navigate within your app.

Each control page in this app has two sets of hyperlink buttons, one set to open documentation in Internet Explorer, and one set to navigate to related control pages in the app.

Look at the HyperlinkButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "HyperlinkButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.hyperlinkbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/hyperlinks" + } + ], + "RelatedControls": [ + "Button", + "ToggleButton", + "RepeatButton", + "AppBarButton" + ] + }, + { + "UniqueId": "RepeatButton", + "Title": "RepeatButton", + "Subtitle": "A button that raises its Click event repeatedly from the time it's pressed until it's released.", + "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", + "Description": "The RepeatButton control is like a standard Button, except that the Click event occurs continuously while the user presses the RepeatButton.", + "Content": "

A RepeatButton looks just like a regular Button, but it's Click event occurs continuously while the button is pressed.

Look at the RepeatButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RepeatButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.primitives.repeatbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" + } + ], + "RelatedControls": [ + "Button", + "ToggleButton", + "HyperlinkButton", + "AppBarButton" + ] + }, + { + "UniqueId": "ToggleButton", + "Title": "ToggleButton", + "Subtitle": "A button that can be switched between two states like a CheckBox.", + "ImagePath": "ms-appx:///Assets/ControlImages/ToggleButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleButtonIcon.png", + "Description": "A ToggleButton looks like a Button, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.", + "Content": "

ToggleButton is used as a base class for similar controls like CheckBox and RadioButton. It can be used on its own, but don't use it if a CheckBox, RadioButton, or ToggleSwitch would convey your intent better.

Look at the ToggleButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ToggleButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.primitives.togglebutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons#create-a-toggle-split-button" + } + ], + "RelatedControls": [ + "Button", + "AppBarToggleButton", + "ToggleSwitch", + "CheckBox", + "CommandBarFlyout", + "CommandBar" + ] + }, + { + "UniqueId": "SplitButton", + "Title": "SplitButton", + "Subtitle": "A two-part button that displays a flyout when its secondary part is clicked.", + "ImagePath": "ms-appx:///Assets/ControlImages/SplitButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SplitButtonIcon.png", + "Description": "The splitbutton is a dropdown button, but with an addition execution hit target.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "SplitButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.splitbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons#create-a-split-button" + } + ], + "RelatedControls": [ + "Button", + "AppBarToggleButton", + "CommandBar", + "ToggleSwitch", + "CheckBox", + "CommandBarFlyout", + "CommandBar" + ] + }, + { + "UniqueId": "ToggleSplitButton", + "Title": "ToggleSplitButton", + "Subtitle": "A version of the SplitButton where the activation target toggles on/off.", + "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSplitButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleSplitButtonIcon.png", + "Description": "A version of the SplitButton where the activation target toggles on/off.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ToggleSplitButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.togglesplitbutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/buttons" + } + ], + "RelatedControls": [ + "Button", + "AppBarToggleButton", + "ToggleSwitch", + "CheckBox", + "CommandBarFlyout", + "CommandBar" + ] + }, + { + "UniqueId": "CheckBox", + "Title": "CheckBox", + "Subtitle": "A control that a user can select or clear.", + "ImagePath": "ms-appx:///Assets/ControlImages/CheckBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CheckBoxIcon.png", + "Description": "CheckBox controls let the user select a combination of binary options. In contrast, RadioButton controls allow the user to select from mutually exclusive options. The indeterminate state is used to indicate that an option is set for some, but not all, child options. Don't allow users to set an indeterminate state directly to indicate a third option.", + "Content": "

Check and uncheck these controls to see how they look in each state. The label for each CheckBox is defined by its Content property.

Use a three-state CheckBox to show that none, some, or all of an items sub-options are checked. You have to add some code to do this. Take a look at the methods in the SelectAllMethods region of CheckBoxPage.xaml.cs to see how we did it.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "CheckBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.checkbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/checkbox" + } + ], + "RelatedControls": [ + "RadioButton", + "ToggleSwitch", + "ToggleButton" + ] + }, + { + "UniqueId": "ColorPicker", + "Title": "ColorPicker", + "Subtitle": "A control that displays a selectable color spectrum.", + "ImagePath": "ms-appx:///Assets/ControlImages/ColorPicker.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ColorPickerIcon.png", + "Description": "A selectable color spectrum.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ColorPicker - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.ColorPicker" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/color-picker" + } + ], + "RelatedControls": [ + "ComboBox" + ] + }, + { + "UniqueId": "ComboBox", + "Title": "ComboBox", + "Subtitle": "A drop-down list of items a user can select from.", + "ImagePath": "ms-appx:///Assets/ControlImages/ComboBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ComboBoxIcon.png", + "Description": "Use a ComboBox when you need to conserve on-screen space and when users select only one option at a time. A ComboBox shows only the currently selected item.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ComboBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.combobox" + }, + { + "Title": "ComboBoxItem - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.comboboxitem" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/combo-box" + } + ], + "RelatedControls": [ + "ListBox", + "RadioButton", + "CheckBox", + "ListView", + "AutoSuggestBox", + "RatingControl" + ] + }, + { + "UniqueId": "RadioButton", + "Title": "RadioButton", + "Subtitle": "A control that allows a user to select a single option from a group of options.", + "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RadioButtonIcon.png", + "Description": "Use RadioButtons to let a user choose between mutually exclusive, related options. Generally contained within a RadioButtons group control.", + "Content": "

Look at the RadioButtonPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RadioButton - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.radiobutton" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/radio-button" + } + ], + "RelatedControls": [ + "CheckBox", + "RadioButtons", + "ToggleSwitch", + "ToggleButton" + ] + }, + { + "UniqueId": "RatingControl", + "Title": "RatingControl", + "Subtitle": "Rate something 1 to 5 stars.", + "ImagePath": "ms-appx:///Assets/ControlImages/RatingControl.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RatingControlIcon.png", + "Description": "Rate something 1 to 5 stars.", + "Content": "", + "IsNew": false, + "Docs": [ + { + "Title": "RatingControl - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.RatingControl" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/rating" + } + ], + "RelatedControls": [ + "Slider", + "ComboBox" + ] + }, + { + "UniqueId": "Slider", + "Title": "Slider", + "Subtitle": "A control that lets the user select from a range of values by moving a Thumb control along a track.", + "ImagePath": "ms-appx:///Assets/ControlImages/Slider.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SliderIcon.png", + "Description": "Use a Slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).", + "Content": "

Look at the SliderPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Slider - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.slider" + }, + { + "Title": "Guidelines", + "Uri": "http://docs.microsoft.com/windows/apps/design/controls/slider" + } + ], + "RelatedControls": [ + "ComboBox", + "ListBox", + "RatingControl" + ] + }, + { + "UniqueId": "ToggleSwitch", + "Title": "ToggleSwitch", + "Subtitle": "A switch that can be toggled between 2 states.", + "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSwitch.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToggleSwitchIcon.png", + "Description": "Use ToggleSwitch controls to present users with exactly two mutually exclusive options (like on/off), where choosing an option results in an immediate commit. A toggle switch should have a single label.", + "Content": "

Look at the ToggleSwitchPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ToggleSwitch - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.toggleswitch" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/toggles" + } + ], + "RelatedControls": [ + "ToggleButton", + "RadioButton", + "CheckBox", + "AppBarToggleButton" + ] + } + ] + }, + { + "UniqueId": "StatusAndInfo", + "Title": "Status and Info", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "AutomationProperties", + "Title": "AutomationProperties", + "Subtitle": "Attributes that help with writing accessible XAML.", + "ImagePath": "ms-appx:///Assets/ControlImages/Button.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ButtonIcon.png", + "Description": "The AutomationProperties attributes provide functionality around accessible components.", + "Content": "

The aim of AutomationProperties is to enable components that are accessible to screen readers.", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AutomationProperties - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.automation.automationproperties" + }, + { + "Title": "Accessibility Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/accessibility/accessibility" + } + ], + "RelatedControls": [ + "TextBlock", + "Image" + ] + }, + { + "UniqueId": "InfoBadge", + "Title": "InfoBadge", + "Subtitle": "An non-intrusive UI to display notifications or bring focus to an area", + "ImagePath": "ms-appx:///Assets/ControlImages/InfoBadge.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", + "Description": "Badging is a non-intrusive and intuitive way to display notifications or bring focus to an area within an app - whether that be for notifications, indicating new content, or showing an alert.", + "Content": "

Look at the InfoBadgePage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "InfoBadge - API", + "Uri": "https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.infobadge" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/infobadge" + } + ], + "RelatedControls": [ + "InfoBar", + "TeachingTip" + ] + }, + { + "UniqueId": "InfoBar", + "Title": "InfoBar", + "Subtitle": "An inline message to display app-wide status change information", + "ImagePath": "ms-appx:///Assets/ControlImages/InfoBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MenuBarIcon.png", + "Description": "Use an InfoBar control when a user should be informed of, acknowledge, or take action on a changed application state. By default the notification will remain in the content area until closed by the user but will not necessarily break user flow.", + "Content": "

Look at the InfoBarPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "InfoBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.infobar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/infobar" + } + ], + "RelatedControls": [ + "TeachingTip", + "ContentDialog" + ] + }, + { + "UniqueId": "ProgressBar", + "Title": "ProgressBar", + "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that doesn't block user interaction.", + "ImagePath": "ms-appx:///Assets/ControlImages/ProgressBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ProgressBarIcon.png", + "Description": "The ProgressBar has two different visual representations:\nIndeterminate - shows that a task is ongoing, but doesn't block user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.", + "Content": "

Look at the ProgressBarPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ProgressBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.ProgressBar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/progress-controls" + } + ], + "RelatedControls": [ + "ProgressRing" + ] + }, + { + "UniqueId": "ProgressRing", + "Title": "ProgressRing", + "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that does block user interaction.", + "ImagePath": "ms-appx:///Assets/ControlImages/ProgressRing.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ProgressRingIcon.png", + "Description": "The ProgressRing has two different visual representations:\nIndeterminate - shows that a task is ongoing, but blocks user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.", + "Content": "

Look at the ProgressRingPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "ProgressRing - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.progressring" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/progress-controls" + } + ], + "RelatedControls": [ + "ProgressBar" + ] + }, + { + "UniqueId": "ToolTip", + "Title": "ToolTip", + "Subtitle": "Displays information for an element in a pop-up window.", + "ImagePath": "ms-appx:///Assets/ControlImages/ToolTip.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ToolTipIcon.png", + "Description": "A ToolTip shows more information about a UI element. You might show information about what the element does, or what the user should do. The ToolTip is shown when a user hovers over or presses and holds the UI element.", + "Content": "

Look at the ToolTipPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ToolTip - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.tooltip" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tooltips" + } + ], + "RelatedControls": [ + "TeachingTip", + "Flyout", + "ContentDialog" + ] + } + ] + }, + { + "UniqueId": "DialogsAndFlyouts", + "Title": "Dialogs and Flyouts", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "ContentDialog", + "Title": "ContentDialog", + "Subtitle": "A dialog box that can be customized to contain any XAML content.", + "ImagePath": "ms-appx:///Assets/ControlImages/ContentDialog.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "Use a ContentDialog to show relavant information or to provide a modal dialog experience that can show any XAML content.", + "Content": "

Look at the ContentDialog.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "ContentDialog - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.contentdialog" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/dialogs" + } + ], + "RelatedControls": [ + "Flyout", + "MenuFlyout", + "TeachingTip", + "ToolTip" + ] + }, + { + "UniqueId": "Flyout", + "Title": "Flyout", + "Subtitle": "Shows contextual information and enables user interaction.", + "ImagePath": "ms-appx:///Assets/ControlImages/Flyout.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/FlyoutIcon.png", + "Description": "A Flyout displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be light dismissed by clicking or tapping off of it. Use it to collect input from the user, show more details about an item, or ask the user to confirm an action.", + "Content": "

Look at the FlyoutPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Flyout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.flyout" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts" + } + ], + "RelatedControls": [ + "TeachingTip", + "ContentDialog", + "MenuFlyout", + "Button", + "AppBarButton" + ] + }, + { + "UniqueId": "TeachingTip", + "Title": "TeachingTip", + "Subtitle": "A content-rich flyout for guiding users and enabling teaching moments.", + "ImagePath": "ms-appx:///Assets/ControlImages/TeachingTip.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TeachingTipIcon.png", + "Description": "The XAML TeachingTip Control provides a way for your app to guide and inform users in your application with a non-invasive and content rich notification. TeachingTip can be used for bringing focus to a new or important feature, teaching users how to perform a task, or enhancing the user workflow by providing contextually relevant information to their task at hand.", + "Content": "

Look at the TeachingTip.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TeachingTip - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.teachingtip" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/teaching-tip" + } + ], + "RelatedControls": [ + "ContentDialog", + "Flyout", + "ToolTip" + ] + } + ] + }, + { + "UniqueId": "Scrolling", + "Title": "Scrolling", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "PipsPager", + "Title": "PipsPager", + "Subtitle": "A control to let the user navigate through a paginated collection when the page numbers do not need to be visually known.", + "ImagePath": "ms-appx:///Assets/ControlImages/PipsPager.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "A PipsPager allows the user to navigate through a paginated collection and is independent of the content shown. Use this control when the content in the layout is not explicitly ordered by relevancy or you desire a glyph-based representation of numbered pages. PipsPagers are commonly used in photo viewers, app lists, carousels, and when display space is limited.", + "Content": "

Look at the PipsPagerPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "PipsPager - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pipspager" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pipspager" + } + ], + "RelatedControls": [ + "ScrollViewer", + "FlipView", + "ItemsRepeater" + ] + }, + { + "UniqueId": "ScrollViewer", + "Title": "ScrollViewer", + "Subtitle": "A container control that lets the user pan and zoom its content.", + "ImagePath": "ms-appx:///Assets/ControlImages/ScrollViewer.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ScrollViewerIcon.png", + "Description": "A ScrollViewer lets a user scroll, pan, and zoom to see content that's larger than the viewable area. Many content controls, like ListView, have ScrollViewers built into their control templates to provide automatic scrolling.", + "Content": "

Look at the ScrollViewerPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ScrollViewer - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.scrollviewer" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/scroll-controls" + } + ], + "RelatedControls": [ + "ViewBox", + "Canvas", + "Grid", + "StackPanel", + "RelativePanel", + "ParallaxView" + ] + }, + { + "UniqueId": "SemanticZoom", + "Title": "SemanticZoom", + "Subtitle": "Lets the user zoom between two different views of a collection, making it easier to navigate through large collections of items.", + "ImagePath": "ms-appx:///Assets/ControlImages/SemanticZoom.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "The SemanticZoom lets you show grouped data in two different ways, and is useful for quickly navigating through large sets of data.", + "Content": "

Look at the SemanticZoomPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "SemanticZoom - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.semanticzoom" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/semantic-zoom" + } + ], + "RelatedControls": [ + "GridView", + "ListView" + ] + } + ] + }, + { + "UniqueId": "Layout", + "Title": "Layout", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "Use layout controls to arrange the controls and content in your app.", + "Items": [ + { + "UniqueId": "Border", + "Title": "Border", + "Subtitle": "A container control that draws a boundary line, background, or both, around another object.", + "ImagePath": "ms-appx:///Assets/ControlImages/Border.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/BorderIcon.png", + "Description": "Use a Border control to draw a boundary line, background, or both, around another object. A Border can contain only one child object.", + "Content": "

A Border can contain only one child object. If you want to put a border around multiple objects, first wrap them in a container object such as StackPanel and make the StackPanel the child of the Border.

You can change the appearance of a Border by setting basic properties:

  • Width/Height
  • BorderBrush
  • BorderThickness
  • Background

Most of the control pages in this app have XAML blocks to show basic usage. The appearance of the XAML blocks is defined by a Border control. Look at the CodeBorderStyle resource in App.xaml to see the Style that's applied to the Borders.

Look at the BorderPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Border - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.border" + } + ], + "RelatedControls": [ + "Canvas", + "Grid", + "StackPanel", + "VariableSizedWrapGrid", + "RelativePanel" + ] + }, + { + "UniqueId": "Canvas", + "Title": "Canvas", + "Subtitle": "A layout panel that supports absolute positioning of child elements relative to the top left corner of the canvas.", + "ImagePath": "ms-appx:///Assets/ControlImages/Canvas.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CanvasIcon.png", + "Description": "The Canvas provides absolute positioning of controls or content. Content is positioned relative to the Canvas using the Canvas.Top and Canvas.Left attached properties.", + "Content": "

Items are positioned on the Canvas using the Canvas.Top and Canvas.Left attached properties. Use the sliders to change these properties for the red rectangle and see how it moves around.

To see the effect of the ZIndex attached property, make sure the red rectangle is overlapping the other rectangles.

Look at the CanvasPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Canvas - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.canvas" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" + } + ], + "RelatedControls": [ + "Border", + "Grid", + "StackPanel", + "VariableSizedWrapGrid", + "RelativePanel" + ] + }, + { + "UniqueId": "Expander", + "Title": "Expander", + "Subtitle": "A container with a header that can be expanded to show a body with more content.", + "ImagePath": "ms-appx:///Assets/ControlImages/Expander.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "The Expander has a header and can expand to show a body with more content. Use an Expander when some content is only relevant some of the time (for example to read more information or access additional options for an item).", + "Content": "Look at the ExpanderPage.xaml file in Visual Studio to see the full code for this page.", + "IsNew": true, + "Docs": [ + { + "Title": "Expander - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.expander" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/expander" + } + ], + "RelatedControls": [ + "Flyout", + "ItemsRepeater", + "SplitView" + ] + }, + { + "UniqueId": "ItemsRepeater", + "Title": "ItemsRepeater", + "Subtitle": "A flexible, primitive control for data-driven layouts.", + "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ListViewIcon.png", + "Description": "The ItemsRepeater is like a markup-based loop that supports virtualization.", + "Content": "

A ItemsRepeater is more basic than an ItemsControl. It does not have default styling or a control template. It can contain a collection of items of any type. To populate the view, set the ItemsSource property to a data source.

Set an ItemTemplate to define the look of individual items.

And, optionally set the Layout to define how items are sized and positioned. By default, it uses a simple vertical stacking layout.

Look at the ItemsRepeaterPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ItemsRepeater - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.itemsrepeater" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/items-repeater" + }, + { + "Title": "StackLayout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.stacklayout" + }, + { + "Title": "UniformGridLayout - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.uniformgridlayout" + } + ], + "RelatedControls": [ + "ScrollViewer", + "ListView", + "GridView" + ] + }, + { + "UniqueId": "Grid", + "Title": "Grid", + "Subtitle": "A layout panel that supports arranging child elements in rows and columns. ", + "ImagePath": "ms-appx:///Assets/ControlImages/Grid.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/GridIcon.png", + "Description": "The Grid is used to arrange controls and content in rows and columns. Content is positioned in the grid using Grid.Row and Grid.Column attached properties.", + "Content": "

Look at the GridPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Grid - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.grid" + }, + { + "Title": "Tutorial", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/grid-tutorial" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels#grid" + } + ], + "RelatedControls": [ + "Border", + "Canvas", + "StackPanel", + "VariableSizedWrapGrid", + "RelativePanel" + ] + }, + { + "UniqueId": "RadioButtons", + "Title": "RadioButtons", + "Subtitle": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.", + "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RadioButtonsIcon.png", + "Description": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.", + "Content": "

Look at the RadioButtonsPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RadioButtons - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.radiobuttons" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/radio-button" + } + ], + "RelatedControls": [ + "CheckBox", + "RadioButton", + "ToggleSwitch", + "ToggleButton" + ] + }, + { + "UniqueId": "RelativePanel", + "Title": "RelativePanel", + "Subtitle": "A panel that uses relationships between elements to define layout.", + "ImagePath": "ms-appx:///Assets/ControlImages/RelativePanel.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RelativePanelIcon.png", + "Description": "Use a RelativePanel to layout elements by defining the relationships between elements and in relation to the panel.", + "Content": "

Look at the RelativePanelPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RelativePanel - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.relativepanel" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" + } + ], + "RelatedControls": [ + "Grid", + "StackPanel", + "Border", + "Canvas", + "ViewBox" + ] + }, + { + "UniqueId": "SplitView", + "Title": "SplitView", + "Subtitle": "A container that has 2 content areas, with multiple display options for the pane.", + "ImagePath": "ms-appx:///Assets/ControlImages/SplitView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SplitViewIcon.png", + "Description": "Use a SplitView to display content, such as navigation options, in a pane on the side. There are multiple options for displaying the pane, namely CompactOverlay, Compact, Overlay, Inline. If you are looking for a reference to the hamburger pattern, please see the links in the documentation below.", + "Content": "

Look at the SplitViewPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "SplitView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.splitview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/split-view" + } + ], + "RelatedControls": [ + "StackPanel", + "ListView", + "GridView", + "Grid", + "RelativePanel" + ] + }, + { + "UniqueId": "StackPanel", + "Title": "StackPanel", + "Subtitle": "A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.", + "ImagePath": "ms-appx:///Assets/ControlImages/StackPanel.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/StackPanelIcon.png", + "Description": "A StackPanel is used to arrange items in a line, either horizontally or vertically.", + "Content": "

Look at the StackPanelPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "StackPanel - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.stackpanel" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" + } + ], + "RelatedControls": [ + "Border", + "Canvas", + "Grid", + "VariableSizedWrapGrid", + "RelativePanel" + ] + }, + { + "UniqueId": "VariableSizedWrapGrid", + "Title": "VariableSizedWrapGrid", + "Subtitle": "A layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns.", + "ImagePath": "ms-appx:///Assets/ControlImages/VariableSizedWrapGrid.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/VariableSizedWrapGridIcon.png", + "Description": "A VariableSizedWrapGrip is used to create grid layouts where content can span multiple rows and columns.", + "Content": "

Elements are arranged in rows or columns that automatically wrap to a new row or column when the MaximumRowsOrColumns value is reached.

Whether elements are arranged in rows or columns is specified by the Orientation property.

Elements can span multiple rows and columns using VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties.

Elements are sized as specified by the ItemHeight and ItemWidth properties.

Look at the VariableSizedWrapGridPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "VariableSizedWrapGrid - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.variablesizedwrapgrid" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/layout-panels" + } + ], + "RelatedControls": [ + "Border", + "Canvas", + "Grid", + "StackPanel", + "RelativePanel" + ] + }, + { + "UniqueId": "ViewBox", + "Title": "ViewBox", + "Subtitle": "A container control that scales its content to a specified size.", + "ImagePath": "ms-appx:///Assets/ControlImages/ViewBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ViewBoxIcon.png", + "Description": "Use a ViewBox control scale content up or down to a specified size.", + "Content": "

Look at the ViewBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Viewbox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.viewbox" + } + ], + "RelatedControls": [ + "ScrollViewer", + "Canvas", + "Grid", + "StackPanel", + "RelativePanel" + ] + } + ] + }, + { + "UniqueId": "Navigation", + "Title": "Navigation", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "BreadcrumbBar", + "Title": "BreadcrumbBar", + "Subtitle": "Shows the trail of navigation taken to the current location.", + "ImagePath": "ms-appx:///Assets/ControlImages/BreadcrumbBar.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "The BreadcrumbBar control provides a common horizontal layout to display the trail of navigation taken to the current location. Resize to see the nodes crumble, starting at the root.", + "Content": "

Look at the BreadcrumbBarPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "BreadcrumbBar - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.breadcrumbbar" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/breadcrumbbar" + } + ], + "RelatedControls": [ + "NavigationView", + "Pivot", + "TabView" + ] + }, + { + "UniqueId": "NavigationView", + "Title": "NavigationView", + "Subtitle": "Common vertical layout for top-level areas of your app via a collapsible navigation menu.", + "ImagePath": "ms-appx:///Assets/ControlImages/NavigationView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/NavigationViewIcon.png", + "Description": "The navigation view control provides a common vertical layout for top-level areas of your app via a collapsible navigation menu.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "NavigationView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.NavigationView" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/navigationview" + } + ], + "RelatedControls": [ + "SplitView", + "Pivot" + ] + }, + { + "UniqueId": "Pivot", + "Title": "Pivot", + "Subtitle": "Presents information from different sources in a tabbed view.", + "ImagePath": "ms-appx:///Assets/ControlImages/Pivot.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/PivotIcon.png", + "Description": "A Pivot allows you to show a collection of items from different sources in a tabbed view.", + "Content": "

This page shows a simplified Pivot control with minimal content to demonstrate basic Pivot usage. Look at the PivotPage.xaml file in Visual Studio to see the full code for this page.

A Pivot control typically takes up the full page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Pivot - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pivot" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/pivot" + } + ], + "RelatedControls": [ + "SemanticZoom", + "ListView", + "GridView" + ] + }, + { + "UniqueId": "TabView", + "Title": "TabView", + "Subtitle": "A control that displays a collection of tabs that can be used to display several documents.", + "ImagePath": "ms-appx:///Assets/ControlImages/TabView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "TabView provides the user with a collection of tabs that can be used to display several documents.", + "Content": "", + "IsNew": false, + "IsUpdated": true, + "IsPreview": false, + "Docs": [ + { + "Title": "TabView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.tabview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/tab-view" + }, + { + "Title": "Show multiple views for an app", + "Uri": "https://docs.microsoft.com/windows/apps/design/layout/show-multiple-views" + } + ], + "RelatedControls": [ + "Pivot", + "NavigationView", + "ListView" + ] + } + ] + }, + { + "UniqueId": "Media", + "Title": "Media", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "AnimatedVisualPlayer", + "Title": "AnimatedVisualPlayer", + "Subtitle": "An element to render and control playback of motion graphics.", + "ImagePath": "ms-appx:///Assets/ControlImages/AnimatedVisualPlayer.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AnimationsIcon.png", + "Description": "An element to render and control playback of motion graphics.", + "Content": "

Look at the AnimatedVisualPlayerPage.xaml and AnimatedVisualPlayerPage.xaml.cs files in Visual Studio to see the full code for this page.

", + "IsNew": false, + "Docs": [ + { + "Title": "AnimatedVisualPlayer - API", + "Uri": "https://www.docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedvisualplayer" + }, + { + "Title": "Full Samples", + "Uri": "ms-windows-store://pdp/?productid=9N3J5TG8FF7F" + }, + { + "Title": "Tutorials", + "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie#tutorials" + }, + { + "Title": "Lottie Overview", + "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie" + }, + { + "Title": "Lottie Windows - GitHub", + "Uri": "https://github.com/CommunityToolkit/Lottie-Windows" + } + ] + }, + { + "UniqueId": "Image", + "Title": "Image", + "Subtitle": "A control to display image content.", + "ImagePath": "ms-appx:///Assets/ControlImages/Image.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ImageIcon.png", + "Description": "You can use an Image control to show and scale images.", + "Content": "

Look at the ImagePage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Image - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.image" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/images-imagebrushes" + } + ], + "RelatedControls": [ + "MediaPlayerElement", + "PersonPicture" + ] + }, + { + "UniqueId": "MediaPlayerElement", + "Title": "MediaPlayerElement", + "Subtitle": "A control to display video and image content.", + "ImagePath": "ms-appx:///Assets/ControlImages/MediaPlayerElement.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/MediaElementIcon.png", + "Description": "You can use a MediaPlayerElement control to playback videos and show images. You can show transport controls or make the video autoplay.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "MediaPlayerElement - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.MediaPlayerElement" + }, + { + "Title": "Media Playback", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/media-playback" + } + ], + "RelatedControls": [ + "Image" + ] + }, + { + "UniqueId": "PersonPicture", + "Title": "PersonPicture", + "Subtitle": "Displays the picture of a person/contact.", + "ImagePath": "ms-appx:///Assets/ControlImages/PersonPicture.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/PersonPictureIcon.png", + "Description": "Displays the picture of a person/contact.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "PersonPicture - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.PersonPicture" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/person-picture" + } + ], + "RelatedControls": [ + "Image" + ] + }, + { + "UniqueId": "Sound", + "Title": "Sound", + "Subtitle": "A code-behind only API that enables 2D and 3D UI sounds on all XAML controls.", + "ImagePath": "ms-appx:///Assets/ControlImages/Sound.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SoundIcon.png", + "Description": "Sound is enabled by default for UWP apps running on Xbox, but can be set to always play on all devices if desired. Sound may also be put into Spatial Audio mode for a more immersive 10ft experience.", + "Content": "

Look at the SoundPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Sound - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.elementsoundplayer" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/sound" + } + ] + }, + { + "UniqueId": "WebView2", + "Title": "WebView2", + "Subtitle": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", + "ImagePath": "ms-appx:///Assets/ControlImages/WebView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/WebViewIcon.png", + "Description": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", + "Content": "", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "WebView2 - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.webview2?view=winui-3.0" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/winui" + }, + { + "Title": "Examples", + "Uri": "https://github.com/MicrosoftEdge/WebView2Samples" + } + ] + } + ] + }, + { + "UniqueId": "Styles", + "Title": "Styles", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "Acrylic", + "Title": "AcrylicBrush", + "Subtitle": "A translucent material recommended for panel backgrounds.", + "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AcrylicBrushIcon.png", + "Description": "A translucent material recommended for panel backgrounds.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "AcrylicBrush - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.acrylicbrush" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/acrylic" + } + ], + "RelatedControls": [ + "SystemBackdrops" + ] + }, + { + "UniqueId": "AnimatedIcon", + "Title": "AnimatedIcon", + "Subtitle": "An element that displays and controls an icon that animates when the user interacts with the control.", + "ImagePath": "ms-appx:///Assets/ControlImages/AnimatedIcon.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AnimationsIcon.png", + "Description": "An element that displays and controls an icon that animates when the user interacts with the control.", + "Content": "

Look at the AnimatedIconPage.xaml and AnimatedIconPage.xaml.cs files in Visual Studio to see the full code for this page.

", + "IsNew": true, + "Docs": [ + { + "Title": "AnimatedIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedicon" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/animated-icon" + }, + { + "Title": "Lottie Overview", + "Uri": "https://docs.microsoft.com/windows/communitytoolkit/animations/lottie" + }, + { + "Title": "Lottie Windows - GitHub", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedvisualplayer" + } + ] + }, + { + "UniqueId": "IconElement", + "Title": "IconElement", + "Subtitle": "Represents icon controls that use different image types as its content.", + "ImagePath": "ms-appx:///Assets/ControlImages/IconElement.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ImageIcon.png", + "Description": "Represents icon controls that use different image types as its content.", + "Content": "

Look at the IconElementPage.xaml and IconElementPage.xaml.cs files in Visual Studio to see the full code for this page.

", + "IsNew": true, + "Docs": [ + { + "Title": "BitmapIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.bitmapicon" + }, + { + "Title": "FontIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.fonticon" + }, + { + "Title": "ImageIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.imageicon" + }, + { + "Title": "PathIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.pathicon" + }, + { + "Title": "SymbolIcon - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.symbolicon" + }, + { + "Title": "Icon Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/icons" + } + ], + "RelatedControls": [ + "AnimatedIcon", + "AppBarButton", + "MenuFlyoutItem" + ] + }, + { + "UniqueId": "RadialGradientBrush", + "Title": "RadialGradientBrush", + "Subtitle": "A brush to show radial gradients", + "ImagePath": "ms-appx:///Assets/ControlImages/Canvas.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CanvasIcon.png", + "Description": "Paints an area with a radial gradient. A center point defines the beginning of the gradient, and a radius defines the end point of the gradient.", + "Content": "The RadialGradientBrush is similar in programming model to the LinearGradientBrush. However, the linear gradient has a start and an end point to define the gradient vector, while the radial gradient has a circle, along with a focal point, to define the gradient behavior. The circle defines the end point of the gradient. The parameters can be provided as a ratio or absolute value by picking the mapping mode.", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "RadialGradientBrush - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.RadialGradientBrush" + } + ], + "RelatedControls": [ + "Acrylic", + "ColorPaletteResources" + ] + }, + { + "UniqueId": "RevealFocus", + "Title": "Reveal Focus", + "Subtitle": "Customize the style of your focus rectangles.", + "ImagePath": "ms-appx:///Assets/ControlImages/RevealFocus.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RevealFocusIcon.png", + "Description": "Reveal focus allows you to adapt focus rectangles to look like the focus rectangles available on Xbox.", + "Content": "

Look at the RevealFocusPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Reveal Focus - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.application.focusvisualkind#Windows_UI_Xaml_Application_FocusVisualKind" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/reveal-focus" + } + ], + "RelatedControls": [] + }, + { + "UniqueId": "ColorPaletteResources", + "Title": "ColorPaletteResources", + "Subtitle": "A type of resource that allows you to apply custom colors to your controls.", + "ImagePath": "ms-appx:///Assets/ControlImages/ColorPaletteResources.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "Apply custom colors to your controls through this cascading API, or scope them to a local subset.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Theme Editor (GitHub)", + "Uri": "https://github.com/Microsoft/fluent-xaml-theme-editor" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/color#scoping-with-a-resourcedictionary" + }, + { + "Title": "ColorPaletteResources - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.colorpaletteresources" + } + ] + }, + { + "UniqueId": "CompactSizing", + "Title": "Compact Sizing", + "Subtitle": "How to use a Resource Dictionary to enable compact sizing.", + "ImagePath": "ms-appx:///Assets/ControlImages/CompactSizing.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/CompactSizingIcon.png", + "Description": "Compact dictionary included in WinUI 2.1. Allows you to create compact smaller apps by adding this at the page or the grid level.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Spacing", + "Uri": "https://docs.microsoft.com/windows/apps/design/style/spacing" + } + ] + }, + { + "UniqueId": "SystemBackdrops", + "Title": "System Backdrops (Mica/Acrylic)", + "Subtitle": "System backdrops, like Mica and Acrylic, for the window.", + "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/SystemBackdropsIcon.png", + "Description": "System backdrops are used to provide a different background for a Window other than the default white or black (depending on Light or Dark theme). Mica and Desktop Acrylic are the current supported backdrops. Applying a backdrop currently requires a bunch of app code, but this will be easier in a future release.", + "Content": "

Look at the SampleSystemBackdropsWindow.xaml.cs file in Visual Studio to see the full code for applying a backdrop.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "MicaController - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.composition.systembackdrops.micacontroller" + }, + { + "Title": "DesktopAcrylicController - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.composition.systembackdrops.desktopacryliccontroller" + } + ], + "RelatedControls": [] + } + ] + }, + { + "UniqueId": "Text", + "Title": "Text", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "AutoSuggestBox", + "Title": "AutoSuggestBox", + "Subtitle": "A control to provide suggestions as a user is typing.", + "ImagePath": "ms-appx:///Assets/ControlImages/AutoSuggestBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/AutoSuggestBoxIcon.png", + "Description": "A text control that makes suggestions to users as they type. The app is notified when text has been changed by the user and is responsible for providing relevant suggestions for this control to display.", + "Content": "

Look at the AutoSuggestBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "AutoSuggestBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.autosuggestbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/auto-suggest-box" + } + ], + "RelatedControls": [ + "ListBox", + "ComboBox", + "TextBox" + ] + }, + { + "UniqueId": "NumberBox", + "Title": "NumberBox", + "Subtitle": "A text control used for numeric input and evaluation of algebraic equations.", + "ImagePath": "ms-appx:///Assets/ControlImages/NumberBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/NumberBoxIcon.png", + "Description": "Use NumberBox to allow users to enter algebraic equations and numeric input in your app.", + "Content": "

Look at the NumberBox.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "NumberBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.numberbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/number-box" + } + ], + "RelatedControls": [ + "TextBox", + "TextBlock", + "RichTextBlock", + "RichEditBox" + ] + }, + { + "UniqueId": "PasswordBox", + "Title": "PasswordBox", + "Subtitle": "A control for entering passwords.", + "ImagePath": "ms-appx:///Assets/ControlImages/PasswordBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/PasswordBoxIcon.png", + "Description": "A user can enter a single line of non-wrapping text in a PasswordBox control. The text is masked by characters that you can specify by using the PasswordChar property, and you can specify the maximum number of characters that the user can enter by setting the MaxLength property.", + "Content": "

Look at the PasswordBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "PasswordBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.passwordbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "TextBox", + "TextBlock", + "RichTextBlock", + "RichEditBox" + ] + }, + { + "UniqueId": "RichEditBox", + "Title": "RichEditBox", + "Subtitle": "A rich text editing control that supports formatted text, hyperlinks, and other rich content.", + "ImagePath": "ms-appx:///Assets/ControlImages/RichEditBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RichEditBoxIcon.png", + "Description": "You can use a RichEditBox control to enter and edit rich text documents that contain formatted text, hyperlinks, and images. By default, the RichEditBox supports spell checking. You can make a RichEditBox read-only by setting its IsReadOnly property to true.", + "Content": "

On this page, you can type into the RichTextBox control and save it as a RichTextFormat (.rtf) document, or load an existing .rtf document. You can format the text as Bold or Underlined, and change the text color.

Look at the RichEditBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "RichEditBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.richeditbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "NumberBox", + "TextBox", + "RichTextBlock", + "TextBlock" + ] + }, + { + "UniqueId": "RichTextBlock", + "Title": "RichTextBlock", + "Subtitle": "A control that displays formatted text, hyperlinks, inline images, and other rich content.", + "ImagePath": "ms-appx:///Assets/ControlImages/RichTextBlock.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/RichTextBlockIcon.png", + "Description": "RichTextBlock provides more advanced formatting features than the TextBlock control. You can apply character and paragraph formatting to the text in the RichTextBlock. For example, you can apply Bold, Italic, and Underline to any portion of the text in the control. You can use linked text containers (a RichTextBlock linked to RichTextBlockOverflow elements) to create advanced page layouts.", + "Content": "

Change the width of the app to see how the RichTextBlock overflows into additional columns as the app gets narrower.

Look at the RichTextBlockPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": true, + "Docs": [ + { + "Title": "RichTextBlock - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.richtextblock" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "NumberBox", + "TextBlock", + "TextBox", + "PasswordBox", + "RichEditBox" + ] + }, + { + "UniqueId": "TextBlock", + "Title": "TextBlock", + "Subtitle": "A lightweight control for displaying small amounts of text.", + "ImagePath": "ms-appx:///Assets/ControlImages/TextBlock.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBlockIcon.png", + "Description": "TextBlock is the primary control for displaying read-only text in your app. You typically display text by setting the Text property to a simple string. You can also display a series of strings in Run elements and give each different formatting.", + "Content": "

Look at the TextBlockPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TextBlock - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.textblock" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "NumberBox", + "TextBox", + "RichTextBlock", + "PasswordBox", + "RichEditBox" + ] + }, + { + "UniqueId": "TextBox", + "Title": "TextBox", + "Subtitle": "A single-line or multi-line plain text field.", + "ImagePath": "ms-appx:///Assets/ControlImages/TextBox.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TextBoxIcon.png", + "Description": "Use a TextBox to let a user enter simple text input in your app. You can add a header and placeholder text to let the user know what the TextBox is for, and you can customize it in other ways.", + "Content": "

Look at the TextBoxPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "TextBox - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.textbox" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/controls/text-controls" + } + ], + "RelatedControls": [ + "NumberBox", + "TextBlock", + "RichTextBlock", + "PasswordBox", + "RichEditBox", + "AutoSuggestBox" + ] + } + ] + }, + { + "UniqueId": "Motion", + "Title": "Motion", + "Subtitle": "", + "ImagePath": "", + "ImageIconPath": "", + "Description": "", + "Items": [ + { + "UniqueId": "ConnectedAnimation", + "Title": "Connected Animation", + "Subtitle": "Connected animations continue elements during page navigation and help the user maintain their context between views.", + "ImagePath": "ms-appx:///Assets/ControlImages/ConnectedAnimation.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ConnectedAnimationsIcon.png", + "Description": "Connected animations continue elements during page navigation and help the user maintain their context between views.", + "Content": "

Look at the ConnectedAnimationPage.xaml and ConnectedAnimationPage.xaml.cs files in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ConnectedAnimation - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.connectedanimation" + }, + { + "Title": "ConnectedAnimationService - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.connectedanimationservice" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/connected-animation" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "PageTransition", + "ThemeTransition" + ] + }, + { + "UniqueId": "EasingFunction", + "Title": "Easing Functions", + "Subtitle": "Easing is a way to manipulate the velocity of an object as it animates.", + "ImagePath": "ms-appx:///Assets/ControlImages/EasingFunction.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/EasingFunctionsIcon.png", + "Description": "Easing is a way to manipulate the velocity of an object as it animates.", + "Content": "

Look at the EasingFunctionPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "EasingFunctionBase - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.animation.easingfunctionbase" + }, + { + "Title": "Timing and Easing", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/timing-and-easing" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "ConnectedAnimation", + "PageTransition", + "ThemeTransition" + ] + }, + { + "UniqueId": "PageTransition", + "Title": "Page Transitions", + "Subtitle": "Page transitions provide visual feedback about the relationship between pages.", + "ImagePath": "ms-appx:///Assets/ControlImages/PageTransition.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", + "Description": "Page transitions provide visual feedback about the relationship between pages.", + "Content": "

Look at the PageTransitionPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "NavigationThemeTransition - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Media.Animation.NavigationThemeTransition" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/page-transitions" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "ConnectedAnimation", + "ThemeTransition" + ] + }, + { + "UniqueId": "ThemeTransition", + "Title": "Theme Transitions", + "Subtitle": "Theme transitions are pre-packaged, easy-to-apply animations.", + "ImagePath": "ms-appx:///Assets/ControlImages/ThemeTransition.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", + "Description": "Theme transitions are pre-packaged, easy-to-apply animations.", + "Content": "

Look at the ThemeTransitionPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "Transitions - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/xaml-animation#animations-available-in-the-library" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "ImplicitTransition", + "PageTransition" + ] + }, + { + "UniqueId": "XamlCompInterop", + "Title": "Animation interop", + "Subtitle": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more.", + "ImagePath": "ms-appx:///Assets/ControlImages/AnimationInterop.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/StoryboardAnimationIcon.png", + "IsNew": false, + "IsUpdated": false, + "Description": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more", + "Content": "

Look at the XamlCompInteropPage.xaml.cs file in Visual Studio to see the full code for this page.

", + "Docs": [ + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + }, + { + "Title": "Composition Animation - API", + "Uri": "https://docs.microsoft.com/windows/uwp/composition/composition-animation" + }, + { + "Title": "Guidelines - Xaml Property Animations", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/xaml-property-animations" + }, + { + "Title": "Using the Visual Layer with XAML", + "Uri": "https://docs.microsoft.com/windows/uwp/composition/using-the-visual-layer-with-xaml" + } + ], + "RelatedControls": [ + "EasingFunction" + ] + }, + { + "UniqueId": "ImplicitTransition", + "Title": "Implicit Transitions", + "Subtitle": "Use Implicit Transitions to automatically animate changes to properties.", + "ImagePath": "ms-appx:///Assets/ControlImages/ImplicitTransition.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/TransitionsIcon.png", + "IsNew": false, + "IsUpdated": false, + "Description": "Use Implicit Transitions to automatically animate changes to properties.", + "Content": "

Look at the ImplicitTransitionPage.xaml file in Visual Studio to see the full code for this page.

", + "Docs": [ + { + "Title": "Transitions - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/motion-in-practice#implicit-animations" + }, + { + "Title": "Quickstart: Motion", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion" + } + ], + "RelatedControls": [ + "PageTransition", + "ThemeTransition" + ] + }, + { + "UniqueId": "ParallaxView", + "Title": "ParallaxView", + "Subtitle": "A container control that provides the parallax effect when scrolling.", + "ImagePath": "ms-appx:///Assets/ControlImages/ParallaxView.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/ParallaxViewIcon.png", + "Description": "A container control that provides the parallax effect when scrolling.", + "Content": "", + "IsNew": false, + "IsUpdated": false, + "Docs": [ + { + "Title": "ParallaxView - API", + "Uri": "https://docs.microsoft.com/windows/winui/api/microsoft.UI.Xaml.Controls.Parallaxview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/windows/apps/design/motion/parallax" + } + ], + "RelatedControls": [ + "ScrollViewer" + ] + } + ] + }, + { + "UniqueId": "MultipleWindows", + "Title": "Windows", + "Subtitle": "", + "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "", + "Items": [ + { + "UniqueId": "CreateMultipleWindows", + "Title": "Create Multiple Windows", + "Subtitle": "An example showing the creation of single-threaded top level Xaml windows.", + "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "With Windows App SDK 1.0 we are allowing creation of single-threaded multiple top level Xaml windows in Desktop apps", + "Content": "

Look at the CreateMultipleWindowsPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "MultipleWindow - API", + "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" + } + ], + "RelatedControls": [] + }, + { + "UniqueId": "TitleBar", + "Title": "TitleBar", + "Subtitle": "An example showing a custom UIElement used as the titlebar for the app's window.", + "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png", + "Description": "This sample shows how to use a custom UIElement as titlebar for app's window.", + "Content": "

Look at the TitleBarPage.xaml file in Visual Studio to see the full code for this page.

", + "IsNew": true, + "IsUpdated": false, + "Docs": [ + { + "Title": "TitleBar - API", + "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window.extendscontentintotitlebar?view=winui-3.0" + }, + { + "Title": "Guidelines", + "Uri": "https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window?view=winui-3.0-preview" + } + ], + "RelatedControls": [] + } + ] + } + ] } \ No newline at end of file