diff --git a/.pipelines/azure-pipelines.yml b/.pipelines/azure-pipelines.yml index c36e3d6b9..72209d6fc 100644 --- a/.pipelines/azure-pipelines.yml +++ b/.pipelines/azure-pipelines.yml @@ -24,6 +24,12 @@ steps: feedsToUse: 'config' nugetConfigPath: '$(System.DefaultWorkingDirectory)\nuget.config' + - task: DotNetCoreCLI@2 + displayName: Verify catalog/windows-samples.json is up to date + inputs: + command: 'test' + projects: 'tests/WinUIGallery.CatalogExporter.Tests/WinUIGallery.CatalogExporter.Tests.csproj' + - task: PowerShell@2 displayName: Generate Test Signing Certificate inputs: diff --git a/WinUIGallery.slnx b/WinUIGallery.slnx index 644b72718..8be678907 100644 --- a/WinUIGallery.slnx +++ b/WinUIGallery.slnx @@ -48,6 +48,24 @@ + + + + + + + + + + + + + + + + + + diff --git a/WinUIGallery/SampleSupport/Data/ControlInfoData.json b/WinUIGallery/SampleSupport/Data/ControlInfoData.json index 681e0569f..6a5d65d3a 100644 --- a/WinUIGallery/SampleSupport/Data/ControlInfoData.json +++ b/WinUIGallery/SampleSupport/Data/ControlInfoData.json @@ -236,7 +236,13 @@ "Title": "XamlReader - API", "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.markup.xamlreader" } - ] + ], + "Catalog": { + "Aliases": [ + "repl", + "live xaml preview" + ] + } } ] }, @@ -1383,7 +1389,13 @@ "RepeatButton", "HyperlinkButton", "AppBarButton" - ] + ], + "Catalog": { + "Aliases": [ + "cta", + "call to action" + ] + } }, { "UniqueId": "DropDownButton", diff --git a/WinUIGallery/SampleSupport/Data/ControlInfoDataSchema.json b/WinUIGallery/SampleSupport/Data/ControlInfoDataSchema.json index e033b88cb..34c8c5e6c 100644 --- a/WinUIGallery/SampleSupport/Data/ControlInfoDataSchema.json +++ b/WinUIGallery/SampleSupport/Data/ControlInfoDataSchema.json @@ -98,6 +98,31 @@ }, "description": "Additional keywords used purely for search. If a search query matches one of these tags, this sample will be surfaced in the results even when the tag does not appear in the Title." }, + "Catalog": { + "type": "object", + "description": "Optional, opt-in overrides consumed only by tools/CatalogExporter when generating catalog/windows-samples.json. Everything here is additive/derivable metadata that the running gallery app itself never reads; omit this block entirely unless a sample genuinely needs to diverge from what the exporter can derive automatically from the fields above and the on-disk sample folder.", + "properties": { + "Exclude": { + "type": "boolean", + "default": false, + "description": "When true, this item is left out of the generated catalog manifest entirely (for example, a developer utility page rather than a genuine, documentable sample)." + }, + "Aliases": { + "type": "array", + "items": { + "type": "string" + }, + "description": "Additional search aliases that are useful for an external catalog/agent but too broad or noisy for the in-app search experience (which already uses Tags)." + }, + "RelatedSamples": { + "type": "array", + "items": { + "type": "string" + }, + "description": "Extra related-sample references that point outside this repository, formatted as '{owner}/{repo}#{uniqueId}'. Used to extend (not replace) RelatedControls, which can only reference other items in this same file." + } + } + }, }, "required": [ "UniqueId", "Title"] } diff --git a/catalog/README.md b/catalog/README.md new file mode 100644 index 000000000..09a4db054 --- /dev/null +++ b/catalog/README.md @@ -0,0 +1,101 @@ +# WinUI Gallery catalog manifest + +`catalog/windows-samples.json` is a generated, machine-readable inventory of every embedded +sample in this repository. It exists so a future federated +[microsoft/windows-samples](https://github.com/microsoft/windows-samples) catalog (and other +agents/tools) can discover WinUI Gallery's samples without scraping the app's XAML. + +## Why this shape, and not one `sample.yml` per control + +`windows-samples` normally has one `Samples//sample.yml` per **standalone** project. WinUI +Gallery is different: its ~120 samples are **pages embedded in a single app** +(`WinUIGallery/Samples//`), and the authoritative inventory of them already exists as +[`WinUIGallery/SampleSupport/Data/ControlInfoData.json`](../WinUIGallery/SampleSupport/Data/ControlInfoData.json) +(consumed by the app itself and by `WinUIGallery.SourceGenerator` at build time). + +Adding ~120 hand-maintained `sample.yml` files would create a second, easily-stale source of +truth. Instead: + +- **`ControlInfoData.json` stays the single source of truth.** It already carries most of what a + catalog needs: `Title`, `Subtitle`/`Description`, `Docs`, `Tags`, and `RelatedControls`. +- **`tools/CatalogExporter`** deterministically derives everything else (ids, group, source file + paths, snippet files, interactive scenarios) from that JSON file plus the on-disk sample + folders, and validates the result. +- **`catalog/windows-samples.json`** is the generated output: one JSON document, safe to import + wholesale into `windows-samples`' own `catalog/samples.json` aggregation step. +- Repository-wide constants (license, language, framework, platform, "embedded gallery page" + kind) live once in the manifest's top-level `defaults`, instead of being repeated on every one + of the ~120 entries. + +## Regenerating and checking the manifest + +```powershell +# Regenerate catalog/windows-samples.json from the current source data +dotnet run --project tools/CatalogExporter -- generate + +# Verify the committed file is still up to date (used in CI/tests); does not write anything +dotnet run --project tools/CatalogExporter -- check +``` + +Both commands auto-detect the repository root (by walking up to `WinUIGallery.slnx`); pass +`--repo-root ` to override. + +`tests/WinUIGallery.CatalogExporter.Tests` also asserts the committed manifest matches a fresh +`generate` output, so a stale or hand-edited `catalog/windows-samples.json` fails `dotnet test` +(and therefore CI) rather than silently drifting from `ControlInfoData.json`. + +## Contract + +The manifest's shape is formally described by +[`catalog/windows-samples.schema.json`](windows-samples.schema.json) (JSON Schema draft-07). At a +glance: + +| Manifest field | Derived from | +| --- | --- | +| `repository`, `defaults` | Fixed for this repository (see `CatalogGenerationOptions` / `CatalogDefaults` in `tools/CatalogExporter`) | +| `samples[].id` | `"{owner}/{repo}#{UniqueId}"` - source-qualified so ids can't collide once aggregated across repositories | +| `samples[].uniqueId`, `.title`, `.summary`, `.description`, `.apiNamespace`, `.baseClasses`, `.tags`, `.docs` | `UniqueId`, `Title`, `Subtitle`, `Description`, `ApiNamespace`, `BaseClasses`, `Tags`, `Docs` on the matching `ControlInfoData.json` item | +| `samples[].group` | The enclosing `ControlInfoData.json` group's `UniqueId`/`Title` | +| `samples[].badges` | Derived from `IsNew` / `IsUpdated` / `IsPreview` | +| `samples[].relatedSamples` | `RelatedControls` (resolved to this repository's ids), plus any `Catalog.RelatedSamples` override | +| `samples[].source` | The `WinUIGallery/Samples//` folder: main `*Page.xaml`, `*Page.xaml.cs`, and every `*.txt` snippet, verified to exist with exact-case file names | +| `samples[].scenarios` | One entry per `controls:ControlExample` element whose `SampleDefinition="..."` attribute names a snippet file that exists next to the page | + +### The optional `Catalog` override block + +`ControlInfoData.json` items may include an optional `Catalog` object +(see `ControlInfoDataSchema.json`) for the rare case where the exporter can't safely derive +something on its own: + +```jsonc +"Catalog": { + "Exclude": false, // drop this item from the manifest entirely + "Aliases": [ "cta" ], // catalog-only search keywords, additive to Tags + "RelatedSamples": [ "owner/other-repo#sample-id" ] // cross-repository related samples +} +``` + +This block is read only by `tools/CatalogExporter` - the running gallery app never looks at it - +and is expected to stay rare. `Button` and `ScratchPad` in `ControlInfoData.json` each set +`Catalog.Aliases` as a small, working example of the mechanism. + +### Inclusion/exclusion rules + +An item from `ControlInfoData.json` becomes a catalog entry when, and only when: + +1. It has a non-empty `UniqueId` that is unique across the file. +2. A `WinUIGallery/Samples//` folder exists with a case-exact `Page.xaml` file + in it. +3. It does not set `Catalog.Exclude: true`. + +Anything else - a missing folder/page, a duplicate id, a `RelatedControls`/`Catalog.RelatedSamples` +reference that doesn't resolve to an included entry, or a `SampleDefinition` snippet that doesn't +exist on disk - fails validation (`CatalogValidationException`) rather than being silently +skipped or guessed at. All 120 current `ControlInfoData.json` items satisfy these rules. + +### What's intentionally left out + +Optional/unknown fields are omitted rather than filled with guesses (for example, `description`, +`apiNamespace`, `badges`, `relatedSamples`, and `scenarios` are all omitted when the source data +has nothing to report). The manifest does not pin a commit SHA - it reflects `repository.defaultBranch` +and is regenerated whenever samples change. diff --git a/catalog/windows-samples.json b/catalog/windows-samples.json new file mode 100644 index 000000000..1c963546a --- /dev/null +++ b/catalog/windows-samples.json @@ -0,0 +1,7370 @@ +{ + "$schema": "./windows-samples.schema.json", + "schemaVersion": "1.0.0", + "generator": { + "tool": "tools/CatalogExporter", + "command": "dotnet run --project tools/CatalogExporter -- generate" + }, + "repository": { + "id": "microsoft/WinUI-Gallery", + "owner": "microsoft", + "name": "WinUI-Gallery", + "url": "https://github.com/microsoft/WinUI-Gallery", + "defaultBranch": "main", + "license": "MIT" + }, + "defaults": { + "language": "C#", + "framework": "WinUI 3", + "platform": "Windows App SDK", + "license": "MIT", + "kind": "embedded-gallery-page" + }, + "sampleCount": 120, + "samples": [ + { + "id": "microsoft/WinUI-Gallery#AccessibilityColorContrast", + "uniqueId": "AccessibilityColorContrast", + "title": "Color Contrast", + "group": { + "id": "AccessibilityItem", + "title": "Accessibility" + }, + "summary": "High contrast design ensures accessibility for all users.", + "tags": [ + "high contrast", + "WCAG", + "accessibility" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/AccessibilityColorContrast", + "page": "WinUIGallery/Samples/AccessibilityColorContrast/AccessibilityColorContrastPage.xaml", + "codeBehind": "WinUIGallery/Samples/AccessibilityColorContrast/AccessibilityColorContrastPage.xaml.cs" + } + }, + { + "id": "microsoft/WinUI-Gallery#AccessibilityKeyboard", + "uniqueId": "AccessibilityKeyboard", + "title": "Keyboard Navigation", + "group": { + "id": "AccessibilityItem", + "title": "Accessibility" + }, + "summary": "Keyboard-friendly design enables seamless interactions.", + "tags": [ + "keyboard", + "tab navigation", + "access keys", + "focus", + "accessibility" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/AccessibilityKeyboard", + "page": "WinUIGallery/Samples/AccessibilityKeyboard/AccessibilityKeyboardPage.xaml", + "codeBehind": "WinUIGallery/Samples/AccessibilityKeyboard/AccessibilityKeyboardPage.xaml.cs" + } + }, + { + "id": "microsoft/WinUI-Gallery#AccessibilityScreenReader", + "uniqueId": "AccessibilityScreenReader", + "title": "Screen Reader", + "group": { + "id": "AccessibilityItem", + "title": "Accessibility" + }, + "summary": "Inclusive design ensures meaningful content for assistive technologies.", + "tags": [ + "Narrator", + "AutomationProperties", + "assistive technology", + "accessibility" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/AccessibilityScreenReader", + "page": "WinUIGallery/Samples/AccessibilityScreenReader/AccessibilityScreenReaderPage.xaml", + "codeBehind": "WinUIGallery/Samples/AccessibilityScreenReader/AccessibilityScreenReaderPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/AccessibilityScreenReader/AccessibilityScreenReaderDescriptionHelpTextAdd.txt", + "WinUIGallery/Samples/AccessibilityScreenReader/AccessibilityScreenReaderPositionIndicatePositionElement.txt", + "WinUIGallery/Samples/AccessibilityScreenReader/AccessibilityScreenReaderRemoveControlContentVisual.txt" + ] + }, + "scenarios": [ + { + "name": "Description Help Text Add", + "snippet": "AccessibilityScreenReaderDescriptionHelpTextAdd.txt" + }, + { + "name": "Position Indicate Position Element", + "snippet": "AccessibilityScreenReaderPositionIndicatePositionElement.txt" + }, + { + "name": "Remove Control Content Visual", + "snippet": "AccessibilityScreenReaderRemoveControlContentVisual.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Acrylic", + "uniqueId": "Acrylic", + "title": "AcrylicBrush", + "group": { + "id": "Styles", + "title": "Styles" + }, + "summary": "A translucent material recommended for panel backgrounds.", + "description": "A translucent material recommended for panel backgrounds.", + "apiNamespace": "Microsoft.UI.Xaml.Media", + "tags": [ + "acrylic", + "material", + "translucent", + "blur", + "AcrylicBrush" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#RadialGradientBrush", + "microsoft/WinUI-Gallery#SystemBackdrops", + "microsoft/WinUI-Gallery#ThemeShadow" + ], + "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" + } + ], + "badges": [ + "Updated" + ], + "source": { + "root": "WinUIGallery/Samples/Acrylic", + "page": "WinUIGallery/Samples/Acrylic/AcrylicPage.xaml", + "codeBehind": "WinUIGallery/Samples/Acrylic/AcrylicPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Acrylic/CustomAcrylicAppBrush.txt", + "WinUIGallery/Samples/Acrylic/DefaultAppAcrylicBrush.txt", + "WinUIGallery/Samples/Acrylic/LuminosityAppAcrylic.txt" + ] + }, + "scenarios": [ + { + "name": "Custom Acrylic App Brush", + "snippet": "CustomAcrylicAppBrush.txt" + }, + { + "name": "Default App Acrylic Brush", + "snippet": "DefaultAppAcrylicBrush.txt" + }, + { + "name": "Luminosity App Acrylic", + "snippet": "LuminosityAppAcrylic.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#AnimatedIcon", + "uniqueId": "AnimatedIcon", + "title": "AnimatedIcon", + "group": { + "id": "Styles", + "title": "Styles" + }, + "summary": "An element that displays and controls an icon that animates when the user interacts with the control.", + "description": "An element that displays and controls an icon that animates when the user interacts with the control.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "IconElement" + ], + "tags": [ + "animated icon", + "icon animation", + "Lottie icon" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AnimatedVisualPlayer", + "microsoft/WinUI-Gallery#IconElement" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/AnimatedIcon", + "page": "WinUIGallery/Samples/AnimatedIcon/AnimatedIconPage.xaml", + "codeBehind": "WinUIGallery/Samples/AnimatedIcon/AnimatedIconPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/AnimatedIcon/AddingAnimatediconButton.txt", + "WinUIGallery/Samples/AnimatedIcon/AddingAnimatediconNavigationview.txt" + ] + }, + "scenarios": [ + { + "name": "Adding Animatedicon Button", + "snippet": "AddingAnimatediconButton.txt" + }, + { + "name": "Adding Animatedicon Navigationview", + "snippet": "AddingAnimatediconNavigationview.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#AnimatedVisualPlayer", + "uniqueId": "AnimatedVisualPlayer", + "title": "AnimatedVisualPlayer", + "group": { + "id": "Media", + "title": "Media" + }, + "summary": "An element to render and control playback of motion graphics.", + "description": "An element to render and control playback of motion graphics.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement" + ], + "tags": [ + "Lottie", + "animation", + "motion graphics" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AnimatedIcon" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/AnimatedVisualPlayer", + "page": "WinUIGallery/Samples/AnimatedVisualPlayer/AnimatedVisualPlayerPage.xaml", + "codeBehind": "WinUIGallery/Samples/AnimatedVisualPlayer/AnimatedVisualPlayerPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/AnimatedVisualPlayer/AnimatedVisualPlayerPlaybackLottieAnimation.txt" + ] + }, + "scenarios": [ + { + "name": "Playback Lottie Animation", + "snippet": "AnimatedVisualPlayerPlaybackLottieAnimation.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#AnnotatedScrollBar", + "uniqueId": "AnnotatedScrollBar", + "title": "AnnotatedScrollBar", + "group": { + "id": "Scrolling", + "title": "Scrolling" + }, + "summary": "A control that extends a regular vertical scrollbar\u0027s functionality for an easy navigation through large collections.", + "description": "The AnnotatedScrollBar lets you navigate through a large collection of items via a clickable rail with labels which act as markers.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "annotated scroll", + "navigation" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ItemsView", + "microsoft/WinUI-Gallery#ScrollView" + ], + "docs": [ + { + "title": "AnnotatedScrollBar - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.annotatedscrollbar" + } + ], + "source": { + "root": "WinUIGallery/Samples/AnnotatedScrollBar", + "page": "WinUIGallery/Samples/AnnotatedScrollBar/AnnotatedScrollBarPage.xaml", + "codeBehind": "WinUIGallery/Samples/AnnotatedScrollBar/AnnotatedScrollBarPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/AnnotatedScrollBar/AnnotatedscrollbarLinkedScrollview.txt" + ] + }, + "scenarios": [ + { + "name": "Linked Scrollview", + "snippet": "AnnotatedscrollbarLinkedScrollview.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#AppBarButton", + "uniqueId": "AppBarButton", + "title": "AppBarButton", + "group": { + "id": "MenusAndToolbars", + "title": "Menus \u0026 toolbars" + }, + "summary": "A button that\u0027s styled for use in a CommandBar.", + "description": "AppBarButton differs 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\u0027s IsCompact property controls its size.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl", + "ButtonBase", + "Button" + ], + "tags": [ + "toolbar button", + "command button" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarSeparator", + "microsoft/WinUI-Gallery#AppBarToggleButton", + "microsoft/WinUI-Gallery#CommandBar" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/AppBarButton", + "page": "WinUIGallery/Samples/AppBarButton/AppBarButtonPage.xaml", + "codeBehind": "WinUIGallery/Samples/AppBarButton/AppBarButtonPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/AppBarButton/AppbarbuttonBitmapIcon.txt", + "WinUIGallery/Samples/AppBarButton/AppbarbuttonFontIcon.txt", + "WinUIGallery/Samples/AppBarButton/AppbarbuttonKeyboardaccelerator.txt", + "WinUIGallery/Samples/AppBarButton/AppbarbuttonOpensFlyoutContaining.txt", + "WinUIGallery/Samples/AppBarButton/AppbarbuttonPathIcon.txt", + "WinUIGallery/Samples/AppBarButton/AppbarbuttonSymbolIcon.txt" + ] + }, + "scenarios": [ + { + "name": "Bitmap Icon", + "snippet": "AppbarbuttonBitmapIcon.txt" + }, + { + "name": "Font Icon", + "snippet": "AppbarbuttonFontIcon.txt" + }, + { + "name": "Keyboardaccelerator", + "snippet": "AppbarbuttonKeyboardaccelerator.txt" + }, + { + "name": "Opens Flyout Containing", + "snippet": "AppbarbuttonOpensFlyoutContaining.txt" + }, + { + "name": "Path Icon", + "snippet": "AppbarbuttonPathIcon.txt" + }, + { + "name": "Symbol Icon", + "snippet": "AppbarbuttonSymbolIcon.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#AppBarSeparator", + "uniqueId": "AppBarSeparator", + "title": "AppBarSeparator", + "group": { + "id": "MenusAndToolbars", + "title": "Menus \u0026 toolbars" + }, + "summary": "A vertical line that\u0027s used to visually separate groups of commands in an app bar.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "divider" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarButton", + "microsoft/WinUI-Gallery#AppBarToggleButton", + "microsoft/WinUI-Gallery#CommandBar" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/AppBarSeparator", + "page": "WinUIGallery/Samples/AppBarSeparator/AppBarSeparatorPage.xaml", + "codeBehind": "WinUIGallery/Samples/AppBarSeparator/AppBarSeparatorPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/AppBarSeparator/AppbarbuttonsSeparatedAppbarseparators.txt" + ] + }, + "scenarios": [ + { + "name": "Appbarbuttons Separated Appbarseparators", + "snippet": "AppbarbuttonsSeparatedAppbarseparators.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#AppBarToggleButton", + "uniqueId": "AppBarToggleButton", + "title": "AppBarToggleButton", + "group": { + "id": "MenusAndToolbars", + "title": "Menus \u0026 toolbars" + }, + "summary": "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.", + "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\u0027s state by checking the IsChecked property.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl", + "ButtonBase", + "ToggleButton" + ], + "tags": [ + "toolbar toggle", + "command toggle" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarButton", + "microsoft/WinUI-Gallery#AppBarSeparator", + "microsoft/WinUI-Gallery#CommandBar" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/AppBarToggleButton", + "page": "WinUIGallery/Samples/AppBarToggleButton/AppBarToggleButtonPage.xaml", + "codeBehind": "WinUIGallery/Samples/AppBarToggleButton/AppBarToggleButtonPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/AppBarToggleButton/AppbartogglebuttonBitmapIcon.txt", + "WinUIGallery/Samples/AppBarToggleButton/AppbartogglebuttonFontIcon.txt", + "WinUIGallery/Samples/AppBarToggleButton/AppbartogglebuttonSymbolIcon.txt", + "WinUIGallery/Samples/AppBarToggleButton/ThreeStateAppbartogglebuttonPath.txt" + ] + }, + "scenarios": [ + { + "name": "Bitmap Icon", + "snippet": "AppbartogglebuttonBitmapIcon.txt" + }, + { + "name": "Font Icon", + "snippet": "AppbartogglebuttonFontIcon.txt" + }, + { + "name": "Symbol Icon", + "snippet": "AppbartogglebuttonSymbolIcon.txt" + }, + { + "name": "Three State Appbartogglebutton Path", + "snippet": "ThreeStateAppbartogglebuttonPath.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#AppNotification", + "uniqueId": "AppNotification", + "title": "App notifications", + "group": { + "id": "Shell", + "title": "Shell" + }, + "summary": "Send notifications that appear in the Action Center and as toast popups.", + "description": "Send rich, interactive notifications from your app. Notifications can include text, images, and actions.", + "apiNamespace": "Microsoft.Windows.Notifications", + "baseClasses": [ + "Object" + ], + "tags": [ + "toast", + "notification", + "Action Center", + "toast notification" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#BadgeNotificationManager" + ], + "docs": [ + { + "title": "AppNotification - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.windows.appnotifications.appnotification" + }, + { + "title": "AppNotificationManager - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.windows.appnotifications.appnotificationmanager" + }, + { + "title": "AppNotificationBuilder - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.windows.appnotifications.builder.appnotificationbuilder" + }, + { + "title": "Toast notifications", + "uri": "https://learn.microsoft.com/windows/apps/design/shell/tiles-and-notifications/toast-notifications-overview" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/AppNotification", + "page": "WinUIGallery/Samples/AppNotification/AppNotificationPage.xaml", + "codeBehind": "WinUIGallery/Samples/AppNotification/AppNotificationPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/AppNotification/AppNotificationBasicNotification.txt", + "WinUIGallery/Samples/AppNotification/AppNotificationInformationalNotificationLogoCustom.txt", + "WinUIGallery/Samples/AppNotification/AppNotificationNotificationProgressbar.txt", + "WinUIGallery/Samples/AppNotification/AppNotificationVisualNotificationHeroImage.txt", + "WinUIGallery/Samples/AppNotification/NotificationAppnotificationControls.txt" + ] + }, + "scenarios": [ + { + "name": "Basic Notification", + "snippet": "AppNotificationBasicNotification.txt" + }, + { + "name": "Informational Notification Logo Custom", + "snippet": "AppNotificationInformationalNotificationLogoCustom.txt" + }, + { + "name": "Notification Progressbar", + "snippet": "AppNotificationNotificationProgressbar.txt" + }, + { + "name": "Visual Notification Hero Image", + "snippet": "AppNotificationVisualNotificationHeroImage.txt" + }, + { + "name": "Notification Appnotification Controls", + "snippet": "NotificationAppnotificationControls.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#AppWindow", + "uniqueId": "AppWindow", + "title": "AppWindow", + "group": { + "id": "MultipleWindows", + "title": "Windowing" + }, + "summary": "A flexible, customizable window management system for app development.", + "description": "AppWindow provides advanced window management, allowing customization of size, position, and presentation. This sample showcases different ways to create, display, and control windows for enhanced flexibility.", + "apiNamespace": "Microsoft.UI.Windowing", + "baseClasses": [ + "Object" + ], + "tags": [ + "window management", + "windowing" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppWindowTitleBar", + "microsoft/WinUI-Gallery#CreateMultipleWindows", + "microsoft/WinUI-Gallery#TitleBar" + ], + "docs": [ + { + "title": "AppWindow - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.windowing.appwindow" + }, + { + "title": "Window - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.window" + }, + { + "title": "AppWindowPresenter - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.windowing.appwindowpresenter" + }, + { + "title": "OverlappedPresenter - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.windowing.overlappedpresenter" + }, + { + "title": "FullScreenPresenter - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.windowing.fullscreenpresenter" + }, + { + "title": "CompactOverlayPresenter - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.windowing.compactoverlaypresenter" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/AppWindow", + "page": "WinUIGallery/Samples/AppWindow/AppWindowPage.xaml", + "codeBehind": "WinUIGallery/Samples/AppWindow/AppWindowPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/AppWindow/AppWindowSettingMinimumMaximumWidth.txt", + "WinUIGallery/Samples/AppWindow/AppwindowCompactoverlaypresenter.txt", + "WinUIGallery/Samples/AppWindow/AppwindowFullscreenpresenter.txt", + "WinUIGallery/Samples/AppWindow/AppwindowOverlapedpresenter.txt", + "WinUIGallery/Samples/AppWindow/CenteringAppwindowScreenAvailable.txt", + "WinUIGallery/Samples/AppWindow/CreatingCustomizingAppwindowWindow.txt", + "WinUIGallery/Samples/AppWindow/ModalWindowOverlappedpresenterAppwindow.txt" + ] + }, + "scenarios": [ + { + "name": "Setting Minimum Maximum Width", + "snippet": "AppWindowSettingMinimumMaximumWidth.txt" + }, + { + "name": "Compactoverlaypresenter", + "snippet": "AppwindowCompactoverlaypresenter.txt" + }, + { + "name": "Fullscreenpresenter", + "snippet": "AppwindowFullscreenpresenter.txt" + }, + { + "name": "Overlapedpresenter", + "snippet": "AppwindowOverlapedpresenter.txt" + }, + { + "name": "Centering Appwindow Screen Available", + "snippet": "CenteringAppwindowScreenAvailable.txt" + }, + { + "name": "Creating Customizing Appwindow Window", + "snippet": "CreatingCustomizingAppwindowWindow.txt" + }, + { + "name": "Modal Window Overlappedpresenter Appwindow", + "snippet": "ModalWindowOverlappedpresenterAppwindow.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#AppWindowTitleBar", + "uniqueId": "AppWindowTitleBar", + "title": "AppWindowTitleBar", + "group": { + "id": "MultipleWindows", + "title": "Windowing" + }, + "summary": "Provides control over the app window title bar.", + "description": "Represents the title bar of an AppWindow and exposes APIs for deep, fine-grained customization, including advanced appearance changes, system button styling, and precise control over active and inactive window states.", + "apiNamespace": "Microsoft.UI.Windowing", + "baseClasses": [ + "Object" + ], + "tags": [ + "title bar", + "caption", + "custom title bar" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppWindow", + "microsoft/WinUI-Gallery#TitleBar" + ], + "docs": [ + { + "title": "AppWindowTitleBar - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.windowing.appwindowtitlebar" + }, + { + "title": "Customize the title bar", + "uri": "https://learn.microsoft.com/windows/apps/develop/title-bar" + } + ], + "source": { + "root": "WinUIGallery/Samples/AppWindowTitleBar", + "page": "WinUIGallery/Samples/AppWindowTitleBar/AppWindowTitleBarPage.xaml", + "codeBehind": "WinUIGallery/Samples/AppWindowTitleBar/AppWindowTitleBarPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/AppWindowTitleBar/AppwindowtitlebarColorCustomization.txt", + "WinUIGallery/Samples/AppWindowTitleBar/AppwindowtitlebarPreferredThemeHeight.txt", + "WinUIGallery/Samples/AppWindowTitleBar/ExtendingContentAppwindowtitlebarArea.txt" + ] + }, + "scenarios": [ + { + "name": "Color Customization", + "snippet": "AppwindowtitlebarColorCustomization.txt" + }, + { + "name": "Preferred Theme Height", + "snippet": "AppwindowtitlebarPreferredThemeHeight.txt" + }, + { + "name": "Extending Content Appwindowtitlebar Area", + "snippet": "ExtendingContentAppwindowtitlebarArea.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#AutoSuggestBox", + "uniqueId": "AutoSuggestBox", + "title": "AutoSuggestBox", + "group": { + "id": "Text", + "title": "Text" + }, + "summary": "A control to provide suggestions as a user is typing.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ItemsControl" + ], + "tags": [ + "search box", + "autocomplete", + "suggestions", + "typeahead" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ComboBox", + "microsoft/WinUI-Gallery#TextBox" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/AutoSuggestBox", + "page": "WinUIGallery/Samples/AutoSuggestBox/AutoSuggestBoxPage.xaml", + "codeBehind": "WinUIGallery/Samples/AutoSuggestBox/AutoSuggestBoxPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/AutoSuggestBox/AutosuggestboxProvidesSearchboxExperience.txt", + "WinUIGallery/Samples/AutoSuggestBox/BasicAutosuggestBox.txt" + ] + }, + "scenarios": [ + { + "name": "Provides Searchbox Experience", + "snippet": "AutosuggestboxProvidesSearchboxExperience.txt" + }, + { + "name": "Basic Autosuggest Box", + "snippet": "BasicAutosuggestBox.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#BadgeNotificationManager", + "uniqueId": "BadgeNotificationManager", + "title": "Badge notifications", + "group": { + "id": "Shell", + "title": "Shell" + }, + "summary": "Show numeric or icon badges on your app\u2019s taskbar icon.", + "description": "Badge notifications are a lightweight way to show status or alerts as small overlays on your app\u0027s taskbar icon.", + "apiNamespace": "Microsoft.Windows.BadgeNotifications", + "baseClasses": [ + "Object" + ], + "tags": [ + "taskbar badge", + "badge", + "notification badge" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppNotification", + "microsoft/WinUI-Gallery#InfoBadge" + ], + "docs": [ + { + "title": "BadgeUpdateManager - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.windows.badgenotifications.badgenotificationmanager" + }, + { + "title": "BadgeNotificationGlyph Enum", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.windows.badgenotifications.badgenotificationglyph" + }, + { + "title": "Badge notifications", + "uri": "https://learn.microsoft.com/windows/apps/design/shell/tiles-and-notifications/badges" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/BadgeNotificationManager", + "page": "WinUIGallery/Samples/BadgeNotificationManager/BadgeNotificationManagerPage.xaml", + "codeBehind": "WinUIGallery/Samples/BadgeNotificationManager/BadgeNotificationManagerPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/BadgeNotificationManager/BadgeNotificationManagerSettingBadgeNotificationsCount.txt", + "WinUIGallery/Samples/BadgeNotificationManager/BadgeNotificationManagerSettingBadgeNotificationsGlyph.txt" + ] + }, + "scenarios": [ + { + "name": "Setting Badge Notifications Count", + "snippet": "BadgeNotificationManagerSettingBadgeNotificationsCount.txt" + }, + { + "name": "Setting Badge Notifications Glyph", + "snippet": "BadgeNotificationManagerSettingBadgeNotificationsGlyph.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Binding", + "uniqueId": "Binding", + "title": "Binding", + "group": { + "id": "FundamentalsItem", + "title": "Fundamentals" + }, + "summary": "Connecting UI elements to data for automatic synchronization and updates.", + "description": "Binding in WinUI 3 is a way to connect a property of a control to a source, such as another property, a data object, or a view model. It keeps the data synchronized between the source and the target control, enabling dynamic updates.", + "tags": [ + "x:Bind", + "data binding", + "INotifyPropertyChanged", + "ObservableCollection", + "TwoWay", + "OneWay", + "DataContext" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Templates", + "microsoft/WinUI-Gallery#XamlResources", + "microsoft/WinUI-Gallery#XamlStyles" + ], + "docs": [ + { + "title": "Data binding", + "uri": "https://learn.microsoft.com/windows/apps/develop/data-binding/" + }, + { + "title": "{x:Bind} markup extension", + "uri": "https://learn.microsoft.com/windows/uwp/xaml-platform/x-bind-markup-extension" + }, + { + "title": "{Binding} markup extension", + "uri": "https://learn.microsoft.com/windows/uwp/xaml-platform/binding-markup-extension" + }, + { + "title": "Binding - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.binding" + }, + { + "title": "IValueConverter Interface - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.ivalueconverter" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/Binding", + "page": "WinUIGallery/Samples/Binding/BindingPage.xaml", + "codeBehind": "WinUIGallery/Samples/Binding/BindingPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Binding/BindingCollectionDataTemplates.txt", + "WinUIGallery/Samples/Binding/BindingControls.txt", + "WinUIGallery/Samples/Binding/BindingFunctionBind.txt", + "WinUIGallery/Samples/Binding/BindingPropertyCodeBehind.txt", + "WinUIGallery/Samples/Binding/BindingTargetnullvalue.txt", + "WinUIGallery/Samples/Binding/BindingViewModel.txt", + "WinUIGallery/Samples/Binding/ConverterBinding.txt" + ] + }, + "scenarios": [ + { + "name": "Collection Data Templates", + "snippet": "BindingCollectionDataTemplates.txt" + }, + { + "name": "Controls", + "snippet": "BindingControls.txt" + }, + { + "name": "Function Bind", + "snippet": "BindingFunctionBind.txt" + }, + { + "name": "Property Code Behind", + "snippet": "BindingPropertyCodeBehind.txt" + }, + { + "name": "Targetnullvalue", + "snippet": "BindingTargetnullvalue.txt" + }, + { + "name": "View Model", + "snippet": "BindingViewModel.txt" + }, + { + "name": "Converter Binding", + "snippet": "ConverterBinding.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Border", + "uniqueId": "Border", + "title": "Border", + "group": { + "id": "Layout", + "title": "Layout" + }, + "summary": "A container control that draws a boundary line, background, or both, around another object.", + "description": "Use a Border control to draw a boundary line, background, or both, around another object. A Border can contain only one child object.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement" + ], + "tags": [ + "outline", + "frame", + "background" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Canvas", + "microsoft/WinUI-Gallery#Grid", + "microsoft/WinUI-Gallery#RelativePanel", + "microsoft/WinUI-Gallery#StackPanel", + "microsoft/WinUI-Gallery#VariableSizedWrapGrid" + ], + "docs": [ + { + "title": "Border - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.border" + } + ], + "source": { + "root": "WinUIGallery/Samples/Border", + "page": "WinUIGallery/Samples/Border/BorderPage.xaml", + "codeBehind": "WinUIGallery/Samples/Border/BorderPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Border/BorderAroundTextblock.txt" + ] + }, + "scenarios": [ + { + "name": "Around Textblock", + "snippet": "BorderAroundTextblock.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#BreadcrumbBar", + "uniqueId": "BreadcrumbBar", + "title": "BreadcrumbBar", + "group": { + "id": "Navigation", + "title": "Navigation" + }, + "summary": "Shows the trail of navigation taken to the current location.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "navigation trail", + "path" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#NavigationView", + "microsoft/WinUI-Gallery#Pivot", + "microsoft/WinUI-Gallery#TabView" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/BreadcrumbBar", + "page": "WinUIGallery/Samples/BreadcrumbBar/BreadcrumbBarPage.xaml", + "codeBehind": "WinUIGallery/Samples/BreadcrumbBar/BreadcrumbBarPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/BreadcrumbBar/BreadcrumbbarControl.txt", + "WinUIGallery/Samples/BreadcrumbBar/BreadcrumbbarControlCustomDatatemplate.txt" + ] + }, + "scenarios": [ + { + "name": "Control", + "snippet": "BreadcrumbbarControl.txt" + }, + { + "name": "Control Custom Datatemplate", + "snippet": "BreadcrumbbarControlCustomDatatemplate.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Button", + "uniqueId": "Button", + "title": "Button", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "A control that responds to user input and raises a Click event.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl", + "ButtonBase" + ], + "tags": [ + "click", + "push button", + "command" + ], + "aliases": [ + "cta", + "call to action" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarButton", + "microsoft/WinUI-Gallery#HyperlinkButton", + "microsoft/WinUI-Gallery#RepeatButton", + "microsoft/WinUI-Gallery#ToggleButton" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/Button", + "page": "WinUIGallery/Samples/Button/ButtonPage.xaml", + "codeBehind": "WinUIGallery/Samples/Button/ButtonPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Button/ButtonBuiltInStyles.txt", + "WinUIGallery/Samples/Button/ButtonSimple.txt", + "WinUIGallery/Samples/Button/ButtonWithImage.txt", + "WinUIGallery/Samples/Button/ButtonWrapping.txt" + ] + }, + "scenarios": [ + { + "name": "Built In Styles", + "snippet": "ButtonBuiltInStyles.txt" + }, + { + "name": "Simple", + "snippet": "ButtonSimple.txt" + }, + { + "name": "With Image", + "snippet": "ButtonWithImage.txt" + }, + { + "name": "Wrapping", + "snippet": "ButtonWrapping.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#CalendarDatePicker", + "uniqueId": "CalendarDatePicker", + "title": "CalendarDatePicker", + "group": { + "id": "DateAndTime", + "title": "Date \u0026 time" + }, + "summary": "A control that lets users pick a date value using a calendar.", + "description": "A control that lets users pick a date value using a calendar.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "date picker" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#CalendarView", + "microsoft/WinUI-Gallery#DatePicker" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/CalendarDatePicker", + "page": "WinUIGallery/Samples/CalendarDatePicker/CalendarDatePickerPage.xaml", + "codeBehind": "WinUIGallery/Samples/CalendarDatePicker/CalendarDatePickerPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/CalendarDatePicker/CalendardatepickerHeaderPlaceholderText.txt" + ] + }, + "scenarios": [ + { + "name": "Header Placeholder Text", + "snippet": "CalendardatepickerHeaderPlaceholderText.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#CalendarView", + "uniqueId": "CalendarView", + "title": "CalendarView", + "group": { + "id": "DateAndTime", + "title": "Date \u0026 time" + }, + "summary": "A control that presents a calendar for a user to choose a date from.", + "description": "CalendarView shows a larger view for showing and selecting dates. DatePicker by contrast has a compact view with inline selection.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "date", + "month view" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#CalendarDatePicker", + "microsoft/WinUI-Gallery#DatePicker", + "microsoft/WinUI-Gallery#TimePicker" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/CalendarView", + "page": "WinUIGallery/Samples/CalendarView/CalendarViewPage.xaml", + "codeBehind": "WinUIGallery/Samples/CalendarView/CalendarViewPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/CalendarView/BasicCalendarView.txt" + ] + }, + "scenarios": [ + { + "name": "Basic Calendar View", + "snippet": "BasicCalendarView.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Canvas", + "uniqueId": "Canvas", + "title": "Canvas", + "group": { + "id": "Layout", + "title": "Layout" + }, + "summary": "A layout panel that supports absolute positioning of child elements relative to the top left corner of the canvas.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Panel" + ], + "tags": [ + "absolute position", + "coordinates" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Border", + "microsoft/WinUI-Gallery#Grid", + "microsoft/WinUI-Gallery#RelativePanel", + "microsoft/WinUI-Gallery#StackPanel", + "microsoft/WinUI-Gallery#VariableSizedWrapGrid" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/Canvas", + "page": "WinUIGallery/Samples/Canvas/CanvasPage.xaml", + "codeBehind": "WinUIGallery/Samples/Canvas/CanvasPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Canvas/CanvasControl.txt" + ] + }, + "scenarios": [ + { + "name": "Control", + "snippet": "CanvasControl.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#CaptureElementPreview", + "uniqueId": "CaptureElementPreview", + "title": "Capture Element / Camera Preview", + "group": { + "id": "Media", + "title": "Media" + }, + "summary": "A sample for doing a camera preview.", + "description": "You can use a MediaPlayerElement control to show a camera preview with a MediaCapture object.", + "tags": [ + "camera", + "webcam" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Image", + "microsoft/WinUI-Gallery#MediaPlayerElement" + ], + "docs": [ + { + "title": "MediaCapture - API", + "uri": "https://learn.microsoft.com/uwp/api/windows.media.capture.mediacapture" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/CaptureElementPreview", + "page": "WinUIGallery/Samples/CaptureElementPreview/CaptureElementPreviewPage.xaml", + "codeBehind": "WinUIGallery/Samples/CaptureElementPreview/CaptureElementPreviewPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/CaptureElementPreview/CaptureElementPreviewMediacapturePreviewDisplayedVia.txt" + ] + }, + "scenarios": [ + { + "name": "Mediacapture Preview Displayed Via", + "snippet": "CaptureElementPreviewMediacapturePreviewDisplayedVia.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#CheckBox", + "uniqueId": "CheckBox", + "title": "CheckBox", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "A control that a user can select or clear.", + "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\u0027t allow users to set an indeterminate state directly to indicate a third option.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl", + "ButtonBase", + "ToggleButton" + ], + "tags": [ + "tick", + "three state", + "checkmark" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#RadioButton", + "microsoft/WinUI-Gallery#ToggleButton", + "microsoft/WinUI-Gallery#ToggleSwitch" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/CheckBox", + "page": "WinUIGallery/Samples/CheckBox/CheckBoxPage.xaml", + "codeBehind": "WinUIGallery/Samples/CheckBox/CheckBoxPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/CheckBox/CheckBoxSelectAll.txt", + "WinUIGallery/Samples/CheckBox/CheckBoxThreeState.txt", + "WinUIGallery/Samples/CheckBox/CheckBoxTwoState.txt" + ] + }, + "scenarios": [ + { + "name": "Select All", + "snippet": "CheckBoxSelectAll.txt" + }, + { + "name": "Three State", + "snippet": "CheckBoxThreeState.txt" + }, + { + "name": "Two State", + "snippet": "CheckBoxTwoState.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Clipboard", + "uniqueId": "Clipboard", + "title": "Clipboard", + "group": { + "id": "System", + "title": "System" + }, + "summary": "Copy and paste text, images, and files to and from the system Clipboard.", + "description": "Use the Clipboard API to copy and paste text, images, and files. Configure clipboard history and roaming options, monitor content changes, and inspect available formats.", + "apiNamespace": "Windows.ApplicationModel.DataTransfer", + "tags": [ + "copy", + "paste", + "cut" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#StoragePickers" + ], + "docs": [ + { + "title": "Clipboard - API", + "uri": "https://learn.microsoft.com/uwp/api/windows.applicationmodel.datatransfer.clipboard" + }, + { + "title": "ClipboardContentOptions - API", + "uri": "https://learn.microsoft.com/uwp/api/windows.applicationmodel.datatransfer.clipboardcontentoptions" + }, + { + "title": "Copy and paste - Guide", + "uri": "https://learn.microsoft.com/windows/apps/develop/communication/copy-and-paste" + } + ], + "source": { + "root": "WinUIGallery/Samples/Clipboard", + "page": "WinUIGallery/Samples/Clipboard/ClipboardPage.xaml", + "codeBehind": "WinUIGallery/Samples/Clipboard/ClipboardPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Clipboard/ClipboardCopyPasteFiles.txt", + "WinUIGallery/Samples/Clipboard/ClipboardCopyPasteImage.txt", + "WinUIGallery/Samples/Clipboard/ClipboardHistoryRoamingOptions.txt", + "WinUIGallery/Samples/Clipboard/CopyTextClipboard.txt", + "WinUIGallery/Samples/Clipboard/OtherClipboardOperations.txt", + "WinUIGallery/Samples/Clipboard/PasteTextClipboard.txt" + ] + }, + "scenarios": [ + { + "name": "Copy Paste Files", + "snippet": "ClipboardCopyPasteFiles.txt" + }, + { + "name": "Copy Paste Image", + "snippet": "ClipboardCopyPasteImage.txt" + }, + { + "name": "History Roaming Options", + "snippet": "ClipboardHistoryRoamingOptions.txt" + }, + { + "name": "Copy Text Clipboard", + "snippet": "CopyTextClipboard.txt" + }, + { + "name": "Other Clipboard Operations", + "snippet": "OtherClipboardOperations.txt" + }, + { + "name": "Paste Text Clipboard", + "snippet": "PasteTextClipboard.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Color", + "uniqueId": "Color", + "title": "Color", + "group": { + "id": "DesignItem", + "title": "Design" + }, + "summary": "Balanced color design creates clarity and aesthetic harmony.", + "tags": [ + "palette", + "brush", + "accent color", + "theme color" + ], + "docs": [ + { + "title": "Colors in Windows 11", + "uri": "https://learn.microsoft.com/windows/apps/design/signature-experiences/color" + }, + { + "title": "Windows UI Kit (Figma)", + "uri": "https://aka.ms/WinUI/3.0-figma-toolkit" + }, + { + "title": "WinUI Theme Resources (GitHub)", + "uri": "https://github.com/microsoft/microsoft-ui-xaml/blob/main/controls/dev/CommonStyles/Common_themeresources_any.xaml" + } + ], + "source": { + "root": "WinUIGallery/Samples/Color", + "page": "WinUIGallery/Samples/Color/ColorPage.xaml", + "codeBehind": "WinUIGallery/Samples/Color/ColorPage.xaml.cs" + } + }, + { + "id": "microsoft/WinUI-Gallery#ColorPicker", + "uniqueId": "ColorPicker", + "title": "ColorPicker", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "A control that displays a selectable color spectrum.", + "description": "A selectable color spectrum.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "color spectrum", + "color wheel", + "RGB", + "hex" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ComboBox" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ColorPicker", + "page": "WinUIGallery/Samples/ColorPicker/ColorPickerPage.xaml", + "codeBehind": "WinUIGallery/Samples/ColorPicker/ColorPickerPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ColorPicker/ColorPickerProperties.txt" + ] + }, + "scenarios": [ + { + "name": "Properties", + "snippet": "ColorPickerProperties.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ComboBox", + "uniqueId": "ComboBox", + "title": "ComboBox", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "A drop-down list of items a user can select from.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ItemsControl", + "Selector" + ], + "tags": [ + "dropdown", + "select", + "picker" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AutoSuggestBox", + "microsoft/WinUI-Gallery#CheckBox", + "microsoft/WinUI-Gallery#ListView", + "microsoft/WinUI-Gallery#RadioButton", + "microsoft/WinUI-Gallery#RatingControl" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ComboBox", + "page": "WinUIGallery/Samples/ComboBox/ComboBoxPage.xaml", + "codeBehind": "WinUIGallery/Samples/ComboBox/ComboBoxPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ComboBox/ComboBoxEditable.txt", + "WinUIGallery/Samples/ComboBox/ComboBoxInline.txt", + "WinUIGallery/Samples/ComboBox/ComboBoxItemsSource.txt" + ] + }, + "scenarios": [ + { + "name": "Editable", + "snippet": "ComboBoxEditable.txt" + }, + { + "name": "Inline", + "snippet": "ComboBoxInline.txt" + }, + { + "name": "Items Source", + "snippet": "ComboBoxItemsSource.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#CommandBar", + "uniqueId": "CommandBar", + "title": "CommandBar", + "group": { + "id": "MenusAndToolbars", + "title": "Menus \u0026 toolbars" + }, + "summary": "A toolbar for displaying application-specific commands that handles layout and resizing of its contents.", + "description": "Command bars provide users with easy access to your app\u0027s most common tasks. Command bars can provide access to app-level or page-specific commands and can be used with any navigation pattern. By default, the command bar shows a row of icon buttons and an optional \u0022see more\u0022 button, which is represented by an ellipsis [...].", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl", + "AppBar" + ], + "tags": [ + "toolbar", + "commands", + "app bar" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarButton", + "microsoft/WinUI-Gallery#AppBarSeparator", + "microsoft/WinUI-Gallery#AppBarToggleButton" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/CommandBar", + "page": "WinUIGallery/Samples/CommandBar/CommandBarPage.xaml", + "codeBehind": "WinUIGallery/Samples/CommandBar/CommandBarPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/CommandBar/CommandBarLabelsSide.txt" + ] + }, + "scenarios": [ + { + "name": "Labels Side", + "snippet": "CommandBarLabelsSide.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#CommandBarFlyout", + "uniqueId": "CommandBarFlyout", + "title": "CommandBarFlyout", + "group": { + "id": "MenusAndToolbars", + "title": "Menus \u0026 toolbars" + }, + "summary": "A mini-toolbar displaying proactive commands, and an optional menu of commands.", + "description": "A mini-toolbar which displays a set of proactive commands, as well as a secondary menu of commands if desired.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "FlyoutBase" + ], + "tags": [ + "context menu", + "toolbar flyout", + "commands" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#CommandBar", + "microsoft/WinUI-Gallery#MenuFlyout", + "microsoft/WinUI-Gallery#RichEditBox", + "microsoft/WinUI-Gallery#StandardUICommand", + "microsoft/WinUI-Gallery#TextBox", + "microsoft/WinUI-Gallery#XamlUICommand" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/CommandBarFlyout", + "page": "WinUIGallery/Samples/CommandBarFlyout/CommandBarFlyoutPage.xaml", + "codeBehind": "WinUIGallery/Samples/CommandBarFlyout/CommandBarFlyoutPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/CommandBarFlyout/CommandbarflyoutCommandsAppObject.txt" + ] + }, + "scenarios": [ + { + "name": "Commands App Object", + "snippet": "CommandbarflyoutCommandsAppObject.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#CompactSizing", + "uniqueId": "CompactSizing", + "title": "Compact Sizing", + "group": { + "id": "Styles", + "title": "Styles" + }, + "summary": "How to use a Resource Dictionary to enable compact sizing.", + "description": "Enables the creation of compact, smaller apps by adding a style resource at the app, page or control level.", + "tags": [ + "density", + "compact sizing" + ], + "docs": [ + { + "title": "Spacing", + "uri": "https://learn.microsoft.com/windows/apps/design/style/spacing" + } + ], + "badges": [ + "Updated" + ], + "source": { + "root": "WinUIGallery/Samples/CompactSizing", + "page": "WinUIGallery/Samples/CompactSizing/CompactSizingPage.xaml", + "codeBehind": "WinUIGallery/Samples/CompactSizing/CompactSizingPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/CompactSizing/CompactSizingControls.txt" + ] + }, + "scenarios": [ + { + "name": "Controls", + "snippet": "CompactSizingControls.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ConnectedAnimation", + "uniqueId": "ConnectedAnimation", + "title": "Connected Animation", + "group": { + "id": "Motion", + "title": "Motion" + }, + "summary": "Connected animations continue elements during page navigation and help the user maintain their context between views.", + "description": "Connected animations continue elements during page navigation and help the user maintain their context between views.", + "apiNamespace": "Microsoft.UI.Xaml.Media.Animation", + "baseClasses": [ + "Object" + ], + "tags": [ + "connected animation", + "continuity", + "page transition" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#PageTransition", + "microsoft/WinUI-Gallery#ThemeTransition" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ConnectedAnimation", + "page": "WinUIGallery/Samples/ConnectedAnimation/ConnectedAnimationPage.xaml", + "codeBehind": "WinUIGallery/Samples/ConnectedAnimation/ConnectedAnimationPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ConnectedAnimation/ConnectedAnimationElementsSame.txt", + "WinUIGallery/Samples/ConnectedAnimation/ConnectedAnimationItemsrepeater.txt", + "WinUIGallery/Samples/ConnectedAnimation/ConnectedAnimationListPage.txt", + "WinUIGallery/Samples/ConnectedAnimation/SimpleConnectedAnimation.txt" + ] + }, + "scenarios": [ + { + "name": "Elements Same", + "snippet": "ConnectedAnimationElementsSame.txt" + }, + { + "name": "Itemsrepeater", + "snippet": "ConnectedAnimationItemsrepeater.txt" + }, + { + "name": "List Page", + "snippet": "ConnectedAnimationListPage.txt" + }, + { + "name": "Simple Connected Animation", + "snippet": "SimpleConnectedAnimation.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ContentDialog", + "uniqueId": "ContentDialog", + "title": "ContentDialog", + "group": { + "id": "DialogsAndFlyouts", + "title": "Dialogs \u0026 flyouts" + }, + "summary": "A dialog box that can be customized to contain any XAML content.", + "description": "Use a ContentDialog to show relevant information or to provide a modal dialog experience that can show any XAML content.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl" + ], + "tags": [ + "modal", + "popup dialog", + "message box" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Flyout", + "microsoft/WinUI-Gallery#MenuFlyout", + "microsoft/WinUI-Gallery#TeachingTip", + "microsoft/WinUI-Gallery#ToolTip" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ContentDialog", + "page": "WinUIGallery/Samples/ContentDialog/ContentDialogPage.xaml", + "codeBehind": "WinUIGallery/Samples/ContentDialog/ContentDialogPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ContentDialog/BasicContentDialogContent.txt", + "WinUIGallery/Samples/ContentDialog/ContentDialogWithoutDefault.txt" + ] + }, + "scenarios": [ + { + "name": "Basic Content Dialog Content", + "snippet": "BasicContentDialogContent.txt" + }, + { + "name": "Without Default", + "snippet": "ContentDialogWithoutDefault.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ContentIsland", + "uniqueId": "ContentIsland", + "title": "ContentIsland", + "group": { + "id": "System", + "title": "System" + }, + "summary": "Create ContentIslands to host other frameworks in your app.", + "description": "Create ContentIslands to host other frameworks in your app.", + "apiNamespace": "Microsoft.UI.Content", + "tags": [ + "content island", + "hosting", + "interop" + ], + "docs": [ + { + "title": "ContentIsland - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.content.contentisland" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/ContentIsland", + "page": "WinUIGallery/Samples/ContentIsland/ContentIslandPage.xaml", + "codeBehind": "WinUIGallery/Samples/ContentIsland/ContentIslandPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ContentIsland/BasicContentIslandContent.txt" + ] + }, + "scenarios": [ + { + "name": "Basic Content Island Content", + "snippet": "BasicContentIslandContent.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#CreateMultipleWindows", + "uniqueId": "CreateMultipleWindows", + "title": "Multiple windows", + "group": { + "id": "MultipleWindows", + "title": "Windowing" + }, + "summary": "An example showing the creation of single-threaded top level Xaml windows.", + "description": "With Windows App SDK 1.0 we are allowing creation of single-threaded multiple top level Xaml windows in Desktop apps", + "apiNamespace": "Microsoft.UI.Xaml", + "tags": [ + "multiple windows", + "new window", + "multi window" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppWindow", + "microsoft/WinUI-Gallery#AppWindowTitleBar", + "microsoft/WinUI-Gallery#TitleBar" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/CreateMultipleWindows", + "page": "WinUIGallery/Samples/CreateMultipleWindows/CreateMultipleWindowsPage.xaml", + "codeBehind": "WinUIGallery/Samples/CreateMultipleWindows/CreateMultipleWindowsPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/CreateMultipleWindows/CreateMultipleWindowsCreateSingleThreadedMultiple.txt" + ] + }, + "scenarios": [ + { + "name": "Create Single Threaded Multiple", + "snippet": "CreateMultipleWindowsCreateSingleThreadedMultiple.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#CustomUserControls", + "uniqueId": "CustomUserControls", + "title": "Custom \u0026 User Controls", + "group": { + "id": "FundamentalsItem", + "title": "Fundamentals" + }, + "summary": "Create reusable UI components with custom functionality and appearance.", + "description": "Custom controls and user controls allow to create reusable UI components with unique behavior and styling. A UserControl is a simple way to encapsulate a UI layout, while a custom control provides full styling and templating flexibility. Both approaches help in building modular and maintainable applications.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "FrameworkElement", + "Control" + ], + "tags": [ + "UserControl", + "custom control", + "reusable control" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Templates", + "microsoft/WinUI-Gallery#XamlStyles" + ], + "docs": [ + { + "title": "Build XAML controls", + "uri": "https://learn.microsoft.com/windows/apps/winui/winui3/xaml-templated-controls-csharp-winui-3" + }, + { + "title": "Control - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.control" + }, + { + "title": "UserControl - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.usercontrol" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/CustomUserControls", + "page": "WinUIGallery/Samples/CustomUserControls/CustomUserControlsPage.xaml", + "codeBehind": "WinUIGallery/Samples/CustomUserControls/CustomUserControlsPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/CustomUserControls/CustomUserControlsBasicCustomPasswordBox.txt", + "WinUIGallery/Samples/CustomUserControls/CustomUserControlsCounterControlIncrementDecrement.txt", + "WinUIGallery/Samples/CustomUserControls/CustomUserControlsTemperatureConverterUsercontrolExample.txt" + ] + }, + "scenarios": [ + { + "name": "Basic Custom Password Box", + "snippet": "CustomUserControlsBasicCustomPasswordBox.txt" + }, + { + "name": "Counter Control Increment Decrement", + "snippet": "CustomUserControlsCounterControlIncrementDecrement.txt" + }, + { + "name": "Temperature Converter Usercontrol Example", + "snippet": "CustomUserControlsTemperatureConverterUsercontrolExample.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#CustomXamlConditionals", + "uniqueId": "CustomXamlConditionals", + "title": "XAML Conditions", + "group": { + "id": "FundamentalsItem", + "title": "Fundamentals" + }, + "summary": "Define custom XAML conditions evaluated at parse time using IXamlCondition.", + "description": "XAML conditions let you conditionally include markup based on application-specific state such as feature flags, device capabilities, or configuration. Implement IXamlCondition (Windows App SDK 2.0) and reference your condition from a conditional XAML namespace. Conditions are evaluated by the XAML parser when a page is loaded and the result for each (condition, argument) pair is cached for the lifetime of the process.", + "apiNamespace": "Microsoft.UI.Xaml.Markup", + "tags": [ + "IXamlCondition", + "conditional XAML", + "markup extension" + ], + "docs": [ + { + "title": "IXamlCondition - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.markup.ixamlcondition" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/CustomXamlConditionals", + "page": "WinUIGallery/Samples/CustomXamlConditionals/CustomXamlConditionalsPage.xaml", + "codeBehind": "WinUIGallery/Samples/CustomXamlConditionals/CustomXamlConditionalsPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/CustomXamlConditionals/CustomXamlConditionalsConditionalAttributes.txt", + "WinUIGallery/Samples/CustomXamlConditionals/CustomXamlConditionalsConditionalElements.txt", + "WinUIGallery/Samples/CustomXamlConditionals/CustomXamlConditionalsConditionalSettersStyle.txt" + ] + }, + "scenarios": [ + { + "name": "Conditional Attributes", + "snippet": "CustomXamlConditionalsConditionalAttributes.txt" + }, + { + "name": "Conditional Elements", + "snippet": "CustomXamlConditionalsConditionalElements.txt" + }, + { + "name": "Conditional Setters Style", + "snippet": "CustomXamlConditionalsConditionalSettersStyle.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#DatePicker", + "uniqueId": "DatePicker", + "title": "DatePicker", + "group": { + "id": "DateAndTime", + "title": "Date \u0026 time" + }, + "summary": "A control that lets a user pick a date value.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "date selection" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#CalendarDatePicker", + "microsoft/WinUI-Gallery#CalendarView", + "microsoft/WinUI-Gallery#TimePicker" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/DatePicker", + "page": "WinUIGallery/Samples/DatePicker/DatePickerPage.xaml", + "codeBehind": "WinUIGallery/Samples/DatePicker/DatePickerPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/DatePicker/DatepickerDayFormattedYear.txt", + "WinUIGallery/Samples/DatePicker/SimpleDatepickerHeader.txt" + ] + }, + "scenarios": [ + { + "name": "Day Formatted Year", + "snippet": "DatepickerDayFormattedYear.txt" + }, + { + "name": "Simple Datepicker Header", + "snippet": "SimpleDatepickerHeader.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#DropDownButton", + "uniqueId": "DropDownButton", + "title": "DropDownButton", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "A button that displays a flyout of choices when clicked.", + "description": "A control that drops down a flyout of choices from which one can be chosen.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl", + "ButtonBase", + "Button" + ], + "tags": [ + "flyout button", + "menu button" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarButton", + "microsoft/WinUI-Gallery#CommandBar", + "microsoft/WinUI-Gallery#HyperlinkButton", + "microsoft/WinUI-Gallery#RepeatButton", + "microsoft/WinUI-Gallery#SplitButton", + "microsoft/WinUI-Gallery#ToggleButton", + "microsoft/WinUI-Gallery#ToggleSplitButton" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/DropDownButton", + "page": "WinUIGallery/Samples/DropDownButton/DropDownButtonPage.xaml", + "codeBehind": "WinUIGallery/Samples/DropDownButton/DropDownButtonPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/DropDownButton/DropDownButtonIcon.txt", + "WinUIGallery/Samples/DropDownButton/DropDownButtonSimple.txt" + ] + }, + "scenarios": [ + { + "name": "Icon", + "snippet": "DropDownButtonIcon.txt" + }, + { + "name": "Simple", + "snippet": "DropDownButtonSimple.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#EasingFunction", + "uniqueId": "EasingFunction", + "title": "Easing Functions", + "group": { + "id": "Motion", + "title": "Motion" + }, + "summary": "Easing is a way to manipulate the velocity of an object as it animates.", + "description": "Easing is a way to manipulate the velocity of an object as it animates.", + "apiNamespace": "Microsoft.UI.Xaml.Media.Animation", + "tags": [ + "animation curve", + "velocity" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ConnectedAnimation", + "microsoft/WinUI-Gallery#PageTransition", + "microsoft/WinUI-Gallery#ThemeTransition" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/EasingFunction", + "page": "WinUIGallery/Samples/EasingFunction/EasingFunctionPage.xaml", + "codeBehind": "WinUIGallery/Samples/EasingFunction/EasingFunctionPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/EasingFunction/AccelerateEasingFunction.txt", + "WinUIGallery/Samples/EasingFunction/DecelerateEasingFunction.txt", + "WinUIGallery/Samples/EasingFunction/OtherXamlEasingFunctions.txt", + "WinUIGallery/Samples/EasingFunction/StandardEasingFunction.txt" + ] + }, + "scenarios": [ + { + "name": "Accelerate Easing Function", + "snippet": "AccelerateEasingFunction.txt" + }, + { + "name": "Decelerate Easing Function", + "snippet": "DecelerateEasingFunction.txt" + }, + { + "name": "Other Xaml Easing Functions", + "snippet": "OtherXamlEasingFunctions.txt" + }, + { + "name": "Standard Easing Function", + "snippet": "StandardEasingFunction.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Expander", + "uniqueId": "Expander", + "title": "Expander", + "group": { + "id": "Layout", + "title": "Layout" + }, + "summary": "A container with a header that can be expanded to show a body with more content.", + "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).", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl" + ], + "tags": [ + "collapse", + "accordion" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Flyout", + "microsoft/WinUI-Gallery#ItemsRepeater", + "microsoft/WinUI-Gallery#SplitView" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/Expander", + "page": "WinUIGallery/Samples/Expander/ExpanderPage.xaml", + "codeBehind": "WinUIGallery/Samples/Expander/ExpanderPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Expander/ExpanderTextHeaderContent.txt", + "WinUIGallery/Samples/Expander/ModifyingExpandersContentAlignment.txt" + ] + }, + "scenarios": [ + { + "name": "Text Header Content", + "snippet": "ExpanderTextHeaderContent.txt" + }, + { + "name": "Modifying Expanders Content Alignment", + "snippet": "ModifyingExpandersContentAlignment.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#FlipView", + "uniqueId": "FlipView", + "title": "FlipView", + "group": { + "id": "Collections", + "title": "Collections" + }, + "summary": "Presents a collection of items that the user can flip through, one item at a time.", + "description": "The FlipView lets you flip through a collection of items, one at a time. It\u0027s great for displaying images from a gallery, pages of a magazine, or similar items.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ItemsControl", + "Selector" + ], + "tags": [ + "carousel", + "slideshow", + "gallery" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#GridView", + "microsoft/WinUI-Gallery#ListView", + "microsoft/WinUI-Gallery#SemanticZoom" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/FlipView", + "page": "WinUIGallery/Samples/FlipView/FlipViewPage.xaml", + "codeBehind": "WinUIGallery/Samples/FlipView/FlipViewPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/FlipView/FlipviewShowingBoundData.txt", + "WinUIGallery/Samples/FlipView/SimpleFlipviewItemsDeclared.txt", + "WinUIGallery/Samples/FlipView/VerticalFlipview.txt" + ] + }, + "scenarios": [ + { + "name": "Showing Bound Data", + "snippet": "FlipviewShowingBoundData.txt" + }, + { + "name": "Simple Flipview Items Declared", + "snippet": "SimpleFlipviewItemsDeclared.txt" + }, + { + "name": "Vertical Flipview", + "snippet": "VerticalFlipview.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Flyout", + "uniqueId": "Flyout", + "title": "Flyout", + "group": { + "id": "DialogsAndFlyouts", + "title": "Dialogs \u0026 flyouts" + }, + "summary": "Shows contextual information and enables user interaction.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "FlyoutBase" + ], + "tags": [ + "popup", + "contextual" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarButton", + "microsoft/WinUI-Gallery#Button", + "microsoft/WinUI-Gallery#ContentDialog", + "microsoft/WinUI-Gallery#MenuFlyout", + "microsoft/WinUI-Gallery#TeachingTip" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/Flyout", + "page": "WinUIGallery/Samples/Flyout/FlyoutPage.xaml", + "codeBehind": "WinUIGallery/Samples/Flyout/FlyoutPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Flyout/ButtonFlyout.txt" + ] + }, + "scenarios": [ + { + "name": "Button Flyout", + "snippet": "ButtonFlyout.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Geometry", + "uniqueId": "Geometry", + "title": "Geometry", + "group": { + "id": "DesignItem", + "title": "Design" + }, + "summary": "Clear geometric design ensures visual coherence and structure.", + "tags": [ + "path", + "vector", + "figures" + ], + "docs": [ + { + "title": "Geometry in Windows 11", + "uri": "https://learn.microsoft.com/windows/apps/design/signature-experiences/geometry" + }, + { + "title": "WinUI Theme Resources (GitHub)", + "uri": "https://github.com/microsoft/microsoft-ui-xaml/blob/main/controls/dev/CommonStyles/Common_themeresources_any.xaml" + } + ], + "source": { + "root": "WinUIGallery/Samples/Geometry", + "page": "WinUIGallery/Samples/Geometry/GeometryPage.xaml", + "codeBehind": "WinUIGallery/Samples/Geometry/GeometryPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Geometry/Geometry.txt" + ] + }, + "scenarios": [ + { + "name": "Geometry", + "snippet": "Geometry.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Grid", + "uniqueId": "Grid", + "title": "Grid", + "group": { + "id": "Layout", + "title": "Layout" + }, + "summary": "A layout panel that supports arranging child elements in rows and columns. ", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Panel" + ], + "tags": [ + "rows", + "columns" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Border", + "microsoft/WinUI-Gallery#Canvas", + "microsoft/WinUI-Gallery#RelativePanel", + "microsoft/WinUI-Gallery#StackPanel", + "microsoft/WinUI-Gallery#VariableSizedWrapGrid" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/Grid", + "page": "WinUIGallery/Samples/Grid/GridPage.xaml", + "codeBehind": "WinUIGallery/Samples/Grid/GridPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Grid/3x3GridControl.txt" + ] + }, + "scenarios": [ + { + "name": "3x3 Grid Control", + "snippet": "3x3GridControl.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#GridView", + "uniqueId": "GridView", + "title": "GridView", + "group": { + "id": "Collections", + "title": "Collections" + }, + "summary": "A control that presents a collection of items in rows and columns.", + "description": "The GridView lets you show a collection of items arranged in rows and columns that scroll horizontally.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ItemsControl", + "Selector", + "ListViewBase" + ], + "tags": [ + "tiles", + "collection grid" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#FlipView", + "microsoft/WinUI-Gallery#ItemsView", + "microsoft/WinUI-Gallery#ListView", + "microsoft/WinUI-Gallery#SemanticZoom" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/GridView", + "page": "WinUIGallery/Samples/GridView/GridViewPage.xaml", + "codeBehind": "WinUIGallery/Samples/GridView/GridViewPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/GridView/BasicGridviewSimpleDatatemplate.txt", + "WinUIGallery/Samples/GridView/ContentInsideGridview.txt", + "WinUIGallery/Samples/GridView/GridviewLayoutCustomization.txt" + ] + }, + "scenarios": [ + { + "name": "Basic Gridview Simple Datatemplate", + "snippet": "BasicGridviewSimpleDatatemplate.txt" + }, + { + "name": "Content Inside Gridview", + "snippet": "ContentInsideGridview.txt" + }, + { + "name": "Layout Customization", + "snippet": "GridviewLayoutCustomization.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#HyperlinkButton", + "uniqueId": "HyperlinkButton", + "title": "HyperlinkButton", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "A button that appears as hyperlink text, and can navigate to a URI or handle a Click event.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl", + "ButtonBase" + ], + "tags": [ + "URL", + "navigate" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarButton", + "microsoft/WinUI-Gallery#Button", + "microsoft/WinUI-Gallery#RepeatButton", + "microsoft/WinUI-Gallery#ToggleButton" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/HyperlinkButton", + "page": "WinUIGallery/Samples/HyperlinkButton/HyperlinkButtonPage.xaml", + "codeBehind": "WinUIGallery/Samples/HyperlinkButton/HyperlinkButtonPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/HyperlinkButton/HyperlinkButtonClick.txt", + "WinUIGallery/Samples/HyperlinkButton/HyperlinkButtonNavigate.txt" + ] + }, + "scenarios": [ + { + "name": "Click", + "snippet": "HyperlinkButtonClick.txt" + }, + { + "name": "Navigate", + "snippet": "HyperlinkButtonNavigate.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#IconElement", + "uniqueId": "IconElement", + "title": "IconElement", + "group": { + "id": "Styles", + "title": "Styles" + }, + "summary": "Represents icon controls that use different image types as its content.", + "description": "Represents icon controls that use different image types as its content.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement" + ], + "tags": [ + "BitmapIcon", + "FontIcon", + "PathIcon", + "SymbolIcon", + "ImageIcon", + "AnimatedIcon" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AnimatedIcon", + "microsoft/WinUI-Gallery#AppBarButton" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/IconElement", + "page": "WinUIGallery/Samples/IconElement/IconElementPage.xaml", + "codeBehind": "WinUIGallery/Samples/IconElement/IconElementPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/IconElement/IconElementBitmapiconMulticolorBitmapImage.txt", + "WinUIGallery/Samples/IconElement/IconElementFonticonGlyphSpecificFont.txt", + "WinUIGallery/Samples/IconElement/IconElementImageiconBitmapImageButton.txt", + "WinUIGallery/Samples/IconElement/IconElementImageiconSvgImageButton.txt", + "WinUIGallery/Samples/IconElement/IconElementPathiconButton.txt", + "WinUIGallery/Samples/IconElement/IconElementSymboliconButton.txt" + ] + }, + "scenarios": [ + { + "name": "Bitmapicon Multicolor Bitmap Image", + "snippet": "IconElementBitmapiconMulticolorBitmapImage.txt" + }, + { + "name": "Fonticon Glyph Specific Font", + "snippet": "IconElementFonticonGlyphSpecificFont.txt" + }, + { + "name": "Imageicon Bitmap Image Button", + "snippet": "IconElementImageiconBitmapImageButton.txt" + }, + { + "name": "Imageicon Svg Image Button", + "snippet": "IconElementImageiconSvgImageButton.txt" + }, + { + "name": "Pathicon Button", + "snippet": "IconElementPathiconButton.txt" + }, + { + "name": "Symbolicon Button", + "snippet": "IconElementSymboliconButton.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Iconography", + "uniqueId": "Iconography", + "title": "Iconography", + "group": { + "id": "DesignItem", + "title": "Design" + }, + "summary": "Icons are a visual design language that can be used to communicate information quickly and effectively.", + "description": "The icons below use Segoe Fluent Icons on Windows 11 and Segoe MDL2 Assets on Windows 10.", + "tags": [ + "icons", + "glyph", + "Segoe Fluent Icons", + "FontIcon", + "SymbolIcon", + "icon font" + ], + "docs": [ + { + "title": "Iconography in Windows", + "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" + }, + { + "title": "Segoe MDL2 Assets font", + "uri": "https://learn.microsoft.com/windows/apps/design/style/segoe-ui-symbol-font" + } + ], + "badges": [ + "Updated" + ], + "source": { + "root": "WinUIGallery/Samples/Iconography", + "page": "WinUIGallery/Samples/Iconography/IconographyPage.xaml", + "codeBehind": "WinUIGallery/Samples/Iconography/IconographyPage.xaml.cs" + } + }, + { + "id": "microsoft/WinUI-Gallery#Image", + "uniqueId": "Image", + "title": "Image", + "group": { + "id": "Media", + "title": "Media" + }, + "summary": "A control to display image content.", + "description": "You can use an Image control to show and scale images.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement" + ], + "tags": [ + "picture", + "BitmapImage", + "photo" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#MediaPlayerElement", + "microsoft/WinUI-Gallery#PersonPicture" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/Image", + "page": "WinUIGallery/Samples/Image/ImagePage.xaml", + "codeBehind": "WinUIGallery/Samples/Image/ImagePage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Image/AnimatedGif.txt", + "WinUIGallery/Samples/Image/BasicImageLocalFile.txt", + "WinUIGallery/Samples/Image/ImageDecodedRenderingSize.txt", + "WinUIGallery/Samples/Image/ImageStretching.txt", + "WinUIGallery/Samples/Image/NineGridImages.txt", + "WinUIGallery/Samples/Image/SvgImage.txt" + ] + }, + "scenarios": [ + { + "name": "Animated Gif", + "snippet": "AnimatedGif.txt" + }, + { + "name": "Basic Image Local File", + "snippet": "BasicImageLocalFile.txt" + }, + { + "name": "Decoded Rendering Size", + "snippet": "ImageDecodedRenderingSize.txt" + }, + { + "name": "Stretching", + "snippet": "ImageStretching.txt" + }, + { + "name": "Nine Grid Images", + "snippet": "NineGridImages.txt" + }, + { + "name": "Svg Image", + "snippet": "SvgImage.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ImplicitTransition", + "uniqueId": "ImplicitTransition", + "title": "Implicit Transitions", + "group": { + "id": "Motion", + "title": "Motion" + }, + "summary": "Use Implicit Transitions to automatically animate changes to properties.", + "description": "Use Implicit Transitions to automatically animate changes to properties.", + "apiNamespace": "Microsoft.UI.Xaml", + "tags": [ + "implicit animation", + "transition", + "property animation" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#PageTransition", + "microsoft/WinUI-Gallery#ThemeTransition" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ImplicitTransition", + "page": "WinUIGallery/Samples/ImplicitTransition/ImplicitTransitionPage.xaml", + "codeBehind": "WinUIGallery/Samples/ImplicitTransition/ImplicitTransitionPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ImplicitTransition/ImplicitTransitionAutomaticallyAnimateChangesOpacity.txt", + "WinUIGallery/Samples/ImplicitTransition/ImplicitTransitionAutomaticallyAnimateChangesRotation.txt", + "WinUIGallery/Samples/ImplicitTransition/ImplicitTransitionAutomaticallyAnimateChangesScale.txt", + "WinUIGallery/Samples/ImplicitTransition/ImplicitTransitionAutomaticallyAnimateChangesTranslation.txt", + "WinUIGallery/Samples/ImplicitTransition/ImplicitTransitionImplicitlyAnimateBackgroundChanges.txt", + "WinUIGallery/Samples/ImplicitTransition/ImplicitTransitionImplicitlyAnimateGridTheme.txt" + ] + }, + "scenarios": [ + { + "name": "Automatically Animate Changes Opacity", + "snippet": "ImplicitTransitionAutomaticallyAnimateChangesOpacity.txt" + }, + { + "name": "Automatically Animate Changes Rotation", + "snippet": "ImplicitTransitionAutomaticallyAnimateChangesRotation.txt" + }, + { + "name": "Automatically Animate Changes Scale", + "snippet": "ImplicitTransitionAutomaticallyAnimateChangesScale.txt" + }, + { + "name": "Automatically Animate Changes Translation", + "snippet": "ImplicitTransitionAutomaticallyAnimateChangesTranslation.txt" + }, + { + "name": "Implicitly Animate Background Changes", + "snippet": "ImplicitTransitionImplicitlyAnimateBackgroundChanges.txt" + }, + { + "name": "Implicitly Animate Grid Theme", + "snippet": "ImplicitTransitionImplicitlyAnimateGridTheme.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#InfoBadge", + "uniqueId": "InfoBadge", + "title": "InfoBadge", + "group": { + "id": "StatusAndInfo", + "title": "Status \u0026 info" + }, + "summary": "An non-intrusive UI to display notifications or bring focus to an area.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "notification dot", + "count badge" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#BadgeNotificationManager", + "microsoft/WinUI-Gallery#InfoBar", + "microsoft/WinUI-Gallery#TeachingTip" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/InfoBadge", + "page": "WinUIGallery/Samples/InfoBadge/InfoBadgePage.xaml", + "codeBehind": "WinUIGallery/Samples/InfoBadge/InfoBadgePage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/InfoBadge/DifferentInfobadgeStyles.txt", + "WinUIGallery/Samples/InfoBadge/InfobadgeDynamicValue.txt", + "WinUIGallery/Samples/InfoBadge/InfobadgeEmbeddedNavigationview.txt", + "WinUIGallery/Samples/InfoBadge/PlacingInfobadgeInsideAnother.txt" + ] + }, + "scenarios": [ + { + "name": "Different Infobadge Styles", + "snippet": "DifferentInfobadgeStyles.txt" + }, + { + "name": "Dynamic Value", + "snippet": "InfobadgeDynamicValue.txt" + }, + { + "name": "Embedded Navigationview", + "snippet": "InfobadgeEmbeddedNavigationview.txt" + }, + { + "name": "Placing Infobadge Inside Another", + "snippet": "PlacingInfobadgeInsideAnother.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#InfoBar", + "uniqueId": "InfoBar", + "title": "InfoBar", + "group": { + "id": "StatusAndInfo", + "title": "Status \u0026 info" + }, + "summary": "An inline message to display app-wide status change information.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "notification", + "status message", + "alert", + "banner" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ContentDialog", + "microsoft/WinUI-Gallery#TeachingTip" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/InfoBar", + "page": "WinUIGallery/Samples/InfoBar/InfoBarPage.xaml", + "codeBehind": "WinUIGallery/Samples/InfoBar/InfoBarPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/InfoBar/ClosableInfobarLongShort.txt", + "WinUIGallery/Samples/InfoBar/ClosableInfobarOptionsChange.txt", + "WinUIGallery/Samples/InfoBar/ClosableInfobarOptionsDisplay.txt" + ] + }, + "scenarios": [ + { + "name": "Closable Infobar Long Short", + "snippet": "ClosableInfobarLongShort.txt" + }, + { + "name": "Closable Infobar Options Change", + "snippet": "ClosableInfobarOptionsChange.txt" + }, + { + "name": "Closable Infobar Options Display", + "snippet": "ClosableInfobarOptionsDisplay.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ItemsRepeater", + "uniqueId": "ItemsRepeater", + "title": "ItemsRepeater", + "group": { + "id": "Collections", + "title": "Collections" + }, + "summary": "A flexible, primitive control for data-driven layouts.", + "description": "The ItemsRepeater is like a markup-based loop that supports virtualization.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement" + ], + "tags": [ + "data layout", + "virtualization" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#GridView", + "microsoft/WinUI-Gallery#ItemsView", + "microsoft/WinUI-Gallery#ListView", + "microsoft/WinUI-Gallery#ScrollView", + "microsoft/WinUI-Gallery#ScrollViewer" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ItemsRepeater", + "page": "WinUIGallery/Samples/ItemsRepeater/ItemsRepeaterPage.xaml", + "codeBehind": "WinUIGallery/Samples/ItemsRepeater/ItemsRepeaterPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ItemsRepeater/ItemsRepeaterAnimatedScrollingContentDisplay.txt", + "WinUIGallery/Samples/ItemsRepeater/ItemsRepeaterBasicNonInteractiveItems.txt", + "WinUIGallery/Samples/ItemsRepeater/ItemsRepeaterVirtualizedContentHeavyLayout.txt", + "WinUIGallery/Samples/ItemsRepeater/ItemsRepeaterVirtualizingScrollableListItems.txt", + "WinUIGallery/Samples/ItemsRepeater/ItemsrepeaterMixedTypeCollection.txt", + "WinUIGallery/Samples/ItemsRepeater/LayingOutNestedItemsrepeaters.txt" + ] + }, + "scenarios": [ + { + "name": "Animated Scrolling Content Display", + "snippet": "ItemsRepeaterAnimatedScrollingContentDisplay.txt" + }, + { + "name": "Basic Non Interactive Items", + "snippet": "ItemsRepeaterBasicNonInteractiveItems.txt" + }, + { + "name": "Virtualized Content Heavy Layout", + "snippet": "ItemsRepeaterVirtualizedContentHeavyLayout.txt" + }, + { + "name": "Virtualizing Scrollable List Items", + "snippet": "ItemsRepeaterVirtualizingScrollableListItems.txt" + }, + { + "name": "Mixed Type Collection", + "snippet": "ItemsrepeaterMixedTypeCollection.txt" + }, + { + "name": "Laying Out Nested Itemsrepeaters", + "snippet": "LayingOutNestedItemsrepeaters.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ItemsView", + "uniqueId": "ItemsView", + "title": "ItemsView", + "group": { + "id": "Collections", + "title": "Collections" + }, + "summary": "A control that presents a collection of items using various layouts.", + "description": "The ItemsView lets you show a collection of items using scrollable \u0026 swappable layouts.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "collection", + "items source", + "layout" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AnnotatedScrollBar", + "microsoft/WinUI-Gallery#GridView", + "microsoft/WinUI-Gallery#ItemsRepeater", + "microsoft/WinUI-Gallery#ListView", + "microsoft/WinUI-Gallery#ScrollView" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ItemsView", + "page": "WinUIGallery/Samples/ItemsView/ItemsViewPage.xaml", + "codeBehind": "WinUIGallery/Samples/ItemsView/ItemsViewPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ItemsView/BasicItemsview.txt", + "WinUIGallery/Samples/ItemsView/ItemsviewItemInvocationSelection.txt", + "WinUIGallery/Samples/ItemsView/ItemsviewSwappableLayouts.txt" + ] + }, + "scenarios": [ + { + "name": "Basic Itemsview", + "snippet": "BasicItemsview.txt" + }, + { + "name": "Item Invocation Selection", + "snippet": "ItemsviewItemInvocationSelection.txt" + }, + { + "name": "Swappable Layouts", + "snippet": "ItemsviewSwappableLayouts.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#JumpList", + "uniqueId": "JumpList", + "title": "JumpList", + "group": { + "id": "Shell", + "title": "Shell" + }, + "summary": "Add custom tasks and groups to the app\u0027s taskbar jump list.", + "description": "Jump lists let you add custom tasks and groups to the app\u0027s right-click menu on the taskbar. Use them to provide quick access to frequently used actions or recently opened items.", + "apiNamespace": "Windows.UI.StartScreen", + "baseClasses": [ + "Object" + ], + "tags": [ + "jump list", + "taskbar", + "recent", + "tasks" + ], + "docs": [ + { + "title": "JumpList - API", + "uri": "https://learn.microsoft.com/uwp/api/windows.ui.startscreen.jumplist" + }, + { + "title": "JumpListItem - API", + "uri": "https://learn.microsoft.com/uwp/api/windows.ui.startscreen.jumplistitem" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/JumpList", + "page": "WinUIGallery/Samples/JumpList/JumpListPage.xaml", + "codeBehind": "WinUIGallery/Samples/JumpList/JumpListPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/JumpList/AddingTasksJumpList.txt", + "WinUIGallery/Samples/JumpList/JumpListAddingItemsCustomGroup.txt" + ] + }, + "scenarios": [ + { + "name": "Adding Tasks Jump List", + "snippet": "AddingTasksJumpList.txt" + }, + { + "name": "Adding Items Custom Group", + "snippet": "JumpListAddingItemsCustomGroup.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Line", + "uniqueId": "Line", + "title": "Line", + "group": { + "id": "Styles", + "title": "Styles" + }, + "summary": "Draws a straight line between two points.", + "description": "Draws a straight line between two points.", + "apiNamespace": "Microsoft.UI.Xaml.Shapes", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Shape" + ], + "tags": [ + "stroke", + "draw line" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Shape" + ], + "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)" + } + ], + "source": { + "root": "WinUIGallery/Samples/Line", + "page": "WinUIGallery/Samples/Line/LinePage.xaml", + "codeBehind": "WinUIGallery/Samples/Line/LinePage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Line/Line.txt", + "WinUIGallery/Samples/Line/LineGeometrygroup.txt", + "WinUIGallery/Samples/Line/LinePath.txt", + "WinUIGallery/Samples/Line/Polyline.txt" + ] + }, + "scenarios": [ + { + "name": "Line", + "snippet": "Line.txt" + }, + { + "name": "Geometrygroup", + "snippet": "LineGeometrygroup.txt" + }, + { + "name": "Path", + "snippet": "LinePath.txt" + }, + { + "name": "Polyline", + "snippet": "Polyline.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ListView", + "uniqueId": "ListView", + "title": "ListView", + "group": { + "id": "Collections", + "title": "Collections" + }, + "summary": "A control that presents a collection of items in a vertical list.", + "description": "The ListView lets you show a collection of items in a list that scrolls vertically.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ItemsControl", + "Selector", + "ListViewBase" + ], + "tags": [ + "list", + "selection", + "collection list" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#FlipView", + "microsoft/WinUI-Gallery#GridView", + "microsoft/WinUI-Gallery#ItemsView", + "microsoft/WinUI-Gallery#SemanticZoom", + "microsoft/WinUI-Gallery#StandardUICommand" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ListView", + "page": "WinUIGallery/Samples/ListView/ListViewPage.xaml", + "codeBehind": "WinUIGallery/Samples/ListView/ListViewPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ListView/BasicListviewSimpleDatatemplate.txt", + "WinUIGallery/Samples/ListView/ListviewContextMenus.txt", + "WinUIGallery/Samples/ListView/ListviewFiltering.txt", + "WinUIGallery/Samples/ListView/ListviewGroupedHeaders.txt", + "WinUIGallery/Samples/ListView/ListviewImages.txt", + "WinUIGallery/Samples/ListView/ListviewMessagingDataLogging.txt", + "WinUIGallery/Samples/ListView/ListviewRestoreScrollPosition.txt", + "WinUIGallery/Samples/ListView/ListviewScrollIntoView.txt", + "WinUIGallery/Samples/ListView/ListviewSelectionSupport.txt", + "WinUIGallery/Samples/ListView/ListviewsDragDropReordering.txt" + ] + }, + "scenarios": [ + { + "name": "Basic Listview Simple Datatemplate", + "snippet": "BasicListviewSimpleDatatemplate.txt" + }, + { + "name": "Context Menus", + "snippet": "ListviewContextMenus.txt" + }, + { + "name": "Filtering", + "snippet": "ListviewFiltering.txt" + }, + { + "name": "Grouped Headers", + "snippet": "ListviewGroupedHeaders.txt" + }, + { + "name": "Images", + "snippet": "ListviewImages.txt" + }, + { + "name": "Messaging Data Logging", + "snippet": "ListviewMessagingDataLogging.txt" + }, + { + "name": "Restore Scroll Position", + "snippet": "ListviewRestoreScrollPosition.txt" + }, + { + "name": "Scroll Into View", + "snippet": "ListviewScrollIntoView.txt" + }, + { + "name": "Selection Support", + "snippet": "ListviewSelectionSupport.txt" + }, + { + "name": "s Drag Drop Reordering", + "snippet": "ListviewsDragDropReordering.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#MapControl", + "uniqueId": "MapControl", + "title": "MapControl", + "group": { + "id": "Media", + "title": "Media" + }, + "summary": "Displays a symbolic map of the Earth.", + "description": "Displays a symbolic map of the Earth", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "maps", + "geography", + "location" + ], + "docs": [ + { + "title": "MapControl - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.mapcontrol" + } + ], + "source": { + "root": "WinUIGallery/Samples/MapControl", + "page": "WinUIGallery/Samples/MapControl/MapControlPage.xaml", + "codeBehind": "WinUIGallery/Samples/MapControl/MapControlPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/MapControl/MapControlShowingPinMap.txt" + ] + }, + "scenarios": [ + { + "name": "Showing Pin Map", + "snippet": "MapControlShowingPinMap.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#MediaPlayerElement", + "uniqueId": "MediaPlayerElement", + "title": "MediaPlayerElement", + "group": { + "id": "Media", + "title": "Media" + }, + "summary": "A control to display video and image content.", + "description": "You can use a MediaPlayerElement control to playback videos and show images. You can show transport controls or make the video autoplay.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "video", + "media player", + "audio", + "playback" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#CaptureElementPreview", + "microsoft/WinUI-Gallery#Image" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/MediaPlayerElement", + "page": "WinUIGallery/Samples/MediaPlayerElement/MediaPlayerElementPage.xaml", + "codeBehind": "WinUIGallery/Samples/MediaPlayerElement/MediaPlayerElementPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/MediaPlayerElement/MediaplayerelementAutoplaysVideo.txt", + "WinUIGallery/Samples/MediaPlayerElement/MediaplayerelementTransportControls.txt" + ] + }, + "scenarios": [ + { + "name": "Autoplays Video", + "snippet": "MediaplayerelementAutoplaysVideo.txt" + }, + { + "name": "Transport Controls", + "snippet": "MediaplayerelementTransportControls.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#MenuBar", + "uniqueId": "MenuBar", + "title": "MenuBar", + "group": { + "id": "MenusAndToolbars", + "title": "Menus \u0026 toolbars" + }, + "summary": "A classic menu, allowing the display of MenuItems containing MenuFlyoutItems.", + "description": "The Menubar simplifies the creation of basic applications by providing a set of menus at the top of the app or window.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "MenuBarItem", + "application menu" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#CommandBar", + "microsoft/WinUI-Gallery#MenuFlyout", + "microsoft/WinUI-Gallery#StandardUICommand", + "microsoft/WinUI-Gallery#XamlUICommand" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/MenuBar", + "page": "WinUIGallery/Samples/MenuBar/MenuBarPage.xaml", + "codeBehind": "WinUIGallery/Samples/MenuBar/MenuBarPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/MenuBar/MenubarKeyboardAccelerators.txt", + "WinUIGallery/Samples/MenuBar/MenubarSubmenusSeparatorsRadio.txt", + "WinUIGallery/Samples/MenuBar/SimpleMenubar.txt" + ] + }, + "scenarios": [ + { + "name": "Keyboard Accelerators", + "snippet": "MenubarKeyboardAccelerators.txt" + }, + { + "name": "Submenus Separators Radio", + "snippet": "MenubarSubmenusSeparatorsRadio.txt" + }, + { + "name": "Simple Menubar", + "snippet": "SimpleMenubar.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#MenuFlyout", + "uniqueId": "MenuFlyout", + "title": "MenuFlyout", + "group": { + "id": "MenusAndToolbars", + "title": "Menus \u0026 toolbars" + }, + "summary": "Shows a contextual list of simple commands or options.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "FlyoutBase" + ], + "tags": [ + "context menu", + "right click menu", + "MenuFlyoutItem", + "dropdown menu" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarButton", + "microsoft/WinUI-Gallery#Button", + "microsoft/WinUI-Gallery#ContentDialog", + "microsoft/WinUI-Gallery#Flyout" + ], + "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": "MenuFlyoutSubItem - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.menuflyoutsubitem" + }, + { + "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": "RadioMenuFlyoutItem - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.radiomenuflyoutitem" + }, + { + "title": "Guidelines", + "uri": "https://learn.microsoft.com/windows/apps/design/controls/menus" + } + ], + "source": { + "root": "WinUIGallery/Samples/MenuFlyout", + "page": "WinUIGallery/Samples/MenuFlyout/MenuFlyoutPage.xaml", + "codeBehind": "WinUIGallery/Samples/MenuFlyout/MenuFlyoutPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/MenuFlyout/AppbarbuttonMenuflyout.txt", + "WinUIGallery/Samples/MenuFlyout/MenuflyoutCascadingMenus.txt", + "WinUIGallery/Samples/MenuFlyout/MenuflyoutIcons.txt", + "WinUIGallery/Samples/MenuFlyout/MenuflyoutIconsKeyboardAccelerators.txt", + "WinUIGallery/Samples/MenuFlyout/MenuflyoutRadiomenuflyoutitems.txt", + "WinUIGallery/Samples/MenuFlyout/MenuflyoutSplitmenuflyoutitems.txt", + "WinUIGallery/Samples/MenuFlyout/MenuflyoutTogglemenuflyoutitemsMenuflyoutseparator.txt" + ] + }, + "scenarios": [ + { + "name": "Appbarbutton Menuflyout", + "snippet": "AppbarbuttonMenuflyout.txt" + }, + { + "name": "Cascading Menus", + "snippet": "MenuflyoutCascadingMenus.txt" + }, + { + "name": "Icons", + "snippet": "MenuflyoutIcons.txt" + }, + { + "name": "Icons Keyboard Accelerators", + "snippet": "MenuflyoutIconsKeyboardAccelerators.txt" + }, + { + "name": "Radiomenuflyoutitems", + "snippet": "MenuflyoutRadiomenuflyoutitems.txt" + }, + { + "name": "Splitmenuflyoutitems", + "snippet": "MenuflyoutSplitmenuflyoutitems.txt" + }, + { + "name": "Togglemenuflyoutitems Menuflyoutseparator", + "snippet": "MenuflyoutTogglemenuflyoutitemsMenuflyoutseparator.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#NavigationView", + "uniqueId": "NavigationView", + "title": "NavigationView", + "group": { + "id": "Navigation", + "title": "Navigation" + }, + "summary": "Common vertical layout for top-level areas of your app via a collapsible navigation menu.", + "description": "The NavigationView control provides a common vertical layout for top-level areas of your app via a collapsible navigation menu.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl" + ], + "tags": [ + "hamburger menu", + "side nav", + "nav pane" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Pivot", + "microsoft/WinUI-Gallery#SplitView" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/NavigationView", + "page": "WinUIGallery/Samples/NavigationView/NavigationViewPage.xaml", + "codeBehind": "WinUIGallery/Samples/NavigationView/NavigationViewPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/NavigationView/HierarchicalNavigationview.txt", + "WinUIGallery/Samples/NavigationView/NavigationViewApiAction.txt", + "WinUIGallery/Samples/NavigationView/NavigationViewDataBinding.txt", + "WinUIGallery/Samples/NavigationView/NavigationViewTyingSelectionFocusTabs.txt", + "WinUIGallery/Samples/NavigationView/NavigationviewDefaultPanedisplaymode.txt", + "WinUIGallery/Samples/NavigationView/NavigationviewFooterMenuItems.txt", + "WinUIGallery/Samples/NavigationView/NavigationviewPanedisplaymodeTop.txt", + "WinUIGallery/Samples/NavigationView/NavigationviewSwitchesPaneOrientation.txt" + ] + }, + "scenarios": [ + { + "name": "Hierarchical Navigationview", + "snippet": "HierarchicalNavigationview.txt" + }, + { + "name": "Api Action", + "snippet": "NavigationViewApiAction.txt" + }, + { + "name": "Data Binding", + "snippet": "NavigationViewDataBinding.txt" + }, + { + "name": "Tying Selection Focus Tabs", + "snippet": "NavigationViewTyingSelectionFocusTabs.txt" + }, + { + "name": "Default Panedisplaymode", + "snippet": "NavigationviewDefaultPanedisplaymode.txt" + }, + { + "name": "Footer Menu Items", + "snippet": "NavigationviewFooterMenuItems.txt" + }, + { + "name": "Panedisplaymode Top", + "snippet": "NavigationviewPanedisplaymodeTop.txt" + }, + { + "name": "Switches Pane Orientation", + "snippet": "NavigationviewSwitchesPaneOrientation.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#NumberBox", + "uniqueId": "NumberBox", + "title": "NumberBox", + "group": { + "id": "Text", + "title": "Text" + }, + "summary": "A text control used for numeric input and evaluation of algebraic equations.", + "description": "Use NumberBox to allow users to enter algebraic equations and numeric input in your app.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "numeric input", + "spinner", + "calculator" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#RichEditBox", + "microsoft/WinUI-Gallery#RichTextBlock", + "microsoft/WinUI-Gallery#TextBlock", + "microsoft/WinUI-Gallery#TextBox" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/NumberBox", + "page": "WinUIGallery/Samples/NumberBox/NumberBoxPage.xaml", + "codeBehind": "WinUIGallery/Samples/NumberBox/NumberBoxPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/NumberBox/FormattedNumberboxRoundsNearest.txt", + "WinUIGallery/Samples/NumberBox/NumberboxEvaluatesExpressions.txt", + "WinUIGallery/Samples/NumberBox/NumberboxSpinButton.txt" + ] + }, + "scenarios": [ + { + "name": "Formatted Numberbox Rounds Nearest", + "snippet": "FormattedNumberboxRoundsNearest.txt" + }, + { + "name": "Evaluates Expressions", + "snippet": "NumberboxEvaluatesExpressions.txt" + }, + { + "name": "Spin Button", + "snippet": "NumberboxSpinButton.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#PageTransition", + "uniqueId": "PageTransition", + "title": "Page Transitions", + "group": { + "id": "Motion", + "title": "Motion" + }, + "summary": "Page transitions provide visual feedback about the relationship between pages.", + "description": "Page transitions provide visual feedback about the relationship between pages.", + "apiNamespace": "Microsoft.UI.Xaml.Media.Animation", + "tags": [ + "page transition", + "navigation transition", + "NavigationTransitionInfo" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ConnectedAnimation", + "microsoft/WinUI-Gallery#ThemeTransition" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/PageTransition", + "page": "WinUIGallery/Samples/PageTransition/PageTransitionPage.xaml", + "codeBehind": "WinUIGallery/Samples/PageTransition/PageTransitionPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/PageTransition/PageTransitions.txt" + ] + }, + "scenarios": [ + { + "name": "s", + "snippet": "PageTransitions.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ParallaxView", + "uniqueId": "ParallaxView", + "title": "ParallaxView", + "group": { + "id": "Motion", + "title": "Motion" + }, + "summary": "A container control that provides the parallax effect when scrolling.", + "description": "A container control that provides the parallax effect when scrolling.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement" + ], + "tags": [ + "scrolling effect" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ScrollView", + "microsoft/WinUI-Gallery#ScrollViewer" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ParallaxView", + "page": "WinUIGallery/Samples/ParallaxView/ParallaxViewPage.xaml", + "codeBehind": "WinUIGallery/Samples/ParallaxView/ParallaxViewPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ParallaxView/ParallaxViewParallaxListview.txt", + "WinUIGallery/Samples/ParallaxView/ParallaxViewParallaxScrollview.txt" + ] + }, + "scenarios": [ + { + "name": "Parallax Listview", + "snippet": "ParallaxViewParallaxListview.txt" + }, + { + "name": "Parallax Scrollview", + "snippet": "ParallaxViewParallaxScrollview.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#PasswordBox", + "uniqueId": "PasswordBox", + "title": "PasswordBox", + "group": { + "id": "Text", + "title": "Text" + }, + "summary": "A control for entering passwords.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "secure input", + "reveal" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#RichEditBox", + "microsoft/WinUI-Gallery#RichTextBlock", + "microsoft/WinUI-Gallery#TextBlock", + "microsoft/WinUI-Gallery#TextBox" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/PasswordBox", + "page": "WinUIGallery/Samples/PasswordBox/PasswordBoxPage.xaml", + "codeBehind": "WinUIGallery/Samples/PasswordBox/PasswordBoxPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/PasswordBox/PasswordboxHeaderPlaceholderText.txt", + "WinUIGallery/Samples/PasswordBox/PasswordboxRevealMode.txt", + "WinUIGallery/Samples/PasswordBox/SimplePasswordbox.txt" + ] + }, + "scenarios": [ + { + "name": "Header Placeholder Text", + "snippet": "PasswordboxHeaderPlaceholderText.txt" + }, + { + "name": "Reveal Mode", + "snippet": "PasswordboxRevealMode.txt" + }, + { + "name": "Simple Passwordbox", + "snippet": "SimplePasswordbox.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#PersonPicture", + "uniqueId": "PersonPicture", + "title": "PersonPicture", + "group": { + "id": "Media", + "title": "Media" + }, + "summary": "Displays the picture of a person/contact.", + "description": "Displays the picture of a person/contact.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "avatar", + "contact photo" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Image" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/PersonPicture", + "page": "WinUIGallery/Samples/PersonPicture/PersonPicturePage.xaml", + "codeBehind": "WinUIGallery/Samples/PersonPicture/PersonPicturePage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/PersonPicture/PersonPictureSelectDifferentLooksPerson.txt" + ] + }, + "scenarios": [ + { + "name": "Select Different Looks Person", + "snippet": "PersonPictureSelectDifferentLooksPerson.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#PipsPager", + "uniqueId": "PipsPager", + "title": "PipsPager", + "group": { + "id": "Scrolling", + "title": "Scrolling" + }, + "summary": "A control to let the user navigate through a paginated collection when the page numbers do not need to be visually known.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "pagination", + "dots" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#FlipView", + "microsoft/WinUI-Gallery#ItemsRepeater", + "microsoft/WinUI-Gallery#ScrollViewer" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/PipsPager", + "page": "WinUIGallery/Samples/PipsPager/PipsPagerPage.xaml", + "codeBehind": "WinUIGallery/Samples/PipsPager/PipsPagerPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/PipsPager/PipspagerIntegratedFlipview.txt", + "WinUIGallery/Samples/PipsPager/PipspagerOptionsChangeOrientation.txt" + ] + }, + "scenarios": [ + { + "name": "Integrated Flipview", + "snippet": "PipspagerIntegratedFlipview.txt" + }, + { + "name": "Options Change Orientation", + "snippet": "PipspagerOptionsChangeOrientation.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Pivot", + "uniqueId": "Pivot", + "title": "Pivot", + "group": { + "id": "Navigation", + "title": "Navigation" + }, + "summary": "Presents information from different sources in a tabbed view.", + "description": "Pivot is not recommended for Windows 11 design patterns. Please use the SelectorBar and SelectorBarItem. A Pivot allows you to show a collection of items from different sources in a tabbed view.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ItemsControl" + ], + "tags": [ + "tabs", + "tabbed view" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#SelectorBar" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/Pivot", + "page": "WinUIGallery/Samples/Pivot/PivotPage.xaml", + "codeBehind": "WinUIGallery/Samples/Pivot/PivotPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Pivot/BasicPivot.txt" + ] + }, + "scenarios": [ + { + "name": "Basic Pivot", + "snippet": "BasicPivot.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Popup", + "uniqueId": "Popup", + "title": "Popup", + "group": { + "id": "DialogsAndFlyouts", + "title": "Dialogs \u0026 flyouts" + }, + "summary": "A UI element displaying temporary content over existing interface.", + "description": "The Popup Control allows your app to display temporary content above other UI elements. It can be used for lightweight interactions such as tooltips, notifications, or custom floating panels to enhance user workflows or highlight specific parts of the interface.", + "apiNamespace": "Microsoft.UI.Xaml.Controls.Primitives", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement" + ], + "tags": [ + "overlay", + "temporary content" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ContentDialog" + ], + "docs": [ + { + "title": "Popup - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.primitives.popup" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/Popup", + "page": "WinUIGallery/Samples/Popup/PopupPage.xaml", + "codeBehind": "WinUIGallery/Samples/Popup/PopupPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Popup/PopupOffsetPositioning.txt" + ] + }, + "scenarios": [ + { + "name": "Offset Positioning", + "snippet": "PopupOffsetPositioning.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ProgressBar", + "uniqueId": "ProgressBar", + "title": "ProgressBar", + "group": { + "id": "StatusAndInfo", + "title": "Status \u0026 info" + }, + "summary": "Shows the apps progress on a task, or that the app is performing ongoing work that doesn\u0027t block user interaction.", + "description": "The ProgressBar has two different visual representations:\nIndeterminate - shows that a task is ongoing, but doesn\u0027t block user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "RangeBase" + ], + "tags": [ + "loading", + "determinate", + "indeterminate" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ProgressRing" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ProgressBar", + "page": "WinUIGallery/Samples/ProgressBar/ProgressBarPage.xaml", + "codeBehind": "WinUIGallery/Samples/ProgressBar/ProgressBarPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ProgressBar/DeterminateProgressBar.txt", + "WinUIGallery/Samples/ProgressBar/IndeterminateProgressBar.txt" + ] + }, + "scenarios": [ + { + "name": "Determinate Progress Bar", + "snippet": "DeterminateProgressBar.txt" + }, + { + "name": "Indeterminate Progress Bar", + "snippet": "IndeterminateProgressBar.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ProgressRing", + "uniqueId": "ProgressRing", + "title": "ProgressRing", + "group": { + "id": "StatusAndInfo", + "title": "Status \u0026 info" + }, + "summary": "Shows the apps progress on a task, or that the app is performing ongoing work that does block user interaction.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "loading", + "spinner", + "busy" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ProgressBar" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ProgressRing", + "page": "WinUIGallery/Samples/ProgressRing/ProgressRingPage.xaml", + "codeBehind": "WinUIGallery/Samples/ProgressRing/ProgressRingPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ProgressRing/DeterminateProgressRing.txt", + "WinUIGallery/Samples/ProgressRing/IndeterminateProgressRing.txt" + ] + }, + "scenarios": [ + { + "name": "Determinate Progress Ring", + "snippet": "DeterminateProgressRing.txt" + }, + { + "name": "Indeterminate Progress Ring", + "snippet": "IndeterminateProgressRing.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#PullToRefresh", + "uniqueId": "PullToRefresh", + "title": "PullToRefresh", + "group": { + "id": "Collections", + "title": "Collections" + }, + "summary": "Provides the ability to pull on a collection of items in a list/grid to refresh the contents of the collection.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "tags": [ + "pull to refresh", + "RefreshContainer", + "RefreshVisualizer" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ListView", + "microsoft/WinUI-Gallery#ScrollView", + "microsoft/WinUI-Gallery#ScrollViewer" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/PullToRefresh", + "page": "WinUIGallery/Samples/PullToRefresh/PullToRefreshPage.xaml", + "codeBehind": "WinUIGallery/Samples/PullToRefresh/PullToRefreshPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/PullToRefresh/BasicPulltorefresh.txt", + "WinUIGallery/Samples/PullToRefresh/CustomIconPulltorefresh.txt" + ] + }, + "scenarios": [ + { + "name": "Basic Pulltorefresh", + "snippet": "BasicPulltorefresh.txt" + }, + { + "name": "Custom Icon Pulltorefresh", + "snippet": "CustomIconPulltorefresh.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#RadialGradientBrush", + "uniqueId": "RadialGradientBrush", + "title": "RadialGradientBrush", + "group": { + "id": "Styles", + "title": "Styles" + }, + "summary": "A brush to show radial gradients.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Media", + "baseClasses": [ + "Object", + "DependencyObject", + "Brush", + "XamlCompositionBrushBase" + ], + "tags": [ + "gradient", + "radial gradient", + "brush" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Acrylic" + ], + "docs": [ + { + "title": "RadialGradientBrush - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.RadialGradientBrush" + } + ], + "source": { + "root": "WinUIGallery/Samples/RadialGradientBrush", + "page": "WinUIGallery/Samples/RadialGradientBrush/RadialGradientBrushPage.xaml", + "codeBehind": "WinUIGallery/Samples/RadialGradientBrush/RadialGradientBrushPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/RadialGradientBrush/RadialgradientbrushSample.txt" + ] + }, + "scenarios": [ + { + "name": "Sample", + "snippet": "RadialgradientbrushSample.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#RadioButton", + "uniqueId": "RadioButton", + "title": "RadioButton", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "A control that allows a user to select a single option from a group of options.", + "description": "Use RadioButton controls to let a user choose between mutually exclusive, related options. Generally contained within a RadioButtons group control.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl", + "ButtonBase", + "ToggleButton" + ], + "tags": [ + "RadioButtons", + "single selection", + "option" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#CheckBox", + "microsoft/WinUI-Gallery#ToggleButton", + "microsoft/WinUI-Gallery#ToggleSwitch" + ], + "docs": [ + { + "title": "RadioButton - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.radiobutton" + }, + { + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/RadioButton", + "page": "WinUIGallery/Samples/RadioButton/RadioButtonPage.xaml", + "codeBehind": "WinUIGallery/Samples/RadioButton/RadioButtonPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/RadioButton/RadioButtonGroup.txt", + "WinUIGallery/Samples/RadioButton/RadioButtonStrings.txt" + ] + }, + "scenarios": [ + { + "name": "Group", + "snippet": "RadioButtonGroup.txt" + }, + { + "name": "Strings", + "snippet": "RadioButtonStrings.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#RatingControl", + "uniqueId": "RatingControl", + "title": "RatingControl", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "Rate something 1 to 5 stars.", + "description": "Rate something 1 to 5 stars.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "stars", + "review" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ComboBox", + "microsoft/WinUI-Gallery#Slider" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/RatingControl", + "page": "WinUIGallery/Samples/RatingControl/RatingControlPage.xaml", + "codeBehind": "WinUIGallery/Samples/RatingControl/RatingControlPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/RatingControl/RatingControlPlaceholder.txt", + "WinUIGallery/Samples/RatingControl/RatingControlSimple.txt" + ] + }, + "scenarios": [ + { + "name": "Placeholder", + "snippet": "RatingControlPlaceholder.txt" + }, + { + "name": "Simple", + "snippet": "RatingControlSimple.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#RelativePanel", + "uniqueId": "RelativePanel", + "title": "RelativePanel", + "group": { + "id": "Layout", + "title": "Layout" + }, + "summary": "A panel that uses relationships between elements to define layout.", + "description": "Use a RelativePanel to layout elements by defining the relationships between elements and in relation to the panel.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Panel" + ], + "tags": [ + "relative layout", + "positioning" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Border", + "microsoft/WinUI-Gallery#Canvas", + "microsoft/WinUI-Gallery#Grid", + "microsoft/WinUI-Gallery#StackPanel", + "microsoft/WinUI-Gallery#Viewbox" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/RelativePanel", + "page": "WinUIGallery/Samples/RelativePanel/RelativePanelPage.xaml", + "codeBehind": "WinUIGallery/Samples/RelativePanel/RelativePanelPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/RelativePanel/RelativepanelControl.txt" + ] + }, + "scenarios": [ + { + "name": "Control", + "snippet": "RelativepanelControl.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#RepeatButton", + "uniqueId": "RepeatButton", + "title": "RepeatButton", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "A button that raises its Click event repeatedly from the time it\u0027s pressed until it\u0027s released.", + "description": "The RepeatButton control is like a standard Button, except that the Click event occurs continuously while the user presses the RepeatButton.", + "apiNamespace": "Microsoft.UI.Xaml.Controls.Primitives", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl", + "ButtonBase" + ], + "tags": [ + "hold button" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarButton", + "microsoft/WinUI-Gallery#Button", + "microsoft/WinUI-Gallery#HyperlinkButton", + "microsoft/WinUI-Gallery#ToggleButton" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/RepeatButton", + "page": "WinUIGallery/Samples/RepeatButton/RepeatButtonPage.xaml", + "codeBehind": "WinUIGallery/Samples/RepeatButton/RepeatButtonPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/RepeatButton/RepeatButtonSimple.txt" + ] + }, + "scenarios": [ + { + "name": "Simple", + "snippet": "RepeatButtonSimple.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#RichEditBox", + "uniqueId": "RichEditBox", + "title": "RichEditBox", + "group": { + "id": "Text", + "title": "Text" + }, + "summary": "A rich text editing control that supports formatted text, hyperlinks, and other rich content.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "rich text editor", + "RTF", + "formatted text", + "editor" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#NumberBox", + "microsoft/WinUI-Gallery#RichTextBlock", + "microsoft/WinUI-Gallery#TextBlock", + "microsoft/WinUI-Gallery#TextBox" + ], + "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" + } + ], + "badges": [ + "Updated" + ], + "source": { + "root": "WinUIGallery/Samples/RichEditBox", + "page": "WinUIGallery/Samples/RichEditBox/RichEditBoxPage.xaml", + "codeBehind": "WinUIGallery/Samples/RichEditBox/RichEditBoxPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/RichEditBox/CustomEditorRicheditbox.txt", + "WinUIGallery/Samples/RichEditBox/CustomizingRicheditboxCommandbarflyoutAdding.txt", + "WinUIGallery/Samples/RichEditBox/RichEditBoxMath.txt", + "WinUIGallery/Samples/RichEditBox/SimpleTextEditorRicheditbox.txt", + "WinUIGallery/Samples/RichEditBox/WorkingMathmlRicheditbox.txt" + ] + }, + "scenarios": [ + { + "name": "Custom Editor Richeditbox", + "snippet": "CustomEditorRicheditbox.txt" + }, + { + "name": "Customizing Richeditbox Commandbarflyout Adding", + "snippet": "CustomizingRicheditboxCommandbarflyoutAdding.txt" + }, + { + "name": "Math", + "snippet": "RichEditBoxMath.txt" + }, + { + "name": "Simple Text Editor Richeditbox", + "snippet": "SimpleTextEditorRicheditbox.txt" + }, + { + "name": "Working Mathml Richeditbox", + "snippet": "WorkingMathmlRicheditbox.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#RichTextBlock", + "uniqueId": "RichTextBlock", + "title": "RichTextBlock", + "group": { + "id": "Text", + "title": "Text" + }, + "summary": "A control that displays formatted text, hyperlinks, inline images, and other rich content.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement" + ], + "tags": [ + "rich text", + "formatted text", + "inline content" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#NumberBox", + "microsoft/WinUI-Gallery#PasswordBox", + "microsoft/WinUI-Gallery#RichEditBox", + "microsoft/WinUI-Gallery#TextBlock", + "microsoft/WinUI-Gallery#TextBox" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/RichTextBlock", + "page": "WinUIGallery/Samples/RichTextBlock/RichTextBlockPage.xaml", + "codeBehind": "WinUIGallery/Samples/RichTextBlock/RichTextBlockPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/RichTextBlock/RichtextblockCustomSelectionHighlight.txt", + "WinUIGallery/Samples/RichTextBlock/RichtextblockCustomTexthighlighting.txt", + "WinUIGallery/Samples/RichTextBlock/RichtextblockOverflow.txt", + "WinUIGallery/Samples/RichTextBlock/SimpleRichtextblock.txt" + ] + }, + "scenarios": [ + { + "name": "Custom Selection Highlight", + "snippet": "RichtextblockCustomSelectionHighlight.txt" + }, + { + "name": "Custom Texthighlighting", + "snippet": "RichtextblockCustomTexthighlighting.txt" + }, + { + "name": "Overflow", + "snippet": "RichtextblockOverflow.txt" + }, + { + "name": "Simple Richtextblock", + "snippet": "SimpleRichtextblock.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ScratchPad", + "uniqueId": "ScratchPad", + "title": "Scratch Pad", + "group": { + "id": "FundamentalsItem", + "title": "Fundamentals" + }, + "summary": "Scratch pad for testing simple XAML markup", + "description": "Provides an edit box where you can type in some markup and load it to see how it looks and behaves.", + "tags": [ + "playground", + "sandbox", + "test markup" + ], + "aliases": [ + "repl", + "live xaml preview" + ], + "docs": [ + { + "title": "XamlReader - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.markup.xamlreader" + } + ], + "source": { + "root": "WinUIGallery/Samples/ScratchPad", + "page": "WinUIGallery/Samples/ScratchPad/ScratchPadPage.xaml", + "codeBehind": "WinUIGallery/Samples/ScratchPad/ScratchPadPage.xaml.cs" + } + }, + { + "id": "microsoft/WinUI-Gallery#ScrollView", + "uniqueId": "ScrollView", + "title": "ScrollView", + "group": { + "id": "Scrolling", + "title": "Scrolling" + }, + "summary": "A container control that lets the user pan and zoom its content.", + "description": "A ScrollView lets a user scroll, pan, and zoom to see content that\u0027s larger than the viewable area. The ItemsView has a ScrollView built into its control template to provide automatic scrolling.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "pan", + "zoom", + "scrolling" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Canvas", + "microsoft/WinUI-Gallery#Grid", + "microsoft/WinUI-Gallery#ItemsView", + "microsoft/WinUI-Gallery#ParallaxView", + "microsoft/WinUI-Gallery#RelativePanel", + "microsoft/WinUI-Gallery#ScrollViewer", + "microsoft/WinUI-Gallery#StackPanel", + "microsoft/WinUI-Gallery#Viewbox" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ScrollView", + "page": "WinUIGallery/Samples/ScrollView/ScrollViewPage.xaml", + "codeBehind": "WinUIGallery/Samples/ScrollView/ScrollViewPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ScrollView/ContentInsideScrollview.txt", + "WinUIGallery/Samples/ScrollView/ScrollViewConstantVelocityScrolling.txt", + "WinUIGallery/Samples/ScrollView/ScrollViewProgrammaticScrollCustomAnimation.txt" + ] + }, + "scenarios": [ + { + "name": "Content Inside Scrollview", + "snippet": "ContentInsideScrollview.txt" + }, + { + "name": "Constant Velocity Scrolling", + "snippet": "ScrollViewConstantVelocityScrolling.txt" + }, + { + "name": "Programmatic Scroll Custom Animation", + "snippet": "ScrollViewProgrammaticScrollCustomAnimation.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ScrollViewer", + "uniqueId": "ScrollViewer", + "title": "ScrollViewer", + "group": { + "id": "Scrolling", + "title": "Scrolling" + }, + "summary": "A container control that lets the user pan and zoom its content.", + "description": "A ScrollViewer lets a user scroll, pan, and zoom to see content that\u0027s larger than the viewable area. Many content controls, like ListView, have ScrollViewers built into their control templates to provide automatic scrolling.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl" + ], + "tags": [ + "pan", + "zoom", + "scrolling" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Canvas", + "microsoft/WinUI-Gallery#Grid", + "microsoft/WinUI-Gallery#ParallaxView", + "microsoft/WinUI-Gallery#RelativePanel", + "microsoft/WinUI-Gallery#ScrollView", + "microsoft/WinUI-Gallery#StackPanel", + "microsoft/WinUI-Gallery#Viewbox" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ScrollViewer", + "page": "WinUIGallery/Samples/ScrollViewer/ScrollViewerPage.xaml", + "codeBehind": "WinUIGallery/Samples/ScrollViewer/ScrollViewerPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ScrollViewer/ContentInsideScrollviewer.txt" + ] + }, + "scenarios": [ + { + "name": "Content Inside Scrollviewer", + "snippet": "ContentInsideScrollviewer.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#SelectorBar", + "uniqueId": "SelectorBar", + "title": "SelectorBar", + "group": { + "id": "Navigation", + "title": "Navigation" + }, + "summary": "Presents information from a small set of different sources. The user can pick one of them.", + "description": "SelectorBar is used to modify the content shown by allowing users to select and switch between a small, finite set of data.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "segmented", + "tabs" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#NavigationView", + "microsoft/WinUI-Gallery#PipsPager", + "microsoft/WinUI-Gallery#Pivot" + ], + "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" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/SelectorBar", + "page": "WinUIGallery/Samples/SelectorBar/SelectorBarPage.xaml", + "codeBehind": "WinUIGallery/Samples/SelectorBar/SelectorBarPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/SelectorBar/BasicSelectorbar.txt", + "WinUIGallery/Samples/SelectorBar/SelectorbarDisplayingDifferentCollections.txt", + "WinUIGallery/Samples/SelectorBar/SelectorbarFrameSlideTransitions.txt" + ] + }, + "scenarios": [ + { + "name": "Basic Selectorbar", + "snippet": "BasicSelectorbar.txt" + }, + { + "name": "Displaying Different Collections", + "snippet": "SelectorbarDisplayingDifferentCollections.txt" + }, + { + "name": "Frame Slide Transitions", + "snippet": "SelectorbarFrameSlideTransitions.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#SemanticZoom", + "uniqueId": "SemanticZoom", + "title": "SemanticZoom", + "group": { + "id": "Scrolling", + "title": "Scrolling" + }, + "summary": "Lets the user zoom between two different views of a collection, making it easier to navigate through large collections of items.", + "description": "The SemanticZoom lets you show grouped data in two different ways, and is useful for quickly navigating through large sets of data.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "semantic zoom", + "grouped view" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#GridView", + "microsoft/WinUI-Gallery#ListView" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/SemanticZoom", + "page": "WinUIGallery/Samples/SemanticZoom/SemanticZoomPage.xaml", + "codeBehind": "WinUIGallery/Samples/SemanticZoom/SemanticZoomPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/SemanticZoom/SimpleSemanticzoom.txt" + ] + }, + "scenarios": [ + { + "name": "Simple Semanticzoom", + "snippet": "SimpleSemanticzoom.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Shape", + "uniqueId": "Shape", + "title": "Shape", + "group": { + "id": "Styles", + "title": "Styles" + }, + "summary": "How to draw shapes, such as ellipses, rectangles, and polygons.", + "description": "Basic shapes are intended for decorative rendering or for compositing non-interactive parts of controls.", + "apiNamespace": "Microsoft.UI.Xaml.Shapes", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement" + ], + "tags": [ + "shapes", + "ellipse", + "rectangle", + "polygon", + "path", + "circle" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Line" + ], + "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)" + } + ], + "source": { + "root": "WinUIGallery/Samples/Shape", + "page": "WinUIGallery/Samples/Shape/ShapePage.xaml", + "codeBehind": "WinUIGallery/Samples/Shape/ShapePage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Shape/ShapeEllipse.txt", + "WinUIGallery/Samples/Shape/ShapePolygon.txt", + "WinUIGallery/Samples/Shape/ShapeRectangle.txt" + ] + }, + "scenarios": [ + { + "name": "Ellipse", + "snippet": "ShapeEllipse.txt" + }, + { + "name": "Polygon", + "snippet": "ShapePolygon.txt" + }, + { + "name": "Rectangle", + "snippet": "ShapeRectangle.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Slider", + "uniqueId": "Slider", + "title": "Slider", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "A control that lets the user select from a range of values by moving a Thumb control along a track.", + "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).", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "RangeBase" + ], + "tags": [ + "range", + "track", + "Thumb" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ComboBox", + "microsoft/WinUI-Gallery#RatingControl" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/Slider", + "page": "WinUIGallery/Samples/Slider/SliderPage.xaml", + "codeBehind": "WinUIGallery/Samples/Slider/SliderPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Slider/SliderRange.txt", + "WinUIGallery/Samples/Slider/SliderSimple.txt", + "WinUIGallery/Samples/Slider/SliderTicks.txt", + "WinUIGallery/Samples/Slider/SliderVertical.txt" + ] + }, + "scenarios": [ + { + "name": "Range", + "snippet": "SliderRange.txt" + }, + { + "name": "Simple", + "snippet": "SliderSimple.txt" + }, + { + "name": "Ticks", + "snippet": "SliderTicks.txt" + }, + { + "name": "Vertical", + "snippet": "SliderVertical.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Sound", + "uniqueId": "Sound", + "title": "Sound", + "group": { + "id": "Media", + "title": "Media" + }, + "summary": "A code-behind only API that enables 2D and 3D UI sounds on all XAML controls.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml", + "tags": [ + "audio", + "UI sound", + "ElementSoundPlayer" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/Sound", + "page": "WinUIGallery/Samples/Sound/SoundPage.xaml", + "codeBehind": "WinUIGallery/Samples/Sound/SoundPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Sound/PlaySpecificSystemSound.txt", + "WinUIGallery/Samples/Sound/SoundTogglingSpatialAudio.txt", + "WinUIGallery/Samples/Sound/TogglingSound.txt" + ] + }, + "scenarios": [ + { + "name": "Play Specific System Sound", + "snippet": "PlaySpecificSystemSound.txt" + }, + { + "name": "Toggling Spatial Audio", + "snippet": "SoundTogglingSpatialAudio.txt" + }, + { + "name": "Toggling Sound", + "snippet": "TogglingSound.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Spacing", + "uniqueId": "Spacing", + "title": "Spacing", + "group": { + "id": "DesignItem", + "title": "Design" + }, + "summary": "Thoughtful spacing design enhances readability and flow.", + "tags": [ + "margin", + "padding", + "layout spacing" + ], + "docs": [ + { + "title": "Content design basics", + "uri": "https://learn.microsoft.com/windows/apps/design/basics/content-basics" + } + ], + "source": { + "root": "WinUIGallery/Samples/Spacing", + "page": "WinUIGallery/Samples/Spacing/SpacingPage.xaml", + "codeBehind": "WinUIGallery/Samples/Spacing/SpacingPage.xaml.cs" + } + }, + { + "id": "microsoft/WinUI-Gallery#SplitButton", + "uniqueId": "SplitButton", + "title": "SplitButton", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "A two-part button that displays a flyout when its secondary part is clicked.", + "description": "The SplitButton is a dropdown button, but with an addition execution hit target.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl" + ], + "tags": [ + "split", + "dropdown button" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarButton", + "microsoft/WinUI-Gallery#Button", + "microsoft/WinUI-Gallery#CommandBar", + "microsoft/WinUI-Gallery#DropDownButton", + "microsoft/WinUI-Gallery#ToggleSplitButton" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/SplitButton", + "page": "WinUIGallery/Samples/SplitButton/SplitButtonPage.xaml", + "codeBehind": "WinUIGallery/Samples/SplitButton/SplitButtonPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/SplitButton/SplitButtonColorPicker.txt", + "WinUIGallery/Samples/SplitButton/SplitButtonText.txt" + ] + }, + "scenarios": [ + { + "name": "Color Picker", + "snippet": "SplitButtonColorPicker.txt" + }, + { + "name": "Text", + "snippet": "SplitButtonText.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#SplitView", + "uniqueId": "SplitView", + "title": "SplitView", + "group": { + "id": "Layout", + "title": "Layout" + }, + "summary": "A container that has 2 content areas, with multiple display options for the pane.", + "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 hamburger navigation pattern, check out the NavigationView sample.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "pane", + "hamburger", + "navigation pane" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Grid", + "microsoft/WinUI-Gallery#GridView", + "microsoft/WinUI-Gallery#ListView", + "microsoft/WinUI-Gallery#RelativePanel", + "microsoft/WinUI-Gallery#StackPanel" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/SplitView", + "page": "WinUIGallery/Samples/SplitView/SplitViewPage.xaml", + "codeBehind": "WinUIGallery/Samples/SplitView/SplitViewPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/SplitView/BasicSplitview.txt" + ] + }, + "scenarios": [ + { + "name": "Basic Splitview", + "snippet": "BasicSplitview.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#StackPanel", + "uniqueId": "StackPanel", + "title": "StackPanel", + "group": { + "id": "Layout", + "title": "Layout" + }, + "summary": "A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.", + "description": "A StackPanel is used to arrange items in a line, either horizontally or vertically.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Panel" + ], + "tags": [ + "stack", + "vertical layout", + "horizontal layout" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Border", + "microsoft/WinUI-Gallery#Canvas", + "microsoft/WinUI-Gallery#Grid", + "microsoft/WinUI-Gallery#RelativePanel", + "microsoft/WinUI-Gallery#VariableSizedWrapGrid" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/StackPanel", + "page": "WinUIGallery/Samples/StackPanel/StackPanelPage.xaml", + "codeBehind": "WinUIGallery/Samples/StackPanel/StackPanelPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/StackPanel/StackpanelControl.txt" + ] + }, + "scenarios": [ + { + "name": "Control", + "snippet": "StackpanelControl.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#StandardUICommand", + "uniqueId": "StandardUICommand", + "title": "StandardUICommand", + "group": { + "id": "MenusAndToolbars", + "title": "Menus \u0026 toolbars" + }, + "summary": "A StandardUICommand is a built-in \u0027XamlUICommand\u0027 which represents a commonly used command, e.g. \u0027Save\u0027.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Input", + "baseClasses": [ + "Object", + "DependencyObject", + "XamlUICommand" + ], + "tags": [ + "standard command" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarButton", + "microsoft/WinUI-Gallery#AppBarToggleButton", + "microsoft/WinUI-Gallery#CommandBar", + "microsoft/WinUI-Gallery#XamlUICommand" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/StandardUICommand", + "page": "WinUIGallery/Samples/StandardUICommand/StandardUICommandPage.xaml", + "codeBehind": "WinUIGallery/Samples/StandardUICommand/StandardUICommandPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/StandardUICommand/StandardUICommandExposingCommandMultipleControls.txt" + ] + }, + "scenarios": [ + { + "name": "Exposing Command Multiple Controls", + "snippet": "StandardUICommandExposingCommandMultipleControls.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#StoragePickers", + "uniqueId": "StoragePickers", + "title": "Storage pickers", + "group": { + "id": "System", + "title": "System" + }, + "summary": "Select files and folders with modern system pickers.", + "description": "Use the FileOpenPicker, FileSavePicker, and FolderPicker APIs to let users select files and folders in a secure way.", + "apiNamespace": "Microsoft.Windows.Storage.Pickers", + "baseClasses": [ + "Object" + ], + "tags": [ + "file picker", + "FileOpenPicker", + "FileSavePicker", + "FolderPicker", + "file dialog" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Clipboard" + ], + "docs": [ + { + "title": "FileOpenPicker - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.windows.storage.pickers.fileopenpicker" + }, + { + "title": "FileSavePicker - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.windows.storage.pickers.filesavepicker" + }, + { + "title": "FolderPicker - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.windows.storage.pickers.folderpicker" + } + ], + "badges": [ + "Updated" + ], + "source": { + "root": "WinUIGallery/Samples/StoragePickers", + "page": "WinUIGallery/Samples/StoragePickers/StoragePickersPage.xaml", + "codeBehind": "WinUIGallery/Samples/StoragePickers/StoragePickersPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/StoragePickers/StoragePickersFileThumbnail.txt", + "WinUIGallery/Samples/StoragePickers/StoragePickersPickFolder.txt", + "WinUIGallery/Samples/StoragePickers/StoragePickersPickMultipleFiles.txt", + "WinUIGallery/Samples/StoragePickers/StoragePickersPickSingleFile.txt", + "WinUIGallery/Samples/StoragePickers/StoragePickersSaveFile.txt" + ] + }, + "scenarios": [ + { + "name": "File Thumbnail", + "snippet": "StoragePickersFileThumbnail.txt" + }, + { + "name": "Pick Folder", + "snippet": "StoragePickersPickFolder.txt" + }, + { + "name": "Pick Multiple Files", + "snippet": "StoragePickersPickMultipleFiles.txt" + }, + { + "name": "Pick Single File", + "snippet": "StoragePickersPickSingleFile.txt" + }, + { + "name": "Save File", + "snippet": "StoragePickersSaveFile.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#SwipeControl", + "uniqueId": "SwipeControl", + "title": "SwipeControl", + "group": { + "id": "MenusAndToolbars", + "title": "Menus \u0026 toolbars" + }, + "summary": "Touch gesture for quick menu actions on items.", + "description": "Touch gesture for quick menu actions on items.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl" + ], + "tags": [ + "SwipeItem", + "gesture" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#GridView", + "microsoft/WinUI-Gallery#ListView" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/SwipeControl", + "page": "WinUIGallery/Samples/SwipeControl/SwipeControlPage.xaml", + "codeBehind": "WinUIGallery/Samples/SwipeControl/SwipeControlPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/SwipeControl/SwipeControlCustomIcons.txt", + "WinUIGallery/Samples/SwipeControl/SwipeControlCustomSwipeListview.txt", + "WinUIGallery/Samples/SwipeControl/SwipeControlGradientBackground.txt", + "WinUIGallery/Samples/SwipeControl/SwipeControlSwipeLeftInvokeExecute.txt", + "WinUIGallery/Samples/SwipeControl/SwipeControlSwipeRightRevealActions.txt" + ] + }, + "scenarios": [ + { + "name": "Custom Icons", + "snippet": "SwipeControlCustomIcons.txt" + }, + { + "name": "Custom Swipe Listview", + "snippet": "SwipeControlCustomSwipeListview.txt" + }, + { + "name": "Gradient Background", + "snippet": "SwipeControlGradientBackground.txt" + }, + { + "name": "Swipe Left Invoke Execute", + "snippet": "SwipeControlSwipeLeftInvokeExecute.txt" + }, + { + "name": "Swipe Right Reveal Actions", + "snippet": "SwipeControlSwipeRightRevealActions.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#SystemBackdropElement", + "uniqueId": "SystemBackdropElement", + "title": "SystemBackdropElement", + "group": { + "id": "Styles", + "title": "Styles" + }, + "summary": "An element to host system backdrop materials.", + "description": "SystemBackdropElement applies system backdrop materials (Mica and Acrylic) to specific areas inside the UI tree, extending these materials beyond the window background to enable more flexible and immersive designs.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl" + ], + "tags": [ + "Mica", + "Acrylic", + "material" + ], + "docs": [ + { + "title": "SystemBackdropElement - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.systembackdropelement" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/SystemBackdropElement", + "page": "WinUIGallery/Samples/SystemBackdropElement/SystemBackdropElementPage.xaml", + "codeBehind": "WinUIGallery/Samples/SystemBackdropElement/SystemBackdropElementPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/SystemBackdropElement/SystembackdropelementSample.txt" + ] + }, + "scenarios": [ + { + "name": "Sample", + "snippet": "SystembackdropelementSample.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#SystemBackdrops", + "uniqueId": "SystemBackdrops", + "title": "System Backdrops (Mica/Acrylic)", + "group": { + "id": "Styles", + "title": "Styles" + }, + "summary": "System backdrops, like Mica and Acrylic, for app windows.", + "description": "System backdrops apply a material effect to the window background. Mica is opaque and samples the desktop wallpaper; Desktop Acrylic is semi-transparent and shows a blurred view of what is behind the window. Available backdrop kinds: Mica, Mica Alt, Desktop Acrylic Base, and Desktop Acrylic Thin. Use the built-in MicaBackdrop or DesktopAcrylicBackdrop types for simplicity, or use MicaController / DesktopAcrylicController for full customization.", + "apiNamespace": "Microsoft.UI.Composition.SystemBackdrops", + "baseClasses": [ + "Object", + "DependencyObject" + ], + "tags": [ + "Mica", + "Acrylic", + "window material" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Acrylic" + ], + "docs": [ + { + "title": "SystemBackdrop - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.systembackdrop" + }, + { + "title": "MicaBackdrop - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.micabackdrop" + }, + { + "title": "DesktopAcrylicBackdrop - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.desktopacrylicbackdrop" + }, + { + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/SystemBackdrops", + "page": "WinUIGallery/Samples/SystemBackdrops/SystemBackdropsPage.xaml", + "codeBehind": "WinUIGallery/Samples/SystemBackdrops/SystemBackdropsPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/SystemBackdrops/SystemBackdropsBackdropTypes.txt", + "WinUIGallery/Samples/SystemBackdrops/SystemBackdropsDesktopacryliccontroller.txt", + "WinUIGallery/Samples/SystemBackdrops/SystemBackdropsMicacontroller.txt" + ] + }, + "scenarios": [ + { + "name": "Backdrop Types", + "snippet": "SystemBackdropsBackdropTypes.txt" + }, + { + "name": "Desktopacryliccontroller", + "snippet": "SystemBackdropsDesktopacryliccontroller.txt" + }, + { + "name": "Micacontroller", + "snippet": "SystemBackdropsMicacontroller.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#TabView", + "uniqueId": "TabView", + "title": "TabView", + "group": { + "id": "Navigation", + "title": "Navigation" + }, + "summary": "A control that displays a collection of tabs that can be used to display several documents.", + "description": "TabView provides the user with a collection of tabs that can be used to display several documents.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "tabs", + "tabbed", + "tab control" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ListView", + "microsoft/WinUI-Gallery#NavigationView", + "microsoft/WinUI-Gallery#Pivot" + ], + "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" + } + ], + "badges": [ + "Updated" + ], + "source": { + "root": "WinUIGallery/Samples/TabView", + "page": "WinUIGallery/Samples/TabView/TabViewPage.xaml", + "codeBehind": "WinUIGallery/Samples/TabView/TabViewPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/TabView/CompleteTabviewWindowingSample.txt", + "WinUIGallery/Samples/TabView/TabViewCloseButtonBePersistent.txt", + "WinUIGallery/Samples/TabView/TabViewTabWidthsEitherBe.txt", + "WinUIGallery/Samples/TabView/TabViewYouPutCustomContent.txt", + "WinUIGallery/Samples/TabView/TabviewAccentColoredTabstrip.txt", + "WinUIGallery/Samples/TabView/TabviewBoundCollectionMydata.txt", + "WinUIGallery/Samples/TabView/TabviewColorTabIcons.txt", + "WinUIGallery/Samples/TabView/TabviewKeyboardingSupport.txt", + "WinUIGallery/Samples/TabView/TabviewSupportAddingClosing.txt", + "WinUIGallery/Samples/TabView/TabviewTabviewitemsDefinedMarkup.txt" + ] + }, + "scenarios": [ + { + "name": "Complete Tabview Windowing Sample", + "snippet": "CompleteTabviewWindowingSample.txt" + }, + { + "name": "Close Button Be Persistent", + "snippet": "TabViewCloseButtonBePersistent.txt" + }, + { + "name": "Tab Widths Either Be", + "snippet": "TabViewTabWidthsEitherBe.txt" + }, + { + "name": "You Put Custom Content", + "snippet": "TabViewYouPutCustomContent.txt" + }, + { + "name": "Accent Colored Tabstrip", + "snippet": "TabviewAccentColoredTabstrip.txt" + }, + { + "name": "Bound Collection Mydata", + "snippet": "TabviewBoundCollectionMydata.txt" + }, + { + "name": "Color Tab Icons", + "snippet": "TabviewColorTabIcons.txt" + }, + { + "name": "Keyboarding Support", + "snippet": "TabviewKeyboardingSupport.txt" + }, + { + "name": "Support Adding Closing", + "snippet": "TabviewSupportAddingClosing.txt" + }, + { + "name": "Tabviewitems Defined Markup", + "snippet": "TabviewTabviewitemsDefinedMarkup.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#TeachingTip", + "uniqueId": "TeachingTip", + "title": "TeachingTip", + "group": { + "id": "DialogsAndFlyouts", + "title": "Dialogs \u0026 flyouts" + }, + "summary": "A content-rich flyout for guiding users and enabling teaching moments.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl" + ], + "tags": [ + "callout", + "coachmark" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ContentDialog", + "microsoft/WinUI-Gallery#Flyout", + "microsoft/WinUI-Gallery#ToolTip" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/TeachingTip", + "page": "WinUIGallery/Samples/TeachingTip/TeachingTipPage.xaml", + "codeBehind": "WinUIGallery/Samples/TeachingTip/TeachingTipPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/TeachingTip/ShowNonTargetedTeachingtip.txt", + "WinUIGallery/Samples/TeachingTip/ShowTargetedTeachingtipButton.txt", + "WinUIGallery/Samples/TeachingTip/ShowTargetedTeachingtipHero.txt" + ] + }, + "scenarios": [ + { + "name": "Show Non Targeted Teachingtip", + "snippet": "ShowNonTargetedTeachingtip.txt" + }, + { + "name": "Show Targeted Teachingtip Button", + "snippet": "ShowTargetedTeachingtipButton.txt" + }, + { + "name": "Show Targeted Teachingtip Hero", + "snippet": "ShowTargetedTeachingtipHero.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Templates", + "uniqueId": "Templates", + "title": "Templates", + "group": { + "id": "FundamentalsItem", + "title": "Fundamentals" + }, + "summary": "Customize controls\u0027 visuals, item layouts, and data presentation in XAML.", + "description": "A template defines the structure and appearance of a control. Unlike styles, which set properties, templates allow you to completely customize how a control looks by redefining its visual tree (the XAML elements that make up the control). Templates provide the flexibility to change the look of controls while maintaining their functionality.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "FrameworkTemplate" + ], + "tags": [ + "ControlTemplate", + "DataTemplate", + "ItemTemplate", + "DataTemplateSelector" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Binding", + "microsoft/WinUI-Gallery#CustomUserControls", + "microsoft/WinUI-Gallery#XamlStyles" + ], + "docs": [ + { + "title": "XAML Control Templates", + "uri": "https://learn.microsoft.com/windows/apps/design/style/xaml-control-templates" + }, + { + "title": "ControlTemplate - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.controltemplate" + }, + { + "title": "DataTemplate - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.datatemplate" + }, + { + "title": "ItemsPanelTemplate - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.itemspaneltemplate" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/Templates", + "page": "WinUIGallery/Samples/Templates/TemplatesPage.xaml", + "codeBehind": "WinUIGallery/Samples/Templates/TemplatesPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Templates/TemplatesCustomizeComboboxItemtemplateDatatemplate.txt", + "WinUIGallery/Samples/Templates/TemplatesCustomizeItemscontrolItemspaneltemplate.txt", + "WinUIGallery/Samples/Templates/TemplatesCustomizeLookTextboxControltemplate.txt" + ] + }, + "scenarios": [ + { + "name": "Customize Combobox Itemtemplate Datatemplate", + "snippet": "TemplatesCustomizeComboboxItemtemplateDatatemplate.txt" + }, + { + "name": "Customize Itemscontrol Itemspaneltemplate", + "snippet": "TemplatesCustomizeItemscontrolItemspaneltemplate.txt" + }, + { + "name": "Customize Look Textbox Controltemplate", + "snippet": "TemplatesCustomizeLookTextboxControltemplate.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#TextBlock", + "uniqueId": "TextBlock", + "title": "TextBlock", + "group": { + "id": "Text", + "title": "Text" + }, + "summary": "A lightweight control for displaying small amounts of text.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement" + ], + "tags": [ + "label", + "display text" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#NumberBox", + "microsoft/WinUI-Gallery#PasswordBox", + "microsoft/WinUI-Gallery#RichEditBox", + "microsoft/WinUI-Gallery#RichTextBlock", + "microsoft/WinUI-Gallery#TextBox" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/TextBlock", + "page": "WinUIGallery/Samples/TextBlock/TextBlockPage.xaml", + "codeBehind": "WinUIGallery/Samples/TextBlock/TextBlockPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/TextBlock/SelectableTextblock.txt", + "WinUIGallery/Samples/TextBlock/SimpleTextblock.txt", + "WinUIGallery/Samples/TextBlock/TextblockInlineTextElements.txt", + "WinUIGallery/Samples/TextBlock/TextblockStyleApplied.txt", + "WinUIGallery/Samples/TextBlock/TextblockVariousProperties.txt" + ] + }, + "scenarios": [ + { + "name": "Selectable Textblock", + "snippet": "SelectableTextblock.txt" + }, + { + "name": "Simple Textblock", + "snippet": "SimpleTextblock.txt" + }, + { + "name": "Inline Text Elements", + "snippet": "TextblockInlineTextElements.txt" + }, + { + "name": "Style Applied", + "snippet": "TextblockStyleApplied.txt" + }, + { + "name": "Various Properties", + "snippet": "TextblockVariousProperties.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#TextBox", + "uniqueId": "TextBox", + "title": "TextBox", + "group": { + "id": "Text", + "title": "Text" + }, + "summary": "A single-line or multi-line plain text field.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "text input", + "input field", + "text field" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AutoSuggestBox", + "microsoft/WinUI-Gallery#NumberBox", + "microsoft/WinUI-Gallery#PasswordBox", + "microsoft/WinUI-Gallery#RichEditBox", + "microsoft/WinUI-Gallery#RichTextBlock", + "microsoft/WinUI-Gallery#TextBlock" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/TextBox", + "page": "WinUIGallery/Samples/TextBox/TextBoxPage.xaml", + "codeBehind": "WinUIGallery/Samples/TextBox/TextBoxPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/TextBox/MultiLineTextboxSpell.txt", + "WinUIGallery/Samples/TextBox/ReadOnlyTextboxVarious.txt", + "WinUIGallery/Samples/TextBox/SimpleTextbox.txt", + "WinUIGallery/Samples/TextBox/TextboxHeaderPlaceholderText.txt" + ] + }, + "scenarios": [ + { + "name": "Multi Line Textbox Spell", + "snippet": "MultiLineTextboxSpell.txt" + }, + { + "name": "Read Only Textbox Various", + "snippet": "ReadOnlyTextboxVarious.txt" + }, + { + "name": "Simple Textbox", + "snippet": "SimpleTextbox.txt" + }, + { + "name": "Header Placeholder Text", + "snippet": "TextboxHeaderPlaceholderText.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ThemeShadow", + "uniqueId": "ThemeShadow", + "title": "ThemeShadow", + "group": { + "id": "Styles", + "title": "Styles" + }, + "summary": "Adds a depth-aware shadow to UI elements using system lighting.", + "description": "Adds a realistic shadow effect to UI elements using the system\u0027s lighting and depth to enhance visual hierarchy.", + "apiNamespace": "Microsoft.UI.Xaml.Media", + "baseClasses": [ + "Object", + "DependencyObject", + "Shadow" + ], + "tags": [ + "depth", + "elevation" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Acrylic" + ], + "docs": [ + { + "title": "Z-depth and shadow design guidelines", + "uri": "https://learn.microsoft.com/windows/apps/design/layout/depth-shadow" + }, + { + "title": "ThemeShadow - API", + "uri": "https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.themeshadow" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/ThemeShadow", + "page": "WinUIGallery/Samples/ThemeShadow/ThemeShadowPage.xaml", + "codeBehind": "WinUIGallery/Samples/ThemeShadow/ThemeShadowPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ThemeShadow/ThemeshadowAppliedBorder.txt" + ] + }, + "scenarios": [ + { + "name": "Applied Border", + "snippet": "ThemeshadowAppliedBorder.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ThemeTransition", + "uniqueId": "ThemeTransition", + "title": "Theme Transitions", + "group": { + "id": "Motion", + "title": "Motion" + }, + "summary": "Theme transitions are pre-packaged, easy-to-apply animations.", + "description": "Theme transitions are pre-packaged, easy-to-apply animations.", + "apiNamespace": "Microsoft.UI.Xaml", + "tags": [ + "theme transition", + "entrance animation", + "EntranceThemeTransition" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ImplicitTransition", + "microsoft/WinUI-Gallery#PageTransition" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ThemeTransition", + "page": "WinUIGallery/Samples/ThemeTransition/ThemeTransitionPage.xaml", + "codeBehind": "WinUIGallery/Samples/ThemeTransition/ThemeTransitionPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ThemeTransition/AdddeletethemetransitionAnimateAddingRemoving.txt", + "WinUIGallery/Samples/ThemeTransition/ContentthemetransitionAnimateContentRefreshes.txt", + "WinUIGallery/Samples/ThemeTransition/EntrancethemetransitionAddingItemsYour.txt", + "WinUIGallery/Samples/ThemeTransition/PopupthemetransitionAnimateOpeningClosing.txt", + "WinUIGallery/Samples/ThemeTransition/RepositionthemetransitionReactLayoutChanges.txt" + ] + }, + "scenarios": [ + { + "name": "Adddeletethemetransition Animate Adding Removing", + "snippet": "AdddeletethemetransitionAnimateAddingRemoving.txt" + }, + { + "name": "Contentthemetransition Animate Content Refreshes", + "snippet": "ContentthemetransitionAnimateContentRefreshes.txt" + }, + { + "name": "Entrancethemetransition Adding Items Your", + "snippet": "EntrancethemetransitionAddingItemsYour.txt" + }, + { + "name": "Popupthemetransition Animate Opening Closing", + "snippet": "PopupthemetransitionAnimateOpeningClosing.txt" + }, + { + "name": "Repositionthemetransition React Layout Changes", + "snippet": "RepositionthemetransitionReactLayoutChanges.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#TimePicker", + "uniqueId": "TimePicker", + "title": "TimePicker", + "group": { + "id": "DateAndTime", + "title": "Date \u0026 time" + }, + "summary": "A configurable control that lets a user pick a time value.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "clock", + "time selection" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#CalendarView", + "microsoft/WinUI-Gallery#DatePicker" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/TimePicker", + "page": "WinUIGallery/Samples/TimePicker/TimePickerPage.xaml", + "codeBehind": "WinUIGallery/Samples/TimePicker/TimePickerPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/TimePicker/SimpleTimepicker.txt", + "WinUIGallery/Samples/TimePicker/TimepickerClockIdentifiers.txt", + "WinUIGallery/Samples/TimePicker/TimepickerHeaderMinuteIncrements.txt" + ] + }, + "scenarios": [ + { + "name": "Simple Timepicker", + "snippet": "SimpleTimepicker.txt" + }, + { + "name": "Clock Identifiers", + "snippet": "TimepickerClockIdentifiers.txt" + }, + { + "name": "Header Minute Increments", + "snippet": "TimepickerHeaderMinuteIncrements.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#TitleBar", + "uniqueId": "TitleBar", + "title": "TitleBar", + "group": { + "id": "MultipleWindows", + "title": "Windowing" + }, + "summary": "An example showing how to use the default TitleBar control.", + "description": "The TitleBar control provides a simple way to create a modern titlebar UX with interactive content.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "title bar", + "caption bar", + "custom title bar" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppWindow", + "microsoft/WinUI-Gallery#AppWindowTitleBar" + ], + "docs": [ + { + "title": "Title bar customization", + "uri": "https://learn.microsoft.com/windows/apps/develop/title-bar" + }, + { + "title": "Title bar - design guidelines", + "uri": "https://learn.microsoft.com/windows/apps/design/basics/titlebar-design" + } + ], + "badges": [ + "Updated" + ], + "source": { + "root": "WinUIGallery/Samples/TitleBar", + "page": "WinUIGallery/Samples/TitleBar/TitleBarPage.xaml", + "codeBehind": "WinUIGallery/Samples/TitleBar/TitleBarPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/TitleBar/EndEndTitlebarSample.txt", + "WinUIGallery/Samples/TitleBar/TitlebarConfiguration.txt", + "WinUIGallery/Samples/TitleBar/TitlebarDragRegions.txt" + ] + }, + "scenarios": [ + { + "name": "End End Titlebar Sample", + "snippet": "EndEndTitlebarSample.txt" + }, + { + "name": "Configuration", + "snippet": "TitlebarConfiguration.txt" + }, + { + "name": "Drag Regions", + "snippet": "TitlebarDragRegions.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ToggleButton", + "uniqueId": "ToggleButton", + "title": "ToggleButton", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "A button that can be switched between two states like a CheckBox.", + "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\u0027s state by checking the IsChecked property.", + "apiNamespace": "Microsoft.UI.Xaml.Controls.Primitives", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl", + "ButtonBase" + ], + "tags": [ + "on off" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarToggleButton", + "microsoft/WinUI-Gallery#Button", + "microsoft/WinUI-Gallery#CheckBox", + "microsoft/WinUI-Gallery#CommandBar", + "microsoft/WinUI-Gallery#CommandBarFlyout", + "microsoft/WinUI-Gallery#ToggleSwitch" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ToggleButton", + "page": "WinUIGallery/Samples/ToggleButton/ToggleButtonPage.xaml", + "codeBehind": "WinUIGallery/Samples/ToggleButton/ToggleButtonPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ToggleButton/ToggleButtonSimple.txt" + ] + }, + "scenarios": [ + { + "name": "Simple", + "snippet": "ToggleButtonSimple.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ToggleSplitButton", + "uniqueId": "ToggleSplitButton", + "title": "ToggleSplitButton", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "A version of the SplitButton where the activation target toggles on/off.", + "description": "A version of the SplitButton where the activation target toggles on/off.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl", + "SplitButton" + ], + "tags": [ + "toggle split", + "dropdown toggle" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Button", + "microsoft/WinUI-Gallery#CheckBox", + "microsoft/WinUI-Gallery#DropDownButton", + "microsoft/WinUI-Gallery#SplitButton", + "microsoft/WinUI-Gallery#ToggleButton", + "microsoft/WinUI-Gallery#ToggleSwitch" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ToggleSplitButton", + "page": "WinUIGallery/Samples/ToggleSplitButton/ToggleSplitButtonPage.xaml", + "codeBehind": "WinUIGallery/Samples/ToggleSplitButton/ToggleSplitButtonPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ToggleSplitButton/ToggleSplitButtonBulletList.txt" + ] + }, + "scenarios": [ + { + "name": "Bullet List", + "snippet": "ToggleSplitButtonBulletList.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ToggleSwitch", + "uniqueId": "ToggleSwitch", + "title": "ToggleSwitch", + "group": { + "id": "BasicInput", + "title": "Basic input" + }, + "summary": "A switch that can be toggled between 2 states.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "on off" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarToggleButton", + "microsoft/WinUI-Gallery#CheckBox", + "microsoft/WinUI-Gallery#RadioButton", + "microsoft/WinUI-Gallery#ToggleButton" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ToggleSwitch", + "page": "WinUIGallery/Samples/ToggleSwitch/ToggleSwitchPage.xaml", + "codeBehind": "WinUIGallery/Samples/ToggleSwitch/ToggleSwitchPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ToggleSwitch/ToggleSwitchCustom.txt", + "WinUIGallery/Samples/ToggleSwitch/ToggleSwitchSimple.txt" + ] + }, + "scenarios": [ + { + "name": "Custom", + "snippet": "ToggleSwitchCustom.txt" + }, + { + "name": "Simple", + "snippet": "ToggleSwitchSimple.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#ToolTip", + "uniqueId": "ToolTip", + "title": "ToolTip", + "group": { + "id": "StatusAndInfo", + "title": "Status \u0026 info" + }, + "summary": "Displays information for an element in a pop-up window.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control", + "ContentControl" + ], + "tags": [ + "hint", + "hover text" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ContentDialog", + "microsoft/WinUI-Gallery#Flyout", + "microsoft/WinUI-Gallery#TeachingTip" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/ToolTip", + "page": "WinUIGallery/Samples/ToolTip/ToolTipPage.xaml", + "codeBehind": "WinUIGallery/Samples/ToolTip/ToolTipPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/ToolTip/ButtonSimpleTooltip.txt", + "WinUIGallery/Samples/ToolTip/ImageTooltipPlacementrect.txt", + "WinUIGallery/Samples/ToolTip/TextblockOffsetTooltip.txt" + ] + }, + "scenarios": [ + { + "name": "Button Simple Tooltip", + "snippet": "ButtonSimpleTooltip.txt" + }, + { + "name": "Image Tooltip Placementrect", + "snippet": "ImageTooltipPlacementrect.txt" + }, + { + "name": "Textblock Offset Tooltip", + "snippet": "TextblockOffsetTooltip.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#TreeView", + "uniqueId": "TreeView", + "title": "TreeView", + "group": { + "id": "Collections", + "title": "Collections" + }, + "summary": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items.", + "description": "The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items. ", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Control" + ], + "tags": [ + "tree", + "hierarchy", + "nodes", + "expandable list" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#ItemsRepeater", + "microsoft/WinUI-Gallery#ListView" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/TreeView", + "page": "WinUIGallery/Samples/TreeView/TreeViewPage.xaml", + "codeBehind": "WinUIGallery/Samples/TreeView/TreeViewPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/TreeView/SimpleTreeviewDragDrop.txt", + "WinUIGallery/Samples/TreeView/TreeviewDatabindingItemsource.txt", + "WinUIGallery/Samples/TreeView/TreeviewItemtemplateselector.txt", + "WinUIGallery/Samples/TreeView/TreeviewMultiSelectionEnabled.txt" + ] + }, + "scenarios": [ + { + "name": "Simple Treeview Drag Drop", + "snippet": "SimpleTreeviewDragDrop.txt" + }, + { + "name": "Databinding Itemsource", + "snippet": "TreeviewDatabindingItemsource.txt" + }, + { + "name": "Itemtemplateselector", + "snippet": "TreeviewItemtemplateselector.txt" + }, + { + "name": "Multi Selection Enabled", + "snippet": "TreeviewMultiSelectionEnabled.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Typography", + "uniqueId": "Typography", + "title": "Typography", + "group": { + "id": "DesignItem", + "title": "Design" + }, + "summary": "Typography design guides attention with intuitive fonts and hierarchy.", + "tags": [ + "font", + "text style", + "TitleTextBlockStyle", + "BodyTextBlockStyle", + "font size" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/Typography", + "page": "WinUIGallery/Samples/Typography/TypographyPage.xaml", + "codeBehind": "WinUIGallery/Samples/Typography/TypographyPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Typography/TypographyTypeRamp.txt" + ] + }, + "scenarios": [ + { + "name": "Type Ramp", + "snippet": "TypographyTypeRamp.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#VariableSizedWrapGrid", + "uniqueId": "VariableSizedWrapGrid", + "title": "VariableSizedWrapGrid", + "group": { + "id": "Layout", + "title": "Layout" + }, + "summary": "A layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns.", + "description": "A VariableSizedWrapGrip is used to create grid layouts where content can span multiple rows and columns.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement", + "Panel" + ], + "tags": [ + "wrap grid", + "tiles", + "spanning" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Border", + "microsoft/WinUI-Gallery#Canvas", + "microsoft/WinUI-Gallery#Grid", + "microsoft/WinUI-Gallery#RelativePanel", + "microsoft/WinUI-Gallery#StackPanel" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/VariableSizedWrapGrid", + "page": "WinUIGallery/Samples/VariableSizedWrapGrid/VariableSizedWrapGridPage.xaml", + "codeBehind": "WinUIGallery/Samples/VariableSizedWrapGrid/VariableSizedWrapGridPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/VariableSizedWrapGrid/VariablesizedwrapgridControl.txt" + ] + }, + "scenarios": [ + { + "name": "Control", + "snippet": "VariablesizedwrapgridControl.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#Viewbox", + "uniqueId": "Viewbox", + "title": "Viewbox", + "group": { + "id": "Layout", + "title": "Layout" + }, + "summary": "A container control that scales its content to a specified size.", + "description": "Use a Viewbox control scale content up or down to a specified size.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement" + ], + "tags": [ + "scale", + "stretch", + "zoom content" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Canvas", + "microsoft/WinUI-Gallery#Grid", + "microsoft/WinUI-Gallery#RelativePanel", + "microsoft/WinUI-Gallery#ScrollViewer", + "microsoft/WinUI-Gallery#StackPanel" + ], + "docs": [ + { + "title": "Viewbox - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.Viewbox" + } + ], + "source": { + "root": "WinUIGallery/Samples/Viewbox", + "page": "WinUIGallery/Samples/Viewbox/ViewboxPage.xaml", + "codeBehind": "WinUIGallery/Samples/Viewbox/ViewboxPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/Viewbox/ContentInsideViewbox.txt" + ] + }, + "scenarios": [ + { + "name": "Content Inside Viewbox", + "snippet": "ContentInsideViewbox.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#WebView2", + "uniqueId": "WebView2", + "title": "WebView2", + "group": { + "id": "Media", + "title": "Media" + }, + "summary": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", + "description": "A Microsoft Edge (Chromium) based control that hosts HTML content in an app.", + "apiNamespace": "Microsoft.UI.Xaml.Controls", + "baseClasses": [ + "Object", + "DependencyObject", + "UIElement", + "FrameworkElement" + ], + "tags": [ + "browser", + "HTML", + "Edge", + "web content" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/WebView2", + "page": "WinUIGallery/Samples/WebView2/WebView2Page.xaml", + "codeBehind": "WinUIGallery/Samples/WebView2/WebView2Page.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/WebView2/SimpleWebview2.txt" + ] + }, + "scenarios": [ + { + "name": "Simple Webview2", + "snippet": "SimpleWebview2.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#XamlCompInterop", + "uniqueId": "XamlCompInterop", + "title": "Animation interop", + "group": { + "id": "Motion", + "title": "Motion" + }, + "summary": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more.", + "description": "XAML and Composition interop allows you to animate elements using expressions, natural animations, and more", + "tags": [ + "composition", + "Visual layer", + "expression animation", + "interop" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#EasingFunction" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/XamlCompInterop", + "page": "WinUIGallery/Samples/XamlCompInterop/XamlCompInteropPage.xaml", + "codeBehind": "WinUIGallery/Samples/XamlCompInterop/XamlCompInteropPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/XamlCompInterop/XamlCompInteropDrivingSeveralRelatedAnimations.txt", + "WinUIGallery/Samples/XamlCompInterop/XamlCompInteropExpressionanimationEllipseElement.txt", + "WinUIGallery/Samples/XamlCompInterop/XamlCompInteropNaturalMotionCompositionAnimation.txt", + "WinUIGallery/Samples/XamlCompInterop/XamlCompInteropReferenceActualoffsetActualsizeExpressionanimations.txt", + "WinUIGallery/Samples/XamlCompInterop/XamlCompInteropReferenceActualsizeExpressionanimationsMake.txt" + ] + }, + "scenarios": [ + { + "name": "Driving Several Related Animations", + "snippet": "XamlCompInteropDrivingSeveralRelatedAnimations.txt" + }, + { + "name": "Expressionanimation Ellipse Element", + "snippet": "XamlCompInteropExpressionanimationEllipseElement.txt" + }, + { + "name": "Natural Motion Composition Animation", + "snippet": "XamlCompInteropNaturalMotionCompositionAnimation.txt" + }, + { + "name": "Reference Actualoffset Actualsize Expressionanimations", + "snippet": "XamlCompInteropReferenceActualoffsetActualsizeExpressionanimations.txt" + }, + { + "name": "Reference Actualsize Expressionanimations Make", + "snippet": "XamlCompInteropReferenceActualsizeExpressionanimationsMake.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#XamlResources", + "uniqueId": "XamlResources", + "title": "Resources", + "group": { + "id": "FundamentalsItem", + "title": "Fundamentals" + }, + "summary": "Reusable definitions for shared values to ensure consistency and maintainability.", + "description": "In WinUI 3, XAML resources are reusable objects like colors, brushes, or strings, defined once and used throughout your app to maintain consistency and simplify updates. These resources are typically stored in a ResourceDictionary for better organization and scalability. Special theme resources adapt automatically to light or dark modes, ensuring a seamless look across themes.", + "tags": [ + "ResourceDictionary", + "StaticResource", + "ThemeResource", + "Resources", + "lightweight styling" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Binding", + "microsoft/WinUI-Gallery#Templates", + "microsoft/WinUI-Gallery#XamlStyles" + ], + "docs": [ + { + "title": "ResourceDictionary and XAML resource references", + "uri": "https://learn.microsoft.com/windows/apps/design/style/xaml-resource-dictionary" + }, + { + "title": "ResourceDictionary - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.resourcedictionary" + }, + { + "title": "XAML theme resources", + "uri": "https://learn.microsoft.com/windows/apps/design/style/xaml-theme-resources" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/XamlResources", + "page": "WinUIGallery/Samples/XamlResources/XamlResourcesPage.xaml", + "codeBehind": "WinUIGallery/Samples/XamlResources/XamlResourcesPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/XamlResources/XamlResourcesDefineNewThemeResource.txt", + "WinUIGallery/Samples/XamlResources/XamlResourcesStaticresourceVersusThemeresource.txt", + "WinUIGallery/Samples/XamlResources/Xamlresources.txt" + ] + }, + "scenarios": [ + { + "name": "Define New Theme Resource", + "snippet": "XamlResourcesDefineNewThemeResource.txt" + }, + { + "name": "Staticresource Versus Themeresource", + "snippet": "XamlResourcesStaticresourceVersusThemeresource.txt" + }, + { + "name": "XamlResources", + "snippet": "Xamlresources.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#XamlStyles", + "uniqueId": "XamlStyles", + "title": "Style", + "group": { + "id": "FundamentalsItem", + "title": "Fundamentals" + }, + "summary": "A XAML style is a Reusable property settings to define consistent UI design elements.", + "description": "XAML Styles in WinUI 3 are reusable sets of property values that you can apply to multiple controls. They help maintain a consistent look and feel across your app. Instead of setting the same properties on every control, you define a style once and then reuse it wherever needed.", + "apiNamespace": "Microsoft.UI.Xaml", + "baseClasses": [ + "Object", + "DependencyObject" + ], + "tags": [ + "Setter", + "BasedOn", + "implicit style", + "default style" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#Binding", + "microsoft/WinUI-Gallery#Templates", + "microsoft/WinUI-Gallery#XamlResources" + ], + "docs": [ + { + "title": "Style - API", + "uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.style" + }, + { + "title": "XAML styles", + "uri": "https://learn.microsoft.com/windows/apps/design/style/xaml-styles" + } + ], + "badges": [ + "New" + ], + "source": { + "root": "WinUIGallery/Samples/XamlStyles", + "page": "WinUIGallery/Samples/XamlStyles/XamlStylesPage.xaml", + "codeBehind": "WinUIGallery/Samples/XamlStyles/XamlStylesPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/XamlStyles/XamlStylesCreatingApplyingStyle.txt", + "WinUIGallery/Samples/XamlStyles/XamlStylesStyleWithoutKeyImplicit.txt" + ] + }, + "scenarios": [ + { + "name": "Creating Applying Style", + "snippet": "XamlStylesCreatingApplyingStyle.txt" + }, + { + "name": "Style Without Key Implicit", + "snippet": "XamlStylesStyleWithoutKeyImplicit.txt" + } + ] + }, + { + "id": "microsoft/WinUI-Gallery#XamlUICommand", + "uniqueId": "XamlUICommand", + "title": "XamlUICommand", + "group": { + "id": "MenusAndToolbars", + "title": "Menus \u0026 toolbars" + }, + "summary": "An object which is used to define the look and feel of a given command.", + "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.", + "apiNamespace": "Microsoft.UI.Xaml.Input", + "baseClasses": [ + "Object", + "DependencyObject" + ], + "relatedSamples": [ + "microsoft/WinUI-Gallery#AppBarButton", + "microsoft/WinUI-Gallery#AppBarToggleButton", + "microsoft/WinUI-Gallery#CommandBar", + "microsoft/WinUI-Gallery#StandardUICommand" + ], + "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" + } + ], + "source": { + "root": "WinUIGallery/Samples/XamlUICommand", + "page": "WinUIGallery/Samples/XamlUICommand/XamlUICommandPage.xaml", + "codeBehind": "WinUIGallery/Samples/XamlUICommand/XamlUICommandPage.xaml.cs", + "snippets": [ + "WinUIGallery/Samples/XamlUICommand/CreatingReusableCommandXamluicommand.txt" + ] + }, + "scenarios": [ + { + "name": "Creating Reusable Command Xamluicommand", + "snippet": "CreatingReusableCommandXamluicommand.txt" + } + ] + } + ] +} diff --git a/catalog/windows-samples.schema.json b/catalog/windows-samples.schema.json new file mode 100644 index 000000000..8352b04dc --- /dev/null +++ b/catalog/windows-samples.schema.json @@ -0,0 +1,168 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://raw.githubusercontent.com/microsoft/WinUI-Gallery/main/catalog/windows-samples.schema.json", + "title": "WinUI Gallery catalog manifest", + "description": "Machine-readable inventory of the embedded samples in this repository, generated by tools/CatalogExporter from WinUIGallery/SampleSupport/Data/ControlInfoData.json and the WinUIGallery/Samples// folders. Intended to be imported into a federated windows-samples catalog (catalog/samples.json). See catalog/README.md for the full contract and regeneration instructions.", + "type": "object", + "required": [ "schemaVersion", "repository", "defaults", "sampleCount", "samples" ], + "additionalProperties": false, + "properties": { + "$schema": { + "type": "string", + "description": "Relative path back to this schema file." + }, + "schemaVersion": { + "type": "string", + "description": "Semantic version of this manifest's contract, bumped whenever a breaking change is made to the shape below." + }, + "generator": { + "type": "object", + "additionalProperties": false, + "properties": { + "tool": { "type": "string" }, + "command": { + "type": "string", + "description": "Command used to regenerate this file." + } + } + }, + "repository": { + "type": "object", + "description": "Provenance of every sample in this file. Deliberately does not pin a commit SHA - this manifest describes the current state of the default branch and is regenerated whenever samples change.", + "required": [ "id", "owner", "name", "url", "defaultBranch", "license" ], + "additionalProperties": false, + "properties": { + "id": { "type": "string", "description": "'{owner}/{name}'." }, + "owner": { "type": "string" }, + "name": { "type": "string" }, + "url": { "type": "string", "format": "uri" }, + "defaultBranch": { "type": "string" }, + "license": { "type": "string" } + } + }, + "defaults": { + "type": "object", + "description": "Facts shared by every sample in this repository so they are not repeated on each entry (all samples in this repository are embedded C# WinUI 3 / Windows App SDK gallery pages under the MIT license).", + "required": [ "language", "framework", "platform", "license", "kind" ], + "additionalProperties": false, + "properties": { + "language": { "type": "string" }, + "framework": { "type": "string" }, + "platform": { "type": "string" }, + "license": { "type": "string" }, + "kind": { + "type": "string", + "description": "Sample kind shared by every entry: an embedded page inside the single WinUI Gallery app, not a standalone project." + } + } + }, + "sampleCount": { + "type": "integer", + "minimum": 0, + "description": "Number of entries in 'samples'. Kept alongside the array for cheap consumer-side sanity checks." + }, + "samples": { + "type": "array", + "items": { "$ref": "#/definitions/sample" } + } + }, + "definitions": { + "sample": { + "type": "object", + "required": [ "id", "uniqueId", "title", "group", "source" ], + "additionalProperties": false, + "properties": { + "id": { + "type": "string", + "pattern": "^[^#]+/[^#]+#[^#]+$", + "description": "Source-qualified, collision-safe id: '{owner}/{repo}#{uniqueId}'. Stable across regenerations as long as uniqueId does not change." + }, + "uniqueId": { + "type": "string", + "description": "Original WinUI Gallery UniqueId from ControlInfoData.json. Matches the WinUIGallery/Samples// folder name exactly." + }, + "title": { "type": "string" }, + "group": { + "type": "object", + "required": [ "id", "title" ], + "additionalProperties": false, + "properties": { + "id": { "type": "string", "description": "ControlInfoData.json group UniqueId." }, + "title": { "type": "string" } + } + }, + "summary": { "type": "string" }, + "description": { "type": "string" }, + "apiNamespace": { "type": "string" }, + "baseClasses": { + "type": "array", + "items": { "type": "string" } + }, + "tags": { + "type": "array", + "items": { "type": "string" }, + "description": "Search keywords carried over from ControlInfoData.json's Tags." + }, + "aliases": { + "type": "array", + "items": { "type": "string" }, + "description": "Catalog-only extra keywords from an item's optional Catalog.Aliases override." + }, + "relatedSamples": { + "type": "array", + "items": { + "type": "string", + "pattern": "^[^#]+/[^#]+#[^#]+$" + }, + "description": "Ids of conceptually related samples, combining ControlInfoData.json's RelatedControls (resolved to this repository) with any cross-repository Catalog.RelatedSamples override. Same-repository references are validated to resolve to another entry in 'samples'." + }, + "docs": { + "type": "array", + "items": { + "type": "object", + "required": [ "title", "uri" ], + "additionalProperties": false, + "properties": { + "title": { "type": "string" }, + "uri": { "type": "string", "format": "uri" } + } + } + }, + "badges": { + "type": "array", + "items": { "type": "string", "enum": [ "New", "Updated", "Preview" ] }, + "description": "Derived from IsNew/IsUpdated/IsPreview." + }, + "source": { + "type": "object", + "description": "Repository-relative locations for this sample's source, rooted at the repository root (not pinned to a commit).", + "required": [ "root", "page" ], + "additionalProperties": false, + "properties": { + "root": { "type": "string", "description": "Sample folder, e.g. 'WinUIGallery/Samples/Button'." }, + "page": { "type": "string", "description": "Main XAML page for this sample." }, + "codeBehind": { "type": "string", "description": "Code-behind file for the main page, when present." }, + "snippets": { + "type": "array", + "items": { "type": "string" }, + "description": "All *.txt code snippet files displayed in the gallery UI for this sample." + } + } + }, + "scenarios": { + "type": "array", + "description": "Interactive scenarios within the page, one per controls:ControlExample element that declares a SampleDefinition snippet.", + "items": { + "type": "object", + "required": [ "name", "snippet" ], + "additionalProperties": false, + "properties": { + "name": { "type": "string" }, + "snippet": { "type": "string", "description": "File name of the snippet, relative to 'source.root'." } + } + } + } + } + } + } +} diff --git a/tests/WinUIGallery.CatalogExporter.Tests/CatalogGeneratorTests.cs b/tests/WinUIGallery.CatalogExporter.Tests/CatalogGeneratorTests.cs new file mode 100644 index 000000000..585a6da43 --- /dev/null +++ b/tests/WinUIGallery.CatalogExporter.Tests/CatalogGeneratorTests.cs @@ -0,0 +1,308 @@ +// Copyright (c) Microsoft Corporation. All rights reserved. +// Licensed under the MIT License. + +using Microsoft.VisualStudio.TestTools.UnitTesting; +using WinUIGallery.CatalogExporter; + +namespace WinUIGallery.CatalogExporter.Tests; + +/// +/// Exercises CatalogGenerator against small, synthetic ControlInfoData.json + Samples/ fixtures +/// (never the real repository data) so each rule can be tested in isolation. +/// +[TestClass] +public sealed class CatalogGeneratorTests +{ + private string _fixtureRoot = string.Empty; + + [TestInitialize] + public void CreateFixtureRoot() + { + _fixtureRoot = Path.Combine(Path.GetTempPath(), "CatalogExporterTests_" + Guid.NewGuid().ToString("N")); + Directory.CreateDirectory(_fixtureRoot); + File.WriteAllText(Path.Combine(_fixtureRoot, "WinUIGallery.slnx"), ""); + } + + [TestCleanup] + public void DeleteFixtureRoot() + { + if (Directory.Exists(_fixtureRoot)) + { + Directory.Delete(_fixtureRoot, recursive: true); + } + } + + private CatalogGenerationOptions Options() => new() { RepoRoot = _fixtureRoot }; + + private void WriteControlInfoData(string json) + { + string dir = Path.Combine(_fixtureRoot, "WinUIGallery", "SampleSupport", "Data"); + Directory.CreateDirectory(dir); + File.WriteAllText(Path.Combine(dir, "ControlInfoData.json"), json); + } + + private void WriteSample(string uniqueId, string pageXamlBody, params (string FileName, string Contents)[] extraFiles) + { + string folder = Path.Combine(_fixtureRoot, "WinUIGallery", "Samples", uniqueId); + Directory.CreateDirectory(folder); + File.WriteAllText(Path.Combine(folder, uniqueId + "Page.xaml"), pageXamlBody); + File.WriteAllText(Path.Combine(folder, uniqueId + "Page.xaml.cs"), "// code-behind"); + foreach ((string fileName, string contents) in extraFiles) + { + File.WriteAllText(Path.Combine(folder, fileName), contents); + } + } + + private static string TwoItemDocument(string extraForFirstItem = "") => $$""" + { + "Groups": [ + { + "UniqueId": "GroupA", + "Title": "Group A", + "Items": [ + { + "UniqueId": "SampleOne", + "Title": "Sample One", + "Subtitle": "First sample", + "Tags": [ "alpha" ], + "RelatedControls": [ "SampleTwo" ] + {{extraForFirstItem}} + }, + { + "UniqueId": "SampleTwo", + "Title": "Sample Two" + } + ] + } + ] + } + """; + + [TestMethod] + public void Generate_ProducesExpectedFieldsAndOmitsEmptyOptionalFields() + { + WriteControlInfoData(TwoItemDocument()); + WriteSample("SampleOne", """""", ("SampleOneBasic.txt", "