ControlInfoData.json

{
  "Groups": [
    {
      "UniqueId": "Design_Guidance",
      "Title": "Design guidance",
      "IconGlyph": "",
      "IsSpecialSection": true,
      "Folder": "DesignGuidance",
      "Items": [
        {
          "UniqueId": "Typography",
          "Title": "Typography",
          "SourcePath": "/CommonStyles/TextBlock_themeresources.xaml",
          "Docs": [
            {
              "Title": "Typography in Windows Apps",
              "Uri": "https://learn.microsoft.com/windows/apps/design/style/typography"
            },
            {
              "Title": "XAML theme resources",
              "Uri": "https://learn.microsoft.com/windows/apps/design/style/xaml-theme-resources#the-xaml-type-ramp"
            },
            {
              "Title": "Typography in Windows 11",
              "Uri": "https://learn.microsoft.com/windows/apps/design/signature-experiences/typography"
            }
          ]
        },
        {
          "UniqueId": "Icons",
          "Title": "Icons",
          "Docs": [
            {
              "Title": "Iconography in Windows 11",
              "Uri": "https://learn.microsoft.com/windows/apps/design/signature-experiences/iconography#system-icons"
            },
            {
              "Title": "Segoe Fluent Icons font",
              "Uri": "https://learn.microsoft.com/windows/apps/design/style/segoe-fluent-icons-font"
            }
          ]
        },
        {
          "UniqueId": "Colors",
          "Title": "Colors",
          "Docs": [
            {
              "Title": "Colors in Windows 11",
              "Uri": "https://learn.microsoft.com/windows/apps/design/signature-experiences/color"
            },
            {
              "Title": "Windows UI Toolkit (Figma)",
              "Uri": "https://www.figma.com/community/file/1159947337437047524"
            },
            {
              "Title": "WinUI Theme Resources (GitHub)",
              "Uri": "https://github.com/microsoft/microsoft-ui-xaml/blob/winui3/release/1.4-stable/controls/dev/CommonStyles/Common_themeresources_any.xaml"
            }
          ]
        }
      ]
    },
    {
      "UniqueId": "AccessibilityItem",
      "Title": "Accessibility",
      "IsSpecialSection": true,
      "Folder": "Accessibility",
      "Items": [
        {
          "UniqueId": "AccessibilityColorContrast",
          "Title": "Color Contrast",
          "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png",
          "Docs": [
            {
              "Title": "Accessibility",
              "Uri": "https://learn.microsoft.com/windows/apps/design/accessibility/accessibility"
            },
            {
              "Title": "Automation Properties - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.automation.automationproperties"
            }
          ]
        },
        {
          "UniqueId": "AccessibilityKeyboard",
          "Title": "Keyboard Support",
          "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png",
          "Docs": [
            {
              "Title": "Accessibility",
              "Uri": "https://learn.microsoft.com/windows/apps/design/accessibility/accessibility"
            },
            {
              "Title": "Accessibility overview",
              "Uri": "https://learn.microsoft.com/windows/apps/design/accessibility/accessibility-overview"
            },
            {
              "Title": "Keyboard accessibility",
              "Uri": "https://learn.microsoft.com/windows/apps/design/accessibility/keyboard-accessibility"
            },
            {
              "Title": "Keyboard interactions",
              "Uri": "https://learn.microsoft.com/windows/apps/design/input/keyboard-interactions"
            },
            {
              "Title": "Access keys",
              "Uri": "https://learn.microsoft.com/windows/apps/design/input/access-keys"
            },
            {
              "Title": "Keyboard accelerators",
              "Uri": "https://learn.microsoft.com/windows/apps/design/input/keyboard-accelerators"
            },
            {
              "Title": "Focus navigation for keyboard, gamepad, remote control, and accessibility tools",
              "Uri": "https://learn.microsoft.com/windows/apps/design/input/focus-navigation"
            },
            {
              "Title": "Automation Properties - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.automation.automationproperties"
            }
          ]
        },
        {
          "UniqueId": "AccessibilityScreenReader",
          "Title": "Screen Reader Support",
          "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png",
          "Docs": [
            {
              "Title": "Accessibility",
              "Uri": "https://learn.microsoft.com/windows/apps/design/accessibility/accessibility"
            },
            {
              "Title": "Accessibility overview",
              "Uri": "https://learn.microsoft.com/windows/apps/design/accessibility/accessibility-overview"
            },
            {
              "Title": "Expose basic accessibility information",
              "Uri": "https://learn.microsoft.com/windows/apps/design/accessibility/basic-accessibility-information"
            },
            {
              "Title": "Landmarks and Headings",
              "Uri": "https://learn.microsoft.com/windows/apps/design/accessibility/landmarks-and-headings"
            },
            {
              "Title": "Accessible text requirements",
              "Uri": "https://learn.microsoft.com/windows/apps/design/accessibility/accessible-text-requirements"
            },
            {
              "Title": "Complete guide to Narrator",
              "Uri": "https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1"
            }
          ]
        }
      ]
    },
    {
      "UniqueId": "MenusAndToolbars",
      "Title": "Menus & toolbars",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "XamlUICommand",
          "Title": "XamlUICommand",
          "ApiNamespace": "Microsoft.UI.Xaml.Input",
          "Subtitle": "An object which is used to define the look and feel of a given command.",
          "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.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.",
          "Docs": [
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-xamluicommand-class"
            },
            {
              "Title": "XamlUICommand - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.xamluicommand"
            }
          ],
          "RelatedControls": [
            "StandardUICommand",
            "AppBarButton",
            "AppBarToggleButton",
            "CommandBar"
          ]
        },
        {
          "UniqueId": "StandardUICommand",
          "Title": "StandardUICommand",
          "ApiNamespace": "Microsoft.UI.Xaml.Input",
          "Subtitle": "A StandardUICommand is a built-in 'XamlUICommand' which represents a commonly used command, e.g. 'Save'.",
          "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.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.",
          "Docs": [
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/commanding#command-experiences-using-the-standarduicommand-class"
            },
            {
              "Title": "StandardUICommand - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.standarduicommand"
            }
          ],
          "RelatedControls": [
            "XamlUICommand",
            "AppBarButton",
            "AppBarToggleButton",
            "CommandBar"
          ]
        },
        {
          "UniqueId": "AppBarButton",
          "Title": "AppBarButton",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A button that's styled for use in a CommandBar.",
          "ImagePath": "ms-appx:///Assets/ControlImages/AppBarButton.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": "<p>You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.</p><p>Use the <b>Label</b> and <b>Icon</b> properties to define the content of the app bar buttons. Set the <b>Label</b> 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 <b>Icon</b> property to an element derived from the <b>IconElement</b> class. Four kinds of icon elements are provided:</p><p><b>FontIcon</b> - The icon is based on a glyph from the specified font family.</p><p><b>BitmapIcon</b> - The icon is based on a bitmap image file with the specified Uri.</p><p><b>PathIcon</b> - The icon is based on Path data.</p><p><b>SymbolIcon</b> - The icon is based on a predefined list of glyphs from the Segoe UI Symbol font.</p><p>Look at the <i>AppBarButtonPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath":  "/CommonStyles/AppBarButton_themeresources.xaml",
          "Docs": [
            {
              "Title": "AppBarButton - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.appbarbutton"
            },
            {
              "Title": "SymbolIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.symbolicon"
            },
            {
              "Title": "FontIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.fonticon"
            },
            {
              "Title": "BitmapIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.bitmapicon"
            },
            {
              "Title": "PathIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.pathicon"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/command-bar"
            }
          ],
          "RelatedControls": [
            "AppBarToggleButton",
            "AppBarSeparator",
            "CommandBar"
          ]
        },
        {
          "UniqueId": "AppBarSeparator",
          "Title": "AppBarSeparator",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A vertical line that's used to visually separate groups of commands in an app bar.",
          "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.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": "<p>You can open the app bar and toggle the IsCompact button to see how the app bar buttons and separators on this page change.</p><p>When the <b>IsCompact</b> property is true, the padding around the <b>AppBarSeparator</b> is reduced.</p><p>Look at the <i>AppBarSeparatorPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/AppBarSeparator_themeresources.xaml",
          "Docs": [
            {
              "Title": "AppBarSeparator - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.appbarseparator"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/command-bar"
            }
          ],
          "RelatedControls": [
            "AppBarButton",
            "AppBarToggleButton",
            "CommandBar"
          ]
        },
        {
          "UniqueId": "AppBarToggleButton",
          "Title": "AppBarToggleButton",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "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",
          "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": "<p>You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.</p><p>Look at the <i>AppBarToggleButtonPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/AppBarToggleButton_themeresources.xaml",
          "Docs": [
            {
              "Title": "AppBarToggleButton - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.appbartogglebutton"
            },
            {
              "Title": "SymbolIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.symbolicon"
            },
            {
              "Title": "FontIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.fonticon"
            },
            {
              "Title": "BitmapIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.bitmapicon"
            },
            {
              "Title": "PathIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.pathicon"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/command-bar"
            }
          ],
          "RelatedControls": [
            "AppBarButton",
            "AppBarSeparator",
            "CommandBar"
          ]
        },
        {
          "UniqueId": "CommandBar",
          "Title": "CommandBar",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A toolbar for displaying application-specific commands that handles layout and resizing of its contents.",
          "ImagePath": "ms-appx:///Assets/ControlImages/CommandBar.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": "<p>The bottom app bar on this page is a <b>CommandBar</b> control.</p><p>Add secondary commands and then resize the app to see how the <b>CommandBar</b> automatically adapts to different widths.</p><p>This <b>CommandBar</b> element is in the ItemPage so it can be shared across all control pages in the app. Look at the <i>ItemPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/CommandBar_themeresources.xaml",
          "Docs": [
            {
              "Title": "CommandBar - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.commandbar"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/command-bar"
            }
          ],
          "RelatedControls": [
            "AppBarButton",
            "AppBarToggleButton",
            "AppBarSeparator"
          ]
        },
        {
          "UniqueId": "MenuBar",
          "Title": "MenuBar",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A classic menu, allowing the display of MenuItems containing MenuFlyoutItems.",
          "ImagePath": "ms-appx:///Assets/ControlImages/MenuBar.png",
          "Description": "The Menubar simplifies the creation of basic applications by providing a set of menus at the top of the app or window.",
          "SourcePath": "/MenuBar",
          "Docs": [
            {
              "Title": "MenuBar - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Controls.MenuBar"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/menus"
            }
          ],
          "RelatedControls": [
            "CommandBar",
            "MenuFlyout",
            "StandardUICommand",
            "XamlUICommand"
          ]
        },
        {
          "UniqueId": "CommandBarFlyout",
          "Title": "CommandBarFlyout",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A mini-toolbar displaying proactive commands, and an optional menu of commands.",
          "ImagePath": "ms-appx:///Assets/ControlImages/CommandBarFlyout.png",
          "Description": "A mini-toolbar which displays a set of proactive commands, as well as a secondary menu of commands if desired.",
          "SourcePath": "/MenuBar",
          "Docs": [
            {
              "Title": "CommandBarFlyout - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.commandbarflyout"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/command-bar-flyout"
            }
          ],
          "RelatedControls": [
            "CommandBar",
            "MenuFlyout",
            "RichEditBox",
            "TextBox",
            "StandardUICommand",
            "XamlUICommand"
          ]
        },
        {
          "UniqueId": "MenuFlyout",
          "Title": "MenuFlyout",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "Shows a contextual list of simple commands or options.",
          "ImagePath": "ms-appx:///Assets/ControlImages/MenuFlyout.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": "<p>Look at the <i>MenuFlyoutPage.xaml</i> file in Visual Studio to see the full code.</p>",
          "SourcePath": "/CommonStyles/MenuFlyout_themeresources.xaml",
          "Docs": [
            {
              "Title": "MenuFlyout - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.menuflyout"
            },
            {
              "Title": "MenuFlyoutItem - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.menuflyoutitem"
            },
            {
              "Title": "MenuFlyoutSeparator - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.menuflyoutseparator"
            },
            {
              "Title": "ToggleMenuFlyoutItem - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.togglemenuflyoutitem"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/menus"
            }
          ],
          "RelatedControls": [
            "Flyout",
            "ContentDialog",
            "Button",
            "AppBarButton"
          ]
        },
        {
          "UniqueId": "SwipeControl",
          "Title": "SwipeControl",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "Touch gesture for quick menu actions on items.",
          "ImagePath": "ms-appx:///Assets/ControlImages/SwipeControl.png",
          "Description": "Touch gesture for quick menu actions on items.",
          "IsUpdated": true,
          "Docs": [
            {
              "Title": "SwipeControl - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.swipecontrol"
            },
            {
              "Title": "SwipeItems - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.swipeitems"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/swipe"
            },
            {
              "Title": "Gesture Actions",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/collection-commanding"
            }
          ],
          "RelatedControls": [
            "GridView",
            "ListView"
          ]
        }
      ]
    },
    {
      "UniqueId": "Collections",
      "Title": "Collections",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "FlipView",
          "Title": "FlipView",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "Presents a collection of items that the user can flip through, one item at a time.",
          "ImagePath": "ms-appx:///Assets/ControlImages/FlipView.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": "<p><b>FlipView</b> is an <b>ItemsControl</b>, so it can contain a collection of items of any type. To populate the view, add items to the <b>Items</b> collection, or set the <b>ItemsSource</b> property to a data source.</p><p>Look at the <i>FlipViewPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/FlipView_themeresources.xaml",
          "Docs": [
            {
              "Title": "FlipView - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.flipview"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/flipview"
            }
          ],
          "RelatedControls": [
            "GridView",
            "ListView",
            "SemanticZoom"
          ]
        },
        {
          "UniqueId": "GridView",
          "Title": "GridView",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that presents a collection of items in rows and columns.",
          "ImagePath": "ms-appx:///Assets/ControlImages/GridView.png",
          "Description": "The GridView lets you show a collection of items arranged in rows and columns that scroll horizontally.",
          "Content": "<p><b>GridView</b> is an <b>ItemsControl</b>, so it can contain a collection of items of any type. To populate the view, add items to the <b>Items</b> collection, or set the <b>ItemsSource</b> property to a data source.</p><p>Set an <b>ItemTemplate</b> to define the look of individual items.</p><p>Look at the <i>GridViewPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/GridViewItem_themeresources.xaml",
          "Docs": [
            {
              "Title": "GridView - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.gridview"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/lists"
            }
          ],
          "RelatedControls": [
            "ItemsView",
            "ListView",
            "FlipView",
            "SemanticZoom"
          ]
        },
        {
          "UniqueId": "ItemsView",
          "Title": "ItemsView",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that presents a collection of items using various layouts.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ItemsView.png",
          "Description": "The ItemsView lets you show a collection of items using scrollable & swappable layouts.",
          "Content": "<p><b>ItemsView</b> can contain a collection of items of any type. To populate the view, set the <b>ItemsSource</b> property to a data source.</p><p>Set a <b>Layout</b> to define how the items are laid out.</p><p>Set an <b>ItemTemplate</b> to define the look of individual items.</p><p>Look at the <i>ItemsViewPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/ItemsView",
          "IsNew": true,
          "Docs": [
            {
              "Title": "ItemsView - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.itemsview"
            },
            {
              "Title": "CollectionViewSource - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Data.CollectionViewSource"
            }
          ],
          "RelatedControls": [
            "AnnotatedScrollBar",
            "ItemsRepeater",
            "ListView",
            "GridView",
            "ScrollView"
          ]
        },
        {
          "UniqueId": "ListBox",
          "Title": "ListBox",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that presents an inline list of items that the user can select from.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ListBox.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": "<p>Look at the <i>ListBoxPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/ListBox_themeresources.xaml",
          "Docs": [
            {
              "Title": "ListBox - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.listbox"
            },
            {
              "Title": "ListBoxItem - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.listboxitem"
            }
          ],
          "RelatedControls": [
            "ComboBox",
            "RadioButton",
            "CheckBox",
            "AutoSuggestBox"
          ]
        },
        {
          "UniqueId": "ListView",
          "Title": "ListView",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that presents a collection of items in a vertical list.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png",
          "Description": "The ListView lets you show a collection of items in a list that scrolls vertically.",
          "Content": "<p><b>ListView</b> is an <b>ItemsControl</b>, so it can contain a collection of items of any type. To populate the view, add items to the <b>Items</b> collection, or set the <b>ItemsSource</b> property to a data source.</p><p>Set an <b>ItemTemplate</b> to define the look of individual items.</p><p>Look at the <i>ListViewPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsUpdated": true,
          "SourcePath": "/CommonStyles/ListViewItem_themeresources.xaml",
          "Docs": [
            {
              "Title": "ListView - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.listview"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.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://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Data.CollectionViewSource"
            },
            {
              "Title": "Filtering collections and lists through user input",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/listview-filtering"
            },
            {
              "Title": "Inverted Lists",
              "Uri": "https://learn.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": [
            "ItemsView",
            "GridView",
            "StandardUICommand",
            "FlipView",
            "SemanticZoom"
          ]
        },
        {
          "UniqueId": "PullToRefresh",
          "Title": "PullToRefresh",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "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",
          "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": "<p><b>PullToRefresh</b> can be used for a collection of items of any type. To populate the view, add items to the <b>Items</b> collection, or set the <b>ItemsSource</b> property to a data source.</p><p>Set an <b>ItemTemplate</b> to define the look of individual items.</p><p>Look at the <i>ListViewPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/PullToRefresh",
          "Docs": [
            {
              "Title": "RefreshContainer - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Controls.RefreshContainer"
            },
            {
              "Title": "RefreshVisualizer - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Controls.RefreshVisualizer"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/pull-to-refresh"
            }
          ]
        },
        {
          "UniqueId": "TreeView",
          "Title": "TreeView",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "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",
          "Description": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items. ",
          "Content": "<p><b>PullToRefresh</b> can be used for a collection of items of any type. To populate the view, add items to the <b>Items</b> collection, or set the <b>ItemsSource</b> property to a data source.</p><p>Set an <b>ItemTemplate</b> to define the look of individual items.</p><p>Look at the <i>ListViewPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/TreeView",
          "Docs": [
            {
              "Title": "TreeView - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Controls.TreeView"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.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",
          "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.",
          "Docs": [
            {
              "Title": "DataGrid - API",
              "Uri": "https://aka.ms/win10datagridapidoc"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://aka.ms/win10datagriddoc"
            },
            {
              "Title": "Windows Community Toolkit",
              "Uri": "https://learn.microsoft.com/windows/communitytoolkit"
            }
          ],
          "RelatedControls": [
            "GridView",
            "TreeView"
          ]
        }
      ]
    },
    {
      "UniqueId": "DateAndTime",
      "Title": "Date & time",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "CalendarDatePicker",
          "Title": "CalendarDatePicker",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that lets users pick a date value using a calendar.",
          "ImagePath": "ms-appx:///Assets/ControlImages/CalendarDatePicker.png",
          "Description": "A control that lets users pick a date value using a calendar.",
          "SourcePath": "/CommonStyles/CalendarDatePicker_themeresources.xaml",
          "Docs": [
            {
              "Title": "CalendarDatePicker - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.calendardatepicker"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/calendar-date-picker"
            }
          ],
          "RelatedControls": [
            "DatePicker",
            "CalendarView"
          ]
        },
        {
          "UniqueId": "CalendarView",
          "Title": "CalendarView",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that presents a calendar for a user to choose a date from.",
          "ImagePath": "ms-appx:///Assets/ControlImages/CalendarView.png",
          "Description": "CalendarView shows a larger view for showing and selecting dates.  DatePicker by contrast has a compact view with inline selection.",
          "Content": "<p>Look at the <i>CalendarView.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/CalendarView_themeresources.xaml",
          "Docs": [
            {
              "Title": "CalendarView - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.calendarview"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/calendar-view"
            }
          ],
          "RelatedControls": [
            "CalendarDatePicker",
            "DatePicker",
            "TimePicker"
          ]
        },
        {
          "UniqueId": "DatePicker",
          "Title": "DatePicker",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that lets a user pick a date value.",
          "ImagePath": "ms-appx:///Assets/ControlImages/DatePicker.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": "<p>Look at the <i>DatePickerPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/DatePicker_themeresources.xaml",
          "Docs": [
            {
              "Title": "DatePicker - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.datepicker"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/date-picker"
            }
          ],
          "RelatedControls": [
            "CalendarDatePicker",
            "CalendarView",
            "TimePicker"
          ]
        },
        {
          "UniqueId": "TimePicker",
          "Title": "TimePicker",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A configurable control that lets a user pick a time value.",
          "ImagePath": "ms-appx:///Assets/ControlImages/TimePicker.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": "<p>Look at the <i>TimePickerPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/TimePicker_themeresources.xaml",
          "Docs": [
            {
              "Title": "TimePicker - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.timepicker"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/time-picker"
            }
          ],
          "RelatedControls": [
            "DatePicker",
            "CalendarView"
          ]
        }
      ]
    },
    {
      "UniqueId": "BasicInput",
      "Title": "Basic input",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "InputValidation",
          "Title": "InputValidation",
          "Subtitle": "A feature to display developer-defined errors for text values",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "ImagePath": "ms-appx:///Assets/ControlImages/InputValidation.png",
          "Description": "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",
          "Content": "<p>Look at the <i>InputValidationPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "RelatedControls": [
            "TextBox",
            "PasswordBox"
          ]
        },
        {
          "UniqueId": "Button",
          "Title": "Button",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that responds to user input and raises a Click event.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Button.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": "<p>The main purpose of a <b>Button</b> is to make something happen when a user clicks it. There are two ways you can make something happen:</p><ul><li>Handle the <b>Click</b> event.</li><li>Bind the <b>Command</b> property to an ICommand implementation that describes the command logic.</li></ul><p>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.</p><p>Look at the <i>ButtonPage.xaml</i> file in Visual Studio to see the custom button style and template definitions used on this page.</p>",
          "IsUpdated": true,
          "SourcePath": "/CommonStyles/Button_themeresources.xaml",
          "Docs": [
            {
              "Title": "Button - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.button"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/buttons"
            }
          ],
          "RelatedControls": [
            "ToggleButton",
            "RepeatButton",
            "HyperlinkButton",
            "AppBarButton"
          ]
        },
        {
          "UniqueId": "DropDownButton",
          "Title": "DropDownButton",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A button that displays a flyout of choices when clicked.",
          "ImagePath": "ms-appx:///Assets/ControlImages/DropDownButton.png",
          "Description": "A control that drops down a flyout of choices from which one can be chosen.",
          "SourcePath": "/DropDownButton",
          "Docs": [
            {
              "Title": "DropDownButton - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.dropdownbutton"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/buttons"
            }
          ],
          "RelatedControls": [
            "SplitButton",
            "ToggleSplitButton",
            "ToggleButton",
            "RepeatButton",
            "HyperlinkButton",
            "AppBarButton",
            "CommandBar"
          ]
        },
        {
          "UniqueId": "HyperlinkButton",
          "Title": "HyperlinkButton",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "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",
          "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": "<p>A <b>HyperlinkButton</b> looks like hyperlink text, but works like a button. You can use it in two ways:</p><ul><li>Set the <b>NavigateUri</b> property. When a user clicks it, it will automatically open the URI in the default browser.</li><li>Handle the <b>Click</b> event. This works just like the <b>Click</b> event of a standard <b>Button</b>, and can be used to navigate within your app.</li></ul><p>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.</p><p>Look at the <i>HyperlinkButtonPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/HyperlinkButton_themeresources.xaml",
          "Docs": [
            {
              "Title": "HyperlinkButton - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.hyperlinkbutton"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/hyperlinks"
            }
          ],
          "RelatedControls": [
            "Button",
            "ToggleButton",
            "RepeatButton",
            "AppBarButton"
          ]
        },
        {
          "UniqueId": "RepeatButton",
          "Title": "RepeatButton",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls.Primitives",
          "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",
          "Description": "The RepeatButton control is like a standard Button, except that the Click event occurs continuously while the user presses the RepeatButton.",
          "Content": "<p>A <b>RepeatButton</b> looks just like a regular <b>Button</b>, but it's <b>Click</b> event occurs continuously while the button is pressed.</p><p>Look at the <i>RepeatButtonPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/RepeatButton_themeresources.xaml",
          "Docs": [
            {
              "Title": "RepeatButton - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.primitives.repeatbutton"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/buttons"
            }
          ],
          "RelatedControls": [
            "Button",
            "ToggleButton",
            "HyperlinkButton",
            "AppBarButton"
          ]
        },
        {
          "UniqueId": "ToggleButton",
          "Title": "ToggleButton",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls.Primitives",
          "Subtitle": "A button that can be switched between two states like a CheckBox.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ToggleButton.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": "<p><b>ToggleButton</b> is used as a base class for similar controls like <b>CheckBox</b> and <b>RadioButton</b>. It can be used on its own, but don't use it if a <b>CheckBox</b>, <b>RadioButton</b>, or <b>ToggleSwitch</b> would convey your intent better.</p><p>Look at the <i>ToggleButtonPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/ToggleButton_themeresources.xaml",
          "Docs": [
            {
              "Title": "ToggleButton - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.primitives.togglebutton"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/buttons#create-a-toggle-split-button"
            }
          ],
          "RelatedControls": [
            "Button",
            "AppBarToggleButton",
            "ToggleSwitch",
            "CheckBox",
            "CommandBarFlyout",
            "CommandBar"
          ]
        },
        {
          "UniqueId": "SplitButton",
          "Title": "SplitButton",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A two-part button that displays a flyout when its secondary part is clicked.",
          "ImagePath": "ms-appx:///Assets/ControlImages/SplitButton.png",
          "Description": "The splitbutton is a dropdown button, but with an addition execution hit target.",
          "IsUpdated": true,
          "SourcePath": "/SplitButton",
          "Docs": [
            {
              "Title": "SplitButton - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.splitbutton"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/buttons#create-a-split-button"
            }
          ],
          "RelatedControls": [
            "Button",
            "AppBarToggleButton",
            "CommandBar",
            "ToggleSwitch",
            "CheckBox",
            "CommandBarFlyout",
            "CommandBar"
          ]
        },
        {
          "UniqueId": "ToggleSplitButton",
          "Title": "ToggleSplitButton",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A version of the SplitButton where the activation target toggles on/off.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSplitButton.png",
          "Description": "A version of the SplitButton where the activation target toggles on/off.",
          "SourcePath": "/SplitButton",
          "Docs": [
            {
              "Title": "ToggleSplitButton - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.togglesplitbutton"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/buttons"
            }
          ],
          "RelatedControls": [
            "Button",
            "AppBarToggleButton",
            "ToggleSwitch",
            "CheckBox",
            "CommandBarFlyout",
            "CommandBar"
          ]
        },
        {
          "UniqueId": "CheckBox",
          "Title": "CheckBox",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that a user can select or clear.",
          "ImagePath": "ms-appx:///Assets/ControlImages/CheckBox.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": "<p>Check and uncheck these controls to see how they look in each state. The label for each <b>CheckBox</b> is defined by its <b>Content</b> property.</p><p>Use a three-state <b>CheckBox</b> 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 <i>SelectAllMethods</i> region of <i>CheckBoxPage.xaml.cs</i> to see how we did it.</p>",
          "IsUpdated": true,
          "SourcePath": "/CommonStyles/CheckBox_themeresources.xaml",
          "Docs": [
            {
              "Title": "CheckBox - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.checkbox"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/checkbox"
            }
          ],
          "RelatedControls": [
            "RadioButton",
            "ToggleSwitch",
            "ToggleButton"
          ]
        },
        {
          "UniqueId": "ColorPicker",
          "Title": "ColorPicker",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that displays a selectable color spectrum.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ColorPicker.png",
          "Description": "A selectable color spectrum.",
          "SourcePath": "/ColorPicker",
          "Docs": [
            {
              "Title": "ColorPicker - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Controls.ColorPicker"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/color-picker"
            }
          ],
          "RelatedControls": [
            "ComboBox"
          ]
        },
        {
          "UniqueId": "ComboBox",
          "Title": "ComboBox",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A drop-down list of items a user can select from.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ComboBox.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.",
          "SourcePath": "/ComboBox",
          "Docs": [
            {
              "Title": "ComboBox - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.combobox"
            },
            {
              "Title": "ComboBoxItem - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.comboboxitem"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/combo-box"
            }
          ],
          "RelatedControls": [
            "ListBox",
            "RadioButton",
            "CheckBox",
            "ListView",
            "AutoSuggestBox",
            "RatingControl"
          ]
        },
        {
          "UniqueId": "RadioButton",
          "Title": "RadioButton",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that allows a user to select a single option from a group of options.",
          "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png",
          "Description": "Use RadioButtons to let a user choose between mutually exclusive, related options. Generally contained within a RadioButtons group control.",
          "Content": "<p>Look at the <i>RadioButtonPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/RadioButton_themeresources.xaml",
          "Docs": [
            {
              "Title": "RadioButton - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.radiobutton"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/radio-button"
            }
          ],
          "RelatedControls": [
            "CheckBox",
            "RadioButtons",
            "ToggleSwitch",
            "ToggleButton"
          ]
        },
        {
          "UniqueId": "RatingControl",
          "Title": "RatingControl",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "Rate something 1 to 5 stars.",
          "ImagePath": "ms-appx:///Assets/ControlImages/RatingControl.png",
          "Description": "Rate something 1 to 5 stars.",
          "SourcePath": "/RatingControl",
          "Docs": [
            {
              "Title": "RatingControl - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Controls.RatingControl"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/rating"
            }
          ],
          "RelatedControls": [
            "Slider",
            "ComboBox"
          ]
        },
        {
          "UniqueId": "Slider",
          "Title": "Slider",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "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",
          "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": "<p>Look at the <i>SliderPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsUpdated": true,
          "SourcePath": "/CommonStyles/Slider_themeresources.xaml",
          "Docs": [
            {
              "Title": "Slider - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.slider"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/slider"
            }
          ],
          "RelatedControls": [
            "ComboBox",
            "ListBox",
            "RatingControl"
          ]
        },
        {
          "UniqueId": "ToggleSwitch",
          "Title": "ToggleSwitch",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A switch that can be toggled between 2 states.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ToggleSwitch.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": "<p>Look at the <i>ToggleSwitchPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/ToggleSwitch_themeresources.xaml",
          "Docs": [
            {
              "Title": "ToggleSwitch - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.toggleswitch"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/toggles"
            }
          ],
          "RelatedControls": [
            "ToggleButton",
            "RadioButton",
            "CheckBox",
            "AppBarToggleButton"
          ]
        }
      ]
    },
    {
      "UniqueId": "StatusAndInfo",
      "Title": "Status & info",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "InfoBadge",
          "Title": "InfoBadge",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "An non-intrusive UI to display notifications or bring focus to an area",
          "ImagePath": "ms-appx:///Assets/ControlImages/InfoBadge.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": "<p>Look at the <i>InfoBadgePage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/InfoBadge",
          "Docs": [
            {
              "Title": "InfoBadge - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.infobadge"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/info-badge"
            }
          ],
          "RelatedControls": [
            "InfoBar",
            "TeachingTip"
          ]
        },
        {
          "UniqueId": "InfoBar",
          "Title": "InfoBar",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "An inline message to display app-wide status change information",
          "ImagePath": "ms-appx:///Assets/ControlImages/InfoBar.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": "<p>Look at the <i>InfoBarPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsUpdated": true,
          "SourcePath": "/InfoBar",
          "Docs": [
            {
              "Title": "InfoBar - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.infobar"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/infobar"
            }
          ],
          "RelatedControls": [
            "TeachingTip",
            "ContentDialog"
          ]
        },
        {
          "UniqueId": "ProgressBar",
          "Title": "ProgressBar",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "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",
          "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": "<p>Look at the <i>ProgressBarPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/ProgressBar",
          "Docs": [
            {
              "Title": "ProgressBar - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Controls.ProgressBar"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/progress-controls"
            }
          ],
          "RelatedControls": [
            "ProgressRing"
          ]
        },
        {
          "UniqueId": "ProgressRing",
          "Title": "ProgressRing",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "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",
          "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": "<p>Look at the <i>ProgressRingPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/ProgressRing",
          "Docs": [
            {
              "Title": "ProgressRing - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.progressring"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/progress-controls"
            }
          ],
          "RelatedControls": [
            "ProgressBar"
          ]
        },
        {
          "UniqueId": "ToolTip",
          "Title": "ToolTip",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "Displays information for an element in a pop-up window.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ToolTip.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": "<p>Look at the <i>ToolTipPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/ToolTip_themeresources.xaml",
          "Docs": [
            {
              "Title": "ToolTip - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.tooltip"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/tooltips"
            }
          ],
          "RelatedControls": [
            "TeachingTip",
            "Flyout",
            "ContentDialog"
          ]
        }
      ]
    },
    {
      "UniqueId": "DialogsAndFlyouts",
      "Title": "Dialogs & flyouts",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "ContentDialog",
          "Title": "ContentDialog",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A dialog box that can be customized to contain any XAML content.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ContentDialog.png",
          "Description": "Use a ContentDialog to show relavant information or to provide a modal dialog experience that can show any XAML content.",
          "Content": "<p>Look at the <i>ContentDialog.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsUpdated": true,
          "SourcePath": "/CommonStyles/ContentDialog_themeresources.xaml",
          "Docs": [
            {
              "Title": "ContentDialog - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.contentdialog"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/dialogs"
            }
          ],
          "RelatedControls": [
            "Flyout",
            "MenuFlyout",
            "TeachingTip",
            "ToolTip"
          ]
        },
        {
          "UniqueId": "Flyout",
          "Title": "Flyout",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "Shows contextual information and enables user interaction.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Flyout.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": "<p>Look at the <i>FlyoutPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/FlyoutPresenter_themeresources.xaml",
          "Docs": [
            {
              "Title": "Flyout - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.flyout"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts"
            }
          ],
          "RelatedControls": [
            "TeachingTip",
            "ContentDialog",
            "MenuFlyout",
            "Button",
            "AppBarButton"
          ]
        },
        {
          "UniqueId": "TeachingTip",
          "Title": "TeachingTip",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A content-rich flyout for guiding users and enabling teaching moments.",
          "ImagePath": "ms-appx:///Assets/ControlImages/TeachingTip.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": "<p>Look at the <i>TeachingTip.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/TeachingTip",
          "Docs": [
            {
              "Title": "TeachingTip - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.teachingtip"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/dialogs-and-flyouts/teaching-tip"
            }
          ],
          "RelatedControls": [
            "ContentDialog",
            "Flyout",
            "ToolTip"
          ]
        }
      ]
    },
    {
      "UniqueId": "Scrolling",
      "Title": "Scrolling",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "AnnotatedScrollBar",
          "Title": "AnnotatedScrollBar",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that extends a regular vertical scrollbar's functionality for an easy navigation through large collections.",
          "ImagePath": "ms-appx:///Assets/ControlImages/AnnotatedScrollbar.png",
          "Description": "The AnnotatedScrollBar lets you navigate through a large collection of items via a clickable rail with labels which act as markers.",
          "Content": "<p><b>AnnotatedScrollBar</b> can be connected to a scrollable container, like a ScrollView, via its <b>ScrollController</b> property.</p><p>Populate the <b>Labels</b> property with special values that act as markers.</p><p>Set the <b>LabelTemplate</b> and <b>DetailLabelTemplate</b> data templates to define the labels' and more granular tooltips' looks.</p><p>Look at the <i>AnnotatedScrollBarPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsNew": true,
          "SourcePath": "/AnnotatedScrollBar",
          "Docs": [
            {
              "Title": "AnnotatedScrollBar - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.annotatedscrollbar"
            }
          ],
          "RelatedControls": [
            "ItemsView",
            "ScrollView"
          ]
        },
        {
          "UniqueId": "PipsPager",
          "Title": "PipsPager",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "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",
          "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": "<p>Look at the <i>PipsPagerPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/PipsPager",
          "Docs": [
            {
              "Title": "PipsPager - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.pipspager"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/pipspager"
            }
          ],
          "RelatedControls": [
            "ScrollViewer",
            "FlipView",
            "ItemsRepeater"
          ]
        },
        {
          "UniqueId": "ScrollView",
          "Title": "ScrollView",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A container control that lets the user pan and zoom its content.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ScrollView.png",
          "Description": "A ScrollView lets a user scroll, pan, and zoom to see content that's larger than the viewable area. The ItemsView has a ScrollView built into its control template to provide automatic scrolling.",
          "Content": "<p>Look at the <i>ScrollViewPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsNew": true,
          "SourcePath": "/ScrollView",
          "Docs": [
            {
              "Title": "ScrollView - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.scrollview"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/scroll-controls"
            }
          ],
          "RelatedControls": [
            "Viewbox",
            "Canvas",
            "Grid",
            "StackPanel",
            "RelativePanel",
            "ParallaxView",
            "ItemsView",
            "ScrollViewer"
          ]
        },
        {
          "UniqueId": "ScrollViewer",
          "Title": "ScrollViewer",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A container control that lets the user pan and zoom its content.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ScrollViewer.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": "<p>Look at the <i>ScrollViewerPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsUpdated": true,
          "SourcePath": "/CommonStyles/ScrollViewer_themeresources.xaml",
          "Docs": [
            {
              "Title": "ScrollViewer - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.scrollviewer"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/scroll-controls"
            }
          ],
          "RelatedControls": [
            "Viewbox",
            "Canvas",
            "Grid",
            "StackPanel",
            "RelativePanel",
            "ParallaxView"
          ]
        },
        {
          "UniqueId": "SemanticZoom",
          "Title": "SemanticZoom",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "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",
          "Description": "The SemanticZoom lets you show grouped data in two different ways, and is useful for quickly navigating through large sets of data.",
          "Content": "<p>Look at the <i>SemanticZoomPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "SemanticZoom - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.semanticzoom"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/semantic-zoom"
            }
          ],
          "RelatedControls": [
            "GridView",
            "ListView"
          ]
        }
      ]
    },
    {
      "UniqueId": "Layout",
      "Title": "Layout",
      "ImagePath": "",
      "IconGlyph": "",
      "Description": "Use layout controls to arrange the controls and content in your app.",
      "Items": [
        {
          "UniqueId": "Border",
          "Title": "Border",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A container control that draws a boundary line, background, or both, around another object.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Border.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": "<p>A <b>Border</b> 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 <b>StackPanel</b> and make the <b>StackPanel</b> the child of the <b>Border</b>.</p><p>You can change the appearance of a <b>Border</b> by setting basic properties:</p><ul><li>Width/Height</li><li>BorderBrush</li><li>BorderThickness</li><li>Background</li></ul><p></p><p>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 <i>CodeBorderStyle</i> resource in App.xaml to see the <b>Style</b> that's applied to the Borders.</p><p>Look at the <i>BorderPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "Border - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.border"
            }
          ],
          "RelatedControls": [
            "Canvas",
            "Grid",
            "StackPanel",
            "VariableSizedWrapGrid",
            "RelativePanel"
          ]
        },
        {
          "UniqueId": "Canvas",
          "Title": "Canvas",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "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",
          "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": "<p>Items are positioned on the <b>Canvas</b> using the <b>Canvas.Top</b> and <b>Canvas.Left</b> attached properties. Use the sliders to change these properties for the red rectangle and see how it moves around.</p><p>To see the effect of the <b>ZIndex</b> attached property, make sure the red rectangle is overlapping the other rectangles.</p><p>Look at the <i>CanvasPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "Canvas - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.canvas"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/layout/layout-panels"
            }
          ],
          "RelatedControls": [
            "Border",
            "Grid",
            "StackPanel",
            "VariableSizedWrapGrid",
            "RelativePanel"
          ]
        },
        {
          "UniqueId": "Expander",
          "Title": "Expander",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A container with a header that can be expanded to show a body with more content.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Expander.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 <i>ExpanderPage.xaml</i> file in Visual Studio to see the full code for this page.",
          "SourcePath": "/Expander",
          "Docs": [
            {
              "Title": "Expander - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.expander"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/expander"
            }
          ],
          "RelatedControls": [
            "Flyout",
            "ItemsRepeater",
            "SplitView"
          ]
        },
        {
          "UniqueId": "ItemsRepeater",
          "Title": "ItemsRepeater",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A flexible, primitive control for data-driven layouts.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ListView.png",
          "Description": "The ItemsRepeater is like a markup-based loop that supports virtualization.",
          "Content": "<p>A <b>ItemsRepeater</b> is more basic than an <b>ItemsControl</b>.  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 <b>ItemsSource</b> property to a data source.</p><p>Set an <b>ItemTemplate</b> to define the look of individual items.</p><p>And, optionally set the <b>Layout</b> to define how items are sized and positioned. By default, it uses a simple vertical stacking layout.</p><p>Look at the <i>ItemsRepeaterPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "ItemsRepeater - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.itemsrepeater"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/items-repeater"
            },
            {
              "Title": "StackLayout - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.stacklayout"
            },
            {
              "Title": "UniformGridLayout - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.uniformgridlayout"
            }
          ],
          "RelatedControls": [
            "ItemsView",
            "ScrollView",
            "ScrollViewer",
            "ListView",
            "GridView"
          ]
        },
        {
          "UniqueId": "Grid",
          "Title": "Grid",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A layout panel that supports arranging child elements in rows and columns. ",
          "ImagePath": "ms-appx:///Assets/ControlImages/Grid.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": "<p>Look at the <i>GridPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "Grid - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.grid"
            },
            {
              "Title": "Tutorial",
              "Uri": "https://learn.microsoft.com/windows/apps/design/layout/grid-tutorial"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/layout/layout-panels#grid"
            }
          ],
          "RelatedControls": [
            "Border",
            "Canvas",
            "StackPanel",
            "VariableSizedWrapGrid",
            "RelativePanel"
          ]
        },
        {
          "UniqueId": "RadioButtons",
          "Title": "RadioButtons",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.",
          "ImagePath": "ms-appx:///Assets/ControlImages/RadioButton.png",
          "Description": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.",
          "Content": "<p>Look at the <i>RadioButtonsPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/RadioButtons",
          "Docs": [
            {
              "Title": "RadioButtons - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.radiobuttons"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/radio-button"
            }
          ],
          "RelatedControls": [
            "CheckBox",
            "RadioButton",
            "ToggleSwitch",
            "ToggleButton"
          ]
        },
        {
          "UniqueId": "RelativePanel",
          "Title": "RelativePanel",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A panel that uses relationships between elements to define layout.",
          "ImagePath": "ms-appx:///Assets/ControlImages/RelativePanel.png",
          "Description": "Use a RelativePanel to layout elements by defining the relationships between elements and in relation to the panel.",
          "Content": "<p>Look at the <i>RelativePanelPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "RelativePanel - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.relativepanel"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/layout/layout-panels"
            }
          ],
          "RelatedControls": [
            "Grid",
            "StackPanel",
            "Border",
            "Canvas",
            "Viewbox"
          ]
        },
        {
          "UniqueId": "SplitView",
          "Title": "SplitView",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A container that has 2 content areas, with multiple display options for the pane.",
          "ImagePath": "ms-appx:///Assets/ControlImages/SplitView.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": "<p>Look at the <i>SplitViewPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsUpdated": true,
          "SourcePath": "/SplitView",
          "Docs": [
            {
              "Title": "SplitView - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.splitview"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/split-view"
            }
          ],
          "RelatedControls": [
            "StackPanel",
            "ListView",
            "GridView",
            "Grid",
            "RelativePanel"
          ]
        },
        {
          "UniqueId": "StackPanel",
          "Title": "StackPanel",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "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",
          "Description": "A StackPanel is used to arrange items in a line, either horizontally or vertically.",
          "Content": "<p>Look at the <i>StackPanelPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "StackPanel - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.stackpanel"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/layout/layout-panels"
            }
          ],
          "RelatedControls": [
            "Border",
            "Canvas",
            "Grid",
            "VariableSizedWrapGrid",
            "RelativePanel"
          ]
        },
        {
          "UniqueId": "VariableSizedWrapGrid",
          "Title": "VariableSizedWrapGrid",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "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",
          "Description": "A VariableSizedWrapGrip is used to create grid layouts where content can span multiple rows and columns.",
          "Content": "<p>Elements are arranged in rows or columns that automatically wrap to a new row or column when the <b>MaximumRowsOrColumns</b> value is reached.</p><p>Whether elements are arranged in rows or columns is specified by the <b>Orientation</b> property.</p><p>Elements can span multiple rows and columns using <b>VariableSizedWrapGrid.RowSpan</b> and <b>VariableSizedWrapGrid.ColumnSpan</b> attached properties.</p><p>Elements are sized as specified by the <b>ItemHeight</b> and <b>ItemWidth</b> properties.</p><p>Look at the <i>VariableSizedWrapGridPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "VariableSizedWrapGrid - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.variablesizedwrapgrid"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/layout/layout-panels"
            }
          ],
          "RelatedControls": [
            "Border",
            "Canvas",
            "Grid",
            "StackPanel",
            "RelativePanel"
          ]
        },
        {
          "UniqueId": "Viewbox",
          "Title": "Viewbox",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A container control that scales its content to a specified size.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Viewbox.png",
          "Description": "Use a Viewbox control scale content up or down to a specified size.",
          "Content": "<p>Look at the <i>ViewboxPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "Viewbox - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.Viewbox"
            }
          ],
          "RelatedControls": [
            "ScrollViewer",
            "Canvas",
            "Grid",
            "StackPanel",
            "RelativePanel"
          ]
        }
      ]
    },
    {
      "UniqueId": "Navigation",
      "Title": "Navigation",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "BreadcrumbBar",
          "Title": "BreadcrumbBar",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "Shows the trail of navigation taken to the current location.",
          "ImagePath": "ms-appx:///Assets/ControlImages/BreadcrumbBar.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": "<p>Look at the <i>BreadcrumbBarPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsUpdated": true,
          "SourcePath": "/Breadcrumb",
          "Docs": [
            {
              "Title": "BreadcrumbBar - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.breadcrumbbar"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/breadcrumbbar"
            }
          ],
          "RelatedControls": [
            "NavigationView",
            "Pivot",
            "TabView"
          ]
        },
        {
          "UniqueId": "NavigationView",
          "Title": "NavigationView",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "Common vertical layout for top-level areas of your app via a collapsible navigation menu.",
          "ImagePath": "ms-appx:///Assets/ControlImages/NavigationView.png",
          "Description": "The navigation view control provides a common vertical layout for top-level areas of your app via a collapsible navigation menu.",
          "SourcePath": "/NavigationView",
          "Docs": [
            {
              "Title": "NavigationView - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Controls.NavigationView"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/navigationview"
            }
          ],
          "RelatedControls": [
            "SplitView",
            "Pivot"
          ]
        },
        {
          "UniqueId": "Pivot",
          "Title": "Pivot",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "Presents information from different sources in a tabbed view.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Placeholder.png",
          "Description": "Pivot is deprecated. Please use the SelectorBar and SelectorBarItem. A Pivot allows you to show a collection of items from different sources in a tabbed view.",
          "Content": "<p>This page shows a simplified <b>Pivot</b> control with minimal content to demonstrate basic <b>Pivot</b> usage. Look at the <i>PivotPage.xaml</i> file in Visual Studio to see the full code for this page.</p><p>A <b>Pivot</b> control typically takes up the full page.</p>",
          "SourcePath": "/CommonStyles/Pivot_themeresources.xaml",
          "Docs": [
            {
              "Title": "Pivot - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.pivot"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/pivot"
            }
          ],
          "RelatedControls": [
            "SelectorBar"
          ]
        },
        {
          "UniqueId": "SelectorBar",
          "Title": "SelectorBar",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "Presents information from a small set of different sources. The user can pick one of them.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Pivot.png",
          "Description": "SelectorBar is used to modify the content shown by allowing users to select and switch between a small, finite set of data.",
          "Content": "<p>This page shows a simplified <b>SelectorBar</b> control with minimal content to demonstrate basic <b>SelectorBar</b> usage. Look at the <i>SelectorBar.xaml</i> file in Visual Studio to see the full code for this page.</p><p><b>SelectorBar</b> is typically used with <b>SelectorBarItem</b>",
          "SourcePath": "/SelectorBar/SelectorBar_themeresources.xaml",
          "IsNew": true,
          "Docs": [
            {
              "Title": "SelectorBar - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.selectorbar"
            },
            {
              "Title": "SelectorBarItem - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.selectorbaritem"
            }
          ],
          "RelatedControls": [
            "RadioButtons",
            "NavigationView",
            "PipsPager"
          ]
        },
        {
          "UniqueId": "TabView",
          "Title": "TabView",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that displays a collection of tabs that can be used to display several documents.",
          "ImagePath": "ms-appx:///Assets/ControlImages/TabView.png",
          "Description": "TabView provides the user with a collection of tabs that can be used to display several documents.",
          "SourcePath": "/TabView",
          "Docs": [
            {
              "Title": "TabView - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.tabview"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/tab-view"
            },
            {
              "Title": "Show multiple views for an app",
              "Uri": "https://learn.microsoft.com/windows/apps/design/layout/show-multiple-views"
            }
          ],
          "RelatedControls": [
            "Pivot",
            "NavigationView",
            "ListView"
          ]
        }
      ]
    },
    {
      "UniqueId": "Media",
      "Title": "Media",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "AnimatedVisualPlayer",
          "Title": "AnimatedVisualPlayer",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "An element to render and control playback of motion graphics.",
          "ImagePath": "ms-appx:///Assets/ControlImages/AnimatedVisualPlayer.png",
          "Description": "An element to render and control playback of motion graphics.",
          "Content": "<p>Look at the <i>AnimatedVisualPlayerPage.xaml</i> and <i>AnimatedVisualPlayerPage.xaml.cs</i> files in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/AnimatedVisualPlayer",
          "Docs": [
            {
              "Title": "AnimatedVisualPlayer - API",
              "Uri": "https://learn.microsoft.com/windows/winui/api/microsoft.ui.xaml.controls.animatedvisualplayer"
            },
            {
              "Title": "Full Samples",
              "Uri": "ms-windows-store://pdp/?productid=9N3J5TG8FF7F"
            },
            {
              "Title": "Tutorials",
              "Uri": "https://learn.microsoft.com/windows/communitytoolkit/animations/lottie#tutorials"
            },
            {
              "Title": "Lottie Overview",
              "Uri": "https://learn.microsoft.com/windows/communitytoolkit/animations/lottie"
            },
            {
              "Title": "Lottie Windows - GitHub",
              "Uri": "https://github.com/CommunityToolkit/Lottie-Windows"
            }
          ]
        },
        {
          "UniqueId": "CaptureElementPreview",
          "Title": "Capture Element / Camera Preview",
          "Subtitle": "A sample for doing a camera preview.",
          "ImagePath": "ms-appx:///Assets/ControlImages/CaptureElement.png",
          "Description": "You can use a MediaPlayerElement control to show a camera preview with a MediaCapture object.",
          "IsNew": true,
          "Docs": [
            {
              "Title": "MediaCapture - API",
              "Uri": "https://learn.microsoft.com/uwp/api/windows.media.capture.mediacapture"
            }
          ],
          "RelatedControls": [
            "MediaPlayerElement"
          ]
        },
        {
          "UniqueId": "Image",
          "Title": "Image",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control to display image content.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Image.png",
          "Description": "You can use an Image control to show and scale images.",
          "Content": "<p>Look at the <i>ImagePage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "Image - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.image"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/images-imagebrushes"
            }
          ],
          "RelatedControls": [
            "MediaPlayerElement",
            "PersonPicture"
          ]
        },
        {
          "UniqueId": "MapControl",
          "Title": "MapControl",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "Displays a symbolic map of the Earth",
          "ImagePath": "ms-appx:///Assets/ControlImages/MapControl.png",
          "Description": "Displays a symbolic map of the Earth",
          "IsNew": true,
          "Docs": [
            {
              "Title": "MapControl - API",
              "Uri": "https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.mapcontrol"
            }
          ]
        },
        {
          "UniqueId": "MediaPlayerElement",
          "Title": "MediaPlayerElement",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control to display video and image content.",
          "ImagePath": "ms-appx:///Assets/ControlImages/MediaPlayerElement.png",
          "Description": "You can use a MediaPlayerElement control to playback videos and show images. You can show transport controls or make the video autoplay.",
          "SourcePath": "/CommonStyles/MediaTransportControls_themeresources.xaml",
          "Docs": [
            {
              "Title": "MediaPlayerElement - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.MediaPlayerElement"
            },
            {
              "Title": "Media Playback",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/media-playback"
            }
          ],
          "RelatedControls": [
            "Image"
          ]
        },
        {
          "UniqueId": "PersonPicture",
          "Title": "PersonPicture",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "Displays the picture of a person/contact.",
          "ImagePath": "ms-appx:///Assets/ControlImages/PersonPicture.png",
          "Description": "Displays the picture of a person/contact.",
          "SourcePath": "/PersonPicture",
          "Docs": [
            {
              "Title": "PersonPicture - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Controls.PersonPicture"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/person-picture"
            }
          ],
          "RelatedControls": [
            "Image"
          ]
        },
        {
          "UniqueId": "Sound",
          "Title": "Sound",
          "ApiNamespace": "Microsoft.UI.Xaml",
          "Subtitle": "A code-behind only API that enables 2D and 3D UI sounds on all XAML controls.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Sound.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": "<p>Look at the <i>SoundPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "Sound - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.elementsoundplayer"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/style/sound"
            }
          ]
        },
        {
          "UniqueId": "WebView2",
          "Title": "WebView2",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.",
          "ImagePath": "ms-appx:///Assets/ControlImages/WebView.png",
          "Description": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.",
          "SourcePath": "/WebView2",
          "Docs": [
            {
              "Title": "WebView2 - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.webview2"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/microsoft-edge/webview2/gettingstarted/winui"
            },
            {
              "Title": "Examples",
              "Uri": "https://github.com/MicrosoftEdge/WebView2Samples"
            }
          ]
        }
      ]
    },
    {
      "UniqueId": "Styles",
      "Title": "Styles",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "Acrylic",
          "Title": "AcrylicBrush",
          "ApiNamespace": "Microsoft.UI.Xaml.Media",
          "Subtitle": "A translucent material recommended for panel backgrounds.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png",
          "Description": "A translucent material recommended for panel backgrounds.",
          "SourcePath": "/Materials/Acrylic",
          "Docs": [
            {
              "Title": "AcrylicBrush - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.acrylicbrush"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/style/acrylic"
            }
          ],
          "RelatedControls": [
            "SystemBackdrops"
          ]
        },
        {
          "UniqueId": "AnimatedIcon",
          "Title": "AnimatedIcon",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "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",
          "Description": "An element that displays and controls an icon that animates when the user interacts with the control.",
          "Content": "<p>Look at the <i>AnimatedIconPage.xaml</i> and <i>AnimatedIconPage.xaml.cs</i> files in Visual Studio to see the full code for this page.</p>",
          "IsUpdated": true,
          "SourcePath": "/AnimatedIcon",
          "Docs": [
            {
              "Title": "AnimatedIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.animatedicon"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/animated-icon"
            },
            {
              "Title": "Lottie Overview",
              "Uri": "https://learn.microsoft.com/windows/communitytoolkit/animations/lottie"
            },
            {
              "Title": "Lottie Windows - GitHub",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.animatedvisualplayer"
            }
          ]
        },
        {
          "UniqueId": "ColorPaletteResources",
          "Title": "ColorPaletteResources",
          "ApiNamespace": "Microsoft.UI.Xaml",
          "Subtitle": "A type of resource that allows you to apply custom colors to your controls.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ColorPaletteResources.png",
          "Description": "Apply custom colors to your controls through this cascading API, or scope them to a local subset.",
          "Docs": [
            {
              "Title": "Theme Editor (GitHub)",
              "Uri": "https://github.com/Microsoft/fluent-xaml-theme-editor"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/style/color#scoping-with-a-resourcedictionary"
            },
            {
              "Title": "ColorPaletteResources - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/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",
          "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.",
          "Docs": [
            {
              "Title": "Spacing",
              "Uri": "https://learn.microsoft.com/windows/apps/design/style/spacing"
            }
          ]
        },
        {
          "UniqueId": "IconElement",
          "Title": "IconElement",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "Represents icon controls that use different image types as its content.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Image.png",
          "Description": "Represents icon controls that use different image types as its content.",
          "Content": "<p>Look at the <i>IconElementPage.xaml</i> and <i>IconElementPage.xaml.cs</i> files in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/ImageIcon",
          "Docs": [
            {
              "Title": "BitmapIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.bitmapicon"
            },
            {
              "Title": "FontIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.fonticon"
            },
            {
              "Title": "ImageIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.imageicon"
            },
            {
              "Title": "PathIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.pathicon"
            },
            {
              "Title": "SymbolIcon - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.symbolicon"
            },
            {
              "Title": "Icon Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/style/icons"
            }
          ],
          "RelatedControls": [
            "AnimatedIcon",
            "AppBarButton",
            "MenuFlyoutItem"
          ]
        },
        {
          "UniqueId": "RadialGradientBrush",
          "Title": "RadialGradientBrush",
          "ApiNamespace": "Microsoft.UI.Xaml.Media",
          "Subtitle": "A brush to show radial gradients",
          "ImagePath": "ms-appx:///Assets/ControlImages/Canvas.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.",
          "Docs": [
            {
              "Title": "RadialGradientBrush - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.RadialGradientBrush"
            }
          ],
          "RelatedControls": [
            "Acrylic",
            "ColorPaletteResources"
          ]
        },
        {
          "UniqueId": "RevealFocus",
          "Title": "Reveal Focus",
          "ApiNamespace": "Microsoft.UI.Xaml",
          "Subtitle": "Customize the style of your focus rectangles.",
          "ImagePath": "ms-appx:///Assets/ControlImages/RevealFocus.png",
          "Description": "Reveal focus allows you to adapt focus rectangles to look like the focus rectangles available on Xbox.",
          "Content": "<p>Look at the <i>RevealFocusPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsUpdated": true,
          "SourcePath": "/Materials/Reveal",
          "Docs": [
            {
              "Title": "Reveal Focus - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.application.focusvisualkind#Windows_UI_Xaml_Application_FocusVisualKind"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/style/reveal-focus"
            }
          ],
          "RelatedControls": [
          ]
        },
        {
          "UniqueId": "Shape",
          "Title": "Shape",
          "ApiNamespace": "Microsoft.UI.Xaml.Shapes",
          "Subtitle": "How to draw shapes, such as ellipses, rectangles, and polygons.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Shape.png",
          "Description": "Basic shapes are intended for decorative rendering or for compositing non-interactive parts of controls.",
          "Content": "<p>Look at the <i>ShapePage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "Shapes - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.shapes"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/previous-versions/windows/apps/hh465055(v=win.10)"
            }
          ],
          "RelatedControls": [
            "Line"
          ]
        },
        {
          "UniqueId": "Line",
          "Title": "Line",
          "ApiNamespace": "Microsoft.UI.Xaml.Shapes",
          "Subtitle": "Draws a straight line between two points.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Line.png",
          "Description": "Draws a straight line between two points.",
          "Content": "<p>Look at the <i>LinePage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "Lines - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.shapes"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/previous-versions/windows/apps/hh465055(v=win.10)"
            }
          ],
          "RelatedControls": [
            "Shape"
          ]
        },
        {
          "UniqueId": "SystemBackdrops",
          "Title": "System Backdrops (Mica/Acrylic)",
          "ApiNamespace": "Microsoft.UI.Composition.SystemBackdrops",
          "Subtitle": "System backdrops, like Mica and Acrylic, for the window.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.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. There are two options for applying a backdrop: first, to use built-in Mica/Acrylic types, which have no customization and are simple to apply. The second is to create a customizable backdrop, which requires more code.",
          "Content": "<p>Look at the <i>SampleSystemBackdropsWindow.xaml.cs</i> file in Visual Studio to see the full code for applying a backdrop.</p>",
          "SourcePath": "/Materials",
          "Docs": [
            {
              "Title": "MicaController - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.composition.systembackdrops.micacontroller"
            },
            {
              "Title": "DesktopAcrylicController - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.composition.systembackdrops.desktopacryliccontroller"
            }
          ],
          "RelatedControls": [
          ]
        }
      ]
    },
    {
      "UniqueId": "Text",
      "Title": "Text",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "AutoSuggestBox",
          "Title": "AutoSuggestBox",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control to provide suggestions as a user is typing.",
          "ImagePath": "ms-appx:///Assets/ControlImages/AutoSuggestBox.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": "<p>Look at the <i>AutoSuggestBoxPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsUpdated": true,
          "SourcePath": "/AutoSuggestBox",
          "Docs": [
            {
              "Title": "AutoSuggestBox - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.autosuggestbox"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/auto-suggest-box"
            }
          ],
          "RelatedControls": [
            "ListBox",
            "ComboBox",
            "TextBox"
          ]
        },
        {
          "UniqueId": "NumberBox",
          "Title": "NumberBox",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A text control used for numeric input and evaluation of algebraic equations.",
          "ImagePath": "ms-appx:///Assets/ControlImages/NumberBox.png",
          "Description": "Use NumberBox to allow users to enter algebraic equations and numeric input in your app.",
          "Content": "<p>Look at the <i>NumberBox.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/NumberBox",
          "Docs": [
            {
              "Title": "NumberBox - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.numberbox"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/number-box"
            }
          ],
          "RelatedControls": [
            "TextBox",
            "TextBlock",
            "RichTextBlock",
            "RichEditBox"
          ]
        },
        {
          "UniqueId": "PasswordBox",
          "Title": "PasswordBox",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control for entering passwords.",
          "ImagePath": "ms-appx:///Assets/ControlImages/PasswordBox.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": "<p>Look at the <i>PasswordBoxPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/PasswordBox_themeresources.xaml",
          "Docs": [
            {
              "Title": "PasswordBox - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.passwordbox"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/text-controls"
            }
          ],
          "RelatedControls": [
            "TextBox",
            "TextBlock",
            "RichTextBlock",
            "RichEditBox"
          ]
        },
        {
          "UniqueId": "RichEditBox",
          "Title": "RichEditBox",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A rich text editing control that supports formatted text, hyperlinks, and other rich content.",
          "ImagePath": "ms-appx:///Assets/ControlImages/RichEditBox.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": "<p>On this page, you can type into the <b>RichTextBox</b> control and save it as a RichTextFormat (.rtf) document, or load an existing .rtf document. You can format the text as <b>Bold</b> or <u>Underlined</u>, and change the text color.</p><p>Look at the <i>RichEditBoxPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsUpdated": true,
          "SourcePath": "/CommonStyles/RichEditBox_themeresources.xaml",
          "Docs": [
            {
              "Title": "RichEditBox - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.richeditbox"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/text-controls"
            }
          ],
          "RelatedControls": [
            "NumberBox",
            "TextBox",
            "RichTextBlock",
            "TextBlock"
          ]
        },
        {
          "UniqueId": "RichTextBlock",
          "Title": "RichTextBlock",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A control that displays formatted text, hyperlinks, inline images, and other rich content.",
          "ImagePath": "ms-appx:///Assets/ControlImages/RichTextBlock.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": "<p>Change the width of the app to see how the <b>RichTextBlock</b> overflows into additional columns as the app gets narrower.</p><p>Look at the <i>RichTextBlockPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsUpdated": true,
          "Docs": [
            {
              "Title": "RichTextBlock - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.richtextblock"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/text-controls"
            }
          ],
          "RelatedControls": [
            "NumberBox",
            "TextBlock",
            "TextBox",
            "PasswordBox",
            "RichEditBox"
          ]
        },
        {
          "UniqueId": "TextBlock",
          "Title": "TextBlock",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A lightweight control for displaying small amounts of text.",
          "ImagePath": "ms-appx:///Assets/ControlImages/TextBlock.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": "<p>Look at the <i>TextBlockPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/TextBlock_themeresources.xaml",
          "Docs": [
            {
              "Title": "TextBlock - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.textblock"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/text-controls"
            }
          ],
          "RelatedControls": [
            "NumberBox",
            "TextBox",
            "RichTextBlock",
            "PasswordBox",
            "RichEditBox"
          ]
        },
        {
          "UniqueId": "TextBox",
          "Title": "TextBox",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A single-line or multi-line plain text field.",
          "ImagePath": "ms-appx:///Assets/ControlImages/TextBox.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": "<p>Look at the <i>TextBoxPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "SourcePath": "/CommonStyles/TextBox_themeresources.xaml",
          "Docs": [
            {
              "Title": "TextBox - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.textbox"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/controls/text-controls"
            }
          ],
          "RelatedControls": [
            "NumberBox",
            "TextBlock",
            "RichTextBlock",
            "PasswordBox",
            "RichEditBox",
            "AutoSuggestBox"
          ]
        }
      ]
    },
    {
      "UniqueId": "Motion",
      "Title": "Motion",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "ConnectedAnimation",
          "Title": "Connected Animation",
          "ApiNamespace": "Microsoft.UI.Xaml.Media.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",
          "Description": "Connected animations continue elements during page navigation and help the user maintain their context between views.",
          "Content": "<p>Look at the <i>ConnectedAnimationPage.xaml</i> and <i>ConnectedAnimationPage.xaml.cs</i> files in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "ConnectedAnimation - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.connectedanimation"
            },
            {
              "Title": "ConnectedAnimationService - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.connectedanimationservice"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/motion/connected-animation"
            },
            {
              "Title": "Quickstart: Motion",
              "Uri": "https://learn.microsoft.com/windows/apps/design/motion"
            }
          ],
          "RelatedControls": [
            "PageTransition",
            "ThemeTransition"
          ]
        },
        {
          "UniqueId": "EasingFunction",
          "Title": "Easing Functions",
          "ApiNamespace": "Microsoft.UI.Xaml.Media.Animation",
          "Subtitle": "Easing is a way to manipulate the velocity of an object as it animates.",
          "ImagePath": "ms-appx:///Assets/ControlImages/EasingFunction.png",
          "Description": "Easing is a way to manipulate the velocity of an object as it animates.",
          "Content": "<p>Look at the <i>EasingFunctionPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "EasingFunctionBase - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.easingfunctionbase"
            },
            {
              "Title": "Timing and Easing",
              "Uri": "https://learn.microsoft.com/windows/apps/design/motion/timing-and-easing"
            },
            {
              "Title": "Quickstart: Motion",
              "Uri": "https://learn.microsoft.com/windows/apps/design/motion"
            }
          ],
          "RelatedControls": [
            "ConnectedAnimation",
            "PageTransition",
            "ThemeTransition"
          ]
        },
        {
          "UniqueId": "PageTransition",
          "Title": "Page Transitions",
          "ApiNamespace": "Microsoft.UI.Xaml.Media.Animation",
          "Subtitle": "Page transitions provide visual feedback about the relationship between pages.",
          "ImagePath": "ms-appx:///Assets/ControlImages/PageTransition.png",
          "Description": "Page transitions provide visual feedback about the relationship between pages.",
          "Content": "<p>Look at the <i>PageTransitionPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "NavigationThemeTransition - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Media.Animation.NavigationThemeTransition"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/motion/page-transitions"
            },
            {
              "Title": "Quickstart: Motion",
              "Uri": "https://learn.microsoft.com/windows/apps/design/motion"
            }
          ],
          "RelatedControls": [
            "ConnectedAnimation",
            "ThemeTransition"
          ]
        },
        {
          "UniqueId": "ThemeTransition",
          "Title": "Theme Transitions",
          "ApiNamespace": "Microsoft.UI.Xaml",
          "Subtitle": "Theme transitions are pre-packaged, easy-to-apply animations.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ThemeTransition.png",
          "Description": "Theme transitions are pre-packaged, easy-to-apply animations.",
          "Content": "<p>Look at the <i>ThemeTransitionPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "Transitions - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/motion/xaml-animation#animations-available-in-the-library"
            },
            {
              "Title": "Quickstart: Motion",
              "Uri": "https://learn.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",
          "Description": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more",
          "Content": "<p>Look at the <i>XamlCompInteropPage.xaml.cs</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "Quickstart: Motion",
              "Uri": "https://learn.microsoft.com/windows/apps/design/motion"
            },
            {
              "Title": "Composition Animation - API",
              "Uri": "https://learn.microsoft.com/windows/apps/windows-app-sdk/composition"
            },
            {
              "Title": "Guidelines - Xaml Property Animations",
              "Uri": "https://learn.microsoft.com/windows/apps/design/motion/xaml-property-animations"
            }
          ],
          "RelatedControls": [
            "EasingFunction"
          ]
        },
        {
          "UniqueId": "ImplicitTransition",
          "Title": "Implicit Transitions",
          "ApiNamespace": "Microsoft.UI.Xaml",
          "Subtitle": "Use Implicit Transitions to automatically animate changes to properties.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ImplicitTransition.png",
          "Description": "Use Implicit Transitions to automatically animate changes to properties.",
          "Content": "<p>Look at the <i>ImplicitTransitionPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "Transitions - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.transitions#Windows_UI_Xaml_UIElement_Transitions"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/motion/motion-in-practice#implicit-animations"
            },
            {
              "Title": "Quickstart: Motion",
              "Uri": "https://learn.microsoft.com/windows/apps/design/motion"
            }
          ],
          "RelatedControls": [
            "PageTransition",
            "ThemeTransition"
          ]
        },
        {
          "UniqueId": "ParallaxView",
          "Title": "ParallaxView",
          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
          "Subtitle": "A container control that provides the parallax effect when scrolling.",
          "ImagePath": "ms-appx:///Assets/ControlImages/ParallaxView.png",
          "Description": "A container control that provides the parallax effect when scrolling.",
          "SourcePath": "/ParallaxView",
          "Docs": [
            {
              "Title": "ParallaxView - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Controls.Parallaxview"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/apps/design/motion/parallax"
            }
          ],
          "RelatedControls": [
            "ScrollView",
            "ScrollViewer"
          ]
        }
      ]
    },
    {
      "UniqueId": "MultipleWindows",
      "Title": "Windowing",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "CreateMultipleWindows",
          "Title": "Multiple windows",
          "ApiNamespace": "Microsoft.UI.Xaml",
          "Subtitle": "An example showing the creation of single-threaded top level Xaml windows.",
          "ImagePath": "ms-appx:///Assets/ControlImages/CreateMultipleWindows.png",
          "Description": "With Windows App SDK 1.0 we are allowing creation of single-threaded multiple top level Xaml windows in Desktop apps",
          "Content": "<p>Look at the <i>CreateMultipleWindowsPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "Docs": [
            {
              "Title": "MultipleWindow - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.window"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.window"
            }
          ],
          "RelatedControls": [
          ]
        },
        {
          "UniqueId": "TitleBar",
          "Title": "TitleBar",
          "ApiNamespace": "Microsoft.UI.Xaml",
          "Subtitle": "An example showing a custom UIElement used as the titlebar for the app's window.",
          "ImagePath": "ms-appx:///Assets/ControlImages/TitleBar.png",
          "Description": "This sample shows how to use a custom titlebar for the app's window. There are 2 ways of doing it: using default titlebar and setting an UIElement as a custom titlebar.",
          "Content": "<p>Look at the <i>TitleBarPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsUpdated": true,
          "Docs": [
            {
              "Title": "TitleBar - API",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.window.extendscontentintotitlebar"
            },
            {
              "Title": "Guidelines",
              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.window"
            }
          ],
          "RelatedControls": [
          ]
        }
      ]
    },
    {
      "UniqueId": "System",
      "Title": "System",
      "ImagePath": "",
      "IconGlyph": "",
      "Items": [
        {
          "UniqueId": "Clipboard",
          "Title": "Clipboard",
          "ApiNamespace": "Windows.ApplicationModel.DataTransfer",
          "Subtitle": "Copy and paste to and from the system Clipboard.",
          "ImagePath": "ms-appx:///Assets/ControlImages/Clipboard.png",
          "Description": "Copy and paste to and from the system Clipboard.",
          "Content": "<p>Look at the <i>ClipboardPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsNew": true,
          "Docs": [
            {
              "Title": "Clipboard - API",
              "Uri": "https://learn.microsoft.com/uwp/api/windows.applicationmodel.datatransfer.clipboard"
            }
          ],
          "RelatedControls": [
            "FilePicker"
          ]
        },
        {
          "UniqueId": "FilePicker",
          "Title": "FilePicker",
          "ApiNamespace": "Windows.Storage.Pickers",
          "Subtitle": "Access files and folders through the file pickers.",
          "ImagePath": "ms-appx:///Assets/ControlImages/FilePicker.png",
          "Description": "Shows how to access files and folders by letting the user choose them through the file pickers and how to save a file so that the user can specify the name, file type, and location of a file to save.",
          "Content": "<p>Look at the <i>FilePickerPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsNew": true,
          "Docs": [
            {
              "Title": "FilePicker - API",
              "Uri": "https://learn.microsoft.com/uwp/api/Windows.Storage.Pickers"
            }
          ],
          "RelatedControls": [
            "Clipboard"
          ]
        }
      ]
    }
  ]
}