diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index a93634f..a259598 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -5,12 +5,12 @@ "url": "https://github.com/microsoft/win-dev-skills" }, "description": "Agents and skills for native Windows app development with WinUI 3 and the Windows App SDK.", - "version": "0.3.0", + "version": "0.3.1", "plugins": [ { "name": "winui", "description": "Agents and skills for WinUI 3 app development. Create new WinUI 3 desktop apps, convert from other frameworks to WinUI 3, or add features to existing WinUI 3 applications.", - "version": "0.3.0", + "version": "0.3.1", "source": "./plugins/winui", "category": "windows-development", "tags": [ diff --git a/.github/plugin/marketplace.json b/.github/plugin/marketplace.json index ec83f88..ffe956e 100644 --- a/.github/plugin/marketplace.json +++ b/.github/plugin/marketplace.json @@ -6,13 +6,13 @@ }, "metadata": { "description": "Agents and skills for native Windows app development with WinUI 3 and the Windows App SDK.", - "version": "0.3.0" + "version": "0.3.1" }, "plugins": [ { "name": "winui", "description": "Agents and skills for WinUI 3 app development. Create new WinUI 3 desktop apps, convert from other frameworks to WinUI 3, or add features to existing WinUI 3 applications.", - "version": "0.3.0", + "version": "0.3.1", "source": "./plugins/winui" } ] diff --git a/.github/workflows/pr-validation.yml b/.github/workflows/pr-validation.yml index 305fda6..ce024b7 100644 --- a/.github/workflows/pr-validation.yml +++ b/.github/workflows/pr-validation.yml @@ -2,9 +2,9 @@ name: PR validation on: push: - branches: [ "main" ] + branches: [ "main", "staging" ] pull_request: - branches: [ "main" ] + branches: [ "main", "staging" ] workflow_dispatch: permissions: diff --git a/CHANGELOG.md b/CHANGELOG.md index 00eb3a7..3f76499 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,20 @@ The `version-bump` and `changelog-entry` CI jobs enforce this. ### Deprecated +## [0.3.1] — 2026-05-19 + +### Added + +- `winui-dev` agent: window sizing rubric, screenshot validation step, and + anti-self-delegation guardrails (#84). +- `winui-search`: batched CLI mode, background cache refresh, BM25-based + ranking, and upgraded WinUI Gallery + Community Toolkit data fetchers (#83). + +### Changed + +- CI: `pr-validation` workflow now also runs on PRs targeting `staging`. +- Bumped `coverlet.collector` from 10.0.0 to 10.0.1 (#87). + ## [0.3.0] — 2026-05-13 Baseline entry covering everything currently shipped on `main` at the time the diff --git a/plugins/winui/agents/winui-dev.agent.md b/plugins/winui/agents/winui-dev.agent.md index b2a8a57..9d1a9ba 100644 --- a/plugins/winui/agents/winui-dev.agent.md +++ b/plugins/winui/agents/winui-dev.agent.md @@ -4,6 +4,10 @@ description: "Builds WinUI 3 desktop applications using Windows App SDK, XAML, a user-invocable: true --- +## You Are The WinUI Developer — Do The Work Yourself + +You are `winui-dev` — don't call `task` with `agent_type: "winui:winui-dev"` (self-hop). `task` is fine for scoped helpers (`explore` for parallel codebase mapping, `general-purpose` for rubber-duck critique), not for the build itself. + ## Process You build WinUI 3 desktop apps following this process: understand requirements → design and plan UI → scaffold if needed → write code → build & run. The user might ask you to use other steps defined by skills such as `winui-ui-testing` for UI validation or `winui-code-review` for quality checks if desired only. diff --git a/plugins/winui/plugin.json b/plugins/winui/plugin.json index 7f757a7..e81be12 100644 --- a/plugins/winui/plugin.json +++ b/plugins/winui/plugin.json @@ -1,7 +1,7 @@ { "name": "winui", "description": "Agents and skills for WinUI 3 app development. Create new WinUI 3 desktop apps, convert from other frameworks to WinUI 3, or add features to existing WinUI 3 applications.", - "version": "0.3.0", + "version": "0.3.1", "author": { "name": "Microsoft", "url": "https://github.com/microsoft/win-dev-skills" diff --git a/plugins/winui/skills/winui-design/SKILL.md b/plugins/winui/skills/winui-design/SKILL.md index 09f2d8f..ff4e081 100644 --- a/plugins/winui/skills/winui-design/SKILL.md +++ b/plugins/winui/skills/winui-design/SKILL.md @@ -8,13 +8,13 @@ description: "WinUI 3 UI design and XAML correctness — layout planning, contro > **Before picking controls, search the catalogue.** This skill ships `winui-search.exe` alongside this `SKILL.md`. It indexes 100+ WinUI Gallery controls, every Windows Community Toolkit scenario, and a curated set of platform integration patterns (JumpList, Share, file pickers, drag-drop). Use it to ground every control choice in a real shipping sample **before writing any XAML** — this is the difference between guessing property names and copying canonical code. > > ```powershell -> .\winui-search.exe search "" # shortlist of matching scenarios -> .\winui-search.exe get # full XAML + C# + pitfall notes -> .\winui-search.exe list # browse everything -> .\winui-search.exe update # refresh embedded snapshots from GitHub +> .\winui-search.exe search "" "" ... # batch one focused query per feature +> .\winui-search.exe get ... # batch up to 3 IDs — full XAML + C# + pitfall notes +> .\winui-search.exe list # browse all patterns (heavy — prefer search) +> .\winui-search.exe update # force refresh now > ``` > -> **Workflow:** batch every search you need for the current page or feature → pick the best ID from each shortlist → `get` the full code for each → then write XAML using those samples as reference. **Do NOT interleave searching with coding.** Search **one feature per query** — the BM25 scoring rewards focused queries. +> **Workflow:** in **one** `search` call, list every feature you need for the current page (one focused query per feature, not a bag of keywords) → from each shortlist pick the best ID → grab full code with `get` (batch up to 3 IDs per call) → then write XAML using those samples as reference. **Do NOT interleave searching with coding** — front-load all lookups, then code. BM25 rewards focused per-query phrasing, so keep each query about one control or pattern. #### Step 1: Identify App Type and Anchor Control | App Type | Anchor Control | Reference App | @@ -40,7 +40,48 @@ description: "WinUI 3 UI design and XAML correctness — layout planning, contro - Sidebar: fixed 300-360px width; main content: `Width="*"` with 24px padding - Status bar: `Grid` row at bottom; toolbar: `CommandBar` or title bar buttons -#### Step 4: Design Anti-Patterns +#### Step 4: Size the Window to the App + +> **WinUI 3 has no `SizeToContent`.** Without an explicit size, Windows defaults the main window to ~1024×768 — oversized for most utilities. **Size the window in `MainWindow`'s constructor; derive from the layout, not a generic.** + +**Rubric.** Width = widest row + 48 padding (24 each side), rounded **up** to nearest 20. Height = 32 (titlebar) + Σ(row heights) + Σ(spacing) + 48 padding, rounded up to 20. Round up — clipped content is a worse failure than a slightly-wide window. + +**Sanity check** (ranges, not targets — derive yours from the rubric): +- Single-purpose utility → ~440–560 wide +- Form / single-page tool → ~600–800 wide, ~640–800 tall +- Multi-pane (nav + content) → ~1100–1300 wide, ~720–840 tall +- Document / canvas / media editor → 1280+ wide + +If your derived number is well below its range, you missed a row — re-check. + +`AppWindow.Resize` takes **physical pixels**, not DIPs — multiply by the monitor's DPI scale: + +```csharp +using Microsoft.UI; +using Microsoft.UI.Windowing; +using System.Runtime.InteropServices; +using Windows.Graphics; + +public sealed partial class MainWindow : Window +{ + [DllImport("user32.dll")] + private static extern uint GetDpiForWindow(IntPtr hWnd); + + public MainWindow() + { + InitializeComponent(); + var hwnd = Win32Interop.GetWindowFromWindowId(AppWindow.Id); + var scale = GetDpiForWindow(hwnd) / 96.0; + AppWindow.Resize(new SizeInt32((int)(460 * scale), (int)(860 * scale))); + } +} +``` + +`XamlRoot.RasterizationScale` is null in the ctor and stale after `AppWindow.Move`, so `[DllImport]` is the cleanest path. Don't try to size the window by setting `Width`/`Height` on the root `Grid` — that clips content, not the window. + +If the user asks for UI validation, see `winui-ui-testing` Step 3.5 to verify the rubric against the visual checklist. + +#### Step 5: Design Anti-Patterns | ❌ Don't | ✅ Do Instead | |----------|--------------| | Centered floating card on background | Content fills window with padding | diff --git a/plugins/winui/skills/winui-design/winui-search.exe b/plugins/winui/skills/winui-design/winui-search.exe index 770513a..8dd4fbe 100644 Binary files a/plugins/winui/skills/winui-design/winui-search.exe and b/plugins/winui/skills/winui-design/winui-search.exe differ diff --git a/plugins/winui/skills/winui-ui-testing/SKILL.md b/plugins/winui/skills/winui-ui-testing/SKILL.md index f47b2da..fd2a49f 100644 --- a/plugins/winui/skills/winui-ui-testing/SKILL.md +++ b/plugins/winui/skills/winui-ui-testing/SKILL.md @@ -101,6 +101,11 @@ if ($missingId.Count -eq 0) { $results += @{ name = "AutomationId coverage"; status = "FAIL"; detail = "Missing: $names" } } +# ─── State Screenshots (capture each meaningful state for visual review) ─── +New-Item -ItemType Directory -Force -Path "screenshots" | Out-Null +winapp ui screenshot -a $AppPid -o "screenshots/01-initial.png" 2>$null +# ...take more screenshots after key interactions above (mode switches, dialogs opened, etc.) + # ─── Final Screenshot ─── winapp ui screenshot -a $AppPid -o "test-screenshot.png" 2>$null @@ -140,6 +145,25 @@ Write tests for **every requirement** from the user's prompt: Read `test-results.json` for structured pass/fail. Only fix code if tests fail. +### Step 3.5: Look at the Screenshots + +UIA assertions don't see clipping, overlap, wrong theming, or controls bleeding past their container — UIA returns `PASS` while the app is visually broken. **Capture screenshots with `winapp ui screenshot` and view each PNG.** + +Capture the initial state and any state after a major interaction (the State Screenshots block in the script template above handles this). + +**Visual checklist — fail the run if any item is `no`:** +- [ ] No unintended scrollbars +- [ ] No text ending in `…` that shouldn't be +- [ ] Hero elements fully visible (not sliced) +- [ ] Right-edge controls fully visible +- [ ] No overlapping rows +- [ ] Content uses the available width — no asymmetric dead zones (e.g. content pinned to one edge leaving empty space on the other) +- [ ] Spacing intentional — not cramped, not unintentionally vast +- [ ] Theming matches the user's ask (Light/Dark/HighContrast if relevant) +- [ ] Focus/hover/error states render if tested + +If the checklist fails, it's a bug — fix before declaring done. Window too small → grow per `winui-design` Step 4. + ### Step 4: Fix and Rerun (if the user asked for it) If tests fail: diff --git a/src/tools/winui-analyzer/Microsoft.WindowsAppSDK.Analyzers.Tests/Microsoft.WindowsAppSDK.Analyzers.Tests.csproj b/src/tools/winui-analyzer/Microsoft.WindowsAppSDK.Analyzers.Tests/Microsoft.WindowsAppSDK.Analyzers.Tests.csproj index 5ef5fc0..1743af3 100644 --- a/src/tools/winui-analyzer/Microsoft.WindowsAppSDK.Analyzers.Tests/Microsoft.WindowsAppSDK.Analyzers.Tests.csproj +++ b/src/tools/winui-analyzer/Microsoft.WindowsAppSDK.Analyzers.Tests/Microsoft.WindowsAppSDK.Analyzers.Tests.csproj @@ -14,7 +14,7 @@ - + diff --git a/src/tools/winui-search/BM25.cs b/src/tools/winui-search/BM25.cs index d721a8a..5e708f3 100644 --- a/src/tools/winui-search/BM25.cs +++ b/src/tools/winui-search/BM25.cs @@ -28,7 +28,7 @@ public static string[] Tokenize(string text) { return NonAlphaRegex().Replace(text.ToLowerInvariant(), " ") .Split(' ', StringSplitOptions.RemoveEmptyEntries) - .Where(w => w.Length > 1) + .Where(w => w.Length > 1 && !global::StopWords.Common.Contains(w)) .ToArray(); } @@ -77,4 +77,19 @@ public static double Score(Doc doc, string[] queryWords, Corpus corpus) } return score; } + + /// + /// Count how many of the given query tokens appear at least once in the doc. + /// Used by SearchEngine for the coverage gate (rejects results where most + /// query terms are OOV — e.g. "find replace text" matching only "text"). + /// + public static int CountHits(Doc doc, string[] queryTokens) + { + int hits = 0; + foreach (var word in queryTokens) + { + if (doc.Tf.TryGetValue(word, out var tf) && tf > 0) hits++; + } + return hits; + } } diff --git a/src/tools/winui-search/BackgroundUpdater.cs b/src/tools/winui-search/BackgroundUpdater.cs new file mode 100644 index 0000000..d1cff9d --- /dev/null +++ b/src/tools/winui-search/BackgroundUpdater.cs @@ -0,0 +1,264 @@ +using System.Diagnostics; + +/// +/// Stale-while-revalidate refresher for the on-disk cache under +/// %LOCALAPPDATA%\winui-search\cache\. +/// +/// Hot path commands (search/get/list/debug) call +/// after they've answered the user. If the cache hasn't been refreshed from +/// GitHub in , this spawns a detached child +/// winui-search update --background that runs the GitHub fetch and +/// updates the cache. The hot-path process returns immediately; the child +/// outlives it (Windows does not auto-kill children of an exiting parent). +/// +/// Concurrency safety: +/// - update.lock: atomic FileMode.CreateNew ensures only one +/// simultaneous spawn wins the race; others see +/// and skip silently. +/// - 10-minute TTL on the lock reaps orphans from crashed children. +/// - last-attempt.txt: rate-limits retry to 1 hour after a failed +/// attempt (otherwise a GitHub outage would re-spawn on every search). +/// +/// Disable per-process by setting WINUI_SEARCH_NO_BACKGROUND=1. +/// Enable trace logging to %LOCALAPPDATA%\winui-search\cache\background.log +/// by setting WINUI_SEARCH_DEBUG=1. +/// +internal static class BackgroundUpdater +{ + public const string BackgroundFlag = "--background"; + + private static readonly TimeSpan StaleThreshold = TimeSpan.FromDays(7); + private static readonly TimeSpan RetryAfterFailure = TimeSpan.FromHours(1); + private static readonly TimeSpan LockTtl = TimeSpan.FromMinutes(10); + + private static readonly string CacheRoot = Path.Combine( + Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), + "winui-search", "cache"); + + private static readonly string LockFile = Path.Combine(CacheRoot, "update.lock"); + private static readonly string LastSuccessFile = Path.Combine(CacheRoot, "last-github-update.txt"); + private static readonly string LastAttemptFile = Path.Combine(CacheRoot, "last-github-attempt.txt"); + + /// True if the current process was launched as a background updater child. + public static bool IsBackgroundInvocation(string[] args) => + args.Any(a => string.Equals(a, BackgroundFlag, StringComparison.Ordinal)); + + private static bool IsDisabled() => + IsTruthy(Environment.GetEnvironmentVariable("WINUI_SEARCH_NO_BACKGROUND")); + + /// + /// Treat 1, true, yes, on (case-insensitive) as enabled. + /// Anything else — including 0, false, empty, or unset — is disabled. + /// Matches the documented =1 contract and avoids the surprise of =0 + /// turning a flag on. + /// + private static bool IsTruthy(string? value) => + value is not null && + (value.Equals("1", StringComparison.Ordinal) || + value.Equals("true", StringComparison.OrdinalIgnoreCase) || + value.Equals("yes", StringComparison.OrdinalIgnoreCase) || + value.Equals("on", StringComparison.OrdinalIgnoreCase)); + + /// + /// Spawn a detached winui-search update --background if cache hasn't been + /// refreshed from GitHub in and no other update is + /// in flight or recently attempted. Returns immediately; the child runs detached. + /// Best-effort: any failure is swallowed so the hot path is never affected. + /// + public static void TryKickoffIfStale() + { + try + { + if (IsDisabled()) return; + + var lastSuccess = ReadTimestamp(LastSuccessFile); + if (lastSuccess.HasValue && DateTime.UtcNow - lastSuccess.Value < StaleThreshold) + return; // cache is fresh enough + + var lastAttempt = ReadTimestamp(LastAttemptFile); + if (lastAttempt.HasValue && DateTime.UtcNow - lastAttempt.Value < RetryAfterFailure) + return; // recent attempt — back off + + if (!TryAcquireLock()) return; + + // Lock acquired; spawn the child. The child clears the lock when done. + var exePath = Environment.ProcessPath; + if (string.IsNullOrEmpty(exePath)) + { + ReleaseLock(); + return; + } + + DebugLog($"Spawning child: {exePath} update {BackgroundFlag}"); + var psi = new ProcessStartInfo + { + FileName = exePath, + Arguments = $"update {BackgroundFlag}", + CreateNoWindow = true, + UseShellExecute = false, + WindowStyle = ProcessWindowStyle.Hidden, + // IMPORTANT: do NOT redirect stdio. With redirected pipes the parent + // implicitly waits for the child's stdout/stderr to close on exit, + // defeating the whole point of fire-and-forget. The child uses + // BackgroundFlag to stay silent on Console (writes only to its log file). + }; + + var child = Process.Start(psi); + if (child == null) + { + DebugLog("Process.Start returned null"); + ReleaseLock(); + return; + } + DebugLog($"Spawned child PID={child.Id}"); + // Dispose the Process handle immediately so the parent doesn't track the child. + child.Dispose(); + // Do NOT WaitForExit — child runs detached, parent returns now. + } + catch (Exception ex) + { + DebugLog($"TryKickoffIfStale failed: {ex.GetType().Name}: {ex.Message}"); + try { ReleaseLock(); } catch { /* ignore */ } + } + } + + /// Mark a successful GitHub refresh. Called by the background child after success. + public static void MarkSuccess() + { + try + { + Directory.CreateDirectory(CacheRoot); + var now = DateTime.UtcNow.ToString("o"); + File.WriteAllText(LastSuccessFile, now); + File.WriteAllText(LastAttemptFile, now); + DebugLog($"MarkSuccess @ {now}"); + } + catch { /* best-effort */ } + } + + /// Mark a failed GitHub refresh attempt for retry rate-limiting. + public static void MarkAttempt() + { + try + { + Directory.CreateDirectory(CacheRoot); + File.WriteAllText(LastAttemptFile, DateTime.UtcNow.ToString("o")); + DebugLog("MarkAttempt (failure)"); + } + catch { /* best-effort */ } + } + + /// Release the spawn lock. Called by the background child in finally. + public static void ReleaseLock() + { + try { if (File.Exists(LockFile)) File.Delete(LockFile); } catch { /* best-effort */ } + DebugLog("ReleaseLock"); + } + + private static readonly bool DebugEnabled = + IsTruthy(Environment.GetEnvironmentVariable("WINUI_SEARCH_DEBUG")); + + private static void DebugLog(string msg) + { + if (!DebugEnabled) return; + try + { + Directory.CreateDirectory(CacheRoot); + var line = $"[{DateTime.UtcNow:HH:mm:ss.fff}] PID={Environment.ProcessId} {msg}\n"; + File.AppendAllText(Path.Combine(CacheRoot, "background.log"), line); + } + catch { /* best-effort */ } + } + + /// Public surface for diagnostic logs from outside this class. + public static void DebugLogPublic(string msg) => DebugLog(msg); + + /// + /// Parse a round-trip ("o" format) timestamp from , returning a + /// UTC or null if the file is missing/unreadable/unparseable. + /// Uses + + /// so timezone (Z) info is preserved and parsing succeeds in every locale. + /// + public static DateTime? ReadTimestamp(string path) + { + try + { + if (!File.Exists(path)) return null; + var text = File.ReadAllText(path).Trim(); + if (DateTime.TryParse( + text, + System.Globalization.CultureInfo.InvariantCulture, + System.Globalization.DateTimeStyles.RoundtripKind, + out var dt)) + { + return dt.Kind == DateTimeKind.Utc ? dt : dt.ToUniversalTime(); + } + return null; + } + catch { return null; } + } + + /// + /// Write to via a temp file + /// + rename. The rename is atomic + /// on Windows for same-volume moves, so a crash mid-write can never leave a + /// truncated/corrupted file at — readers either see the + /// previous contents or the full new contents, never a partial write. Use this + /// for every cache file (scenarios.json, tags.json, schema-version.txt, etc.) + /// so a process crash during refresh doesn't pin users to embedded fallback. + /// + public static void AtomicWriteAllText(string path, string contents) + { + var dir = Path.GetDirectoryName(path); + if (!string.IsNullOrEmpty(dir)) Directory.CreateDirectory(dir); + var tmp = path + ".tmp"; + File.WriteAllText(tmp, contents); + File.Move(tmp, path, overwrite: true); + } + + /// + /// Try to atomically acquire the spawn lock. Returns true if this process now + /// owns the lock (caller is responsible for calling ). + /// Returns false if another process owns it (foreground caller should either + /// proceed without the lock or back off, depending on its semantics). + /// + public static bool TryAcquireLock() => TryAcquireLockInternal(); + + private static bool TryAcquireLockInternal() + { + try + { + Directory.CreateDirectory(CacheRoot); + + // Reap stale lock from a crashed previous child. + if (File.Exists(LockFile)) + { + var age = DateTime.UtcNow - File.GetLastWriteTimeUtc(LockFile); + if (age > LockTtl) + { + try { File.Delete(LockFile); } + catch { return false; } + } + else + { + return false; // Another process owns it. + } + } + + // Atomic create-or-fail. Only one process wins. + using var fs = new FileStream(LockFile, FileMode.CreateNew, + FileAccess.Write, FileShare.Read); + using var writer = new StreamWriter(fs); + writer.Write($"{Environment.ProcessId}@{DateTime.UtcNow:o}"); + return true; + } + catch (IOException) + { + return false; // Another process won the create-race. + } + catch + { + return false; + } + } +} diff --git a/src/tools/winui-search/CacheVersion.cs b/src/tools/winui-search/CacheVersion.cs new file mode 100644 index 0000000..9fb59e6 --- /dev/null +++ b/src/tools/winui-search/CacheVersion.cs @@ -0,0 +1,39 @@ +/// +/// Single source of truth for the on-disk cache version under +/// %LOCALAPPDATA%\winui-search\cache\. Both +/// and stamp this string into their +/// schema-version.txt on write and require an exact match on read; +/// any mismatch forces a cache miss + rebuild from embedded fallback JSON. +/// +/// Bump whenever ANY cached payload should be discarded: +/// 1. Scenario / tag JSON schema changes (new or removed fields) +/// 2. Embedded Data/*.json content changes (e.g. new tags added, +/// tag-list contents widened) — bump even if the C# schema is unchanged, +/// otherwise existing caches keep serving the older fallback contents. +/// 3. Tag extraction / cleaning logic changes that would alter the cached +/// output for the same input data. +/// +/// History: +/// "10" — Notes / Synonyms refactor +/// "11" — Added chip/token/tag entries to tokenizingtextbox in toolkit-tags.json +/// "12" — Added StopWords.TagOnly (text/input/layout/pick/basics/advanced) +/// → tag dicts cleansed; query tokens unchanged. +/// "13" — Toolkit cache now written CLEAN (CleanTagDictionary applied +/// before serialize), matching GalleryFetcher behavior. Old caches +/// contained polluted toolkit tags that were only filtered on read. +/// "14" — Plan A: separate keywords.json cache file; Plan B: HeaderText +/// is now the Sample's Header attribute alone (no " — Description" +/// suffix), Description holds the .md paragraph or XAML Description +/// attribute as a fallback. +/// "15" — Toolkit CleanCSharp now folds platform #if/#else/#endif (keeps +/// WINAPPSDK branch, drops UWP/Uno fallbacks) so emitted samples +/// compile clean against WinAppSDK without the noisy preprocessor. +/// "16" — Toolkit scenario IDs now renumbered in stable sample-path order +/// (was: alphabetical-by-slug, which reshuffled when upstream +/// rewords a Header). Old caches still resolve correctly inside a +/// single process but {controlId}-{N} differs across versions. +/// +internal static class CacheVersion +{ + public const string Current = "16"; +} diff --git a/src/tools/winui-search/DATA_SOURCES.md b/src/tools/winui-search/DATA_SOURCES.md new file mode 100644 index 0000000..43844b6 --- /dev/null +++ b/src/tools/winui-search/DATA_SOURCES.md @@ -0,0 +1,140 @@ +# Data Sources + +`winui-search` builds its index from two upstream repositories. This doc describes +exactly **which files** are used, **what for**, and **how** they're processed. + +> Reference clones (developer convenience only — runtime always reads from GitHub): +> - `Q:\WinUI-Gallery\` — https://github.com/microsoft/WinUI-Gallery +> - `Q:\Windows\` — https://github.com/CommunityToolkit/Windows + +--- + +## 1. WinUI Gallery — `microsoft/WinUI-Gallery` + +Fetcher: **`GalleryFetcher.cs`** (cached for 7 days under +`%LOCALAPPDATA%\winui-search\cache\gallery`; fallback to embedded `Data/gallery-*.json`). + +### Files we read + +| Path on `main` | Purpose | Fields used | +|---|---|---| +| `WinUIGallery/Samples/Data/ControlInfoData.json` | Master index of every control | `Groups[].Items[]`: `UniqueId`, `Title`, `Subtitle`, `Description`, `ApiNamespace`, `RelatedControls`, `Docs[]`, plus group-level `Folder` for IsSpecialSection items | +| `WinUIGallery/Samples/ControlPages/{UniqueId}Page.xaml` | Per-control sample page | `` blocks — one per scenario. Inline `` / ``, plus attributes `XamlSource=`/`CSharpSource=` pointing to external code files | +| `WinUIGallery/Samples/ControlPages/{UniqueId}Page.xaml.cs` | Code-behind (real working C#) | Whole file — used by `ExtractFromCodeBehind` to build symbol-closure C# (preferred over inline templated C#, which contains `$(...)` substitutions that break agent builds) | +| `WinUIGallery/Samples/SampleCode/...` | External code referenced by `XamlSource=`/`CSharpSource=` | Raw file contents — fallback when code-behind extraction misses | + +### Fields actually consumed (not all schema fields) + +From each `ControlInfoData.json` Item we extract: +- `UniqueId` → `Scenario.ControlId` (lowercased) +- `Title` → `Scenario.ControlName` +- **`Subtitle`** → `Scenario.ControlDescription` (median 68 chars / max 129) — surfaced in `search` list as `[gallery] Name — `. Also concatenated with Title + Description for tag-source text +- `Description` (median 144 chars / max 448) — used **only** as tag-source text; was previously surfaced per-control in search but dropped during compression because it bloated tokens (Subtitle is the lighter replacement) +- **`ApiNamespace`** → `Scenario.ApiNamespace` (surfaced in `get` output for non-default namespaces only — see § Output) +- `RelatedControls[]` → `Scenario.RelatedControls` (surfaced as `**See also:**`) +- `Docs[]` → `Scenario.Docs` (kept on the Scenario but **not emitted** — agents never fetch them) +- `Folder` (when `IsSpecialSection: true`) → URL prefix for the control page + +Schema reference: `WinUIGallery/Samples/Data/ControlInfoDataSchema.json` — +JSON-Schema description of every field. Read for documentation; **not loaded at runtime**. + +### Files NOT used + +Everything else under `WinUI-Gallery/`: +- `WinUIGallery/` app shell, MainWindow, App.xaml, Helpers, framework code +- `WinUIGallery/Samples/SamplePages/`, `Samples/SampleHelpers/` +- `WinUIGallery.SourceGenerator/` +- `tests/`, `scripts/`, `packagestore/`, `.pipelines/`, `.github/` +- `WinUIGallery/Assets/` (icons, images, sample media) + +### Output: when does Namespace show? + +- 79/115 controls map to `Microsoft.UI.Xaml.Controls` — auto-imported in default + templates, **suppressed** to keep output clean. +- 76 scenarios across 14 long-tail namespaces emit `**Namespace:** \`xxx\``: + - `Microsoft.UI.Xaml`, `Microsoft.UI.Windowing`, `Microsoft.UI.Xaml.Media.Animation`, + `Microsoft.UI.Xaml.Shapes`, `Windows.ApplicationModel.DataTransfer`, + `Microsoft.Windows.Notifications`, `Microsoft.Windows.Storage.Pickers`, + `Microsoft.UI.Composition.SystemBackdrops`, `Microsoft.UI.Xaml.Controls.Primitives`, + `Microsoft.Windows.BadgeNotifications`, `Windows.UI.StartScreen` (jumplist), + `Microsoft.UI.Xaml.Input`, `Microsoft.UI.Xaml.Media`, `Microsoft.UI.Content`. + +These are the namespaces agents most often miss when writing `using` / `xmlns` +declarations. + +--- + +## 2. CommunityToolkit Windows — `CommunityToolkit/Windows` + +Fetcher: **`ToolkitFetcher.cs`** (cached for 7 days under +`%LOCALAPPDATA%\winui-search\cache\toolkit`; fallback to embedded `Data/toolkit-*.json`). + +### Files we read + +| Path pattern | Purpose | Fields used | +|---|---|---| +| `https://api.github.com/repos/CommunityToolkit/Windows/git/trees/main?recursive=1` | File tree to discover all components/samples | All paths under `components/` | +| `components//src/.csproj` | NuGet package id (the csproj filename = package id) | filename → `Scenario.NuGetPackage` | +| `components//samples/.md` | Sample frontmatter + descriptions + tags | YAML frontmatter (`title`, `description`, `keywords`), `## ` headings → control description + per-sample text | +| `components//samples/.xaml` | XAML scenario | Whole file — extracted as `Scenario.Xaml`, with derived `xmlns:` imports → `Scenario.XmlnsImports` | +| `components//samples/.xaml.cs` | Code-behind (when present) | Whole file — `Scenario.CSharp` | + +### Skipped components (not visual controls) + +`Triggers`, `Converters`, `Behaviors`, `Extensions`, `Helpers`, `Media`, +`DeveloperTools`, `Animations`, `CameraPreview`, `LayoutTransformControl`. + +### Sample-name → controlId overrides + +`SampleOverrides` dictionary in `ToolkitFetcher.cs` — collapses multiple +sample files to one control (e.g., `SettingsCardSample` + `ClickableSettingsCardSample` ++ `SettingsPageExample` all → `settingscard`). + +### Files NOT used + +- `tests/`, `docs/`, `.github/`, repo-level configs +- `components//src/` source code (we only read csproj filename, not contents) + +--- + +## 3. Hand-curated data shipped with the tool + +Files under `src/tools/winui-search/Data/` — embedded resources baked into the exe: + +| File | Source | Purpose | +|---|---|---| +| `gallery-scenarios.json` | Auto-baked from § 1 by `winui-search update` | 325 scenarios across 115 controls — fallback when GitHub fetch fails or cache stale | +| `gallery-tags.json` | Auto-baked from § 1 (with manual overrides for missing controls like `jumplist-*`) | Per-control keyword arrays for BM25 | +| `toolkit-scenarios.json` | Auto-baked from § 2 | 48 scenarios across 26 controls | +| `toolkit-tags.json` | Auto-baked from § 2 | Per-control keyword arrays for BM25 | +| `core-patterns.json` | **Hand-written** | 6 platform patterns Gallery doesn't cover well: jumplist, share contract, file picker, drag-drop, etc. Loaded as a separate index alongside scenarios | + +--- + +## 4. Cache & refresh + +- Cache dir: `%LOCALAPPDATA%\winui-search\cache\{gallery,toolkit}\` +- TTL: 7 days +- Schema version: see `CacheVersion.cs` (currently `"14"`). **Bump it on any + embedded-data or tag-logic change**, otherwise existing user caches keep serving + the older snapshot. Recent bumps: + - `10` Notes/Synonyms refactor + - `11` Added chip/token/tag entries to TokenizingTextBox tags + - `12` Added StopWords.TagOnly (text/input/layout/pick/basics/advanced) + - `13` Toolkit cache now written CLEAN (CleanTagDictionary applied before serialize) + - `14` Plan A keywords.json + Plan B Header attribute is the sole HeaderText source +- Manual refresh: `winui-search update` — pulls fresh data from GitHub and rewrites + `%LOCALAPPDATA%` cache. To re-bake the embedded fallback, copy + `%LOCALAPPDATA%\winui-search\cache\gallery\*.json` → + `src\tools\winui-search\Data\gallery-*.json` and rebuild. + +--- + +## 5. Quick stats (after most recent refresh) + +| Source | Scenarios | Unique controls | Notes | +|---|---:|---:|---| +| Gallery | 325 | 115 | 288 with `ApiNamespace`, 76 of which are non-default (shown as hint) | +| Toolkit | 48 | 26 | All carry `NuGetPackage` + `XmlnsImports` | +| Core patterns | 6 | n/a | jumplist, share-target, file-picker, drag-drop, etc. | +| **Total** | **379 patterns** | | | diff --git a/src/tools/winui-search/Data/gallery-scenarios.json b/src/tools/winui-search/Data/gallery-scenarios.json index 435d0d7..5ccae41 100644 --- a/src/tools/winui-search/Data/gallery-scenarios.json +++ b/src/tools/winui-search/Data/gallery-scenarios.json @@ -1 +1 @@ -[{"id":"xamlstyles","controlId":"xamlstyles","controlName":"Style","headerText":"Creating and applying a style","xaml":"\u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CStackPanel.Resources\u003E\n \u003CStyle x:Key=\u0022CustomButtonStyle\u0022 TargetType=\u0022Button\u0022 BasedOn=\u0022{StaticResource ButtonRevealStyle}\u0022\u003E\n \u003CSetter Property=\u0022Background\u0022 Value=\u0022{ThemeResource AccentAcrylicBackgroundFillColorDefaultBrush}\u0022 /\u003E\n \u003CSetter Property=\u0022MinWidth\u0022 Value=\u0022200\u0022 /\u003E\n \u003C/Style\u003E\n \u003C/StackPanel.Resources\u003E\n \u003CButton Content=\u0022Default button\u0022 /\u003E\n \u003CButton Content=\u0022Styled button\u0022 Style=\u0022{StaticResource CustomButtonStyle}\u0022 /\u003E\n \u003CButton Content=\u0022Styled button (overridden)\u0022 Style=\u0022{StaticResource CustomButtonStyle}\u0022\n Background=\u0022{ThemeResource SystemFillColorCriticalBackgroundBrush}\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"xamlstyles-style-without-a-key","controlId":"xamlstyles","controlName":"Style","headerText":"Style without a key (implicit style)","xaml":"\u003CStackPanel\u003E\n \u003CStackPanel.Resources\u003E\n \u003CStyle TargetType=\u0022TextBlock\u0022\u003E\n \u003CSetter Property=\u0022FontSize\u0022 Value=\u002216\u0022 /\u003E\n \u003CSetter Property=\u0022FontFamily\u0022 Value=\u0022Consolas\u0022 /\u003E\n \u003CSetter Property=\u0022FontWeight\u0022 Value=\u0022Bold\u0022 /\u003E\n \u003C/Style\u003E\n \u003C/StackPanel.Resources\u003E\n\n \u003CTextBlock Text=\u0022This style is applied automatically!\u0022 /\u003E\n \u003CTextBlock Text=\u0022No need to set a key.\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"binding","controlId":"binding","controlName":"Binding","headerText":"Binding between controls","xaml":"\u003CGrid ColumnSpacing=\u002212\u0022\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022auto\u0022 /\u003E\n \u003CColumnDefinition Width=\u0022auto\u0022 /\u003E\n \u003CColumnDefinition Width=\u0022auto\u0022 /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n\n \u003CStackPanel Spacing=\u00228\u0022 Grid.Column=\u00220\u0022\u003E\n \u003CTextBlock Text=\u0022One-Way Binding\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n \u003C!-- One-Way Binding: The target TextBox mirrors the text entered in the SourceTextBox, but any change in the target is not reflected back to the source --\u003E\n \u003CTextBox x:Name=\u0022SourceTextBoxOneWay\u0022 Width=\u0022200\u0022 HorizontalAlignment=\u0022Left\u0022 PlaceholderText=\u0022Enter text here\u0022 /\u003E\n \u003CTextBox x:Name=\u0022TargetTextBoxOneWay\u0022 Width=\u0022200\u0022 HorizontalAlignment=\u0022Left\u0022 PlaceholderText=\u0022Mirrors above text\u0022\n Text=\u0022{x:Bind SourceTextBoxOneWay.Text, Mode=OneWay}\u0022 /\u003E\n \u003C/StackPanel\u003E\n\n \u003CAppBarSeparator Grid.Column=\u00221\u0022 /\u003E\n\n \u003CStackPanel Spacing=\u00228\u0022 Grid.Column=\u00222\u0022\u003E\n \u003CTextBlock Text=\u0022Two-Way Binding\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n \u003C!-- Two-Way Binding: Changes in the SourceTextBox are automatically reflected in the TargetTextBox, and vice versa --\u003E\n \u003CTextBox x:Name=\u0022SourceTextBoxTwoWay\u0022 Width=\u0022200\u0022 HorizontalAlignment=\u0022Left\u0022 PlaceholderText=\u0022Enter text here\u0022 /\u003E\n \u003CTextBox x:Name=\u0022TargetTextBoxTwoWay\u0022 Width=\u0022200\u0022 HorizontalAlignment=\u0022Left\u0022 PlaceholderText=\u0022Mirrors and edits above text\u0022\n Text=\u0022{x:Bind SourceTextBoxTwoWay.Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"binding-binding-to-a-property","controlId":"binding","controlName":"Binding","headerText":"Binding to a property in code-behind","xaml":"\u003CTextBlock\n Text=\u0022{x:Bind GreetingMessage}\u0022\n FontSize=\u002224\u0022\n HorizontalAlignment=\u0022Center\u0022\n VerticalAlignment=\u0022Center\u0022 /\u003E","csharp":"// Code-behind\npublic string GreetingMessage { get; set; } = \u0022Hello, WinUI 3!\u0022;","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"binding-using-a-function-in","controlId":"binding","controlName":"Binding","headerText":"Using a function in x:Bind","xaml":"\u003CDatePicker x:Name=\u0022DatePickerControl\u0022 Header=\u0022Select a date\u0022 /\u003E\n\u003CTextBlock Text=\u0022{x:Bind FormatDate(DatePickerControl.SelectedDate), Mode=OneWay}\u0022 /\u003E","csharp":"public string FormatDate(DateTimeOffset? date)\n{\n if (date.HasValue)\n {\n return \u0022Selected date is: \u0022 \u002B date.Value.ToString(\u0022dddd, MMMM d, yyyy\u0022);\n }\n else\n {\n return \u0022No date selected\u0022;\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"binding-using-a-converter-in","controlId":"binding","controlName":"Binding","headerText":"Using a converter in Binding","xaml":"\u003CPage...\n xmlns:c=\u0022using:YourNamespace\u0022\u003E\n\n \u003CPage.Resources\u003E\n \u003C!-- Declare the converter --\u003E\n \u003Cc:EmptyStringToVisibilityConverter x:Key=\u0022EmptyStringToVisibilityConverter\u0022 /\u003E\n \u003C/Page.Resources\u003E\n\n \u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003C!-- Input TextBox --\u003E\n \u003CTextBox x:Name=\u0022InputTextBox\u0022 Header=\u0022Enter Text:\u0022 Width=\u0022300\u0022 /\u003E\n\n \u003C!-- TextBlock Visibility Depends on Input Text --\u003E\n \u003CTextBlock Text=\u0022The input is not empty.\u0022\n Visibility=\u0022{Binding Text, ElementName=InputTextBox, Converter={StaticResource EmptyStringToVisibilityConverter}}\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Page\u003E","csharp":"using Microsoft.UI.Xaml.Data;\nusing Microsoft.UI.Xaml;\n\nnamespace YourNamespace\n{\n public class EmptyStringToVisibilityConverter : IValueConverter\n {\n // Visibility value when the input string is empty or null\n public Visibility EmptyValue { get; set; } = Visibility.Collapsed;\n\n // Visibility value when the input string is non-empty\n public Visibility NonEmptyValue { get; set; } = Visibility.Visible;\n\n public object Convert(object value, Type targetType, object parameter, string language)\n {\n // Return EmptyValue if the input is null or empty, otherwise NonEmptyValue\n return value is string stringValue \u0026\u0026 !string.IsNullOrEmpty(stringValue) \n ? NonEmptyValue \n : EmptyValue;\n }\n\n public object ConvertBack(object value, Type targetType, object parameter, string language)\n {\n // ConvertBack is not needed and not implemented in this case\n throw new NotImplementedException();\n }\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"binding-binding-to-a-view","controlId":"binding","controlName":"Binding","headerText":"Binding to a view model","xaml":"\u003CTextBlock Text=\u0022Title:\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n\u003CTextBlock Text=\u0022{Binding Title}\u0022 FontSize=\u002216\u0022 /\u003E\n\n\u003CTextBlock Text=\u0022Description:\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n\u003CTextBlock Text=\u0022{Binding Description}\u0022 FontSize=\u002216\u0022 /\u003E","csharp":"using System.ComponentModel; // For INotifyPropertyChanged interface.\nusing Microsoft.UI.Xaml.Controls; // For Page and other WinUI controls.\n\nnamespace YourNamespace\n{\n // Main page class\n public sealed partial class YourPage : Page\n {\n // Property to hold the ViewModel instance.\n public ExampleViewModel ViewModel { get; set; }\n\n public YourPage()\n {\n this.InitializeComponent();\n\n // Initialize the ViewModel with sample data.\n ViewModel = new ExampleViewModel\n {\n Title = \u0022Welcome to WinUI 3\u0022, // Set initial value for Title.\n Description = \u0022This is an example of binding to a view model.\u0022, // Set initial value for Description.\n };\n\n // Set the DataContext of the page to the ViewModel.\n // This makes the ViewModel properties available for binding in XAML.\n DataContext = ViewModel;\n }\n }\n\n // ViewModel class implementing INotifyPropertyChanged for data binding.\n public class ExampleViewModel : INotifyPropertyChanged\n {\n // Backing field for Title property.\n private string _title = string.Empty;\n\n // Backing field for Description property.\n private string _description = string.Empty;\n\n // Property for Title with change notification.\n public string Title\n {\n get =\u003E _title; // Return the current value of _title.\n set\n {\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"binding-binding-with-targetnullvalue","controlId":"binding","controlName":"Binding","headerText":"Binding with TargetNullValue","xaml":"\u003C!--TargetNullValue property help handle scenarios where the binding source is null--\u003E\n\u003CTextBlock Text=\u0022{Binding ViewModel.NullString, Mode=OneWay, TargetNullValue=\u0027Anonymous User\u0027}\u0022 /\u003E","csharp":"public YourPage()\n{\n this.InitializeComponent();\n\n ViewModel = new ExampleViewModel\n {\n NullString = null\n };\n \n DataContext = ViewModel;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"binding-binding-a-collection-with","controlId":"binding","controlName":"Binding","headerText":"Binding a collection with data templates","xaml":"\u003CListView\n x:Name=\u0022ListDetailListView\u0022\n ItemsSource=\u0022{x:Bind Items}\u0022\n SelectionMode=\u0022Single\u0022\u003E\n \u003CListView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:ListDetailItem\u0022\u003E\n \u003CStackPanel Padding=\u00224\u0022 Spacing=\u00222\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n \u003CTextBlock Text=\u0022{x:Bind DateCreatedFormatted}\u0022\n Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/DataTemplate\u003E\n \u003C/ListView.ItemTemplate\u003E\n\u003C/ListView\u003E\n\n\u003C!-- Detail panel bound to the selected item --\u003E\n\u003CStackPanel DataContext=\u0022{x:Bind ListDetailListView.SelectedItem, Mode=OneWay}\u0022\u003E\n \u003CTextBlock Text=\u0022{Binding Title}\u0022 FontSize=\u002220\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n \u003CTextBlock Text=\u0022{Binding DateCreatedFormatted}\u0022\n Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 /\u003E\n \u003CTextBlock Text=\u0022{Binding Text}\u0022 TextWrapping=\u0022Wrap\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":"public class ListDetailItem\n{\n public int Id { get; set; }\n public string Title { get; set; }\n public string Text { get; set; }\n public DateTime DateCreated { get; set; }\n public string DateCreatedFormatted =\u003E DateCreated.ToString(\u0022MMM d, yyyy h:mm tt\u0022);\n}\n\n// In your page class:\npublic List\u003CListDetailItem\u003E Items { get; set; }\n\npublic MyPage()\n{\n this.InitializeComponent();\n\n Items = new List\u003CListDetailItem\u003E\n {\n new ListDetailItem\n {\n Id = 0,\n Title = \u0022Item 1\u0022,\n Text = \u0022Lorem ipsum dolor sit amet...\u0022,\n DateCreated = new DateTime(2025, 6, 15, 9, 30, 0)\n },\n // Add more items...\n };\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"templates","controlId":"templates","controlName":"Templates","headerText":"Customize the look of a TextBox with a ControlTemplate","xaml":"\u003CGrid\u003E\n \u003CGrid.Resources\u003E\n \u003CControlTemplate x:Key=\u0022CustomTextBoxTemplate\u0022 TargetType=\u0022TextBox\u0022\u003E\n \u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022{TemplateBinding Header}\u0022 /\u003E\n \u003CBorder\n Background=\u0022{ThemeResource CardBackgroundFillColorDefaultBrush}\u0022\n BorderBrush=\u0022{TemplateBinding BorderBrush}\u0022\n BorderThickness=\u00222\u0022\n CornerRadius=\u00224\u0022\u003E\n \u003CStackPanel Margin=\u00224\u0022 Orientation=\u0022Horizontal\u0022 Spacing=\u00224\u0022\u003E\n \u003CSymbolIcon Symbol=\u0022Edit\u0022 /\u003E\n \u003CScrollViewer\n x:Name=\u0022ContentElement\u0022\n Padding=\u0022{TemplateBinding Padding}\u0022\n HorizontalScrollBarVisibility=\u0022{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}\u0022\n VerticalScrollBarVisibility=\u0022{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Border\u003E\n \u003C/StackPanel\u003E\n \u003C/ControlTemplate\u003E\n \u003C/Grid.Resources\u003E\n \u003CTextBox\n Padding=\u00228\u0022\n BorderBrush=\u0022{ThemeResource AccentFillColorDefaultBrush}\u0022\n Header=\u0022Enter text here\u0022\n Template=\u0022{StaticResource CustomTextBoxTemplate}\u0022 /\u003E\n\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"templates-customize-a-comboboxs-itemtemplate","controlId":"templates","controlName":"Templates","headerText":"Customize a ComboBox\u0027s ItemTemplate using a DataTemplate","xaml":"\u003CGrid\u003E\n \u003CGrid.Resources\u003E\n \u003CDataTemplate x:Key=\u0022CustomComboBoxItemTemplate\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022 Spacing=\u00228\u0022\u003E\n \u003CEllipse\n Fill=\u0022{ThemeResource AccentFillColorDefaultBrush}\u0022 /\u003E\n \u003CTextBlock Text=\u0022{Binding}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/DataTemplate\u003E\n \u003C/Grid.Resources\u003E\n \u003CComboBox Header=\u0022Options\u0022 ItemTemplate=\u0022{StaticResource CustomComboBoxItemTemplate}\u0022 SelectedIndex=\u00220\u0022\u003E\n \u003CComboBox.Items\u003E\n \u003Cx:String\u003EOption 1\u003C/x:String\u003E\n \u003Cx:String\u003EOption 2\u003C/x:String\u003E\n \u003Cx:String\u003EOption 3\u003C/x:String\u003E\n \u003C/ComboBox.Items\u003E\n \u003C/ComboBox\u003E\n\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"templates-customize-an-itemscontrol-with","controlId":"templates","controlName":"Templates","headerText":"Customize an ItemsControl with an ItemsPanelTemplate","xaml":"\u003CListView\u003E\n \u003CListView.ItemsPanel\u003E\n \u003CItemsPanelTemplate\u003E\n \u003CWrapGrid Orientation=\u0022Horizontal\u0022 /\u003E\n \u003C/ItemsPanelTemplate\u003E\n \u003C/ListView.ItemsPanel\u003E\n \n \u003CListViewItem\u003EItem 01\u003C/ListViewItem\u003E\n \u003CListViewItem\u003EItem 02\u003C/ListViewItem\u003E\n \u003C!-- ... --\u003E\n \u003CListViewItem\u003EItem 20\u003C/ListViewItem\u003E\n\u003C/ListView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"customusercontrols","controlId":"customusercontrols","controlName":"Custom \u0026 User Controls","headerText":"Counter Control with Increment/Decrement Mode","xaml":"\u003C!-- Generic.xaml --\u003E\n\u003CResourceDictionary \n xmlns=\u0022http://schemas.microsoft.com/winfx/2006/xaml/presentation\u0022\n xmlns:x=\u0022http://schemas.microsoft.com/winfx/2006/xaml\u0022\n xmlns:local=\u0022using:YourNamesapace\u0022\u003E\n\n \u003C!-- Style definition for CounterControl --\u003E\n \u003CStyle TargetType=\u0022local:CounterControl\u0022\u003E\n \u003CSetter Property=\u0022Template\u0022\u003E\n \u003CSetter.Value\u003E\n \u003C!-- ControlTemplate defines the structure of CounterControl --\u003E\n \u003CControlTemplate TargetType=\u0022local:CounterControl\u0022\u003E\n \u003CStackPanel HorizontalAlignment=\u0022Left\u0022 Spacing=\u00228\u0022\u003E\n \u003CTextBlock x:Name=\u0022CountText\u0022 FontSize=\u002220\u0022 Text=\u00220\u0022 HorizontalAlignment=\u0022Center\u0022 /\u003E\n \u003CButton x:Name=\u0022ActionButton\u0022 Content=\u0022Increase\u0022 HorizontalAlignment=\u0022Center\u0022 Width=\u0022100\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/ControlTemplate\u003E\n \u003C/Setter.Value\u003E\n \u003C/Setter\u003E\n \u003C/Style\u003E\n\u003C/ResourceDictionary\u003E\n\n\u003C!-- YourPage.xaml --\u003E\n\u003CPage ...\n xmlns:controls=\u0022using:YourNamesapace\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022 Spacing=\u00228\u0022\u003E\n \u003Ccontrols:CounterControl Mode=\u0022Increment\u0022 /\u003E\n \u003Ccontrols:CounterControl Mode=\u0022Decrement\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Page\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nnamespace YourNamespace;\n\n// Enum defining the counter mode: Increment or Decrement\npublic enum CounterMode\n{\n Increment,\n Decrement\n}\n\n// Custom control class that extends Control\npublic sealed class CounterControl : Control\n{\n // DependencyProperty for storing the count value\n public static readonly DependencyProperty CountProperty =\n DependencyProperty.Register(nameof(Count), typeof(int), typeof(CounterControl), new PropertyMetadata(0));\n\n // DependencyProperty for determining the counter mode (Increment or Decrement)\n public static readonly DependencyProperty ModeProperty =\n DependencyProperty.Register(nameof(Mode), typeof(CounterMode), typeof(CounterControl), new PropertyMetadata(CounterMode.Increment));\n\n // Constructor setting the default style key\n public CounterControl()\n {\n this.DefaultStyleKey = typeof(CounterControl);\n }\n\n // Property to get and set the count value\n public int Count\n {\n get =\u003E (int)GetValue(CountProperty);\n set =\u003E SetValue(CountProperty, value);\n }\n\n // Property to get and set the counter mode\n public CounterMode Mode\n {\n get =\u003E (CounterMode)GetValue(ModeProperty);\n set =\u003E SetValue(ModeProperty, value);\n }\n\n // Fields for UI elements retrieved from the control template\n private Button? ActionButton;\n private TextBlock? CountText;\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"customusercontrols-basic-custom-password-box","controlId":"customusercontrols","controlName":"Custom \u0026 User Controls","headerText":"Basic Custom Password Box with Validation","xaml":"\u003CResourceDictionary\n xmlns=\u0022http://schemas.microsoft.com/winfx/2006/xaml/presentation\u0022\n xmlns:x=\u0022http://schemas.microsoft.com/winfx/2006/xaml\u0022\n xmlns:local=\u0022using:YourNamespace\u0022\u003E\n \n \u003CStyle TargetType=\u0022local:ValidatedPasswordBox\u0022\u003E\n \u003CSetter Property=\u0022IsTabStop\u0022 Value=\u0022False\u0022 /\u003E\n \u003CSetter Property=\u0022Template\u0022\u003E\n \u003CSetter.Value\u003E\n \u003CControlTemplate TargetType=\u0022local:ValidatedPasswordBox\u0022\u003E\n \u003CStackPanel Spacing=\u00224\u0022\u003E\n \u003CPasswordBox x:Name=\u0022PasswordInput\u0022 /\u003E\n \u003CRichTextBlock x:Name=\u0022ValidationRichText\u0022\n AutomationProperties.LiveSetting=\u0022Polite\u0022\n TextWrapping=\u0022Wrap\u0022\n IsTextSelectionEnabled=\u0022False\u0022\n Visibility=\u0022Collapsed\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/ControlTemplate\u003E\n \u003C/Setter.Value\u003E\n \u003C/Setter\u003E\n \u003C/Style\u003E\n\u003C/ResourceDictionary\u003E\n\n\u003C!-- YourPage.xaml --\u003E\n\u003CPage ...\n xmlns:controls=\u0022using:YourNamesapace\u0022\u003E\n \u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003Ccontrols:ValidatedPasswordBox x:Name=\u0022PasswordInput\u0022 MinLength=\u00228\u0022 Width=\u0022240\u0022 HorizontalAlignment=\u0022Left\u0022\n Header=\u0022Password\u0022 PlaceholderText=\u0022Enter password...\u0022 /\u003E\n \u003CButton Content=\u0022Submit\u0022 IsEnabled=\u0022{x:Bind PasswordInput.IsValid, Mode=OneWay}\u0022\n Style=\u0022{StaticResource AccentButtonStyle}\u0022 Width=\u0022240\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Page\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation.Peers;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Documents;\nusing Microsoft.UI.Xaml.Media;\nusing System.Linq;\nusing Windows.UI;\n\nnamespace YourNamespace;\n\n// Custom control for a validated password box\npublic sealed partial class ValidatedPasswordBox : Control\n{\n // Register a dependency property for the Password value.\n // Note: The PropertyMetadata includes a callback (OnPasswordChanged) so that the UI updates\n // whenever the password or related properties change.\n public static readonly DependencyProperty PasswordProperty =\n DependencyProperty.Register(nameof(Password), typeof(string), typeof(ValidatedPasswordBox), new PropertyMetadata(string.Empty, OnPasswordChanged));\n\n public static readonly DependencyProperty IsValidProperty =\n DependencyProperty.Register(nameof(IsValid), typeof(bool), typeof(ValidatedPasswordBox), new PropertyMetadata(false));\n\n public static readonly DependencyProperty MinLengthProperty =\n DependencyProperty.Register(nameof(MinLength), typeof(int), typeof(ValidatedPasswordBox), new PropertyMetadata(8, OnPasswordChanged));\n\n public static readonly DependencyProperty HeaderProperty =\n DependencyProperty.Register(nameof(Header), typeof(string), typeof(ValidatedPasswordBox), new PropertyMetadata(string.Empty, OnPasswordChanged));\n\n public static readonly DependencyProperty PlaceholderTextProperty =\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"customusercontrols-temperature-converter-usercontrol-example","controlId":"customusercontrols","controlName":"Custom \u0026 User Controls","headerText":"Temperature Converter UserControl example","xaml":"\u003C!-- TemperatureConverterControl.xaml --\u003E\n\u003CUserControl ...\u003E\n \u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CTextBox Header=\u0022Enter Temperature in Celsius\u0022 x:Name=\u0022InputTextBox\u0022 Width=\u0022200\u0022 PlaceholderText=\u0022Celsius\u0022 /\u003E\n \u003CButton Content=\u0022Convert to Fahrenheit\u0022 Width=\u0022200\u0022 Click=\u0022Button_Click\u0022 /\u003E\n \u003CTextBlock x:Name=\u0022ResultTextBlock\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/UserControl\u003E\n\n\u003C!-- Yourpage.xaml --\u003E\n\u003CPage ...\n xmlns:local=\u0022using:YourNamesapce\u0022\u003E\n \u003CGrid\u003E\n \u003Clocal:TemperatureConverterControl /\u003E\n \u003C/Grid\u003E\n\u003C/Page\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nnamespace YourNamesapace;\n\npublic sealed partial class TemperatureConverterControl : UserControl\n{\n public TemperatureConverterControl()\n {\n this.InitializeComponent();\n }\n\n private void Button_Click(object sender, RoutedEventArgs e)\n {\n string input = InputTextBox.Text;\n double celsius = 0;\n\n bool isNumber = double.TryParse(input, out celsius);\n\n if (isNumber)\n {\n double fahrenheit = (celsius * 9 / 5) \u002B 32;\n ResultTextBlock.Text = \u0022Fahrenheit: \u0022 \u002B fahrenheit.ToString(\u0022F2\u0022) \u002B \u0022\u00B0F\u0022;\n }\n else\n {\n ResultTextBlock.Text = \u0022Invalid input!\u0022;\n }\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"typography","controlId":"typography","controlName":"Typography","headerText":"Type ramp","xaml":"\u003CTextBlock Text=\u0022Caption\u0022 Style=\u0022{StaticResource CaptionTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Body\u0022 Style=\u0022{StaticResource BodyTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Body Strong\u0022 Style=\u0022{StaticResource BodyStrongTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Body Large\u0022 Style=\u0022{StaticResource BodyLargeTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Body Strong Strong\u0022 Style=\u0022{StaticResource BodyLargeStrongTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Subtitle\u0022 Style=\u0022{StaticResource SubtitleTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Title\u0022 Style=\u0022{StaticResource TitleTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Title Large\u0022 Style=\u0022{StaticResource TitleLargeTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Display\u0022 Style=\u0022{StaticResource DisplayTextBlockStyle}\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appbarbutton","controlId":"appbarbutton","controlName":"AppBarButton","headerText":"An AppBarButton with a symbol icon.","xaml":"\u003CAppBarButton Icon=\u0022Like\u0022 Label=\u0022SymbolIcon\u0022 Click=\u0022AppBarButton_Click\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appbarbutton-an-appbarbutton-with-a","controlId":"appbarbutton","controlName":"AppBarButton","headerText":"An AppBarButton with a bitmap icon.","xaml":"\u003CAppBarButton Label=\u0022BitmapIcon\u0022 Click=\u0022AppBarButton_Click\u0022\u003E\n \u003CAppBarButton.Icon\u003E\n \u003CBitmapIcon UriSource=\u0022ms-appx:///Assets/YourImage.png\u0022/\u003E\n \u003C/AppBarButton.Icon\u003E\n\u003C/AppBarButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appbarbutton-an-appbarbutton-with-a-2","controlId":"appbarbutton","controlName":"AppBarButton","headerText":"An AppBarButton with a font icon.","xaml":"\u003CAppBarButton Label=\u0022FontIcon\u0022 Click=\u0022AppBarButton_Click\u0022\u003E\n \u003CAppBarButton.Icon\u003E\n \u003CFontIcon FontFamily=\u0022Candara\u0022 Glyph=\u0022\u0026#x03A3;\u0022/\u003E\n \u003C/AppBarButton.Icon\u003E\n\u003C/AppBarButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appbarbutton-an-appbarbutton-with-a-3","controlId":"appbarbutton","controlName":"AppBarButton","headerText":"An AppBarButton with a path icon.","xaml":"\u003CAppBarButton Label=\u0022PathIcon\u0022 Click=\u0022AppBarButton_Click\u0022\u003E\n \u003CAppBarButton.Content\u003E\n \u003CViewbox Stretch=\u0022Uniform\u0022\u003E\n \u003CPathIcon Data=\u0022F1 M 20,20L 24,10L 24,24L 5,24\u0022/\u003E\n \u003C/Viewbox\u003E\n \u003C/AppBarButton.Content\u003E\n\u003C/AppBarButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appbarbutton-an-appbarbutton-with-a-4","controlId":"appbarbutton","controlName":"AppBarButton","headerText":"An AppBarButton with a KeyboardAccelerator","xaml":"\u003CAppBarButton Icon=\u0022Save\u0022 Label=\u0022Save\u0022 Click=\u0022AppBarButton_Click\u0022\u003E\n \u003CAppBarButton.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Modifiers=\u0022Control\u0022 Key=\u0022S\u0022/\u003E\n \u003CAppBarButton.KeyboardAccelerators/\u003E\n\u003C/AppBarButton\u003E\u003C/AppBarButton.KeyboardAccelerators\u003E\u003C/AppBarButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appbarbutton-an-appbarbutton-that-opens","controlId":"appbarbutton","controlName":"AppBarButton","headerText":"An AppBarButton that opens a Flyout containing an input control.","xaml":"\u003CAppBarButton AllowFocusOnInteraction=\u0022True\u0022 Icon=\u0022Edit\u0022 Label=\u0022Edit\u0022\u003E\n \u003CAppBarButton.Flyout\u003E\n \u003CFlyout/\u003E\n \u003CTextBox MinWidth=\u0022240\u0022 PlaceholderText=\u0022Input text here\u0022/\u003E\n \u003CFlyout/\u003E\n \u003CAppBarButton.Flyout\u003E\n\u003C/AppBarButton\u003E\u003C/AppBarButton.Flyout\u003E\u003C/AppBarButton.Flyout\u003E\u003C/AppBarButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appbarseparator","controlId":"appbarseparator","controlName":"AppBarSeparator","headerText":"AppBarButtons separated by AppBarSeparators.","xaml":"\u003CCommandBar\u003E\n \u003CCommandBar.PrimaryCommands\u003E\n \u003CAppBarButton Icon=\u0022AttachCamera\u0022 Label=\u0022Attach Camera\u0022/\u003E\n \u003CAppBarSeparator /\u003E\n \u003CAppBarButton Icon=\u0022Like\u0022 Label=\u0022Like\u0022/\u003E\n \u003CAppBarButton Icon=\u0022Dislike\u0022 Label=\u0022Dislike\u0022/\u003E\n \u003CAppBarSeparator /\u003E\n \u003CAppBarButton Icon=\u0022Orientation\u0022 Label=\u0022Orientation\u0022/\u003E\n \u003C/CommandBar.PrimaryCommands\u003E\n\u003C/CommandBar\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appbartogglebutton","controlId":"appbartogglebutton","controlName":"AppBarToggleButton","headerText":"An AppBarToggleButton with a symbol icon.","xaml":"\u003CAppBarToggleButton Icon=\u0022Shuffle\u0022 Label=\u0022SymbolIcon\u0022 Click=\u0022AppBarButton_Click\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appbartogglebutton-an-appbartogglebutton-with-a","controlId":"appbartogglebutton","controlName":"AppBarToggleButton","headerText":"An AppBarToggleButton with a bitmap icon.","xaml":"\u003CAppBarToggleButton Label=\u0022BitmapIcon\u0022 Click=\u0022AppBarButton_Click\u0022\u003E\n \u003CAppBarToggleButton.Icon\u003E\n \u003CBitmapIcon UriSource=\u0022ms-appx:///Assets/YourImage.png\u0022/\u003E\n \u003C/AppBarToggleButton.Icon\u003E\n\u003C/AppBarToggleButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appbartogglebutton-an-appbartogglebutton-with-a-2","controlId":"appbartogglebutton","controlName":"AppBarToggleButton","headerText":"An AppBarToggleButton with a font icon.","xaml":"\u003CAppBarToggleButton Label=\u0022FontIcon\u0022 Click=\u0022AppBarButton_Click\u0022\u003E\n \u003CAppBarToggleButton.Icon\u003E\n \u003CFontIcon FontFamily=\u0022Candara\u0022 Glyph=\u0022\u0026#x03A3;\u0022/\u003E\n \u003C/AppBarToggleButton.Icon\u003E\n\u003C/AppBarToggleButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appbartogglebutton-a-threestate-appbartogglebutton-with","controlId":"appbartogglebutton","controlName":"AppBarToggleButton","headerText":"A three-state AppBarToggleButton with a path icon.","xaml":"\u003CAppBarToggleButton Label=\u0022PathIcon\u0022 Click=\u0022AppBarButton_Click\u0022 IsThreeState=\u0022True\u0022\u003E\n \u003CAppBarToggleButton.Icon\u003E\n \u003CPathIcon Data=\u0022F1 M 20,20L 24,10L 24,24L 5,24\u0022/\u003E\n \u003C/AppBarToggleButton.Icon\u003E\n\u003C/AppBarToggleButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"commandbar","controlId":"commandbar","controlName":"CommandBar","headerText":"A command bar with labels on the side free floating in a page","xaml":"\u003CCommandBar Background=\u0022Transparent\u0022 IsOpen=\u0022True\u0022 DefaultLabelPosition=\u0022Right\u0022...\u003E\n \u003CAppBarButton Icon=\u0022Add\u0022 Label=\u0022Add\u0022/\u003E\n \u003CAppBarButton Icon=\u0022Edit\u0022 Label=\u0022Edit\u0022/\u003E\n \u003CAppBarButton Icon=\u0022Share\u0022 Label=\u0022Share\u0022/\u003E\n \u003CCommandBar.SecondaryCommands\u003E\n \u003CAppBarButton Icon=\u0022Setting\u0022 Label=\u0022Settings\u0022\u003E\n \u003CAppBarButton.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Modifiers=\u0022Control\u0022 Key=\u0022I\u0022 /\u003E\n \u003C/AppBarButton.KeyboardAccelerators\u003E\n \u003C/AppBarButton\u003E...\n \u003C/CommandBar.SecondaryCommands\u003E\n\u003C/CommandBar\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"commandbarflyout","controlId":"commandbarflyout","controlName":"CommandBarFlyout","headerText":"CommandBarFlyout for commands on an in-app object","xaml":"\u003CPage.Resources\u003E\n \u003CCommandBarFlyout Placement=\u0022Right\u0022 x:Name=\u0022CommandBarFlyout1\u0022\u003E\n \u003CAppBarButton Label=\u0022Share\u0022 Icon=\u0022Share\u0022 ToolTipService.ToolTip=\u0022Share\u0022 Click=\u0022OnElementClicked\u0022 /\u003E\n \u003CAppBarButton Label=\u0022Save\u0022 Icon=\u0022Save\u0022 ToolTipService.ToolTip=\u0022Save\u0022 Click=\u0022OnElementClicked\u0022 /\u003E\n \u003CAppBarButton Label=\u0022Delete\u0022 Icon=\u0022Delete\u0022 ToolTipService.ToolTip=\u0022Delete\u0022 Click=\u0022OnElementClicked\u0022 /\u003E\n \u003CCommandBarFlyout.SecondaryCommands\u003E\n \u003CAppBarButton x:Name=\u0022ResizeButton1\u0022 Label=\u0022Resize\u0022 Click=\u0022OnElementClicked\u0022 /\u003E\n \u003CAppBarButton x:Name=\u0022MoveButton1\u0022 Label=\u0022Move\u0022 Click=\u0022OnElementClicked\u0022 /\u003E\n \u003C/CommandBarFlyout.SecondaryCommands\u003E\n \u003C/CommandBarFlyout\u003E\n\u003C/Page.Resources\u003E\n\n\u003CButton x:Name=\u0022myImageButton\u0022 AutomationProperties.Name=\u0022mountain\u0022 Padding=\u00220\u0022\n Click=\u0022MyImageButton_Click\u0022 ContextRequested=\u0022MyImageButton_ContextRequested\u0022 \u003E\n \u003CImage x:Name=\u0022Image1\u0022 Height=\u0022300\u0022 Source=\u0022/Assets/SampleMedia/rainier.jpg\u0022/\u003E\n\u003C/Button\u003E","csharp":"private void ShowMenu(bool isTransient)\n{\n FlyoutShowOptions myOption = new FlyoutShowOptions();\n myOption.ShowMode = isTransient ? FlyoutShowMode.Transient : FlyoutShowMode.Standard;\n CommandBarFlyout1.ShowAt(Image1, myOption);\n}\n\nprivate void MyImageButton_ContextRequested(Microsoft.UI.Xaml.UIElement sender, ContextRequestedEventArgs args)\n{\n // Show a context menu in standard mode\n // Focus will move to the menu\n ShowMenu(false);\n}\n\nprivate void MyImageButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n{\n // Show a context menu in transient mode\n // Focus will not move to the menu\n ShowMenu(true);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"menubar","controlId":"menubar","controlName":"MenuBar","headerText":"A simple MenuBar","xaml":"\u003CMenuBar\u003E\n \u003CMenuBarItem Title=\u0022File\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022New\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Open...\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Save\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Exit\u0022/\u003E\n \u003C/MenuBarItem\u003E\n\n \u003CMenuBarItem Title=\u0022Edit\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Undo\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Cut\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Copy\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Paste\u0022/\u003E\n \u003C/MenuBarItem\u003E\n\n \u003CMenuBarItem Title=\u0022Help\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022About\u0022/\u003E\n \u003C/MenuBarItem\u003E\n\u003C/MenuBar\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"menubar-menubar-with-submenus-separators","controlId":"menubar","controlName":"MenuBar","headerText":"MenuBar with submenus, separators, and radio items","xaml":"\u003CMenuBar\u003E\n \u003CMenuBarItem Title=\u0022File\u0022\u003E\n \u003CMenuFlyoutSubItem Text=\u0022New\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Plain Text Document\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Rich Text Document\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Other Formats...\u0022/\u003E\n \u003C/MenuFlyoutSubItem\u003E\n \u003CMenuFlyoutItem Text=\u0022Open...\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Save\u0022/\u003E\n \u003CMenuFlyoutSeparator /\u003E\n \u003CMenuFlyoutItem Text=\u0022Exit\u0022/\u003E\n \u003C/MenuBarItem\u003E\n\n \u003CMenuBarItem Title=\u0022Edit\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Undo\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Cut\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Copy\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Paste\u0022/\u003E\n \u003C/MenuBarItem\u003E\n\n \u003CMenuBarItem Title=\u0022View\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Output\u0022/\u003E\n \u003CMenuFlyoutSeparator/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Landscape\u0022 GroupName=\u0022OrientationGroup\u0022/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Portrait\u0022 GroupName=\u0022OrientationGroup\u0022 IsChecked=\u0022True\u0022/\u003E\n \u003CMenuFlyoutSeparator/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Small icons\u0022 GroupName=\u0022SizeGroup\u0022/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Medium icons\u0022 IsChecked=\u0022True\u0022 GroupName=\u0022SizeGroup\u0022/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Large icons\u0022 GroupName=\u0022SizeGroup\u0022/\u003E\n \u003C/MenuBarItem\u003E\n \n \u003CMenuBarItem Title=\u0022Help\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022About\u0022/\u003E\n \u003C/MenuBarItem\u003E\n\u003C/MenuBar\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"menuflyout","controlId":"menuflyout","controlName":"MenuFlyout","headerText":"An AppBarButton with a MenuFlyout.","xaml":"\u003CAppBarButton Icon=\u0022Sort\u0022 IsCompact=\u0022True\u0022 ToolTipService.ToolTip=\u0022Sort\u0022 AutomationProperties.Name=\u0022Sort\u0022\u003E\n \u003CAppBarButton.Flyout\u003E\n \u003CMenuFlyout\u003E\n \u003CMenuFlyoutItem Text=\u0022By rating\u0022 Click=\u0022MenuFlyoutItem_Click\u0022 Tag=\u0022rating\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022By match\u0022 Click=\u0022MenuFlyoutItem_Click\u0022 Tag=\u0022match\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022By distance\u0022 Click=\u0022MenuFlyoutItem_Click\u0022 Tag=\u0022distance\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/AppBarButton.Flyout\u003E\n\u003C/AppBarButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"menuflyout-a-menuflyout-with-togglemenuflyoutitems","controlId":"menuflyout","controlName":"MenuFlyout","headerText":"A MenuFlyout with ToggleMenuFlyoutItems and MenuFlyoutSeparator.","xaml":"\u003CButton Content=\u0022Options\u0022\u003E\n \u003CButton.Flyout\u003E\n \u003CMenuFlyout\u003E\n \u003CMenuFlyoutItem Text=\u0022Reset\u0022/\u003E\n \u003CMenuFlyoutSeparator/\u003E\n \u003CToggleMenuFlyoutItem Text=\u0022Repeat\u0022 IsChecked=\u0022...\u0022/\u003E\n \u003CToggleMenuFlyoutItem Text=\u0022Shuffle\u0022 IsChecked=\u0022...\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/Button.Flyout\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"menuflyout-a-menuflyout-with-cascading","controlId":"menuflyout","controlName":"MenuFlyout","headerText":"A MenuFlyout with cascading menus.","xaml":"\u003CButton Content=\u0022File Options\u0022\u003E\n \u003CButton.Flyout\u003E\n \u003CMenuFlyout\u003E\n \u003CMenuFlyoutItem Text=\u0022Open\u0022/\u003E\n \u003CMenuFlyoutSubItem Text=\u0022Send to\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Bluetooth\u0022 /\u003E\n \u003CMenuFlyoutItem Text=\u0022Desktop (shortcut)\u0022 /\u003E\n \u003CMenuFlyoutSubItem Text=\u0022Compressed file\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Compress and email\u0022 /\u003E\n \u003CMenuFlyoutItem Text=\u0022Compress to .7z\u0022 /\u003E\n \u003CMenuFlyoutItem Text=\u0022Compress to .zip\u0022 /\u003E\n \u003C/MenuFlyoutSubItem\u003E\n \u003C/MenuFlyoutSubItem\u003E\n \u003C/MenuFlyout\u003E\n \u003C/Button.Flyout\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"menuflyout-a-menuflyout-with-icons","controlId":"menuflyout","controlName":"MenuFlyout","headerText":"A MenuFlyout with icons.","xaml":"\u003CButton Content=\u0022Edit Options\u0022\u003E\n \u003CButton.Flyout\u003E\n \u003CMenuFlyout\u003E\n \u003CMenuFlyoutItem Text=\u0022Share\u0022\u003E\n \u003CMenuFlyoutItem.Icon\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE72D;\u0022/\u003E\n \u003C/MenuFlyoutItem.Icon\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003CMenuFlyoutItem Text=\u0022Copy\u0022 Icon=\u0022Copy\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Delete\u0022 Icon=\u0022Delete\u0022/\u003E\n \u003CMenuFlyoutSeparator/\u003E\n \u003CMenuFlyoutItem Text=\u0022Rename\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Select\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/Button.Flyout\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"menuflyout-a-menuflyout-with-icons-2","controlId":"menuflyout","controlName":"MenuFlyout","headerText":"A MenuFlyout with icons and Keyboard Accelerators.","xaml":"\u003CButton Content=\u0022Edit Options\u0022\u003E\n \u003CButton.Flyout\u003E\n \u003CMenuFlyout\u003E\n \u003CMenuFlyoutItem Text=\u0022Share\u0022\u003E\n \u003CMenuFlyoutItem.Icon\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE72D;\u0022/\u003E\n \u003C/MenuFlyoutItem.Icon\u003E\n \u003CMenuFlyoutItem.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Key=\u0022S\u0022 Modifiers=\u0022Control\u0022/\u003E\n \u003C/MenuFlyoutItem.KeyboardAccelerators\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003CMenuFlyoutItem Text=\u0022Copy\u0022 Icon=\u0022Copy\u0022\u003E\n \u003CMenuFlyoutItem.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Key=\u0022C\u0022 Modifiers=\u0022Control\u0022/\u003E\n \u003C/MenuFlyoutItem.KeyboardAccelerators\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003CMenuFlyoutItem Text=\u0022Delete\u0022 Icon=\u0022Delete\u0022\u003E\n \u003CMenuFlyoutItem.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Key=\u0022Delete\u0022 /\u003E\n \u003C/MenuFlyoutItem.KeyboardAccelerators\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003CMenuFlyoutSeparator/\u003E\n \u003CMenuFlyoutItem Text=\u0022Rename\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Select\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/Button.Flyout\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"menuflyout-a-menuflyout-with-radiomenuflyoutitems","controlId":"menuflyout","controlName":"MenuFlyout","headerText":"A MenuFlyout with RadioMenuFlyoutItems","xaml":"\u003CButton Content=\u0022Options\u0022\u003E\n \u003CButton.Flyout\u003E\n \u003CMenuFlyout\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Landscape\u0022 GroupName=\u0022OrientationGroup\u0022/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Portrait\u0022 GroupName=\u0022OrientationGroup\u0022 IsChecked=\u0022True\u0022/\u003E\n \u003CMenuFlyoutSeparator/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Small icons\u0022 GroupName=\u0022SizeGroup\u0022/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Medium icons\u0022 IsChecked=\u0022True\u0022 GroupName=\u0022SizeGroup\u0022/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Large icons\u0022 GroupName=\u0022SizeGroup\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/Button.Flyout\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"swipecontrol","controlId":"swipecontrol","controlName":"SwipeControl","headerText":"Swipe right to reveal actions","xaml":"\u003CBorder\u003E\n \u003CBorder.Resources\u003E\n \u003CFontIconSource x:Key=\u0022AcceptIcon\u0022 Glyph=\u0022\u0026#xE8FB;\u0022/\u003E\n \u003CFontIconSource x:Key=\u0022FlagIcon\u0022 Glyph=\u0022\u0026#xE7C1;\u0022/\u003E\n\n \u003CSwipeItems x:Key=\u0022left\u0022 Mode=\u0022Reveal\u0022\u003E\n \u003CSwipeItem Text=\u0022Accept\u0022 IconSource=\u0022{StaticResource AcceptIcon}\u0022 Invoked=\u0022Accept_ItemInvoked\u0022/\u003E\n \u003CSwipeItem Text=\u0022Flag\u0022 IconSource=\u0022{StaticResource FlagIcon}\u0022 Invoked=\u0022Flag_ItemInvoked\u0022/\u003E\n \u003C/SwipeItems\u003E\n \u003C/Border.Resources\u003E\n \u003CSwipeControl BorderThickness=\u00221\u0022\n LeftItems=\u0022{StaticResource left}\u0022 BorderBrush=\u0022{ThemeResource ButtonBackground}\u0022\n \u003CTextBlock Text=\u0022Swipe Right\u0022 Margin=\u002212\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003C/SwipeControl\u003E\n\u003C/Border\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"swipecontrol-swipe-left-to-invoke","controlId":"swipecontrol","controlName":"SwipeControl","headerText":"Swipe left to invoke an execute","xaml":"\u003CBorder\u003E\n \u003CBorder.Resources\u003E\n \u003CFontIconSource x:Key=\u0022DeleteIcon\u0022 Glyph=\u0022\u0026#xE74D;\u0022/\u003E\n \u003CSwipeItems x:Key=\u0022right\u0022 Mode=\u0022Execute\u0022\u003E\n \u003CSwipeItem Text=\u0022Archive\u0022 IconSource=\u0022{StaticResource ArchiveIcon}\u0022\n BehaviorOnInvoked=\u0022Close\u0022 Invoked=\u0022DeleteOne_ItemInvoked\u0022/\u003E\n \u003C/SwipeItems\u003E\n \u003C/Border.Resources\u003E\n \u003CSwipeControl BorderThickness=\u00221\u0022 BorderBrush=\u0022{ThemeResource ButtonBackground}\u0022\n RightItems=\u0022{StaticResource right}\u0022\n \u003CTextBlock Text=\u0022Swipe Left\u0022 Margin=\u002212\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003C/SwipeControl\u003E\n\u003C/Border\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"swipecontrol-custom-swipe-in-a","controlId":"swipecontrol","controlName":"SwipeControl","headerText":"Custom Swipe in a ListView","xaml":"\u003CListView x:Name=\u0022lv\u0022 Width=\u0022400\u0022 Height=\u0022300\u0022 Margin=\u002212\u0022\u003E\n \u003CListView.Resources\u003E\n \u003CFontIconSource x:Key=\u0022ReplyAllIcon\u0022 Glyph=\u0022\u0026#xE8C2;\u0022/\u003E\n \u003CFontIconSource x:Key=\u0022ReadIcon\u0022 Glyph=\u0022\u0026#xE8C3;\u0022/\u003E\n \u003CFontIconSource x:Key=\u0022DeleteIcon\u0022 Glyph=\u0022\u0026#xE74D;\u0022/\u003E\n\n \u003CSwipeItems x:Key=\u0022left\u0022 Mode=\u0022Reveal\u0022\u003E\n \u003CSwipeItem Text=\u0022Reply All\u0022 IconSource=\u0022{StaticResource ReplyAllIcon}\u0022\n Background=\u0022#FF3e6fa7\u0022 Foreground=\u0022White\u0022/\u003E\n \u003CSwipeItem Text=\u0022Open\u0022 IconSource=\u0022{StaticResource ReadIcon}\u0022\n Background=\u0022#FFff9501\u0022 Foreground=\u0022White\u0022/\u003E\n \u003C/SwipeItems\u003E\n \u003CSwipeItems x:Key=\u0022right\u0022 Mode=\u0022Execute\u0022\u003E\n \u003CSwipeItem Text=\u0022Delete\u0022 IconSource=\u0022{StaticResource DeleteIcon}\u0022\n Background=\u0022#FFF4B183\u0022 Invoked=\u0022DeleteItem_ItemInvoked\u0022/\u003E\n \u003C/SwipeItems\u003E\n \u003C/ListView.Resources\u003E\n\n \u003CListView.ItemTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CSwipeControl BorderThickness=\u00220,1,0,0\u0022 BorderBrush=\u0022{ThemeResource ButtonBackground}\u0022 Height=\u002268\u0022\n RightItems=\u0022{StaticResource right}\u0022\u003E\n \u003CTextBlock Text=\u0022{Binding}\u0022 FontSize=\u002224\u0022 Margin=\u002212\u0022\n HorizontalAlignment=\u0022Stretch\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003C/SwipeControl\u003E\n \u003C/DataTemplate\u003E\n \u003C/ListView.ItemTemplate\u003E\n\u003C/ListView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"swipecontrol-gradient-background","controlId":"swipecontrol","controlName":"SwipeControl","headerText":"Gradient Background","xaml":"\u003CBorder\u003E\n \u003CBorder.Resources\u003E\n \u003CFontIconSource x:Key=\u0022LockIcon\u0022 Glyph=\u0022\u0026#xE72E;\u0022/\u003E\n \u003CLinearGradientBrush x:Key=\u0022PurpleGradient\u0022 StartPoint=\u00220,0.5\u0022 EndPoint=\u00221,0.5\u0022\u003E\n \u003CGradientStop Color=\u0022#ff8990f9\u0022 Offset=\u00220.0\u0022/\u003E\n \u003CGradientStop Color=\u0022#ff5b66fb\u0022 Offset=\u00220.5\u0022/\u003E\n \u003CGradientStop Color=\u0022#ff5c1df4\u0022 Offset=\u00221.0\u0022/\u003E\n \u003CLinearGradientBrush/\u003E\n \u003CSwipeItems x:Key=\u0022right\u0022 Mode=\u0022Execute\u0022\u003E\n \u003CSwipeItem Text=\u0022Lock\u0022 Background=\u0022{StaticResource PurpleGradient}\u0022 \n BehaviorOnInvoked=\u0022Close\u0022 IconSource=\u0022{StaticResource LockIcon}\u0022/\u003E\n \u003C/SwipeItems\u003E\n \u003C/Border.Resources\u003E\n \u003CSwipeControl BorderThickness=\u00221\u0022 BorderBrush=\u0022{ThemeResource ButtonBackground}\u0022\n RightItems=\u0022{StaticResource right}\u0022\n \u003CTextBlock Text=\u0022Swipe Left\u0022 Margin=\u002212\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003C/SwipeControl\u003E\n\u003C/Border\u003E\u003C/LinearGradientBrush\u003E\u003C/Border.Resources\u003E\u003C/Border\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"swipecontrol-custom-icons","controlId":"swipecontrol","controlName":"SwipeControl","headerText":"Custom icons","xaml":"\u003CBorder\u003E\n \u003CBorder.Resources\u003E\n \u003CSwipeItems x:Key=\u0022left\u0022 Mode=\u0022Reveal\u0022\u003E\n \u003CSwipeItem Text=\u0022Coffee\u0022\u003E\n \u003CSwipeItem.IconSource\u003E\n \u003CBitmapIconSource UriSource=\u0022ms-appx:///Assets/YourImage.png\u0022/\u003E\n \u003CSwipeItem.IconSource/\u003E\n \u003CSwipeItem/\u003E\n \u003C/SwipeItems\u003E\n \u003C/Border.Resources\u003E\n \u003CSwipeControl BorderThickness=\u00221\u0022\n LeftItems=\u0022{StaticResource left}\u0022 BorderBrush=\u0022{ThemeResource ButtonBackground}\u0022\n \u003CTextBlock Text=\u0022Swipe Right\u0022 Margin=\u002212\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003C/SwipeControl\u003E\n\u003C/Border\u003E\u003C/SwipeItem.IconSource\u003E\u003C/SwipeItem\u003E\u003C/SwipeItems\u003E\u003C/Border.Resources\u003E\u003C/Border\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"standarduicommand","controlId":"standarduicommand","controlName":"StandardUICommand","headerText":"Exposing a command in multiple controls using StandardUICommand","xaml":"\u003CSwipeItem x:Name=\u0022DeleteSwipeItem\u0022 Background=\u0022Red\u0022 Command=\u0022{x:Bind Command}\u0022 CommandParameter=\u0022{x:Bind Text}\u0022 /\u003E\n\n\u003CAppBarButton x:Name=\u0022HoverButton\u0022 IsTabStop=\u0022False\u0022 HorizontalAlignment=\u0022Right\u0022 Visibility=\u0022Collapsed\u0022 \n Command=\u0022{x:Bind Command}\u0022 CommandParameter=\u0022{x:Bind Text}\u0022 /\u003E","csharp":"private void ControlExample_Loaded(object sender, RoutedEventArgs e)\n{\n var deleteCommand = new StandardUICommand(StandardUICommandKind.Delete);\n deleteCommand.ExecuteRequested \u002B= DeleteCommand_ExecuteRequested;\n\n DeleteFlyoutItem.Command = deleteCommand;\n\n for (var i = 0; i \u003C 15; i\u002B\u002B)\n {\n collection.Add(new ListItemData { Text = \u0022List item \u0022 \u002B i.ToString(), Command = deleteCommand });\n }\n}\n\nprivate void ListViewRight_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)\n{\n MenuFlyout flyout = new MenuFlyout();\n ListItemData data = (ListItemData)args.Item;\n MenuFlyoutItem item = new MenuFlyoutItem() { Command = data.Command};\n flyout.Items.Add(item);\n args.ItemContainer.ContextFlyout = flyout;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"xamluicommand","controlId":"xamluicommand","controlName":"XamlUICommand","headerText":"Creating a reusable command with XamlUICommand","xaml":"\u003CPage.Resources\u003E\n \u003CXamlUICommand x:Name=\u0022CustomXamlUICommand\u0022 ExecuteRequested=\u0022CustomXamlUICommand_ExecuteRequested\u0022 \n\tDescription=\u0022This is a custom command\u0022 Label=\u0022Custom Command\u0022\u003E\n \u003CXamlUICommand.IconSource\u003E\n \u003CSymbolIconSource Symbol=\u0022Favorite\u0022 /\u003E\n \u003C/XamlUICommand.IconSource\u003E\n \u003CXamlUICommand.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Key=\u0022D\u0022 Modifiers=\u0022Control\u0022/\u003E\n \u003C/XamlUICommand.KeyboardAccelerators\u003E\n \u003C/XamlUICommand\u003E\n\u003C/Page.Resources\u003E\n\n\u003CRelativePanel Grid.Row=\u00221\u0022\u003E\n \u003CAppBarButton x:Name=\u0022CustomButton\u0022 Command=\u0022{StaticResource CustomXamlUICommand}\u0022/\u003E\n \u003CTextBlock x:Name=\u0022XamlUICommandOutput\u0022 Margin=\u00228,0,0,0\u0022 FontFamily=\u0022Global User Interface\u0022 \n RelativePanel.RightOf=\u0022CustomButton\u0022 RelativePanel.AlignVerticalCenterWith=\u0022CustomButton\u0022 /\u003E\n\u003C/RelativePanel\u003E","csharp":"private void CustomXamlUICommand_ExecuteRequested(XamlUICommand sender, ExecuteRequestedEventArgs args)\n{\n XamlUICommandOutput.Text = \u0022You fired the custom command\u0022;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"flipview","controlId":"flipview","controlName":"FlipView","headerText":"A simple FlipView with items declared inline.","xaml":"\u003CFlipView MaxWidth=\u0022400\u0022 Height=\u0022270\u0022\n AutomationProperties.AutomationControlType=\u0022List\u0022\n AutomationProperties.LocalizedControlType=\u0022list\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Cliff\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Grapes\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Rainier\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Sunset\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Valley\u0022/\u003E\n\u003C/FlipView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"flipview-a-flipview-showing-bound","controlId":"flipview","controlName":"FlipView","headerText":"A FlipView showing bound data with a data template.","xaml":"\u003CFlipView MaxWidth=\u0022400\u0022 Height=\u0022180\u0022 BorderBrush=\u0022Black\u0022 BorderThickness=\u00221\u0022\n AutomationProperties.AutomationControlType=\u0022List\u0022\n AutomationProperties.LocalizedControlType=\u0022list\u0022\n ItemsSource=\u0022{x:Bind Items, Mode=OneWay}\u0022\u003E\n \u003CFlipView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022data:ControlInfoDataItem\u0022\u003E\n \u003CGrid\u003E\n \u003CImage Height=\u0022120\u0022 Source=\u0022{x:Bind ImagePath}\u0022 Stretch=\u0022Uniform\u0022 VerticalAlignment=\u0022Top\u0022/\u003E\n \u003CBorder Background=\u0022#A5FFFFFF\u0022 Height=\u002260\u0022 VerticalAlignment=\u0022Bottom\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022 Foreground=\u0022#CCFFFFFF\u0022 Padding=\u002212,12\u0022 Style=\u0022{StaticResource TitleTextBlockStyle}\u0022 HorizontalAlignment=\u0022Center\u0022/\u003E\n \u003C/Border\u003E\n \u003C/Grid\u003E\n \u003C/DataTemplate\u003E\n \u003C/FlipView.ItemTemplate\u003E\n\u003C/FlipView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"flipview-vertical-flipview","controlId":"flipview","controlName":"FlipView","headerText":"Vertical FlipView","xaml":"\u003CFlipView MaxWidth=\u0022400\u0022 Height=\u0022270\u0022\n AutomationProperties.AutomationControlType=\u0022List\u0022\n AutomationProperties.LocalizedControlType=\u0022list\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Cliff\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Grapes\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Rainier\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Sunset\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Valley\u0022/\u003E\n \u003CFlipView.ItemsPanel \u003E\n \u003CItemsPanelTemplate\u003E\n \u003CVirtualizingStackPanel Orientation=\u0022Vertical\u0022/\u003E\n \u003C/ItemsPanelTemplate\u003E\n \u003C/FlipView.ItemsPanel\u003E\n\u003CFlipView\u003E\u003C/FlipView\u003E\u003C/FlipView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"gridview","controlId":"gridview","controlName":"GridView","headerText":"Basic GridView with Simple DataTemplate","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003CGridView\n x:Name=\u0022BasicGridView\u0022\n ItemTemplate=\u0022{StaticResource ImageTemplate}\u0022\n IsItemClickEnabled=\u0022True\u0022\n ItemClick=\u0022BasicGridView_ItemClick\u0022\n SelectionMode=\u0022Single\u0022/\u003E\n \n\u003CDataTemplate x:Key=\u0022ImageTemplate\u0022 x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CImage Stretch=\u0022UniformToFill\u0022 Source=\u0022{x:Bind ImageLocation}\u0022 Width=\u0022190\u0022 Height=\u0022130\u0022/\u003E\n\u003C/DataTemplate\u003E\n \n\u003C!-- In this example, the GridView\u0027s ItemTemplate property is bound to a data template (shown above)\ncalled ImageTemplate, defined in the Page.Resources section of the XAML file. \n \nThe data template is defined to display an object of type CustomDataObject, which is created from a class\nthat\u0027s defined in the code-behind (see code below).\n \nThe ItemsSource for the GridView is an ObservableCollection\u003CCustomDataObject\u003E called Items and\nis defined in the C# code-behind. It is bound to the GridView\u0027s ItemsSource property in the code-behind.\n \nThe IsItemClickEnabled property allows items to be clicked, and a function called BasicGridView_ItemClick \nis called when an item is clicked. This function is defined in the C# code-behind and simply outputs \nthe title of the selected item into a TextBlock below the GridView. --\u003E\u003C/CustomDataObject\u003E","csharp":"// C# Code\n\n// CustomDataObject class definition: \npublic class CustomDataObject\n{\n public string Title { get; set; } = string.Empty;\n public string ImageLocation { get; set; } = string.Empty;\n public string Views { get; set; } = string.Empty;\n public string Likes { get; set; } = string.Empty;\n public string Description { get; set; } = string.Empty;\n\n public CustomDataObject()\n {\n }\n\n // ... Methods ...\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"gridview-gridview-with-layout-customization","controlId":"gridview","controlName":"GridView","headerText":"GridView with Layout Customization","xaml":"\u003C!-- The GridView used for this example is shown below. Setter properties are used to customize \nsome parts of the GridViewItems (i.e. the margins). --\u003E\n\u003CGridView\n x:Name=\u0022StyledGrid\u0022\n ItemTemplate=\u0022{StaticResource ImageOverlayTemplate}\u0022\u003E\n\n \u003CGridView.ItemContainerStyle\u003E\n \u003CStyle TargetType=\u0022GridViewItem\u0022 BasedOn=\u0022{StaticResource DefaultGridViewItemStyle}\u0022\u003E\n \u003CSetter Property=\u0022Margin\u0022 Value=\u0022..., ..., ..., ...\u0022/\u003E\n \u003C/Style\u003E\n \u003C/GridView.ItemContainerStyle\u003E\n \n \u003C!-- An extra property also needs to be added to the GridView\u0027s ItemsWrapGrid. \n The following sets the maximum # of items to show before wrapping.--\u003E\n \u003CGridView.ItemsPanel\u003E\n \u003CItemsPanelTemplate\u003E\n \u003CItemsWrapGrid x:Name=\u0022MaxItemsWrapGrid\u0022 \n MaximumRowsOrColumns=\u0022...\u0022 \n Orientation=\u0022Horizontal\u0022/\u003E\n \u003C/ItemsPanelTemplate\u003E\n \u003C/GridView.ItemsPanel\u003E \n\u003C/GridView\u003E \n \n\u003C!-- In this example, the GridView\u0027s ItemTemplate property is bound to a data template (shown below)\ncalled ImageOverlayTemplate, defined in the Page.Resources section of the XAML file. \n \nThe data template is defined to display a CustomDataObject object (same type as in above sample). --\u003E\n \n\u003CDataTemplate x:Name=\u0022ImageOverlayTemplate\u0022 x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CGrid Width=\u0022100\u0022\u003E\n \u003CImage Source=\u0022{x:Bind ImageLocation}\u0022 Stretch=\u0022UniformToFill\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Vertical\u0022 Height=\u002240\u0022 VerticalAlignment=\u0022Bottom\u0022 Padding=\u00225,1,5,1\u0022 \n Background=\u0022LightGray\u0022 Opacity=\u0022.75\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Likes}\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 \n Foreground=\u0022{ThemeResource SystemControlPageTextBaseMediumBrush}\u0022/\u003E\u003C/StackPanel\u003E\u003C/StackPanel\u003E\u003C/Grid\u003E\u003C/DataTemplate\u003E\n\u003C!-- NOTE: XAML truncated \u2014 additional sibling elements omitted --\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"gridview-content-inside-of-a","controlId":"gridview","controlName":"GridView","headerText":"Content inside of a GridView.","xaml":"\u003C!-- The GridView used for this sample is shown below, with all of the necessary added properties. --\u003E\n\u003CGridView \n x:Name=\u0022ContentGridView\u0022\n ItemsSource=\u0022{x:Bind Items}\u0022\n ItemTemplate=\u0022{StaticResource ...}\u0022\n IsItemClickEnabled=\u0022...\u0022\n CanDragItems=\u0022...\u0022\n AllowDrop=\u0022...\u0022\n CanReorderItems=\u0022...\u0022\n SelectionMode=\u0022...\u0022\n SelectionChanged=\u0022ContentGridView_SelectionChanged\u0022\n ItemClick=\u0022ContentGridView_ItemClick\u0022 \n FlowDirection=\u0022...\u0022/\u003E\n\n\u003C!-- ContentGridView_SelectionChanged and ContentGridView_ItemClick are functions defined in the code-behind\nto handle the events of when a selection changes on the GridView and when an item is clicked. --\u003E\n \n\u003C!-- The data template bound to this GridView\u0027s ItemTemplate property is based on which one you\nselect from the options on the right. The currently selected DataTemplate is: --\u003E\n\n...","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"itemsrepeater","controlId":"itemsrepeater","controlName":"ItemsRepeater","headerText":"Basic, non-interactive items laid out by ItemsRepeater","xaml":"\u003C!-- The ItemsRepeater and ScrollViewer used: --\u003E\n\u003CScrollViewer HorizontalScrollBarVisibility=\u0022Auto\u0022 \n HorizontalScrollMode=\u0022Auto\u0022 \n IsVerticalScrollChainingEnabled=\u0022False\u0022\n \u003CItemsRepeater\n ItemsSource=\u0022{x:Bind BarItems}\u0022\n Layout=\u0022{StaticResource ...}\u0022\n ItemTemplate=\u0022{StaticResource ...}\u0022 /\u003E\n\u003C/ScrollViewer\u003E\n \n\u003C!-- The Layout specifications used: --\u003E\n \n... \n \n\u003C!-- The DataTemplate used: ...--\u003E\n \n...","csharp":"// The ItemsSource used is a list of custom-class Bar objects called BarItems\n\npublic class Bar\n{\n public Bar(double length, int max)\n {\n Length = length;\n MaxLength = max;\n\n Height = length / 4;\n MaxHeight = max / 4;\n\n Diameter = length / 6;\n MaxDiameter = max / 6;\n }\n public double Length { get; set; }\n public int MaxLength { get; set; }\n\n public double Height { get; set; }\n public double MaxHeight { get; set; }\n\n public double Diameter { get; set; }\n public double MaxDiameter { get; set; }\n}\n\npublic ObservableCollection\u003CBar\u003E BarItems;\nprivate int MaxLength = 425;\n\nprivate void InitializeData()\n{\n if (BarItems == null)\n {\n BarItems = new ObservableCollection\u003CBar\u003E();\n }\n BarItems.Add(new Bar(300, this.MaxLength));\n BarItems.Add(new Bar(25, this.MaxLength));\n BarItems.Add(new Bar(175, this.MaxLength));\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"itemsrepeater-virtualizing-scrollable-list-of","controlId":"itemsrepeater","controlName":"ItemsRepeater","headerText":"Virtualizing, scrollable list of items laid out by ItemsRepeater","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003C!-- The ItemsRepeater and ScrollViewer used: --\u003E\n\u003CScrollViewer x:Name=\u0022scrollViewer\u0022\n IsVerticalScrollChainingEnabled=\u0022False\u0022\n Padding=\u00220,0,16,0\u0022\u003E\n \u003CItemsRepeater\n ItemsSource=\u0022{x:Bind NumberedItems}\u0022\n Layout=\u0022{StaticResource ...}\u0022\n ItemTemplate=\u0022{StaticResource ...}\u0022 /\u003E\n\u003CScrollViewer/\u003E \n \n\u003C!-- The Layout specifications used: --\u003E\n \n... \n \n\u003C!-- The ItemTemplate is bound to a DataTemplateSelector called MyDataTemplateSelector. \nMyDataTemplateSelector is defined in the code-behind to return the Accent DataTemplate \nfor odd-numbered-items, and returns the Normal DataTemplate for even-numbered-items \n(shown in C# code-behind section below). The two data templates and the XAML declaration\nof MyDataTemplateSelector are below: --\u003E\n\n\u003CMyDataTemplateSelector x:Key=\u0022MyDataTemplateSelector\u0022\n Normal=\u0022{StaticResource NormalItemTemplate}\u0022\n Accent=\u0022{StaticResource AccentItemTemplate}\u0022/\u003E \n \n\u003CDataTemplate x:Key=\u0022NormalItemTemplate\u0022 x:DataType=\u0022x:Int32\u0022\u003E\n \u003CButton HorizontalAlignment=\u0022Stretch\u0022 VerticalAlignment=\u0022Stretch\u0022 \n\t Background=\u0022{ThemeResource SystemChromeLowColor}\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind}\u0022 /\u003E\n \u003C/Button\u003E\n\u003C/DataTemplate\u003E\n\n\u003CDataTemplate x:Key=\u0022AccentItemTemplate\u0022 x:DataType=\u0022x:Int32\u0022\u003E\n \u003CButton HorizontalAlignment=\u0022Stretch\u0022 VerticalAlignment=\u0022Stretch\u0022 \n\t Background=\u0022{ThemeResource SystemAccentColor}\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind}\u0022 /\u003E\n \u003C/Button\u003E\n\u003C/DataTemplate\u003E\n \n\u003C!-- The ItemsSource for this ItemsRepeater is a list of integers called NumberedItems.--\u003E\n \n\u003C!-- ActivityFeedLayout is a custom designed virtualizing layout that loads images only as you come \naccross them, defined in the code-behind. View the WinUI Gallery source code to see more\ndetails about this custom layout. --\u003E\u003C/ScrollViewer\u003E","csharp":"// C# Code-behind\n\npublic class MyDataTemplateSelector : DataTemplateSelector\n{\n public DataTemplate? Normal { get; set; }\n public DataTemplate? Accent { get; set; }\n\n protected override DataTemplate? SelectTemplateCore(object item)\n {\n if ((int)item % 2 == 0)\n {\n return Normal;\n }\n else\n {\n return Accent;\n }\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"itemsrepeater-itemsrepeater-with-mixedtype-collection","controlId":"itemsrepeater","controlName":"ItemsRepeater","headerText":"ItemsRepeater with mixed-type collection","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003C!-- This is the ItemsRepeater used in this example: --\u003E\n\u003CItemsRepeater x:Name=\u0022MixedTypeRepeater\u0022 \n Margin=\u00220,0,12,0\u0022\n HorizontalAlignment=\u0022Stretch\u0022\n ItemTemplate=\u0022{StaticResource StringOrIntTemplateSelector}\u0022\u003E\n\n \u003CItemsRepeater.Layout\u003E\n \u003CUniformGridLayout MinItemWidth=\u0022200\u0022 MinItemHeight=\u0022200\u0022/\u003E\n \u003C/ItemsRepeater.Layout\u003E\n\u003C/ItemsRepeater\u003E\n\n\u003C!-- The ItemsSource is bound in the C# code-behind to an ObservableCollection called \nStringsAndInts. StringsAndInts has both string objects and integer objects. The ItemTemplate\nis a DataTemplateSelector called StringOrIntTemplateSelector, and is defined in the \ncode-behind and shown in the C# code-behind section below. The layout is a simple \nUniformGridLayout where each item is a 200x200 square. --\u003E\n \n\u003C!-- StringOrIntTemplateSelector assesses the type of an item, and returns StringDataTemplate if \nthe item is a string, and IntDataTemplate if the item is an integer. \nThe XAML code directly below binds the DataTemplateSelector to those two data templates, and \ndefines each of them: --\u003E\n \n\u003CStringOrIntTemplateSelector x:Key=\u0022StringOrIntTemplateSelector\u0022\n StringTemplate=\u0022{StaticResource StringDataTemplate}\u0022\n IntTemplate=\u0022{StaticResource IntDataTemplate}\u0022/\u003E \n \n\u003CDataTemplate x:Key=\u0022StringDataTemplate\u0022 x:DataType=\u0022x:String\u0022\u003E\n \u003CGrid Background=\u0022{ThemeResource SystemControlBackgroundAccentBrush}\u0022 Margin=\u002210\u0022\u003E\n \u003CTextBlock Padding=\u002210\u0022 Text=\u0022{x:Bind}\u0022 \n Foreground=\u0022{ThemeResource SystemControlForegroundChromeWhiteBrush}\u0022\n HorizontalAlignment=\u0022Center\u0022 TextWrapping=\u0022Wrap\u0022 \n VerticalAlignment=\u0022Center\u0022/\u003E\n \u003C/Grid\u003E\n\u003C/DataTemplate\u003E\n\n\u003CDataTemplate x:Key=\u0022IntDataTemplate\u0022 x:DataType=\u0022x:Int32\u0022\u003E\u003C/DataTemplate\u003E\n\u003C!-- NOTE: XAML truncated \u2014 additional sibling elements omitted --\u003E","csharp":"// C# code-behind\n\npublic class StringOrIntTemplateSelector : DataTemplateSelector\n{\n // Define the (currently empty) data templates to return\n // These will be \u0022filled-in\u0022 in the XAML code.\n public DataTemplate? StringTemplate { get; set; }\n\n public DataTemplate? IntTemplate { get; set; }\n\n protected override DataTemplate? SelectTemplateCore(object item)\n {\n // Return the correct data template based on the item\u0027s type.\n if (item.GetType() == typeof(String))\n {\n return StringTemplate;\n }\n else if (item.GetType() == typeof(int))\n {\n return IntTemplate;\n }\n else\n {\n return null;\n }\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"itemsrepeater-laying-out-nested-itemsrepeaters","controlId":"itemsrepeater","controlName":"ItemsRepeater","headerText":"Laying out nested ItemsRepeaters","xaml":"\u003C!-- The nested ItemsRepeater experience is achieved by creating one ItemsRepeater (outerRepeater below) \nand creating another ItemsRepeater (innerRepeater below) inside the outer one\u0027s DataTemplate. Below is \nthe outer ItemsRepeater definition and the DataTemplate it uses. --\u003E\n \n\u003CScrollViewer HorizontalScrollMode=\u0022Auto\u0022 HorizontalScrollBarVisibility=\u0022Auto\u0022\u003E\n \u003CItemsRepeater \n x:Name=\u0022outerRepeater\u0022\n VerticalAlignment=\u0022Top\u0022\n ItemTemplate =\u0022{StaticResource CategoryTemplate}\u0022\u003E\n \u003CItemsRepeater.Layout\u003E\n \u003CStackLayout Orientation=\u0022Vertical\u0022 /\u003E\n \u003C/ItemsRepeater.Layout\u003E\n \u003C/ItemsRepeater\u003E\n\u003C/ScrollViewer\u003E\n \n\u003CDataTemplate x:Key=\u0022CategoryTemplate\u0022 x:DataType=\u0022l:NestedCategory\u0022\u003E\n \u003CStackPanel\u003E\n \u003CTextBlock Text=\u0022{x:Bind CategoryName}\u0022 Padding=\u00228\u0022 Style=\u0022{StaticResource TitleTextBlockStyle}\u0022/\u003E\n \u003CItemsRepeater x:Name=\u0022innerRepeater\u0022\n ItemsSource=\u0022{x:Bind CategoryItems}\u0022\n ItemTemplate=\u0022{StaticResource StringDataTemplateColor}\u0022\u003E\n \u003CItemsRepeater.Layout\u003E\n \u003CStackLayout Orientation=\u0022Horizontal\u0022 /\u003E\n \u003C/ItemsRepeater.Layout\u003E\n \u003C/ItemsRepeater\u003E\n \u003C/StackPanel\u003E\n\u003C/DataTemplate\u003E\n \n\u003C!-- The DataTemplate shown above is bound to a custom-class type called NestedCategory, \nwhich is defined in the code-behind. NestedCategory objects have the following two attributes: \na CategoryName (string), and a collection of strings called CategoryItems. --\u003E\n \n\u003C!-- The inner ItemsRepeater is bound to its own, separate DataTemplate called StringDataTemplateColor: --\u003E\n \n\u003CDataTemplate x:Key=\u0022StringDataTemplateColor\u0022 x:DataType=\u0022x:String\u0022\u003E\n \u003CGrid Background=\u0022{StaticResource SystemControlBackgroundAccentBrush}\u0022 Margin=\u002210, 0, 10 10\u0022\u003E\u003C/Grid\u003E\u003C/DataTemplate\u003E\n\u003C!-- NOTE: XAML truncated \u2014 additional sibling elements omitted --\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"itemsrepeater-animated-scrolling-and-content","controlId":"itemsrepeater","controlName":"ItemsRepeater","headerText":"Animated Scrolling and Content Display","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003C!-- The below code shows the XAML for the ItemsRepeater as well as the\ncolor-changing rectangle besides it. --\u003E\n\n\u003CGrid\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u00221*\u0022/\u003E\n \u003CColumnDefinition Width=\u00221*\u0022/\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n\n \u003CScrollViewer x:Name=\u0022Animated_ScrollViewer\u0022 \n Grid.Column=\u00220\u0022\n ViewChanging=\u0022Animated_ScrollViewer_ViewChanging\u0022\u003E\n \u003CItemsRepeater x:Name=\u0022animatedScrollRepeater\u0022 \u003E\n \u003CItemsRepeater.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022x:String\u0022\u003E\n \u003CButton Content=\u0022{x:Bind}\u0022\n Background=\u0022{x:Bind}\u0022\n Click=\u0022Animated_GotItem\u0022 \n GotFocus=\u0022Animated_GotItem\u0022 \n HorizontalAlignment=\u0022Stretch\u0022\n Foreground=\u0022{ThemeResource ButtonForeground}\u0022/\u003E\n \u003C/DataTemplate\u003E\n \u003C/ItemsRepeater.ItemTemplate\u003E\n \u003C/ItemsRepeater\u003E\n \u003C/ScrollViewer\u003E\n\n \u003CRectangle x:Name=\u0022colorRectangle\u0022\n Grid.Column=\u00221\u0022\n Stroke=\u0022Black\u0022\n Margin=\u002210,0,0,0\u0022/\u003E\n\u003C/Grid\u003E","csharp":"// C# Code\n\n// Initialization code\n\nprivate double AnimatedBtnHeight;\nprivate Microsoft.UI.Xaml.Thickness AnimatedBtnMargin;\n\nprivate void InitializeData()\n{\n\n IList\u003Cstring\u003E colors = new List\u003CString\u003E()\n {\n \u0022Blue\u0022,\n \u0022BlueViolet\u0022,\n \u0022Crimson\u0022,\n \u0022DarkCyan\u0022,\n \u0022DarkGoldenrod\u0022,\n \u0022DarkMagenta\u0022,\n \u0022DarkOliveGreen\u0022,\n \u0022DarkRed\u0022,\n \u0022DarkSlateBlue\u0022,\n \u0022DeepPink\u0022,\n \u0022IndianRed\u0022,\n \u0022MediumSlateBlue\u0022,\n \u0022Maroon\u0022,\n \u0022MidnightBlue\u0022,\n \u0022Peru\u0022,\n \u0022SaddleBrown\u0022,\n \u0022SteelBlue\u0022,\n \u0022OrangeRed\u0022,\n \u0022Firebrick\u0022,\n \u0022DarkKhaki\u0022\n };\n\n animatedScrollRepeater.ItemsSource = colors;\n animatedScrollRepeater.ElementPrepared \u002B= OnElementPrepared;\n}\n\n// Animation code\n\nprivate void Animated_GotItem(object sender, RoutedEventArgs e)\n{\n if (sender is not Button senderBtn)\n {\n return;\n }\n\n // When the clicked item has been recieved, bring it to the middle of the viewport.\n senderBtn.StartBringIntoView(new BringIntoViewOptions()\n {\n VerticalAlignmentRatio = 0.5,\n AnimationDesired = true,\n });\n\n // Update corresponding rectangle with selected color\n colorRectangle.Fill = senderBtn.Background;\n}\n\n/* This function occurs each time an element is made ready for use.\n* This is necessary for virtualization. */\nprivate void OnElementPrepared(Microsoft.UI.Xaml.Controls.ItemsRepeater sender,\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"itemsrepeater-virtualized-contentheavy-layout-with","controlId":"itemsrepeater","controlName":"ItemsRepeater","headerText":"Virtualized, Content-Heavy Layout with Filtering and Sorting","xaml":"\u003C!-- XAML Code: --\u003E\n\u003CItemsRepeaterScrollHost\u003E\n \u003CScrollViewer\u003E\n \u003CItemsRepeater x:Name=\u0022VariedImageSizeRepeater\u0022 \n\t\t\t ItemTemplate=\u0022{StaticResource RecipeTemplate}\u0022\u003E\n\t \n \u003C!-- IMPORTANT: This ItemsRepeater uses a custom-created layout \n\t\tcalled VariedImageSize Layout (referenced below).You can find \n \t\tthe full source code for this layout in the file \n\t\tVariedImageSizeLayout.cs in the WinUI Gallery repo. --\u003E\n\n \u003CItemsRepeater.Layout\u003E\n \u003Ccommon:VariedImageSizeLayout Width=\u0022200\u0022 /\u003E\n \u003C/ItemsRepeater.Layout\u003E\n \u003C/ItemsRepeater\u003E\n \u003C/ScrollViewer\u003E\n\u003C/ItemsRepeaterScrollHost\u003E\n\n\u003C!-- DataTemplate used: --\u003E\n\u003C!-- This repeater holds Recipe objects, which is a custom class defined in \n the code-behind, and shown below. --\u003E\n\u003CDataTemplate x:DataType=\u0022l:Recipe\u0022 x:Key=\u0022RecipeTemplate\u0022\u003E\n \u003CStackPanel BorderThickness=\u00221\u0022 Background=\u0022LightGray\u0022 Margin=\u00225\u0022\u003E\n \u003CStackPanel Background=\u0022{x:Bind Color}\u0022 Margin=\u00228\u0022 Height=\u002275\u0022 Opacity=\u0022.8\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Num.ToString()}\u0022 FontSize=\u002235\u0022 TextAlignment=\u0022Center\u0022 \n Padding=\u002212\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003CTextBlock \n x:Name=\u0022recipeName\u0022 \n Text=\u0022{x:Bind Name}\u0022\n TextWrapping=\u0022Wrap\u0022\n Margin=\u002215,0,10,0\u0022 \n Style=\u0022{StaticResource TitleTextBlockStyle}\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Ingredients}\u0022 Style=\u0022{StaticResource BodyTextBlockStyle}\u0022 Margin=\u002215,0,15,15\u0022/\u003E\n \u003C/StackPanel\u003E\n\u003C/DataTemplate\u003E","csharp":"// C# Code\n\n// ========================== Recipe class used for items ========================== \npublic class Recipe\n{\n public int Num { get; set; }\n public string Ingredients { get; set; } = string.Empty;\n public List\u003Cstring\u003E IngList { get; set; } = [];\n public string Name { get; set; } = string.Empty;\n public string Color { get; set; } = string.Empty;\n public int numIngredients\n {\n get\n {\n return IngList.Count();\n }\n }\n\n public void RandomizeIngredients()\n {\n // To give the items different heights for visual variety, give recipes \n // random numbers of random \u0022extra\u0022 ingredients\n Random rndNum = new Random();\n Random rndIng = new Random();\n\n ObservableCollection\u003Cstring\u003E extras = new ObservableCollection\u003Cstring\u003E{\n \u0022Garlic\u0022,\n \u0022Lemon\u0022,\n \u0022Butter\u0022,\n \u0022Lime\u0022,\n \u0022Feta Cheese\u0022,\n \u0022Parmesan Cheese\u0022,\n \u0022Breadcrumbs\u0022};\n for (int i =0; i \u003C rndNum.Next(0,4); i\u002B\u002B)\n {\n string newIng = extras[rndIng.Next(0, 6)];\n // If the ingredient is not already present in the recipe, add it\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"itemsview","controlId":"itemsview","controlName":"ItemsView","headerText":"Basic ItemsView","xaml":"\u003CDataTemplate x:Key=\u0022ImageTemplate\u0022 x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CItemContainer HorizontalAlignment=\u0022Left\u0022 Width=\u0022200\u0022 Height=\u0022140\u0022 AutomationProperties.Name=\u0022{x:Bind Title}\u0022\u003E\n \u003CImage Stretch=\u0022UniformToFill\u0022 HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022 Source=\u0022{x:Bind ImageLocation}\u0022 Margin=\u00224\u0022 AutomationProperties.AccessibilityView=\u0022Raw\u0022/\u003E\n \u003C/ItemContainer\u003E\n\u003C/DataTemplate\u003E\n\n\u003CItemsView Width=\u0022220\u0022 Height=\u0022400\u0022 HorizontalAlignment=\u0022Left\u0022\n ItemTemplate=\u0022{StaticResource ImageTemplate}\u0022 IsItemInvokedEnabled=\u0022True\u0022 ItemInvoked=\u0022BasicItemsView_ItemInvoked\u0022/\u003E","csharp":"private void BasicItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs e)\n{\n tblBasicInvokeOutput.Text = \u0022You invoked \u0022 \u002B (e.InvokedItem as CustomDataObject).Title \u002B \u0022.\u0022;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"itemsview-itemsview-with-swappable-layouts","controlId":"itemsview","controlName":"ItemsView","headerText":"ItemsView with swappable layouts","xaml":"\u003CDataTemplate x:Key=\u0022LinedFlowLayoutItemTemplate\u0022 x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CItemContainer AutomationProperties.Name=\u0022{x:Bind Title}\u0022\u003E\n \u003CGrid\u003E\n \u003CImage Source=\u0022{x:Bind ImageLocation}\u0022 Stretch=\u0022UniformToFill\u0022 HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022 MinWidth=\u002270\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Vertical\u0022 Height=\u002240\u0022 VerticalAlignment=\u0022Bottom\u0022 Padding=\u00225,1,5,1\u0022 Background=\u0022{ThemeResource SystemControlBackgroundBaseMediumBrush}\u0022 Opacity=\u0022.75\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Likes}\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003CTextBlock Text=\u0022 Likes\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/StackPanel\u003E\n \u003C/Grid\u003E\n \u003C/ItemContainer\u003E\n\u003C/DataTemplate\u003E\n\n\u003CItemsView Width=\u0022500\u0022 Height=\u0022400\u0022 HorizontalAlignment=\u0022Left\u0022\n ItemTemplate=\u0022{StaticResource LinedFlowLayoutItemTemplate}\u0022\u003E\n \u003CItemsView.Layout\u003E\n \u003CLinedFlowLayout ItemsStretch=\u0022Fill\u0022 LineHeight=\u0022160\u0022 LineSpacing=\u00225\u0022 MinItemSpacing=\u00225\u0022/\u003E\n \u003C/ItemsView.Layout\u003E\n\u003C/ItemsView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"itemsview-itemsview-item-invocation-and","controlId":"itemsview","controlName":"ItemsView","headerText":"ItemsView item invocation and selection","xaml":"\u003CDataTemplate x:Key=\u0022UniformGridLayoutItemTemplate\u0022 x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CItemContainer AutomationProperties.Name=\u0022{x:Bind Title}\u0022\u003E\n \u003CGrid Width=\u0022150\u0022\u003E\n \u003CImage Source=\u0022{x:Bind ImageLocation}\u0022 Stretch=\u0022UniformToFill\u0022 HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Vertical\u0022 Height=\u002240\u0022 VerticalAlignment=\u0022Bottom\u0022 Padding=\u00225,1,5,1\u0022 Background=\u0022{ThemeResource SystemControlBackgroundBaseMediumBrush}\u0022 Opacity=\u0022.75\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Likes}\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003CTextBlock Text=\u0022 Likes\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/StackPanel\u003E\n \u003C/Grid\u003E\n \u003C/ItemContainer\u003E\n\u003C/DataTemplate\u003E\n\n\u003CItemsView Width=\u0022500\u0022 Height=\u0022400\u0022 HorizontalAlignment=\u0022Left\u0022\n SelectionMode=\u0022...\u0022\n IsItemInvokedEnabled=\u0022...\u0022\n ItemTemplate=\u0022{StaticResource UniformGridLayoutItemTemplate}\u0022\n ItemInvoked=\u0022SwappableSelectionModesItemsView_ItemInvoked\u0022\n SelectionChanged=\u0022SwappableSelectionModesItemsView_SelectionChanged\u0022\u003E\n \u003CItemsView.Layout\u003E\n \u003CUniformGridLayout MinRowSpacing=\u00225\u0022 MinColumnSpacing=\u00225\u0022 MaximumRowsOrColumns=\u00223\u0022/\u003E\n \u003C/ItemsView.Layout\u003E\n\u003C/ItemsView\u003E","csharp":"private void SwappableSelectionModesItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs e)\n{\n tblInvocationOutput.Text = \u0022You invoked \u0022 \u002B (e.InvokedItem as CustomDataObject).Title \u002B \u0022.\u0022;\n}\n\nprivate void SwappableSelectionModesItemsView_SelectionChanged(ItemsView sender, ItemsViewSelectionChangedEventArgs e)\n{\n tblSelectionOutput.Text = string.Format(\u0022You have selected {0} item(s).\u0022, SwappableSelectionModesItemsView.SelectedItems.Count);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"listbox","controlId":"listbox","controlName":"ListBox","headerText":"A ListBox with items defined inline and its minimum width set.","xaml":"\u003CListBox SelectionChanged=\u0022ColorListBox_SelectionChanged\u0022 MinWidth=\u0022200\u0022\u003E\n \u003Cx:String\u003EBlue\u003C/x:String\u003E\n \u003Cx:String\u003EGreen\u003C/x:String\u003E\n \u003Cx:String\u003ERed\u003C/x:String\u003E\n \u003Cx:String\u003EYellow\u003C/x:String\u003E\n\u003C/ListBox\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"listbox-a-listbox-with-its","controlId":"listbox","controlName":"ListBox","headerText":"A ListBox with its ItemsSource and Height set.","xaml":"\u003CListBox ItemsSource=\u0022{x:Bind Fonts}\u0022 DisplayMemberPath=\u0022Item1\u0022 SelectedValuePath=\u0022Item2\u0022 Height=\u0022164\u0022 Loaded=\u0022ListBox2_Loaded\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"listview","controlId":"listview","controlName":"ListView","headerText":"Basic ListView with Simple DataTemplate","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003CListView\n x:Name=\u0022BaseExample\u0022\n ItemTemplate=\u0022{StaticResource ContactListViewTemplate}\u0022\n BorderThickness=\u00221\u0022\n BorderBrush=\u0022{ThemeResource SystemControlForegroundBaseMediumLowBrush}\u0022\n HorizontalAlignment=\u0022Left\u0022/\u003E\n \n\u003C!-- In this example, the ListView\u0027s ItemTemplate property is bound to a data template (shown below)\ncalled ContactListViewTemplate, defined in a Page.Resources section. --\u003E\n \n\u003CDataTemplate x:Key=\u0022ContactListViewTemplate\u0022 x:DataType=\u0022local:Contact\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Name}\u0022 x:Phase=\u00221\u0022 Margin=\u00220,5,0,5\u0022/\u003E\n\u003C/DataTemplate\u003E","csharp":"// C# code-behind\n \n// The data template is defined to display a Contact object (class definition shown below), and the text \n// displayed is bound to the Contact object\u0027s Name attribute.\n\npublic class Contact\n{\n public string FirstName { get; private set; } = string.Empty;\n public string LastName { get; private set; } = string.Empty;\n public string Company { get; private set; } = string.Empty;\n public string Name =\u003E FirstName \u002B \u0022 \u0022 \u002B LastName;\n\n public Contact(string firstName, string lastName, string company)\n {\n FirstName = firstName;\n LastName = lastName;\n Company = company;\n } \n}\n \n// The ItemsSource for the ListView is generated by a method of the Contact class called \n// GetContactsAsync().This method pulls data from an internal data source and creates \n// Contact objects from that data. Those Contact objects are placed in a collection \n// which is returned from the GetContactsAsync() function.\n\nBaseExample.ItemsSource = await Contact.GetContactsAsync();","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"listview-listview-with-selection-support","controlId":"listview","controlName":"ListView","headerText":"ListView with Selection Support","xaml":"\u003C!-- To create this sample, add/change the following properties onto the code for the base example above: --\u003E\n \n\u003CListView \n SelectionMode=\u0022...\u0022 \n ItemTemplate=\u0022{StaticResource ContactListViewTemplate}\u0022/\u003E\n \n\u003C!-- DataTemplate used: --\u003E\n\n\u003CDataTemplate x:Key=\u0022ContactListViewTemplate\u0022 x:DataType=\u0022local:Contact\u0022\u003E\n \u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022*\u0022/\u003E\n \u003CRowDefinition Height=\u0022*\u0022/\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022/\u003E\n \u003CColumnDefinition Width=\u0022*\u0022/\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003CEllipse x:Name=\u0022Ellipse\u0022\n Grid.RowSpan=\u00222\u0022\n Width =\u002232\u0022\n Margin=\u00226\u0022\n VerticalAlignment=\u0022Center\u0022\n HorizontalAlignment=\u0022Center\u0022\n Fill=\u0022{ThemeResource SystemControlBackgroundBaseMediumBrush}\u0022/\u003E\n \u003CTextBlock Grid.Column=\u00221\u0022\n Text=\u0022{x:Bind Name}\u0022\n x:Phase=\u00221\u0022\n Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022\n Margin=\u002212,6,0,0\u0022/\u003E\n \u003CTextBlock Grid.Column=\u00221\u0022\n Grid.Row=\u00221\u0022\n Text=\u0022{x:Bind Company}\u0022\n x:Phase=\u00222\u0022\n Style=\u0022{ThemeResource BodyTextBlockStyle}\u0022\n Margin=\u002212,0,0,6\u0022/\u003E\n \u003C/Grid\u003E\n\u003C/DataTemplate\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"listview-listviews-with-drag-drop","controlId":"listview","controlName":"ListView","headerText":"ListViews with Drag, Drop, and Reordering Support","xaml":"\u003C!-- Full code to implement dragging and dropping between lists can be found in the \nsource code for the WinUI Gallery. --\u003E\n\n\u003C!-- The following properties should be added to the ListView definitions to build this sample. --\u003E\n\u003CListView CanDragItems=\u0022True\u0022 CanReorderItems=\u0022True\u0022 AllowDrop=\u0022True\u0022\n SelectionMode=\u0022Single\u0022 /\u003E\n \n\u003C!-- DataTemplate used is the same as the above sample. --\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"listview-listview-with-grouped-headers","controlId":"listview","controlName":"ListView","headerText":"ListView with Grouped Headers","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003C!-- ListViews with grouped items must be bound to a CollectionViewSource, as shown below.\nThis CollectionViewSource is defined in the XAML below, but is bound to an ItemsSource in the C#\ncode-behind. See the C# code below for more details on how to create/bind to a grouped list. --\u003E\n\n\u003CCollectionViewSource x:Name=\u0022ContactsCVS\u0022 IsSourceGrouped=\u0022True\u0022/\u003E\n \n\u003CListView ItemsSource=\u0022{x:Bind ContactsCVS.View, Mode=OneWay}\u0022\u003E\n \u003CListView.ItemsPanel\u003E\n \u003CItemsPanelTemplate\u003E\n \u003CItemsStackPanel AreStickyGroupHeadersEnabled=\u0022...\u0022/\u003E\n \u003C/ItemsPanelTemplate\u003E\n \u003C/ListView.ItemsPanel\u003E\n \u003CListView.GroupStyle\u003E\n \u003CGroupStyle \u003E\n \u003CGroupStyle.HeaderTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:GroupInfoList\u0022\u003E\n \u003CBorder AutomationProperties.AccessibilityView=\u0022Raw\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Key}\u0022 Style=\u0022{ThemeResource TitleTextBlockStyle}\u0022 AutomationProperties.AccessibilityView=\u0022Raw\u0022/\u003E\n \u003C/Border\u003E\n \u003C/DataTemplate\u003E\n \u003C/GroupStyle.HeaderTemplate\u003E\n \u003C/GroupStyle\u003E\n \u003C/ListView.GroupStyle\u003E\n\u003C/ListView\u003E\n \n\u003C!-- Data template used is same as above examples. --\u003E","csharp":"// C# Code\n\n// To create a collection of grouped items, create a query that groups\n// an existing list, or returns a grouped collection from a database.\n// The following method is used to create the ItemsSource for our CollectionViewSource:\n\npublic static async Task\u003CObservableCollection\u003CGroupInfoList\u003E\u003E GetContactsGroupedAsync()\n{\n // Grab Contact objects from pre-existing list (list is returned from function GetContactsAsync())\n var query = from item in await GetContactsAsync()\n\n // Group the items returned from the query, sort and select the ones you want to keep\n group item by item.LastName.Substring(0, 1).ToUpper() into g\n orderby g.Key\n\n // GroupInfoList is a simple custom class that has an IEnumerable type attribute, and\n // a key attribute. The IGrouping-typed variable g now holds the Contact objects, \n // and these objects will be used to create a new GroupInfoList object.\n select new GroupInfoList(g) { Key = g.Key };\n \n return new ObservableCollection\u003CGroupInfoList\u003E(query);\n}\n\n// GroupInfoList class definition:\npublic class GroupInfoList : List\u003Cobject\u003E\n{\n public GroupInfoList(IEnumerable\u003Cobject\u003E items) : base(items)\n {\n }\n\n public object Key { get; set; }\n\n public override string ToString()\n {\n return \u0022Group \u0022 \u002B Key.ToString();\n }\n}\n\n// Contact class definition:\npublic class Contact\n{\n public string FirstName { get; private set; } = string.Empty;\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"listview-listview-with-filtering","controlId":"listview","controlName":"ListView","headerText":"ListView with filtering","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003C!-- The ListView\u0027s ItemsSource is an ObservableCollection\u003CContact\u003E that is defined and bound\nin the code-behind, called contactsFiltered. This ListView uses the same DataTemplate as the\nsamples above it, called ContactListViewTemplate - you can see its definition above. --\u003E\n\n\u003CListView \n x:Name=\u0022FilteredListView\u0022\n ItemTemplate=\u0022{StaticResource ContactListViewTemplate}\u0022\n SelectionMode=\u0022Single\u0022\n ShowsScrollingPlaceholders=\u0022True\u0022\n BorderThickness=\u00221\u0022\n BorderBrush=\u0022{ThemeResource SystemControlForegroundBaseMediumLowBrush}\u0022/\u003E\n\n\u003C!-- The textboxes used for filtering are shown below: --\u003E\n\u003CStackPanel Width=\u0022200\u0022\u003E\n \u003CTextBlock Margin=\u00228,8,8,4\u0022 Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022\u003EFilter by...\u003C/TextBlock\u003E\n \u003CTextBox x:Name=\u0022FilterByFirstName\u0022 Width=\u0022150\u0022 Header=\u0022First name\u0022 Margin=\u00228\u0022\n\t HorizontalAlignment=\u0022Left\u0022 TextChanged=\u0022OnFilterChanged\u0022/\u003E\n \u003CTextBox x:Name=\u0022FilterByLastName\u0022 Width=\u0022150\u0022 Header=\u0022Last name\u0022 Margin=\u00228\u0022\n\t HorizontalAlignment=\u0022Left\u0022 TextChanged=\u0022OnFilterChanged\u0022/\u003E\n \u003CTextBox x:Name=\u0022FilterByCompany\u0022 Width=\u0022150\u0022 Header=\u0022Company\u0022 Margin=\u00228\u0022 \n\t HorizontalAlignment=\u0022Left\u0022 TextChanged=\u0022OnFilterChanged\u0022/\u003E\n\u003C/StackPanel\u003E\u003C/Contact\u003E","csharp":"// C# Code\n\n// Make sure to add this to your declarations at the top for the filtering method:\nusing System.Linq;\n// ...\n\n// Define an ObservableCollection\u003CContact\u003E object to serve as the ListView\u0027s\n// ItemsSource. This collection will get updated after the filters are used:\nObservableCollection\u003CContact\u003E contactsFiltered = new ObservableCollection\u003CContact\u003E();\n\n/* Populate contactsFiltered with all contact objects (in this case, contacts holds\nall of our Contact objects so we copy them into contactsFiltered). Set this newly populated\ncollection as the ItemsSource for the ListView. */\ncontactsFiltered = new ObservableCollection\u003CContact\u003E(allContacts);\nFilteredListView.ItemsSource = contactsFiltered;\n\n// Whenever text changes in any of the filtering text boxes, the following function is called:\nprivate void OnFilterChanged(object sender, TextChangedEventArgs args)\n{\n // This is a Linq query that selects only items that return True after being passed through\n // the Filter function, and adds all of those selected items to filtered.\n var filtered = allContacts.Where(contact =\u003E Filter(contact));\n Remove_NonMatching(filtered);\n AddBack_Contacts(filtered);\n}\n\n// The following functions are called inside OnFilterChanged:\n\n/* When the text in any filter is changed, perform a check on each item in the original \ncontact list to see if the item should be displayed, taking into account all three of the\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"listview-listview-for-messaging-or","controlId":"listview","controlName":"ListView","headerText":"ListView for Messaging or Data Logging","xaml":"\u003CListView x:Name=\u0022InvertedListView\u0022\n ItemTemplate=\u0022{StaticResource MessageViewTemplate}\u0022\u003E\n \n \u003C!-- The ItemsStackPanel must be edited to update the following two properties --\u003E\n \u003C!-- These properties allow the list to grow from the bottom --\u003E\n \u003CListView.ItemsPanel\u003E\n \u003CItemsPanelTemplate\u003E\n \u003CItemsStackPanel ItemsUpdatingScrollMode=\u0022KeepLastItemInView\u0022 \n VerticalAlignment=\u0022Bottom\u0022/\u003E\n \u003C/ItemsPanelTemplate\u003E\n \u003C/ListView.ItemsPanel\u003E\n\n \u003C!-- This setter property is created so ListViewItems correctly align to the left or right. --\u003E\n \u003CListView.ItemContainerStyle\u003E\n \u003CStyle TargetType=\u0022ListViewItem\u0022\u003E\n \u003CSetter Property=\u0022HorizontalContentAlignment\u0022 Value=\u0022Stretch\u0022/\u003E\n \u003C/Style\u003E\n \u003C/ListView.ItemContainerStyle\u003E\n\u003C/ListView\u003E\n\n\u003C!-- Data template used: --\u003E\n\u003C!-- The data template is bound to a custom DataType called Message. --\u003E\n\u003C!-- Each Message object has a color and alignment assigned to it based on whether it was \nsent or received, and those values are bound in the DataTemplate.--\u003E\n\u003CDataTemplate x:Key=\u0022MessageViewTemplate\u0022 x:DataType=\u0022local:Message\u0022\u003E\n \u003CGrid Height=\u0022Auto\u0022 Margin=\u00224\u0022 HorizontalAlignment=\u0022{x:Bind MsgAlignment}\u0022\u003E\n \u003CStackPanel MinHeight=\u002275\u0022 Width=\u0022350\u0022 Padding=\u002210, 0, 0, 10\u0022 Background=\u0022{ThemeResource SystemColorHighlightColor}\u0022 CornerRadius=\u0022{StaticResource ControlCornerRadius}\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind MsgText}\u0022 Padding=\u00220, 10, 0, 0\u0022 FontSize=\u002220\u0022 Foreground=\u0022{ThemeResource SystemColorHighlightTextColor}\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind MsgDateTime}\u0022 Padding=\u00220, 0, 0, 10\u0022 FontSize=\u002215\u0022 Foreground=\u0022{ThemeResource SystemColorHighlightTextColor}\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/Grid\u003E\n\u003C/DataTemplate\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"listview-listview-with-images","controlId":"listview","controlName":"ListView","headerText":"ListView with Images","xaml":"\u003CListView x:Name=\u0022Control4\u0022\n BorderThickness=\u00221\u0022\n BorderBrush=\u0022{ThemeResource ControlStrongStrokeColorDefaultBrush}\u0022\u003E\n \n\u003C!-- Data Template Used: --\u003E\n\u003C!-- The data template is bound to a custom-created data type called CustomDataObject. --\u003E\n\u003C!-- The full code for the class can be found in this page\u0027s source code, but its attributes are referenced/bound below. --\u003E\n\n\u003CDataTemplate x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CGrid Margin=\u00220,12,0,12\u0022 AutomationProperties.Name=\u0022{x:Bind Title}\u0022\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 MinWidth=\u0022150\u0022/\u003E\n \u003CColumnDefinition Width=\u0022*\u0022 /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003CImage Source=\u0022{x:Bind ImageLocation}\u0022 MaxHeight=\u0022100\u0022 Stretch=\u0022Fill\u0022/\u003E\n\n \u003CStackPanel Margin=\u002212,0,0,0\u0022 Grid.Column=\u00221\u0022 \u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022 FontSize=\u002214\u0022 FontWeight=\u0022SemiBold\u0022 Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022\n HorizontalAlignment=\u0022Left\u0022 Margin=\u00220,0,0,6\u0022 LineHeight=\u002220\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Description}\u0022 FontFamily=\u0022Segoe UI\u0022 FontWeight=\u0022Normal\u0022 Style=\u0022{ThemeResource BodyTextBlockStyle}\u0022\n TextTrimming=\u0022CharacterEllipsis\u0022 Width=\u0022350\u0022 MaxLines=\u00221\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Views}\u0022 HorizontalAlignment=\u0022Left\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Margin=\u00220,0,0,0\u0022/\u003E\n \u003CTextBlock Text=\u0022 Views \u0022 HorizontalAlignment=\u0022Left\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022/\u003E\n \u003CTextBlock Text=\u0022 \u0026#x22C5; \u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 \n HorizontalAlignment=\u0022Left\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Likes}\u0022 HorizontalAlignment=\u0022Left\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Margin=\u00225,0,0,0\u0022/\u003E\n \u003CTextBlock Text=\u0022 Likes\u0022 HorizontalAlignment=\u0022Left\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022/\u003E\n \u003C/StackPanel\u003E\u003C/StackPanel\u003E\u003C/Grid\u003E\u003C/DataTemplate\u003E\u003C/ListView\u003E\n\u003C!-- NOTE: XAML truncated \u2014 additional sibling elements omitted --\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"listview-listview-with-context-menus","controlId":"listview","controlName":"ListView","headerText":"ListView with context menus","xaml":"\u003CListView\n ItemsSource=\u0022{x:Bind contacts, Mode=OneWay}\u0022\n SelectionMode=\u0022Single\u0022\n ShowsScrollingPlaceholders=\u0022True\u0022\n BorderThickness=\u00221\u0022\n BorderBrush=\u0022{ThemeResource ControlStrongStrokeColorDefaultBrush}\u0022\n HorizontalAlignment=\u0022Left\u0022\u003E\n \u003CListView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:Contact\u0022\u003E\n \u003CGrid\u003E\n \u003CGrid.ContextFlyout\u003E\n \u003CMenuFlyout\u003E\n \u003CMenuFlyoutItem Text=\u0022Delete\u0022 Click=\u0022ContactDeleteMenuItem_Click\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/Grid.ContextFlyout\u003E\n \n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022*\u0022/\u003E\n \u003CRowDefinition Height=\u0022*\u0022/\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022/\u003E\n \u003CColumnDefinition Width=\u0022*\u0022/\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003CEllipse x:Name=\u0022Ellipse\u0022\n Grid.RowSpan=\u00222\u0022\n Width =\u002232\u0022\n Margin=\u00226\u0022\n VerticalAlignment=\u0022Center\u0022\n HorizontalAlignment=\u0022Center\u0022\n Fill=\u0022{ThemeResource ControlStrongFillColorDefaultBrush}\u0022/\u003E\n \u003CTextBlock Grid.Column=\u00221\u0022\n Text=\u0022{x:Bind Name}\u0022\n x:Phase=\u00221\u0022\n Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022\n Margin=\u002212,6,0,0\u0022/\u003E\n \u003CTextBlock Grid.Column=\u00221\u0022\n Grid.Row=\u00221\u0022\n Text=\u0022{x:Bind Company}\u0022\n x:Phase=\u00222\u0022\n Style=\u0022{ThemeResource BodyTextBlockStyle}\u0022\n Margin=\u002212,0,0,6\u0022/\u003E\n \u003C/Grid\u003E\n \u003C/DataTemplate\u003E\n \u003C/ListView.ItemTemplate\u003E\n\u003C/DataTemplate\u003E\u003C/ListView\u003E","csharp":"ObservableCollection\u003CContact\u003E contacts = new ObservableCollection\u003CContact\u003E();\n\nprivate void ContactDeleteMenuItem_Click(object sender, RoutedEventArgs e)\n{\n var item = (sender as FrameworkElement).DataContext;\n var contact = item as Contact;\n contacts.Remove(contact);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"pulltorefresh","controlId":"pulltorefresh","controlName":"PullToRefresh","headerText":"Basic PullToRefresh","xaml":"\u003CRefreshContainer x:Name=\u0022rc\u0022 RefreshRequested=\u0022rc_RefreshRequested\u0022\u003E\n \u003CListView x:Name=\u0022lv\u0022 Width=\u0022300\u0022 Height=\u0022300\u0022 BorderThickness=\u00221\u0022 BorderBrush=\u0022Black\u0022/\u003E\n\u003C/RefreshContainer\u003E","csharp":"ObservableCollection\u003Cstring\u003E items = new ObservableCollection\u003Cstring\u003E();\nlistview.ItemsSource = items;\n\nprivate void rc_RefreshRequested(RefreshContainer sender, RefreshRequestedEventArgs args)\n{\n //Do some work to show new Content! Once the work is done, call RefreshCompletionDeferral.Complete()\n this.RefreshCompletionDeferral = args.GetDeferral();\n this.DoWork();\n}\n\nprivate void WorkCompleted()\n{\n items.Insert(0, \u0022NewControl\u0022);\n if (this.RefreshCompletionDeferral != null)\n {\n this.RefreshCompletionDeferral.Complete();\n this.RefreshCompletionDeferral.Dispose();\n this.RefreshCompletionDeferral = null;\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"pulltorefresh-custom-icon-pulltorefresh","controlId":"pulltorefresh","controlName":"PullToRefresh","headerText":"Custom Icon PullToRefresh","xaml":"\u003CRefreshContainer x:Name=\u0022rc\u0022 RefreshRequested=\u0022rc_RefreshRequested\u0022\u003E\n \u003CRefreshContainer.Visualizer\u003E\n \u003CRefreshVisualizer RefreshStateChanged=\u0022rv2_RefreshStateChanged\u0022\u003E\n \u003CRefreshVisualizer.Content\u003E\n \u003CSymbolIcon Symbol=\u0022AddFriend\u0022/\u003E\n \u003C/RefreshVisualizer.Content\u003E\n \u003C/RefreshVisualizer\u003E\n \u003C/RefreshContainer.Visualizer\u003E\n \u003CListView x:Name=\u0022lv\u0022 Width=\u0022300\u0022 Height=\u0022300\u0022 BorderThickness=\u00221\u0022 BorderBrush=\u0022Black\u0022/\u003E\n\u003C/RefreshContainer\u003E","csharp":"ObservableCollection\u003Cstring\u003E items = new ObservableCollection\u003Cstring\u003E();\nlistview.ItemsSource = items;\n\nprivate void rc_RefreshRequested(RefreshContainer sender, RefreshRequestedEventArgs args)\n{\n //Do some work to show new Content! Once the work is done, call RefreshCompletionDeferral.Complete()\n this.RefreshCompletionDeferral = args.GetDeferral();\n this.DoWork();\n}\n\nprivate void WorkCompleted()\n{\n items.Insert(0, \u0022NewControl\u0022);\n if (this.RefreshCompletionDeferral != null)\n {\n this.RefreshCompletionDeferral.Complete();\n this.RefreshCompletionDeferral.Dispose();\n this.RefreshCompletionDeferral = null;\n }\n}\nprivate void rv2_RefreshStateChanged()\n{\n var visualizerContentVisual = ElementCompositionPreview.GetElementVisual(rv2.Content);\n visualizerContentVisual.StopAnimation(\u0022RotationAngle\u0022);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"treeview","controlId":"treeview","controlName":"TreeView","headerText":"A simple TreeView with drag and drop support","xaml":"\u003CTreeView x:Name=\u0022sampleTreeView\u0022 CanDragItems=\u0022True\u0022 AllowDrop=\u0022True\u0022/\u003E","csharp":"private void InitializeSampleTreeView(TreeView sampleTreeView)\n{\n // Create a root node with initial content and set it to be expanded.\n TreeViewNode workNode = new TreeViewNode() { Content = \u0022Work Documents\u0022 };\n workNode.IsExpanded = true;\n\n // Add child nodes with content related to the root node.\n workNode.Children.Add(new TreeViewNode() { Content = \u0022XYZ Functional Spec\u0022 });\n workNode.Children.Add(new TreeViewNode() { Content = \u0022Feature Schedule\u0022 });\n\n // Create another node with initial content and set it to be expanded.\n TreeViewNode remodelNode = new TreeViewNode() { Content = \u0022Home Remodel\u0022 };\n remodelNode.IsExpanded = true;\n\n // Add child nodes with specific content under this node.\n remodelNode.Children.Add(new TreeViewNode() { Content = \u0022Contractor Contact Info\u0022 });\n remodelNode.Children.Add(new TreeViewNode() { Content = \u0022Paint Color Scheme\u0022 });\n\n // Create a node with broader content that includes the previous node as a child.\n TreeViewNode personalNode = new TreeViewNode() { Content = \u0022Personal Documents\u0022 };\n personalNode.IsExpanded = true;\n personalNode.Children.Add(remodelNode);\n\n // Add the main nodes to the TreeView\u0027s root.\n sampleTreeView.RootNodes.Add(workNode);\n sampleTreeView.RootNodes.Add(personalNode);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"treeview-a-treeview-with-multiselection","controlId":"treeview","controlName":"TreeView","headerText":"A TreeView with Multi-selection enabled","xaml":"\u003CTreeView x:Name=\u0022sampleTreeView\u0022 SelectionMode=\u0022Multiple\u0022 /\u003E","csharp":"private void InitializeSampleTreeView(TreeView sampleTreeView)\n{\n // Create a root node with initial content and set it to be expanded.\n TreeViewNode workNode = new TreeViewNode() { Content = \u0022Work Documents\u0022 };\n workNode.IsExpanded = true;\n\n // Add child nodes with content related to the root node.\n workNode.Children.Add(new TreeViewNode() { Content = \u0022XYZ Functional Spec\u0022 });\n workNode.Children.Add(new TreeViewNode() { Content = \u0022Feature Schedule\u0022 });\n\n // Create another node with initial content and set it to be expanded.\n TreeViewNode remodelNode = new TreeViewNode() { Content = \u0022Home Remodel\u0022 };\n remodelNode.IsExpanded = true;\n\n // Add child nodes with specific content under this node.\n remodelNode.Children.Add(new TreeViewNode() { Content = \u0022Contractor Contact Info\u0022 });\n remodelNode.Children.Add(new TreeViewNode() { Content = \u0022Paint Color Scheme\u0022 });\n\n // Create a node with broader content that includes the previous node as a child.\n TreeViewNode personalNode = new TreeViewNode() { Content = \u0022Personal Documents\u0022 };\n personalNode.IsExpanded = true;\n personalNode.Children.Add(remodelNode);\n\n // Add the main nodes to the TreeView\u0027s root.\n sampleTreeView.RootNodes.Add(workNode);\n sampleTreeView.RootNodes.Add(personalNode);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"treeview-a-treeview-with-databinding","controlId":"treeview","controlName":"TreeView","headerText":"A TreeView with DataBinding Using ItemSource","xaml":"\u003CTreeView ItemsSource=\u0022{x:Bind DataSource}\u0022\u003E\n \u003CTreeView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:ExplorerItem\u0022\u003E\n \u003CTreeViewItem ItemsSource=\u0022{x:Bind Children}\u0022 Content=\u0022{x:Bind Name}\u0022/\u003E\n \u003C/DataTemplate\u003E\n \u003C/TreeView.ItemTemplate\u003E\n\u003C/TreeView\u003E","csharp":"using System.Collections.ObjectModel;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nnamespace YourNamespace\n{\n public sealed partial class YourPage : Page\n {\n // DataSource is the data collection that will be bound to the TreeView\u0027s ItemsSource.\n public ObservableCollection\u003CExplorerItem\u003E DataSource { get; set; }\n\n public YourPage()\n {\n this.InitializeComponent();\n\n // Initialize the data source with sample data and set it as the context for data binding.\n DataSource = GetData();\n this.DataContext = this; // Bind the DataContext of the page to itself for XAML bindings.\n }\n\n // Method to provide sample data for the TreeView.\n private ObservableCollection\u003CExplorerItem\u003E GetData()\n {\n return new ObservableCollection\u003CExplorerItem\u003E\n {\n // Root folder with child files.\n new ExplorerItem\n {\n Name = \u0022Documents\u0022,\n Type = ExplorerItem.ExplorerItemType.Folder,\n Children =\n {\n new ExplorerItem\n {\n Name = \u0022ProjectProposal\u0022,\n Type = ExplorerItem.ExplorerItemType.File,\n },\n new ExplorerItem\n {\n Name = \u0022BudgetReport\u0022,\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"treeview-a-treeview-with-itemtemplateselector","controlId":"treeview","controlName":"TreeView","headerText":"A TreeView with ItemTemplateSelector","xaml":"\u003CPage ...\n xmlns:local=\u0022using:YourNamespace\u0022 \u003E\n\n \u003CPage.Resources\u003E\n \u003C!-- DataTemplate for folders --\u003E\n \u003CDataTemplate x:Key=\u0022FolderTemplate\u0022 x:DataType=\u0022local:ExplorerItem\u0022\u003E \n \u003CTreeViewItem AutomationProperties.Name=\u0022{x:Bind Name}\u0022\n ItemsSource=\u0022{x:Bind Children}\u0022 IsExpanded=\u0022True\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CImage Width=\u002220\u0022 Source=\u0022../Assets/SampleMedia/folder.png\u0022/\u003E\n \u003CTextBlock Margin=\u00220,0,10,0\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Name}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/TreeViewItem\u003E\n \u003C/DataTemplate\u003E\n\n \u003C!-- DataTemplate for files --\u003E\n \u003CDataTemplate x:Key=\u0022FileTemplate\u0022 x:DataType=\u0022local:ExplorerItem\u0022\u003E \n \u003CTreeViewItem AutomationProperties.Name=\u0022{x:Bind Name}\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE8A5;\u0022 /\u003E\n \u003CTextBlock Margin=\u00220,0,10,0\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Name}\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/TreeViewItem\u003E\n \u003C/DataTemplate\u003E\n\n \u003C!-- Template selector for ExplorerItem types --\u003E\n \u003Clocal:ExplorerItemTemplateSelector x:Key=\u0022ExplorerItemTemplateSelector\u0022\n FolderTemplate=\u0022{StaticResource FolderTemplate}\u0022\n FileTemplate=\u0022{StaticResource FileTemplate}\u0022 /\u003E\n \u003C/Page.Resources\u003E\n\n \u003C!-- TreeView bound to DataSource, using the ItemTemplateSelector --\u003E\n \u003CTreeView ItemsSource=\u0022{x:Bind DataSource}\u0022\n ItemTemplateSelector=\u0022{StaticResource ExplorerItemTemplateSelector}\u0022 /\u003E\n\u003C/Page\u003E","csharp":"using System.Collections.ObjectModel;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nnamespace YourNamespace\n{\n public sealed partial class YourPage : Page\n {\n public ObservableCollection\u003CExplorerItem\u003E DataSource { get; set; }\n\n public YourPage()\n {\n this.InitializeComponent();\n DataSource = GetData();\n this.DataContext = this;\n }\n\n private ObservableCollection\u003CExplorerItem\u003E GetData()\n {\n return new ObservableCollection\u003CExplorerItem\u003E\n {\n new ExplorerItem\n {\n Name = \u0022Documents\u0022,\n Type = ExplorerItem.ExplorerItemType.Folder,\n Children =\n {\n new ExplorerItem\n {\n Name = \u0022ProjectProposal\u0022,\n Type = ExplorerItem.ExplorerItemType.File,\n },\n new ExplorerItem\n {\n Name = \u0022BudgetReport\u0022,\n Type = ExplorerItem.ExplorerItemType.File,\n },\n },\n },\n new ExplorerItem\n {\n Name = \u0022Projects\u0022,\n Type = ExplorerItem.ExplorerItemType.Folder,\n Children =\n {\n new ExplorerItem\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"calendardatepicker","controlId":"calendardatepicker","controlName":"CalendarDatePicker","headerText":"CalendarDatePicker with a header and placeholder text.","xaml":"\u003CCalendarDatePicker PlaceholderText=\u0022Pick a date\u0022 Header=\u0022Calendar\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"calendarview","controlId":"calendarview","controlName":"CalendarView","headerText":"A basic calendar view.","xaml":"\u003CCalendarView \n SelectionMode=\u0022...\u0022 \n IsGroupLabelVisible=\u0022...\u0022\n IsOutOfScopeEnabled=\u0022...\u0022\n Language=\u0022...\u0022\n CalendarIdentifier=\u0022...\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"datepicker","controlId":"datepicker","controlName":"DatePicker","headerText":"A simple DatePicker with a header.","xaml":"\u003CDatePicker Header=\u0022Pick a date\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"datepicker-a-datepicker-with-day","controlId":"datepicker","controlName":"DatePicker","headerText":"A DatePicker with day formatted and year hidden.","xaml":"\u003CDatePicker DayFormat=\u0022{}{day.integer} ({dayofweek.abbreviated})\u0022 YearVisible=\u0022False\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"timepicker","controlId":"timepicker","controlName":"TimePicker","headerText":"A simple TimePicker.","xaml":"\u003CTimePicker/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"timepicker-a-timepicker-with-a","controlId":"timepicker","controlName":"TimePicker","headerText":"A TimePicker with a header and minute increments specified.","xaml":"\u003CTimePicker Header=\u0022Arrival time\u0022 MinuteIncrement=\u002215\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"timepicker-a-timepicker-using-a","controlId":"timepicker","controlName":"TimePicker","headerText":"A TimePicker using a 24-hour clock, initialized to current time.","xaml":"\u003Cxmlns:sys=\u0022using:System\u0022\u003E\n \n \u003CTimePicker ClockIdentifier=\u002224HourClock\u0022 Header=\u002224 hour clock\u0022 SelectedTime=\u0022{x:Bind sys:DateTime.Now.TimeOfDay}\u0022 /\u003E\u003C/xmlns:sys\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"button","controlId":"button","controlName":"Button","headerText":"A simple Button with text content.","xaml":"\u003CButton Content=\u0022Standard XAML button\u0022 Click=\u0022Button_Click\u0022 .../\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"button-a-button-with-graphical","controlId":"button","controlName":"Button","headerText":"A Button with graphical content.","xaml":"\u003CButton Content=\u0022Button\u0022 Click=\u0022Button_Click\u0022 AutomationProperties.Name=\u0022Pie\u0022\u003E\n \u003CImage Source=\u0022/Assets/SampleMedia/Slices.png\u0022 AutomationProperties.Name=\u0022Slice\u0022/\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"button-builtin-styles-applied-to","controlId":"button","controlName":"Button","headerText":"Built-in styles applied to Button.","xaml":"\u003CButton Style=\u0022{StaticResource AccentButtonStyle}\u0022 Content=\u0022Accent style button\u0022/\u003E\n\u003CButton Style=\u0022{StaticResource SubtleButtonStyle}\u0022 Content=\u0022Subtle style button\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"button-wrapping-buttons-with-large","controlId":"button","controlName":"Button","headerText":"Wrapping Buttons with large content","xaml":"\u003CStackPanel\u003E\n \u003CTextBlock Text=\u0022The following buttons\u0027 content may get clipped if we don\u0027t pay careful attention to their layout containers.\u0022 Margin=\u00220,0,0,8\u0022 TextWrapping=\u0022Wrap\u0022/\u003E\n \u003CTextBlock Text=\u0022One option to mitigate clipped content is to place Buttons underneath each other, allowing for more space to grow horizontally:\u0022 Margin=\u00220,0,0,8\u0022 TextWrapping=\u0022Wrap\u0022/\u003E\n \u003CButton HorizontalAlignment=\u0022Stretch\u0022 Margin=\u00220,0,0,5\u0022\u003EThis is some text that is too long and will get cut off\u003C/Button\u003E\n \u003CButton HorizontalAlignment=\u0022Stretch\u0022\u003EThis is another text that would result in being cut off\u003C/Button\u003E\n\n \u003CTextBlock Text=\u0022Another option is to explicitly wrap the Button\u0027s content\u0022 Margin=\u00220,8,0,8\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022 HorizontalAlignment=\u0022Center\u0022\u003E\n \u003CButton MaxWidth=\u0022240\u0022 Margin=\u00220,0,8,0\u0022\u003E\n \u003CTextBlock Text=\u0022This is some text that is too long and will get cut off\u0022 TextWrapping=\u0022WrapWholeWords\u0022/\u003E\n \u003C/Button\u003E\n \u003CButton MaxWidth=\u0022240\u0022\u003E\n \u003CTextBlock Text=\u0022This is another text that would result in being cut off\u0022 TextWrapping=\u0022WrapWholeWords\u0022/\u003E\n \u003C/Button\u003E\n \u003C/StackPanel\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"dropdownbutton","controlId":"dropdownbutton","controlName":"DropDownButton","headerText":"Simple DropDownButton","xaml":"\u003CDropDownButton Content=\u0022Email\u0022\u003E\n \u003CDropDownButton.Flyout\u003E\n \u003CMenuFlyout Placement=\u0022Bottom\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Send\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Reply\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Reply All\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/DropDownButton.Flyout\u003E\n\u003C/DropDownButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"dropdownbutton-dropdownbutton-with-icons","controlId":"dropdownbutton","controlName":"DropDownButton","headerText":"DropDownButton with Icons","xaml":"\u003CDropDownButton AutomationProperties.Name=\u0022Email\u0022\u003E\n \u003CDropDownButton.Content\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE715;\u0022/\u003E\n \u003C/DropDownButton.Content\u003E\n \u003CDropDownButton.Flyout\u003E\n \u003CMenuFlyout Placement=\u0022Bottom\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Send\u0022\u003E\n \u003CMenuFlyoutItem.Icon\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE725;\u0022/\u003E\n \u003C/MenuFlyoutItem.Icon\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003CMenuFlyoutItem Text=\u0022Reply\u0022\u003E\n \u003CMenuFlyoutItem.Icon\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE8CA;\u0022/\u003E\n \u003C/MenuFlyoutItem.Icon\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003CMenuFlyoutItem Text=\u0022Reply All\u0022\u003E\n \u003CMenuFlyoutItem.Icon\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE8C2;\u0022/\u003E\n \u003C/MenuFlyoutItem.Icon\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003C/MenuFlyout\u003E\n \u003C/DropDownButton.Flyout\u003E\n\u003C/DropDownButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"hyperlinkbutton","controlId":"hyperlinkbutton","controlName":"HyperlinkButton","headerText":"A hyperlink button that navigates to a URI.","xaml":"\u003CHyperlinkButton Content=\u0022Microsoft home page\u0022 NavigateUri=\u0022https://www.microsoft.com\u0022 .../\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"hyperlinkbutton-a-hyperlink-button-that","controlId":"hyperlinkbutton","controlName":"HyperlinkButton","headerText":"A hyperlink button that handles a Click event.","xaml":"\u003CHyperlinkButton Content=\u0022ToggleButton\u0022 Click=\u0022HyperlinkButton_Click\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"repeatbutton","controlId":"repeatbutton","controlName":"RepeatButton","headerText":"A simple RepeatButton with text content.","xaml":"\u003CRepeatButton Content=\u0022Click and hold\u0022 Click=\u0022RepeatButton_Click\u0022 .../\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"togglebutton","controlId":"togglebutton","controlName":"ToggleButton","headerText":"A simple ToggleButton with text content.","xaml":"\u003CToggleButton Content=\u0022ToggleButton\u0022 Click=\u0022Button_Click\u0022 .../\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"splitbutton","controlId":"splitbutton","controlName":"SplitButton","headerText":"A SplitButton controlling text color in a RichEditBox","xaml":"\u003CSplitButton x:Name=\u0022myColorButton\u0022 Click=\u0022myColorButton_Click\u0022\u003E\n \u003CBorder x:Name=\u0022CurrentColor\u0022 Width=\u002232\u0022 Height=\u002232\u0022 Background=\u0022Green\u0022 CornerRadius=\u00224,0,0,4\u0022/\u003E\n \u003CSplitButton.Flyout\u003E\n \u003CFlyout Placement=\u0022Bottom\u0022\u003E\n \u003C!-- flyout content --\u003E\n \u003C/Flyout\u003E\n \u003C/SplitButton.Flyout\u003E\n\u003C/SplitButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"splitbutton-a-splitbutton-with-text","controlId":"splitbutton","controlName":"SplitButton","headerText":"A SplitButton with text","xaml":"\u003CSplitButton x:Name=\u0022myColorButton\u0022\u003E\n Choose color\n \u003CSplitButton.Flyout\u003E\n \u003CFlyout Placement=\u0022Bottom\u0022\u003E\n \u003C!-- flyout content --\u003E\n \u003C/Flyout\u003E\n \u003C/SplitButton.Flyout\u003E\n\u003C/SplitButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"togglesplitbutton","controlId":"togglesplitbutton","controlName":"ToggleSplitButton","headerText":"Using ToggleSplitButton to control bulleted list functionality in RichEditBox","xaml":"\u003CToggleSplitButton x:Name=\u0022myListButton\u0022 VerticalAlignment=\u0022Top\u0022 Click=\u0022myListButton_Click\u0022\u003E\n \u003CSymbolIcon x:Name=\u0022mySymbolIcon\u0022 Symbol=\u0022List\u0022/\u003E\n \u003CToggleSplitButton.Flyout\u003E\n \u003CFlyout Placement=\u0022Bottom\u0022\u003E\n \u003C!-- flyout content --\u003E\n \u003C/Flyout\u003E\n \u003C/ToggleSplitButton.Flyout\u003E\n\u003C/ToggleSplitButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"checkbox","controlId":"checkbox","controlName":"CheckBox","headerText":"A 2-state CheckBox.","xaml":"\u003CCheckBox Content=\u0022Two-state CheckBox\u0022\n Checked=\u0022TwoState_Checked\u0022\n Unchecked=\u0022TwoState_Unchecked\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"checkbox-a-3state-checkbox","controlId":"checkbox","controlName":"CheckBox","headerText":"A 3-state CheckBox.","xaml":"\u003CCheckBox Content=\u0022Three-state CheckBox\u0022\n IsThreeState=\u0022True\u0022\n Checked=\u0022ThreeState_Checked\u0022\n Unchecked=\u0022ThreeState_Unchecked\u0022\n Indeterminate=\u0022ThreeState_Indeterminate\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"checkbox-using-a-3state-checkbox","controlId":"checkbox","controlName":"CheckBox","headerText":"Using a 3-state CheckBox.","xaml":"\u003CStackPanel\u003E\n \u003CCheckBox x:Name=\u0022OptionsAllCheckBox\u0022 Content=\u0022Select all\u0022 IsThreeState=\u0022True\u0022\n Checked=\u0022SelectAll_Checked\u0022 Unchecked=\u0022SelectAll_Unchecked\u0022\n Indeterminate=\u0022SelectAll_Indeterminate\u0022 /\u003E\n \u003CCheckBox x:Name=\u0022Option1CheckBox\u0022 Content=\u0022Option 1\u0022 Margin=\u002224,0,0,0\u0022 Checked=\u0022Option_Checked\u0022 Unchecked=\u0022Option_Unchecked\u0022 /\u003E\n \u003CCheckBox x:Name=\u0022Option2CheckBox\u0022 Content=\u0022Option 2\u0022 Margin=\u002224,0,0,0\u0022 Checked=\u0022Option_Checked\u0022 Unchecked=\u0022Option_Unchecked\u0022 IsChecked=\u0022True\u0022 /\u003E\n \u003CCheckBox x:Name=\u0022Option3CheckBox\u0022 Content=\u0022Option 3\u0022 Margin=\u002224,0,0,0\u0022 Checked=\u0022Option_Checked\u0022 Unchecked=\u0022Option_Unchecked\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"colorpicker","controlId":"colorpicker","controlName":"ColorPicker","headerText":"ColorPicker Properties.","xaml":"\u003CColorPicker\n ColorSpectrumShape=\u0022...\u0022\n IsMoreButtonVisible=\u0022...\u0022\n IsColorSliderVisible=\u0022...\u0022\n IsColorChannelTextInputVisible=\u0022...\u0022\n IsHexInputVisible=\u0022...\u0022\n IsAlphaEnabled=\u0022...\u0022\n IsAlphaSliderVisible=\u0022...\u0022\n IsAlphaTextInputVisible=\u0022...\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"combobox","controlId":"combobox","controlName":"ComboBox","headerText":"A ComboBox with items defined inline and its width set.","xaml":"\u003CComboBox SelectionChanged=\u0022ColorComboBox_SelectionChanged\u0022 Header=\u0022Colors\u0022 PlaceholderText=\u0022Pick a color\u0022 Width=\u0022200\u0022\u003E\n \u003Cx:String\u003EBlue\u003C/x:String\u003E\n \u003Cx:String\u003EGreen\u003C/x:String\u003E\n \u003Cx:String\u003ERed\u003C/x:String\u003E\n \u003Cx:String\u003EYellow\u003C/x:String\u003E\n\u003C/ComboBox\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"combobox-a-combobox-with-its","controlId":"combobox","controlName":"ComboBox","headerText":"A ComboBox with its ItemsSource set.","xaml":"\u003CComboBox ItemsSource=\u0022{x:Bind Fonts}\u0022 DisplayMemberPath=\u0022Item1\u0022 SelectedValuePath=\u0022Item2\u0022\n Header=\u0022Font\u0022 Width=\u0022200\u0022 Loaded=\u0022Combo2_Loaded\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"combobox-an-editable-combobox","controlId":"combobox","controlName":"ComboBox","headerText":"An editable ComboBox.","xaml":"\u003CComboBox IsEditable=\u0022True\u0022 ItemsSource=\u0022{x:Bind FontSizes}\u0022 Width=\u0022200\u0022 TextSubmitted=\u0022Combo3_TextSubmitted\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"radiobutton","controlId":"radiobutton","controlName":"RadioButton","headerText":"A group of RadioButton controls in a RadioButtons group.","xaml":"\u003CRadioButtons Header=\u0022Options:\u0022\u003E\n \u003CRadioButton Content=\u0022Option 1\u0022 Checked=\u0022RadioButton_Checked\u0022/\u003E\n \u003CRadioButton Content=\u0022Option 2\u0022 Checked=\u0022RadioButton_Checked\u0022/\u003E\n \u003CRadioButton Content=\u0022Option 3\u0022 Checked=\u0022RadioButton_Checked\u0022/\u003E\n\u003C/RadioButtons\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"radiobutton-two-radiobuttons-controls-with","controlId":"radiobutton","controlName":"RadioButton","headerText":"Two RadioButtons controls with strings as options.","xaml":"\u003CRadioButtons x:Name=\u0022BackgroundRadioButtons\u0022 SelectedIndex=\u0022...\u0022 MaxColumns=\u00223\u0022 Header=\u0022Background\u0022 SelectionChanged=\u0022BackgroundColor_SelectionChanged\u0022\u003E\n \u003Cx:String\u003EGreen\u003C/x:String\u003E\n \u003Cx:String\u003EYellow\u003C/x:String\u003E\n \u003Cx:String\u003EWhite\u003C/x:String\u003E\n\u003C/RadioButtons\u003E\n\u003CRadioButtons x:Name=\u0022BorderRadioButtons\u0022 SelectedIndex=\u0022...\u0022 MaxColumns=\u00223\u0022 Header=\u0022Border\u0022 SelectionChanged=\u0022BorderBrush_SelectionChanged\u0022\u003E\n \u003Cx:String\u003EGreen\u003C/x:String\u003E\n \u003Cx:String\u003EYellow\u003C/x:String\u003E\n \u003Cx:String\u003EWhite\u003C/x:String\u003E\n\u003C/RadioButtons\u003E\n\n\u003CBorder x:Name=\u0022ControlOutput\u0022 BorderThickness=\u002210\u0022 BorderBrush=\u0022#FFFFD700\u0022 Background=\u0022#FFFFFFFF\u0022","csharp":"private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)\n{\n if (ControlOutput != null \u0026#38;\u0026#38; sender is RadioButtons rb)\n {\n string colorName = rb.SelectedItem as string;\n switch (colorName)\n {\n case \u0022Yellow\u0022:\n ControlOutput.Background = new SolidColorBrush(Colors.Yellow);\n break;\n case \u0022Green\u0022:\n ControlOutput.Background = new SolidColorBrush(Colors.Green);\n break;\n case \u0022White\u0022:\n ControlOutput.Background = new SolidColorBrush(Colors.White);\n break;\n }\n }\n}\n\nprivate void BorderBrush_SelectionChanged(object sender, SelectionChangedEventArgs e)\n{\n if (ControlOutput != null \u0026#38;\u0026#38; sender is RadioButtons rb)\n {\n string colorName = rb.SelectedItem as string;\n switch (colorName)\n {\n case \u0022Yellow\u0022:\n ControlOutput.BorderBrush = new SolidColorBrush(Colors.Gold);\n break;\n case \u0022Green\u0022:\n ControlOutput.BorderBrush = new SolidColorBrush(Colors.DarkGreen);\n break;\n case \u0022White\u0022:\n ControlOutput.BorderBrush = new SolidColorBrush(Colors.White);\n break;\n }\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"ratingcontrol","controlId":"ratingcontrol","controlName":"RatingControl","headerText":"A simple RatingControl","xaml":"\u003CRatingControl AutomationProperties.Name=\u0022Simple RatingControl\u0022 IsClearEnabled=\u0022...\u0022\n IsReadOnly=\u0022...\u0022 Caption=\u0022...\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"ratingcontrol-placeholdervalue-of-ratingcontrol","controlId":"ratingcontrol","controlName":"RatingControl","headerText":"PlaceholderValue of RatingControl","xaml":"\u003CRatingControl AutomationProperties.Name=\u0022RatingControl with placeholder\u0022 PlaceholderValue=\u0022...\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"slider","controlId":"slider","controlName":"Slider","headerText":"A simple Slider.","xaml":"\u003CSlider AutomationProperties.Name=\u0022simple slider\u0022 Width=\u0022200\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"slider-a-slider-with-range","controlId":"slider","controlName":"Slider","headerText":"A Slider with range and steps specified.","xaml":"\u003CSlider Width=\u0022200\u0022 Minimum=\u0022...\u0022 Maximum=\u0022...\u0022 StepFrequency=\u0022...\u0022\n SmallChange=\u0022...\u0022 Value=\u0022...\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"slider-a-slider-with-tick","controlId":"slider","controlName":"Slider","headerText":"A Slider with tick marks.","xaml":"\u003CSlider\n AutomationProperties.Name=\u0022Slider with ticks\u0022\n TickFrequency=\u002220\u0022\n TickPlacement=\u0022Outside\u0022\n SnapsTo=\u0022...\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"slider-a-vertical-slider-with","controlId":"slider","controlName":"Slider","headerText":"A vertical slider with range and tick marks specified.","xaml":"\u003CSlider AutomationProperties.Name=\u0022vertical slider\u0022 Width=\u0022100\u0022 Orientation=\u0022Vertical\u0022\n TickFrequency=\u002210\u0022 TickPlacement=\u0022Outside\u0022 Maximum=\u002250\u0022 Minimum=\u0022-50\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"toggleswitch","controlId":"toggleswitch","controlName":"ToggleSwitch","headerText":"A simple ToggleSwitch.","xaml":"\u003CToggleSwitch AutomationProperties.Name=\u0022simple ToggleSwitch\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"toggleswitch-a-toggleswitch-with-custom","controlId":"toggleswitch","controlName":"ToggleSwitch","headerText":"A ToggleSwitch with custom header and content.","xaml":"\u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CToggleSwitch Header=\u0022Toggle work\u0022 OffContent=\u0022Do work\u0022 OnContent=\u0022Working\u0022 IsOn=\u0022......\u0022 /\u003E\n \u003CProgressRing IsActive=\u0022{x:Bind ToggleSwitch2.IsOn, Mode=OneWay}\u0022 Width=\u002232\u0022/\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"infobadge","controlId":"infobadge","controlName":"InfoBadge","headerText":"InfoBadge embedded in NavigationView ","xaml":"\u003CNavigationViewItem x:Name=\u0022InboxPage\u0022 Content=\u0022Inbox\u0022 Icon=\u0022Mail\u0022 AutomationProperties.Name=\u0022Inbox, 5 notifications\u0022\u003E\n \u003CNavigationViewItem.InfoBadge\u003E\n \u003CInfoBadge x:Name=\u0022infoBadge1\u0022 Value=\u00225\u0022 Opacity=\u0022{x:Bind InfoBadgeOpacity, Mode=OneWay}\u0022/\u003E\n \u003C/NavigationViewItem.InfoBadge\u003E\n\u003C/NavigationViewItem\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"infobadge-different-infobadge-styles","controlId":"infobadge","controlName":"InfoBadge","headerText":"Different InfoBadge Styles","xaml":"\u003CStackPanel Orientation=\u0022Horizontal\u0022 Spacing=\u002220\u0022 HorizontalAlignment=\u0022Center\u0022/\u003E\n \u003CInfoBadge x:Name=\u0022infoBadge2\u0022 Style=\u0022{StaticResource ...IconInfoBadgeStyle}\u0022 HorizontalAlignment=\u0022Right\u0022/\u003E\n \u003CInfoBadge x:Name=\u0022infoBadge3\u0022 Style=\u0022{StaticResource ...ValueInfoBadgeStyle}\u0022 HorizontalAlignment=\u0022Right\u0022 Value=\u002210\u0022 /\u003E\n \u003CInfoBadge x:Name=\u0022infoBadge4\u0022 Style=\u0022{StaticResource ...DotInfoBadgeStyle}\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"infobadge-placing-an-infobadge-inside","controlId":"infobadge","controlName":"InfoBadge","headerText":"Placing an InfoBadge Inside Another Control","xaml":"\u003CButton Padding=\u00220\u0022 Width=\u0022200\u0022 Height=\u002260\u0022 ToolTipService.ToolTip=\u0022Refresh required\u0022\n HorizontalAlignment=\u0022Center\u0022 HorizontalContentAlignment=\u0022Stretch\u0022 VerticalContentAlignment=\u0022Stretch\u0022\u003E\n \u003CGrid HorizontalAlignment=\u0022Stretch\u0022 VerticalAlignment=\u0022Stretch\u0022 Width=\u0022Auto\u0022 Height=\u0022Auto\u0022\u003E\n \u003CSymbolIcon Symbol=\u0022Sync\u0022 HorizontalAlignment=\u0022Center\u0022/\u003E\n \u003CInfoBadge Background=\u0022#C42B1C\u0022 HorizontalAlignment=\u0022Right\u0022 VerticalAlignment=\u0022Top\u0022\u003E\n \u003CInfoBadge.IconSource\u003E\n \u003CFontIconSource FontFamily=\u0022{StaticResource SymbolThemeFontFamily}\u0022 Glyph=\u0022\u0026#xF13C;\u0022 /\u003E\n \u003C/InfoBadge.IconSource\u003E\n \u003C/InfoBadge\u003E\n \u003C/Grid\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"infobadge-infobadge-with-dynamic-value","controlId":"infobadge","controlName":"InfoBadge","headerText":"InfoBadge with Dynamic Value","xaml":"\u003CInfoBadge Value=\u0022{Binding ElementName=ValueNumberBox, Path=Value, Mode=TwoWay}\u0022 /\u003E\n\u003CNumberBox x:Name=\u0022ValueNumberBox\u0022 Header=\u0022InfoBadge Value\u0022 Value=\u00221\u0022 Minimum=\u0022-1\u0022\n SpinButtonPlacementMode=\u0022Inline\u0022 ValueChanged=\u0022ValueNumberBox_ValueChanged\u0022 /\u003E","csharp":"private void ValueNumberBox_ValueChanged(Microsoft.UI.Xaml.Controls.NumberBox sender, Microsoft.UI.Xaml.Controls.NumberBoxValueChangedEventArgs args)\n{\n if((int)args.NewValue \u003E= -1)\n {\n DynamicInfoBadge.Value = (int)args.NewValue;\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"infobar","controlId":"infobar","controlName":"InfoBar","headerText":"A closable InfoBar with options to change its Severity.","xaml":"\u003CInfoBar \n IsOpen=\u0022True\u0022\n Severity=\u0022Informational\u0022\n Title=\u0022Title\u0022\n Message=\u0022Essential app message for your users to be informed of, acknowledge, or take action on.\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"infobar-a-closable-infobar-with","controlId":"infobar","controlName":"InfoBar","headerText":"A closable InfoBar with a long or short message and various buttons","xaml":"\u003CInfoBar \n IsOpen=\u0022True\u0022\n Title=\u0022Title\u0022\n Message=\u0022...\u0022 \u003E\n ...\n\u003C/InfoBar\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"infobar-a-closable-infobar-with-2","controlId":"infobar","controlName":"InfoBar","headerText":"A closable InfoBar with options to display the close button and icon","xaml":"\u003CInfoBar \n IsOpen=\u0022True\u0022\n IsIconVisible=\u0022...\u0022 \n IsClosable=\u0022...\u0022\n Title=\u0022Title\u0022\n Message=\u0022Essential app message for your users to be informed of, acknowledge, or take action on.\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"progressbar","controlId":"progressbar","controlName":"ProgressBar","headerText":"An indeterminate progress bar.","xaml":"\u003CProgressBar Width=\u0022130\u0022 IsIndeterminate=\u0022True\u0022 ShowPaused=\u0022...\u0022 ShowError=\u0022...\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"progressbar-a-determinate-progress-bar","controlId":"progressbar","controlName":"ProgressBar","headerText":"A determinate progress bar.","xaml":"\u003CProgressBar Width=\u0022130\u0022 Value=\u0022...\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"progressring","controlId":"progressring","controlName":"ProgressRing","headerText":"An indeterminate progress ring.","xaml":"\u003CProgressRing IsActive=\u0022...\u0022 .../\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"progressring-a-determinate-progress-ring","controlId":"progressring","controlName":"ProgressRing","headerText":"A determinate progress ring.","xaml":"\u003CProgressRing Width=\u002260\u0022 Height=\u002260\u0022 Value=\u0022...\u0022\n IsIndeterminate=\u0022False\u0022\n .../\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"tooltip","controlId":"tooltip","controlName":"ToolTip","headerText":"A button with a simple ToolTip.","xaml":"\u003CButton Content=\u0022Button with a simple ToolTip.\u0022 ToolTipService.ToolTip=\u0022Simple ToolTip\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"tooltip-a-textblock-with-an","controlId":"tooltip","controlName":"ToolTip","headerText":"A TextBlock with an offset ToolTip.","xaml":"\u003CTextBlock Text=\u0022TextBlock with an offset ToolTip.\u0022\u003E\n \u003CToolTipService.ToolTip\u003E\n \u003CToolTip Content=\u0022Offset ToolTip.\u0022 VerticalOffset=\u0022-80\u0022/\u003E\n \u003C/ToolTipService.ToolTip\u003E\n\u003C/TextBlock\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"tooltip-an-image-with-a","controlId":"tooltip","controlName":"ToolTip","headerText":"An Image with a ToolTip using PlacementRect.","xaml":"\u003CImage Source=\u0022/Assets/SampleMedia/cliff.jpg\u0022 Width=\u0022400\u0022 Height=\u0022266\u0022\u003E\n \u003CToolTipService.ToolTip\u003E\n \u003CToolTip Content=\u0022Non-occluding ToolTip.\u0022 PlacementRect=\u00220,0,400,266\u0022/\u003E\n \u003C/ToolTipService.ToolTip\u003E\n\u003C/Image\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"contentdialog","controlId":"contentdialog","controlName":"ContentDialog","headerText":"A basic content dialog with content.","xaml":"\u003CPage\n x:Class=\u0022YourApp.YourPage\u0022\n xmlns=\u0022http://schemas.microsoft.com/winfx/2006/xaml/presentation\u0022\n xmlns:x=\u0022http://schemas.microsoft.com/winfx/2006/xaml\u0022\u003E\n\n \u003CStackPanel VerticalAlignment=\u0022Stretch\u0022 HorizontalAlignment=\u0022Stretch\u0022\u003E\n \u003C!-- Content body --\u003E\n \u003CTextBlock Text=\u0022Lorem ipsum dolor sit amet, adipisicing elit.\u0022 TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003CCheckBox Content=\u0022Upload your content to the cloud.\u0022/\u003E\n \u003C/StackPanel\u003E\n\n\u003C/Page\u003E","csharp":"private async void ShowDialog_Click(object sender, RoutedEventArgs e)\n{\n ContentDialog dialog = new ContentDialog();\n\n // XamlRoot must be set in the case of a ContentDialog running in a Desktop app\n dialog.XamlRoot = this.XamlRoot;\n dialog.Style = Application.Current.Resources[\u0022DefaultContentDialogStyle\u0022] as Style;\n dialog.Title = \u0022Save your work?\u0022;\n dialog.PrimaryButtonText = \u0022Save\u0022;\n dialog.SecondaryButtonText = \u0022Don\u0027t Save\u0022;\n dialog.CloseButtonText = \u0022Cancel\u0022;\n dialog.DefaultButton = ContentDialogButton.Primary;\n dialog.Content = new ContentDialogContent();\n\n var result = await dialog.ShowAsync();\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"contentdialog-a-content-dialog-without","controlId":"contentdialog","controlName":"ContentDialog","headerText":"A content dialog without a default button.","xaml":"\u003CPage\n x:Class=\u0022YourApp.YourPage\u0022\n xmlns=\u0022http://schemas.microsoft.com/winfx/2006/xaml/presentation\u0022\n xmlns:x=\u0022http://schemas.microsoft.com/winfx/2006/xaml\u0022\u003E\n\n \u003CStackPanel VerticalAlignment=\u0022Stretch\u0022 HorizontalAlignment=\u0022Stretch\u0022\u003E\n \u003C!-- Content body --\u003E\n \u003CTextBlock Text=\u0022Lorem ipsum dolor sit amet, adipisicing elit.\u0022 TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003CCheckBox Content=\u0022Upload your content to the cloud.\u0022/\u003E\n \u003C/StackPanel\u003E\n\n\u003C/Page\u003E","csharp":"private async void ShowDialogNoDefault_Click(object sender, RoutedEventArgs e)\n{\n ContentDialog dialog = new ContentDialog();\n\n // XamlRoot must be set in the case of a ContentDialog running in a Desktop app\n dialog.XamlRoot = this.XamlRoot;\n dialog.Title = \u0022Replace file?\u0022;\n dialog.PrimaryButtonText = \u0022Replace\u0022;\n dialog.SecondaryButtonText = \u0022Keep\u0022;\n dialog.CloseButtonText = \u0022Cancel\u0022;\n dialog.DefaultButton = ContentDialogButton.None;\n dialog.Content = new ContentDialogContent();\n\n var result = await dialog.ShowAsync();\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"flyout","controlId":"flyout","controlName":"Flyout","headerText":"A button with a flyout","xaml":"\u003CButton Content=\u0022Empty cart\u0022\u003E\n \u003CButton.Flyout\u003E\n \u003CFlyout\u003E\n \u003CStackPanel\u003E\n \u003CTextBlock Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022 Text=\u0022All items will be removed. Do you want to continue?\u0022 Margin=\u00220,0,0,12\u0022 /\u003E\n \u003CButton Click=\u0022DeleteConfirmation_Click\u0022 Content=\u0022Yes, empty my cart\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Flyout\u003E\n \u003C/Button.Flyout\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"popup","controlId":"popup","controlName":"Popup","headerText":"Popup with Offset Positioning","xaml":"\u003CGrid x:Name=\u0022Output\u0022 HorizontalAlignment=\u0022Left\u0022 VerticalAlignment=\u0022Top\u0022 \u003E\n \u003CButton Content=\u0022Show Popup (using Offset)\u0022 Click=\u0022ShowPopupOffsetClicked\u0022 /\u003E\n \u003CPopup x:Name=\u0022StandardPopup\u0022 VerticalOffset=\u0022...\u0022 HorizontalOffset=\u0022...\u0022 IsLightDismissEnabled=\u0022...\u0022\u003E\n \u003CBorder Padding=\u002220\u0022 CornerRadius=\u0022{StaticResource OverlayCornerRadius}\u0022 Width=\u0022200\u0022 Height=\u0022160\u0022 BorderThickness=\u00221\u0022 BorderBrush=\u0022{ThemeResource SurfaceStrokeColorDefaultBrush}\u0022\n Background=\u0022{ThemeResource AcrylicBackgroundFillColorDefaultBrush}\u0022\u003E\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022 Spacing=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022Simple Popup\u0022 FontSize=\u002216\u0022 HorizontalAlignment=\u0022Center\u0022 /\u003E\n \u003CButton Content=\u0022Close\u0022 Click=\u0022ClosePopupClicked\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Border\u003E\n \u003C/Popup\u003E\n\u003C/Grid\u003E","csharp":"// Handles the Click event on the Button on the page and opens the Popup. \nprivate void ShowPopupOffsetClicked(object sender, RoutedEventArgs e)\n{\n // open the Popup if it isn\u0027t open already \n if (!StandardPopup.IsOpen) { StandardPopup.IsOpen = true; }\n}\n\n// Handles the Click event on the Button inside the Popup control and closes the Popup. \nprivate void ClosePopupClicked(object sender, RoutedEventArgs e)\n{\n // if the Popup is open, then close it \n if (StandardPopup.IsOpen) { StandardPopup.IsOpen = false; }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"teachingtip","controlId":"teachingtip","controlName":"TeachingTip","headerText":"Show a targeted TeachingTip on a button.","xaml":"\u003CButton\n x:Name=\u0022TestButton1\u0022\n Click=\u0022TestButton1Click\u0022\n Content=\u0022Show TeachingTip\u0022 /\u003E\n\u003CTeachingTip\n x:Name=\u0022TestButton1TeachingTip\u0022\n Title=\u0022This is the title\u0022\n Subtitle=\u0022And this is the subtitle\u0022\n Target=\u0022{x:Bind TestButton1}\u0022\u003E\n \u003CTeachingTip.IconSource\u003E\n \u003CSymbolIconSource Symbol=\u0022Refresh\u0022 /\u003E\n \u003C/TeachingTip.IconSource\u003E\n\u003C/TeachingTip\u003E","csharp":"private void TestButton1Click(object sender, RoutedEventArgs e)\n{\n TestButton1TeachingTip.IsOpen = true;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"teachingtip-show-a-nontargeted-teachingtip","controlId":"teachingtip","controlName":"TeachingTip","headerText":"Show a non-targeted TeachingTip with buttons.","xaml":"\u003CButton\n Click=\u0022TestButton2Click\u0022\n Content=\u0022Show TeachingTip\u0022 /\u003E\n\u003CTeachingTip\n x:Name=\u0022TestButton2TeachingTip\u0022\n Title=\u0022This is the title\u0022\n ActionButtonContent=\u0022Action button\u0022\n CloseButtonContent=\u0022Close button\u0022\n IsLightDismissEnabled=\u0022True\u0022\n PlacementMargin=\u002220\u0022\n PreferredPlacement=\u0022Auto\u0022\n Subtitle=\u0022And this is the subtitle\u0022 /\u003E","csharp":"private void TestButton2Click(object sender, RoutedEventArgs e)\n{\n TestButton2TeachingTip.IsOpen = true;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"teachingtip-show-a-targeted-teachingtip","controlId":"teachingtip","controlName":"TeachingTip","headerText":"Show a targeted TeachingTip with hero content on a button.","xaml":"\u003CButton\n x:Name=\u0022TestButton3\u0022\n Click=\u0022TestButton3Click\u0022\n Content=\u0022Show TeachingTip\u0022 /\u003E\n\u003CTeachingTip\n x:Name=\u0022TestButton3TeachingTip\u0022\n Title=\u0022This is the title\u0022\n PreferredPlacement=\u0022Bottom\u0022\n Subtitle=\u0022And this is the subtitle\u0022\n Target=\u0022{x:Bind TestButton3}\u0022\u003E\n \u003CTeachingTip.HeroContent\u003E\n \u003CImage\n AutomationProperties.Name=\u0022Sunset\u0022\n Source=\u0022/Assets/SampleMedia/sunset.jpg\u0022 /\u003E\n \u003C/TeachingTip.HeroContent\u003E\n \u003CTeachingTip.Content\u003E\n \u003CTextBlock\n Margin=\u00220,16,0,0\u0022\n Text=\u0022Description can go here\u0022\n TextWrapping=\u0022WrapWholeWords\u0022 /\u003E\n \u003C/TeachingTip.Content\u003E\n\u003C/TeachingTip\u003E","csharp":"private void TestButton3Click(object sender, RoutedEventArgs e)\n{\n TestButton3TeachingTip.IsOpen = true;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"annotatedscrollbar","controlId":"annotatedscrollbar","controlName":"AnnotatedScrollBar","headerText":"AnnotatedScrollBar linked to a ScrollView.","xaml":"\u003CScrollView x:Name=\u0022scrollView\u0022\n Background=\u0022LightGray\u0022 MaxWidth=\u0022800\u0022 MaxHeight=\u0022500\u0022\n VerticalScrollBarVisibility=\u0022Hidden\u0022\u003E\n \u003C!-- ... --\u003E\n\u003C/ScrollView\u003E\n \n\u003CAnnotatedScrollBar x:Name=\u0022annotatedScrollBar\u0022\n Margin=\u00224,0,48,0\u0022 MaxHeight=\u0022500\u0022\n HorizontalAlignment=\u0022Right\u0022\n DetailLabelRequested=\u0022AnnotatedScrollBar_DetailLabelRequested\u0022/\u003E","csharp":"private void AnnotatedScrollBarPage_Loaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n{\n scrollView.ScrollPresenter.VerticalScrollController = annotatedScrollBar.ScrollController;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"pipspager","controlId":"pipspager","controlName":"PipsPager","headerText":"PipsPager integrated with a FlipView","xaml":"\u003CStackPanel\u003E\n \u003CFlipView x:Name=\u0022Gallery\u0022 MaxWidth=\u0022400\u0022 Height=\u0022270\u0022 ItemsSource=\u0022{x:Bind Pictures}\u0022\u003E\n \u003CFlipView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022x:String\u0022\u003E\n \u003CImage Source=\u0022{x:Bind Mode=OneTime}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/FlipView.ItemTemplate\u003E\n \u003C/FlipView\u003E\n \u003CPipsPager x:Name=\u0022FlipViewPipsPager\u0022\n HorizontalAlignment=\u0022Center\u0022\n Margin=\u00220, 12, 0, 0\u0022\n NumberOfPages=\u0022{x:Bind Pictures.Count}\u0022\n SelectedPageIndex=\u0022{x:Bind Path=Gallery.SelectedIndex, Mode=TwoWay}\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"pipspager-pipspager-with-options-to","controlId":"pipspager","controlName":"PipsPager","headerText":"PipsPager with options to change its orientation and button visibility.","xaml":"\u003CPipsPager\n Orientation=\u0022...\u0022\n PreviousButtonVisibility=\u0022...\u0022\n NextButtonVisibility=\u0022...\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"scrollview","controlId":"scrollview","controlName":"ScrollView","headerText":"Content inside of a ScrollView.","xaml":"\u003CScrollView Height=\u0022266\u0022 Width=\u0022400\u0022 ContentOrientation=\u0022None\u0022\n ZoomMode=\u0022...\u0022 IsTabStop=\u0022True\u0022\n VerticalAlignment=\u0022Top\u0022 HorizontalAlignment=\u0022Left\u0022\n HorizontalScrollMode=\u0022...\u0022 HorizontalScrollBarVisibility=\u0022...\u0022\n VerticalScrollMode=\u0022...\u0022 VerticalScrollBarVisibility=\u0022...\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022cliff\u0022 Stretch=\u0022None\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n\u003C/ScrollView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"scrollview-constant-velocity-scrolling","controlId":"scrollview","controlName":"ScrollView","headerText":"Constant velocity scrolling.","xaml":"\u003CScrollView Height=\u0022300\u0022 Width=\u0022400\u0022 IsTabStop=\u0022True\u0022\n VerticalAlignment=\u0022Top\u0022 HorizontalAlignment=\u0022Left\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022grapes\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022rainier\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022sunset\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022treetops\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022valley\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022cliff\u0022/\u003E\n\u003C/ScrollView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"scrollview-programmatic-scroll-with-custom","controlId":"scrollview","controlName":"ScrollView","headerText":"Programmatic scroll with custom animation.","xaml":"\u003CScrollView Height=\u0022300\u0022 Width=\u0022400\u0022 IsTabStop=\u0022True\u0022\n ScrollAnimationStarting=\u0022ScrollView_ScrollAnimationStarting\u0022\n VerticalAlignment=\u0022Top\u0022 HorizontalAlignment=\u0022Left\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022leaves\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022carousel\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022bicycles\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022pond\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022marina\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022beach\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022rampart\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022mountain\u0022/\u003E\n\u003C/ScrollView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"scrollviewer","controlId":"scrollviewer","controlName":"ScrollViewer","headerText":"Content inside of a ScrollViewer.","xaml":"\u003CScrollViewer Height=\u0022266\u0022 Width=\u0022400\u0022 ZoomMode=\u0022...\u0022\n IsTabStop=\u0022True\u0022 IsVerticalScrollChainingEnabled=\u0022True\u0022\n HorizontalAlignment=\u0022Left\u0022 VerticalAlignment=\u0022Top\u0022\n ViewChanged=\u0022ScrollViewerControl_ViewChanged\u0022\n HorizontalScrollMode=\u0022...\u0022 HorizontalScrollBarVisibility=\u0022...\u0022\n VerticalScrollMode=\u0022...\u0022 VerticalScrollBarVisibility=\u0022...\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022cliff\u0022 Stretch=\u0022None\u0022\n HorizontalAlignment=\u0022Left\u0022 VerticalAlignment=\u0022Top\u0022/\u003E\n\u003C/ScrollViewer\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"semanticzoom","controlId":"semanticzoom","controlName":"SemanticZoom","headerText":"A simple SemanticZoom","xaml":"\u003CSemanticZoom Height=\u0022500\u0022\u003E\n \u003CSemanticZoom.ZoomedInView\u003E\n \u003CGridView ItemsSource=\u0022{x:Bind cvsGroups.View}\u0022 SelectionMode=\u0022None\u0022\n ItemTemplate=\u0022{StaticResource ZoomedInTemplate}\u0022\u003E\n \u003CGridView.GroupStyle\u003E\n \u003CGroupStyle HeaderTemplate=\u0022{StaticResource ZoomedInGroupHeaderTemplate}\u0022 /\u003E\n \u003C/GridView.GroupStyle\u003E\n \u003C/GridView\u003E\n \u003C/SemanticZoom.ZoomedInView\u003E\n\n \u003CSemanticZoom.ZoomedOutView\u003E\n \u003CListView ItemsSource=\u0022{x:Bind cvsGroups.View.CollectionGroups}\u0022 HorizontalAlignment=\u0022Stretch\u0022\n SelectionMode=\u0022None\u0022 ItemTemplate=\u0022{StaticResource ZoomedOutTemplate}\u0022 /\u003E\n \u003C/SemanticZoom.ZoomedOutView\u003E\n\u003C/SemanticZoom\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"border","controlId":"border","controlName":"Border","headerText":"A Border around a TextBlock.","xaml":"\u003CBorder BorderThickness=\u0022...\u0022 BorderBrush=\u0022...\u0022 Background=\u0022...\u0022\u003E\n \u003CTextBlock Text=\u0022Text inside a border\u0022 FontSize=\u002218\u0022 Foreground=\u0022Black\u0022 /\u003E\n\u003C/Border\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"canvas","controlId":"canvas","controlName":"Canvas","headerText":"A Canvas control.","xaml":"\u003CCanvas Width=\u0022120\u0022 Height=\u0022120\u0022 Background=\u0022Gray\u0022\u003E\n \u003CRectangle Fill=\u0022Red\u0022 Canvas.Left=\u0022...\u0022 Canvas.Top=\u0022...\u0022 Canvas.ZIndex=\u0022...\u0022 /\u003E\n \u003CRectangle Fill=\u0022Blue\u0022 Canvas.Left=\u002220\u0022 Canvas.Top=\u002220\u0022 Canvas.ZIndex=\u00221\u0022 /\u003E\n \u003CRectangle Fill=\u0022Green\u0022 Canvas.Left=\u002240\u0022 Canvas.Top=\u002240\u0022 Canvas.ZIndex=\u00222\u0022 /\u003E\n \u003CRectangle Fill=\u0022Yellow\u0022 Canvas.Left=\u002260\u0022 Canvas.Top=\u002260\u0022 Canvas.ZIndex=\u00223\u0022 /\u003E\n\u003C/Canvas\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"expander","controlId":"expander","controlName":"Expander","headerText":"An Expander with text in the header and content areas","xaml":"\u003CExpander\n IsExpanded=\u0022...\u0022\n ExpandDirection=\u0022...\u0022\n VerticalAlignment=\u0022...\u0022\n Header=\u0022This text is in the header\u0022\n Content=\u0022This is in the content\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"expander-modifying-expanders-content-alignment","controlId":"expander","controlName":"Expander","headerText":"Modifying Expanders content alignment","xaml":"\u003CExpander Width=\u0022500\u0022 HorizontalContentAlignment=\u0022Left\u0022 Padding=\u00220\u0022\u003E\n \u003CExpander.Header\u003E\n \u003CToggleButton Content=\u0022This ToggleButton is centered\u0022 HorizontalAlignment=\u0022Center\u0022/\u003E\n \u003C/Expander.Header\u003E\n \u003CExpander.Content\u003E\n \u003CButton Margin=\u00224\u0022 Content=\u0022This Button is left aligned\u0022/\u003E\n \u003C/Expander.Content\u003E\n\u003C/Expander\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"grid","controlId":"grid","controlName":"Grid","headerText":"A 3x3 Grid control.","xaml":"\u003CGrid\n Background=\u0022Gray\u0022\n ColumnDefinitions=\u002250, 50, 50\u0022\n RowDefinitions =\u002250, 50, 50\u0022\n ColumnSpacing=\u0022...\u0022\n RowSpacing=\u0022...\u0022\u003E\n \u003CRectangle Fill=\u0022Red\u0022 Grid.Column=\u0022...\u0022 Grid.Row=\u0022...\u0022 /\u003E\n \u003CRectangle Fill=\u0022Blue\u0022 Grid.Row=\u00221\u0022 /\u003E\n \u003CRectangle Fill=\u0022Green\u0022 Grid.Column=\u00221\u0022 /\u003E\n \u003CRectangle Fill=\u0022Yellow\u0022 Grid.Column=\u00221\u0022 Grid.Row=\u00221\u0022 /\u003E\n\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"relativepanel","controlId":"relativepanel","controlName":"RelativePanel","headerText":"A RelativePanel control.","xaml":"\u003CRelativePanel Width=\u0022300\u0022\u003E\n \u003CRectangle x:Name=\u0022Rectangle1\u0022 Fill=\u0022Red\u0022 Height=\u002250\u0022 Width=\u002250\u0022/\u003E\n \u003CRectangle x:Name=\u0022Rectangle2\u0022 Fill=\u0022Blue\u0022 Height=\u002250\u0022 Width=\u002250\u0022 RelativePanel.RightOf=\u0022Rectangle1\u0022 Margin=\u00228,0,0,0\u0022/\u003E\n \u003CRectangle x:Name=\u0022Rectangle3\u0022 Fill=\u0022Green\u0022 Height=\u002250\u0022 Width=\u002250\u0022 RelativePanel.AlignRightWithPanel=\u0022True\u0022/\u003E\n \u003CRectangle x:Name=\u0022Rectangle4\u0022 Fill=\u0022Yellow\u0022 Height=\u002250\u0022 Width=\u002250\u0022 RelativePanel.Below=\u0022Rectangle3\u0022 RelativePanel.AlignHorizontalCenterWith=\u0022Rectangle3\u0022 Margin=\u00220,8,0,0\u0022/\u003E\n\u003C/RelativePanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"splitview","controlId":"splitview","controlName":"SplitView","headerText":"A basic SplitView.","xaml":"\u003CSplitView x:Name=\u0022splitView\u0022 PaneBackground=\u0022...\u0022\n IsPaneOpen=\u0022...\u0022 OpenPaneLength=\u0022...\u0022 CompactPaneLength=\u0022...\u0022 DisplayMode=\u0022...\u0022\u003E\n \u003CSplitView.Pane\u003E\n \u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022/\u003E\n \u003CRowDefinition Height=\u0022*\u0022/\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022/\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CTextBlock Text=\u0022PANE CONTENT\u0022 x:Name=\u0022PaneHeader\u0022 Margin=\u002260,12,0,0\u0022 Style=\u0022{StaticResource BaseTextBlockStyle}\u0022/\u003E\n \u003CListView x:Name=\u0022NavLinksList\u0022 Margin=\u00220,12,0,0\u0022 SelectionMode=\u0022Single\u0022 Grid.Row=\u00221\u0022 VerticalAlignment=\u0022Stretch\u0022\n ItemClick=\u0022NavLinksList_ItemClick\u0022 IsItemClickEnabled=\u0022True\u0022\n ItemsSource=\u0022{x:Bind NavLinks}\u0022 ItemTemplate=\u0022{StaticResource NavLinkItemTemplate}\u0022/\u003E\n \u003C/Grid\u003E\n \u003C/SplitView.Pane\u003E\n \n \u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022/\u003E\n \u003CRowDefinition Height=\u0022*\u0022/\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CTextBlock Text=\u0022SPLITVIEW CONTENT\u0022 Margin=\u002212,12,0,0\u0022 Style=\u0022{StaticResource BaseTextBlockStyle}\u0022/\u003E\n \u003CTextBlock x:Name=\u0022content\u0022 Grid.Row=\u00221\u0022 Margin=\u002212,12,0,0\u0022 Style=\u0022{StaticResource BodyTextBlockStyle}\u0022 /\u003E\n \u003C/Grid\u003E\n\u003C/SplitView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"stackpanel","controlId":"stackpanel","controlName":"StackPanel","headerText":"A StackPanel control.","xaml":"\u003CStackPanel\n Orientation=\u0022...\u0022\n Spacing=\u0022...\u0022\u003E\n \u003CRectangle Fill=\u0022Red\u0022/\u003E\n \u003CRectangle Fill=\u0022Blue\u0022/\u003E\n \u003CRectangle Fill=\u0022Green\u0022/\u003E\n \u003CRectangle Fill=\u0022Yellow\u0022/\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"variablesizedwrapgrid","controlId":"variablesizedwrapgrid","controlName":"VariableSizedWrapGrid","headerText":"A VariableSizedWrapGrid control.","xaml":"\u003CVariableSizedWrapGrid Orientation=\u0022...\u0022 MaximumRowsOrColumns=\u00223\u0022 ItemHeight=\u002244\u0022 ItemWidth=\u002244\u0022\u003E\n \u003CRectangle Fill=\u0022Red\u0022/\u003E\n \u003CRectangle Fill=\u0022Blue\u0022 Height=\u002280\u0022 VariableSizedWrapGrid.RowSpan=\u00222\u0022/\u003E\n \u003CRectangle Fill=\u0022Green\u0022 Width=\u002280\u0022 VariableSizedWrapGrid.ColumnSpan=\u00222\u0022/\u003E\n \u003CRectangle Fill=\u0022Yellow\u0022 Height=\u002280\u0022 Width=\u002280\u0022 VariableSizedWrapGrid.RowSpan=\u00222\u0022 VariableSizedWrapGrid.ColumnSpan=\u00222\u0022/\u003E\n\u003C/VariableSizedWrapGrid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"viewbox","controlId":"viewbox","controlName":"Viewbox","headerText":"Content inside of a Viewbox.","xaml":"\u003CViewbox Height=\u0022...\u0022 Width=\u0022...\u0022 Stretch=\u0022...\u0022 StretchDirection=\u0022...\u0022\u003E\n \u003CBorder BorderBrush=\u0022Gray\u0022 BorderThickness=\u002215\u0022\u003E\n \u003CStackPanel Background=\u0022DarkGray\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CRectangle Fill=\u0022Blue\u0022 Height=\u002210\u0022 Width=\u002240\u0022/\u003E\n \u003CRectangle Fill=\u0022Green\u0022 Height=\u002210\u0022 Width=\u002240\u0022/\u003E\n \u003CRectangle Fill=\u0022Red\u0022 Height=\u002210\u0022 Width=\u002240\u0022/\u003E\n \u003CRectangle Fill=\u0022Yellow\u0022 Height=\u002210\u0022 Width=\u002240\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022/\u003E\n \u003CTextBlock Text=\u0022This is text.\u0022 HorizontalAlignment=\u0022Center\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/Border\u003E\n\u003C/Viewbox\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"breadcrumbbar","controlId":"breadcrumbbar","controlName":"BreadcrumbBar","headerText":"A BreadcrumbBar control","xaml":"\u003CBreadcrumbBar x:Name=\u0022BreadcrumbBar1\u0022/\u003E","csharp":"BreadcrumbBar1.ItemsSource = new string[] { \u0022Home\u0022, \u0022Documents\u0022, \u0022Design\u0022, \u0022Northwind\u0022, \u0022Images\u0022, \u0022Folder1\u0022, \u0022Folder2\u0022, \u0022Folder3\u0022 };","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"breadcrumbbar-breadcrumbbar-control-with-custom","controlId":"breadcrumbbar","controlName":"BreadcrumbBar","headerText":"BreadCrumbBar Control with Custom DataTemplate","xaml":"\u003CBreadcrumbBar x:Name=\u0022BreadcrumbBar2\u0022\u003E\n \u003CBreadcrumbBar.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022l:Folder\u0022\u003E\n \u003CBreadcrumbBarItem Content=\u0022{Binding}\u0022 AutomationProperties.Name=\u0022{Binding Name}\u0022\u003E\n \u003CBreadcrumbBarItem.ContentTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CTextBlock Text=\u0022{Binding Name}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/BreadcrumbBarItem.ContentTemplate\u003E\n \u003C/BreadcrumbBarItem\u003E\n \u003C/DataTemplate\u003E\n \u003C/BreadcrumbBar.ItemTemplate\u003E\n\u003C/BreadcrumbBar\u003E","csharp":"public class Folder\n{\n public string Name { get; set; }\n}\n\nBreadcrumbBar2.ItemsSource = new ObservableCollection\u003CFolder\u003E{\n new Folder { Name = \u0022Home\u0022},\n new Folder { Name = \u0022Folder1\u0022 },\n new Folder { Name = \u0022Folder2\u0022 },\n new Folder { Name = \u0022Folder3\u0022 },\n};\nBreadcrumbBar2.ItemClicked \u002B= BreadcrumbBar2_ItemClicked;\n\nprivate void BreadcrumbBar2_ItemClicked(BreadcrumbBar sender, BreadcrumbBarItemClickedEventArgs args)\n{\n var items = BreadcrumbBar2.ItemsSource as ObservableCollection\u003CFolder\u003E;\n for (int i = items.Count - 1; i \u003E= args.Index \u002B 1; i--)\n {\n items.RemoveAt(i);\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"navigationview","controlId":"navigationview","controlName":"NavigationView","headerText":"NavigationView with default PaneDisplayMode","xaml":"\u003CNavigationView x:Name=\u0022nvSample\u0022\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Icon=\u0022Play\u0022 Content=\u0022Menu Item1\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Save\u0022 Content=\u0022Menu Item2\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Refresh\u0022 Content=\u0022Menu Item3\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Download\u0022 Content=\u0022Menu Item4\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003C/NavigationView.MenuItems\u003E\n \u003CFrame x:Name=\u0022contentFrame\u0022/\u003E\n\u003C/NavigationView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"navigationview-navigationview-with-panedisplaymode-set","controlId":"navigationview","controlName":"NavigationView","headerText":"NavigationView with PaneDisplayMode set to Top","xaml":"\u003CNavigationView x:Name=\u0022nvSample\u0022 Header=\u0022This is Header Text\u0022 PaneDisplayMode=\u0022Top\u0022\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item1\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item2\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item3\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item4\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003C/NavigationView.MenuItems\u003E\n \u003CFrame x:Name=\u0022contentFrame\u0022/\u003E\n\u003C/NavigationView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"navigationview-navigationview-that-switches-pane","controlId":"navigationview","controlName":"NavigationView","headerText":"NavigationView that switches pane orientation based on window width","xaml":"\u003C!-- Put the following VisualStateGroup(s) inside the first component of your Page --\u003E\n\u003CVisualStateManager.VisualStateGroups\u003E\n \u003CVisualStateGroup\u003E\n \u003CVisualState\u003E\n \u003CVisualState.StateTriggers\u003E\n \u003CAdaptiveTrigger MinWindowWidth=\u0022{x:Bind nvSample.CompactModeThresholdWidth}\u0022 /\u003E\n \u003C/VisualState.StateTriggers\u003E\n \u003CVisualState.Setters\u003E\n \u003CSetter Target=\u0022nvSample.PaneDisplayMode\u0022 Value=\u0022Top\u0022 /\u003E\n \u003C/VisualState.Setters\u003E\n \u003C/VisualState\u003E\n \u003C/VisualStateGroup\u003E\n\u003C/VisualStateManager.VisualStateGroups \u003E\n\n\u003CNavigationView x:Name=\u0022nvSample\u0022\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item1\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item2\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item3\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item4\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003C/NavigationView.MenuItems\u003E\n \u003CFrame x:Name=\u0022contentFrame\u0022/\u003E\n\u003C/NavigationView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"navigationview-tying-selection-and-focus","controlId":"navigationview","controlName":"NavigationView","headerText":"Tying selection and focus - Tabs","xaml":"\u003CNavigationView x:Name=\u0022nvSample\u0022 PaneDisplayMode=\u0022Top\u0022 \n SelectionFollowsFocus=\u0022Enabled\u0022 IsBackButtonVisible=\u0022Collapsed\u0022\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Icon=\u0022Play\u0022 Content=\u0022Item1\u0022 x:Name=\u0022YourPageItem\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Save\u0022 Content=\u0022Item2\u0022 x:Name=\u0022YourPageItem\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Refresh\u0022 Content=\u0022Item3\u0022 x:Name=\u0022YourPageItem\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Download\u0022 Content=\u0022Item4\u0022 x:Name=\u0022YourPageItem\u0022 /\u003E\n \u003C/NavigationView.MenuItems\u003E\n \u003CFrame x:Name=\u0022contentFrame\u0022/\u003E\n\u003C/NavigationView\u003E","csharp":"//C# code behind\nprivate void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)\n{\n FrameNavigationOptions navOptions = new FrameNavigationOptions();\n navOptions.TransitionInfoOverride = args.RecommendedNavigationTransitionInfo;\n if (sender.PaneDisplayMode == NavigationViewPaneDisplayMode.Top)\n {\n navOptions.IsNavigationStackEnabled = False;\n }\n Type pageType;\n if (args.InvokedItem == YourPageItem) \n {\n pageType = typeof(YourPage);\n }\n else if (args.InvokedItem == YourPageItem) \n {\n pageType = typeof(YourPage);\n }\n else if (args.InvokedItem == YourPageItem) \n {\n pageType = typeof(YourPage);\n }\n else if (args.InvokedItem == YourPageItem) \n {\n pageType = typeof(YourPage);\n }\n ContentFrame.NavigateToType(pageType, null, navOptions);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"navigationview-data-binding","controlId":"navigationview","controlName":"NavigationView","headerText":"Data binding","xaml":"\u003CNavigationView x:Name=\u0022nvSample\u0022 \n MenuItemTemplateSelector=\u0022{StaticResource selector}\u0022 \n MenuItemsSource=\u0022{x:Bind Categories, Mode=OneWay}\u0022 /\u003E\n \n\u003Clocal:MenuItemTemplateSelector x:Key=\u0022selector\u0022\u003E \n \u003Clocal:MenuItemTemplateSelector.ItemTemplate\u003E \n \u003CDataTemplate x:DataType=\u0022local:Category\u0022 \u003E \n \u003CNavigationViewItem Content=\u0022{x:Bind Name}\u0022 ToolTipService.ToolTip=\u0022{x:Bind Tooltip}\u0022\u003E \n \u003CNavigationViewItem.Icon\u003E \n \u003CSymbolIcon Symbol=\u0022{x:Bind Glyph}\u0022 /\u003E \n \u003C/NavigationViewItem.Icon\u003E \n \u003C/NavigationViewItem\u003E\n \u003C/DataTemplate\u003E \n \u003C/local:MenuItemTemplateSelector.ItemTemplate \u003E \n\u003C/local:MenuItemTemplateSelector\u003E","csharp":"//C# code behind\nCategories = new ObservableCollection\u003CCategoryBase\u003E(); \nCategories.Add(new Category { Name = \u0022Category 1\u0022, Glyph = Symbol.Home, Tooltip = \u0022This is category 1\u0022 }); \nCategories.Add(new Category { Name = \u0022Category 2\u0022, Glyph = Symbol.Keyboard, Tooltip = \u0022This is category 2\u0022 }); \nCategories.Add(new Category { Name = \u0022Category 3\u0022, Glyph = Symbol.Library, Tooltip = \u0022This is category 3\u0022 }); \nCategories.Add(new Category { Name = \u0022Category 4\u0022, Glyph = Symbol.Mail, Tooltip = \u0022This is category 4\u0022 }); \n\npublic class CategoryBase { } \n\npublic class Category : CategoryBase\n{\n public string Name { get; set; } = string.Empty;\n public string Tooltip { get; set; } = string.Empty;\n public Symbol Glyph { get; set; }\n}\n\npublic class Separator : CategoryBase { }\n\npublic class Header : CategoryBase\n{\n public string Name { get; set; }\n}\n\n[ContentProperty(Name = \u0022ItemTemplate\u0022)]\nclass MenuItemTemplateSelector : DataTemplateSelector\n{\n public DataTemplate? ItemTemplate { get; set; }\n\n protected override DataTemplate? SelectTemplateCore(object item)\n {\n return item is Separator ? SeparatorTemplate : item is Header ? HeaderTemplate : ItemTemplate;\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"navigationview-navigationview-with-footer-menu","controlId":"navigationview","controlName":"NavigationView","headerText":"NavigationView with Footer Menu Items","xaml":"\u003CNavigationView x:Name=\u0022nvSample9\u0022 \n Header=\u0022This is Header Text\u0022 \n PaneDisplayMode=\u0022...\u0022 \n SelectionChanged=\u0022NavigationView_SelectionChanged9\u0022\n IsSettingsVisible=\u0022False\u0022\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Browse\u0022 Tag=\u0022YourPage\u0022 Icon=\u0022Library\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Track an Order\u0022 Tag=\u0022YourPage\u0022 Icon=\u0022Map\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Order History\u0022 Tag=\u0022YourPage\u0022 Icon=\u0022Tag\u0022 /\u003E\n \u003C/NavigationView.MenuItems\u003E\n \u003CNavigationView.FooterMenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Account\u0022 Tag=\u0022YourPage\u0022 Icon=\u0022Contact\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Your Cart\u0022 Tag=\u0022YourPage\u0022 Icon=\u0022Shop\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Help\u0022 Tag=\u0022YourPage\u0022 Icon=\u0022Help\u0022 /\u003E\n \u003C/NavigationView.FooterMenuItems\u003E\n \u003CFrame x:Name=\u0022contentFrame9\u0022 /\u003E\n\u003C/NavigationView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"navigationview-hierarchical-navigationview","controlId":"navigationview","controlName":"NavigationView","headerText":"Hierarchical NavigationView","xaml":"\u003CNavigationView x:Name=\u0022nvSample8\u0022 Grid.Row=\u00221\u0022 Height=\u0022460\u0022\n PaneDisplayMode=\u0022...\u0022 \n IsTabStop=\u0022False\u0022 \n SelectionChanged=\u0022NavigationView_SelectionChanged8\u0022\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Home\u0022 Icon=\u0022Home\u0022 ToolTipService.ToolTip=\u0022Home\u0022 Tag=\u0022YourPage\u0022/\u003E\n \u003CNavigationViewItem Content=\u0022Account\u0022 Icon=\u0022Contact\u0022 ToolTipService.ToolTip=\u0022Account\u0022 Tag=\u0022YourPage\u0022\u003E\n \u003CNavigationViewItem.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Mail\u0022 Icon=\u0022Mail\u0022 ToolTipService.ToolTip=\u0022Mail\u0022 Tag=\u0022YourPage\u0022/\u003E\n \u003CNavigationViewItem Content=\u0022Calendar\u0022 Icon=\u0022Calendar\u0022 ToolTipService.ToolTip=\u0022Calendar\u0022 Tag=\u0022YourPage\u0022/\u003E\n \u003C/NavigationViewItem.MenuItems\u003E\n \u003C/NavigationViewItem\u003E\n \u003CNavigationViewItem Content=\u0022Document options\u0022 Icon=\u0022Page2\u0022 ToolTipService.ToolTip=\u0022Document options\u0022 SelectsOnInvoked=\u0022False\u0022\u003E\n \u003CNavigationViewItem.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Create new\u0022 Icon=\u0022NewFolder\u0022 ToolTipService.ToolTip=\u0022Create new\u0022 Tag=\u0022YourPage\u0022/\u003E\n \u003CNavigationViewItem Content=\u0022Upload file\u0022 Icon=\u0022OpenLocal\u0022 ToolTipService.ToolTip=\u0022Upload file\u0022 Tag=\u0022YourPage\u0022/\u003E\n \u003C/NavigationViewItem.MenuItems\u003E\n \u003C/NavigationViewItem\u003E\n \u003C/NavigationView.MenuItems\u003E\n \u003CFrame x:Name=\u0022contentFrame8\u0022 /\u003E\n\u003C/NavigationView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"navigationview-api-in-action","controlId":"navigationview","controlName":"NavigationView","headerText":"API in action","xaml":"\u003CNavigationView x:Name=\u0022nvSample\u0022\n IsSettingsVisible=\u0022...\u0022\n IsBackButtonVisible=\u0022...\u0022\n IsBackEnabled=\u0022...\u0022\n SelectionChanged=\u0022NavigationView_SelectionChanged\u0022\n Header=\u0022...\u0022\n AlwaysShowHeader=\u0022...\u0022\n PaneTitle=\u0022...\u0022\n PaneDisplayMode=\u0022...\u0022 \n ExpandedModeThresholdWidth=\u0022500\u0022\n SelectionFollowsFocus=\u0022...\u0022\n IsTabStop=\u0022False\u0022\u003E\n \n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item1\u0022 Tag=\u0022YourPage\u0022 x:Name=\u0022YourPageItem\u0022\u003E\n \u003CNavigationViewItem.Icon\u003E\n \u003CSymbolIcon Symbol=\u0022Play\u0022 /\u003E\n \u003C/NavigationViewItem.Icon\u003E\n \u003C/NavigationViewItem\u003E\n \u003CNavigationViewItemHeader Content=\u0022Actions\u0022/\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item2\u0022 Tag=\u0022YourPage\u0022 x:Name=\u0022YourPageItem\u0022 SelectsOnInvoked=\u0022...\u0022\u003E\n \u003CNavigationViewItem.Icon\u003E\n \u003CSymbolIcon Symbol=\u0022Save\u0022 /\u003E\n \u003C/NavigationViewItem.Icon\u003E\n \u003C/NavigationViewItem\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item3\u0022 Tag=\u0022YourPage\u0022 x:Name=\u0022YourPageItem\u0022\u003E\n \u003CNavigationViewItem.Icon\u003E\n \u003CSymbolIcon Symbol=\u0022Refresh\u0022 /\u003E\n \u003C/NavigationViewItem.Icon\u003E\n \u003C/NavigationViewItem\u003E\n \u003C/NavigationView.MenuItems\u003E\n \n \u003CNavigationView.PaneCustomContent\u003E\n \u003CHyperlinkButton x:Name=\u0022PaneHyperlink\u0022 Content=\u0022More info\u0022 Margin=\u002212,0\u0022 Visibility=\u0022...\u0022 /\u003E\n \u003C/NavigationView.PaneCustomContent\u003E\n ...\n \u003CNavigationView.PaneFooter\u003E\n \u003CStackPanel x:Name=\u0022FooterStackPanel\u0022 Orientation=\u0022Vertical\u0022 Visibility=\u0022...\u0022\u003E\n \u003CNavigationViewItem Icon=\u0022Download\u0022 AutomationProperties.Name=\u0022download\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Favorite\u0022 AutomationProperties.Name=\u0022favorite\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/NavigationView.PaneFooter\u003E\n\n \u003CFrame x:Name=\u0022contentFrame\u0022 /\u003E\n\u003C/NavigationView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"pivot","controlId":"pivot","controlName":"Pivot","headerText":"A basic pivot.","xaml":"\u003CPivot Title=\u0022EMAIL\u0022\u003E\n \u003CPivotItem Header=\u0022All\u0022\u003E\n \u003CTextBlock Text=\u0022all emails go here.\u0022 /\u003E\n \u003C/PivotItem\u003E\n \u003CPivotItem Header=\u0022Unread\u0022\u003E\n \u003CTextBlock Text=\u0022unread emails go here.\u0022 /\u003E\n \u003C/PivotItem\u003E\n \u003CPivotItem Header=\u0022Flagged\u0022\u003E\n \u003CTextBlock Text=\u0022flagged emails go here.\u0022 /\u003E\n \u003C/PivotItem\u003E\n \u003CPivotItem Header=\u0022Urgent\u0022\u003E\n \u003CTextBlock Text=\u0022urgent emails go here.\u0022 /\u003E\n \u003C/PivotItem\u003E\n\u003C/Pivot\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"selectorbar","controlId":"selectorbar","controlName":"SelectorBar","headerText":"A Basic SelectorBar","xaml":"\u003CSelectorBar x:Name=\u0022SelectorBar1\u0022\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemRecent\u0022 Text=\u0022Recent\u0022 Icon=\u0022Clock\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemShared\u0022 Text=\u0022Shared\u0022 Icon=\u0022Share\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemFavorites\u0022 Text=\u0022Favorites\u0022 Icon=\u0022Favorite\u0022 /\u003E\n\u003C/SelectorBar\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"selectorbar-selectorbar-with-frame-slide","controlId":"selectorbar","controlName":"SelectorBar","headerText":"SelectorBar with Frame Slide Transitions","xaml":"\u003CSelectorBar x:Name=\u0022SelectorBar2\u0022 SelectionChanged=\u0022SelectorBar2_SelectionChanged\u0022\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPage1\u0022 Text=\u0022Page1\u0022 IsSelected=\u0022True\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPage2\u0022 Text=\u0022Page2\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPage3\u0022 Text=\u0022Page3\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPage4\u0022 Text=\u0022Page4\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPage5\u0022 Text=\u0022Page5\u0022 /\u003E\n\u003C/SelectorBar\u003E\n\n\u003CFrame x:Name=\u0022ContentFrame\u0022 IsNavigationStackEnabled=\u0022False\u0022 /\u003E","csharp":"private void SelectorBar2_SelectionChanged(SelectorBar sender, SelectorBarSelectionChangedEventArgs args)\n {\n SelectorBarItem selectedItem = sender.SelectedItem;\n int currentSelectedIndex = sender.Items.IndexOf(selectedItem);\n System.Type pageType;\n\n switch (currentSelectedIndex)\n {\n case 0:\n pageType = typeof(YourPage);\n break;\n case 1:\n pageType = typeof(YourPage);\n break;\n case 2:\n pageType = typeof(YourPage);\n break;\n case 3:\n pageType = typeof(YourPage);\n break;\n default:\n pageType = typeof(YourPage);\n break;\n }\n\n var slideNavigationTransitionEffect = currentSelectedIndex - previousSelectedIndex \u003E 0 ? SlideNavigationTransitionEffect.FromRight : SlideNavigationTransitionEffect.FromLeft;\n\n ContentFrame.Navigate(pageType, null, new SlideNavigationTransitionInfo() { Effect = slideNavigationTransitionEffect });\n\n previousSelectedIndex = currentSelectedIndex;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"selectorbar-selectorbar-displaying-different-collections","controlId":"selectorbar","controlName":"SelectorBar","headerText":"SelectorBar Displaying Different Collections Using ItemsView","xaml":"\u003CSelectorBar x:Name=\u0022SelectorBar3\u0022 SelectionChanged=\u0022SelectorBar3_SelectionChanged\u0022 \u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPink\u0022 Text=\u0022Pink\u0022 IsSelected=\u0022True\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPlum\u0022 Text=\u0022Plum\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPowderBlue\u0022 Text=\u0022PowderBlue\u0022 /\u003E\n\u003C/SelectorBar\u003E\n\n\u003CItemsView x:Name=\u0022ItemsView3\u0022 ItemTemplate=\u0022{StaticResource ColorsTemplate}\u0022 /\u003E\n \u003CItemsView.Layout\u003E\n \u003CUniformGridLayout /\u003E\n \u003C/ItemsView.Layout\u003E\n\u003C/ItemsView/\u003E","csharp":"private void SelectorBar3_SelectionChanged(SelectorBar sender, SelectorBarSelectionChangedEventArgs args)\n{\n if (sender.SelectedItem == SelectorBarItemPink)\n {\n ItemsView3.ItemsSource = PinkColorCollection;\n }\n else if (sender.SelectedItem == SelectorBarItemPlum)\n {\n ItemsView3.ItemsSource = PlumColorCollection;\n }\n else\n {\n ItemsView3.ItemsSource = PowderBlueColorCollection;\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"tabview","controlId":"tabview","controlName":"TabView","headerText":"A TabView with support for adding, closing, and rearranging tabs","xaml":"\u003CTabView AddTabButtonClick=\u0022TabView_AddButtonClick\u0022 TabCloseRequested=\u0022TabView_TabCloseRequested\u0022 Loaded=\u0022TabView_Loaded\u0022 /\u003E","csharp":"private void TabView_AddButtonClick(TabView sender, object args)\r\n{\r\n sender.TabItems.Add(CreateNewTab(sender.TabItems.Count));\r\n}\r\n\r\nprivate void TabView_TabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)\r\n{\r\n sender.TabItems.Remove(args.Tab);\r\n}\r\n\r\nprivate TabViewItem CreateNewTab(int index)\r\n{\r\n TabViewItem newItem = new TabViewItem();\r\n newItem.Header = $\u0022Document {index}\u0022;\r\n newItem.IconSource = new SymbolIconSource() { Symbol = Symbol.Document };\r\n newItem.IsClosable = true;\r\n\r\n // Content can be any UIElement \u2014 TextBox, Grid, UserControl, etc.\r\n var textBox = new TextBox\r\n {\r\n AcceptsReturn = true,\r\n TextWrapping = TextWrapping.Wrap,\r\n HorizontalAlignment = HorizontalAlignment.Stretch,\r\n VerticalAlignment = VerticalAlignment.Stretch,\r\n BorderThickness = new Thickness(0),\r\n };\r\n newItem.Content = textBox;\r\n\r\n return newItem;\r\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"tabview-a-tabview-with-tabviewitems","controlId":"tabview","controlName":"TabView","headerText":"A TabView with TabViewItems defined in markup","xaml":"\u003CTabView AddTabButtonClick=\u0022TabView_AddButtonClick\u0022 TabCloseRequested=\u0022TabView_TabCloseRequested\u0022\u003E\n \u003CTabView.TabItems\u003E\n \u003CTabViewItem Header=\u0022Document 0\u0022\u003E\n \u003CTabViewItem.IconSource\u003E\n \u003CSymbolIconSource Symbol=\u0022Placeholder\u0022 /\u003E\n \u003C/TabViewItem.IconSource\u003E\n \u003Csamplepages:YourPage /\u003E\n \u003C/TabViewItem\u003E\n \u003CTabViewItem Header=\u0022Document 1\u0022\u003E\n \u003CTabViewItem.IconSource\u003E\n \u003CSymbolIconSource Symbol=\u0022Placeholder\u0022 /\u003E\n \u003C/TabViewItem.IconSource\u003E\n \u003Csamplepages:YourPage /\u003E\n \u003C/TabViewItem\u003E\n \u003CTabViewItem Header=\u0022Document 2\u0022\u003E\n \u003CTabViewItem.IconSource\u003E\n \u003CSymbolIconSource Symbol=\u0022Placeholder\u0022 /\u003E\n \u003C/TabViewItem.IconSource\u003E\n \u003Csamplepages:YourPage /\u003E\n \u003C/TabViewItem\u003E\n \u003C/TabView.TabItems\u003E\n\u003C/TabView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"tabview-a-tabview-bound-to","controlId":"tabview","controlName":"TabView","headerText":"A TabView bound to a collection of MyData objects","xaml":"\u003CTabView TabItemsSource=\u0022{x:Bind myDatas, Mode=OneWay}\u0022 AddTabButtonClick=\u0022TabViewItemsSourceSample_AddTabButtonClick\u0022 TabCloseRequested=\u0022TabViewItemsSourceSample_TabCloseRequested\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"tabview-a-tabview-with-keyboarding","controlId":"tabview","controlName":"TabView","headerText":"A TabView with keyboarding support","xaml":"\u003CTabView AddTabButtonClick=\u0022TabView_AddButtonClick\u0022 TabCloseRequested=\u0022TabView_TabCloseRequested\u0022 Loaded=\u0022TabView_Loaded\u0022\u003E\n \u003CTabView.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Key=\u0022T\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NewTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022W\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022CloseSelectedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number1\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number2\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number3\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number4\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number5\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number6\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number7\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number8\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number9\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003C/TabView.KeyboardAccelerators\u003E\n\u003C/TabView\u003E","csharp":"private void NewTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)\n{\n if (ars.Element is not TabView senderTabView)\n {\n return;\n }\n\n senderTabView.TabItems.Add(CreateNewTab(senderTabView.TabItems.Count));\n\n args.Handled = true;\n}\n\nprivate void CloseSelectedTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)\n{\n if (args.Element is not TabView invokedTabView)\n {\n return;\n }\n\n // Only close the selected tab if it is closeable\n if ((invokedTabView.SelectedItem as TabViewItem)?.IsClosable is true)\n {\n invokedTabView.TabItems.Remove(invokedTabView.SelectedItem);\n }\n\n args.Handled = true;\n}\n\nprivate void NavigateToNumberedTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)\n{\n if (args.Element is not TabView invokedTabView)\n {\n return;\n }\n\n int tabToSelect = 0;\n\n switch (sender.Key)\n {\n case Windows.System.VirtualKey.Number1:\n tabToSelect = 0;\n break;\n case Windows.System.VirtualKey.Number2:\n tabToSelect = 1;\n break;\n case Windows.System.VirtualKey.Number3:\n tabToSelect = 2;\n break;\n case Windows.System.VirtualKey.Number4:\n tabToSelect = 3;\n break;\n case Windows.System.VirtualKey.Number5:\n tabToSelect = 4;\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"tabview-you-can-put-custom","controlId":"tabview","controlName":"TabView","headerText":"You can put custom content in TabStripHeader and TabStripFooter","xaml":"\u003CTabView\u003E\n \u003CTabView.TabStripHeader\u003E\n \u003CTextBlock Text=\u0022TabStripHeader Content\u0022 VerticalAlignment=\u0022Center\u0022 Margin=\u00228,6\u0022 Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022 /\u003E\n \u003C/TabView.TabStripHeader\u003E\n \u003CTabView.TabStripFooter\u003E\n \u003CTextBlock Text=\u0022TabStripFooter Content\u0022 VerticalAlignment=\u0022Center\u0022 HorizontalAlignment=\u0022Right\u0022 Margin=\u00226\u0022 Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022 /\u003E\n \u003C/TabView.TabStripFooter\u003E\n\u003C/TabView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"tabview-tab-widths-can-either","controlId":"tabview","controlName":"TabView","headerText":"Tab widths can either be equally sized, sized to the content of the tab, or sized to only show the icon when unselected","xaml":"\u003CTabView TabWidthMode=\u0022...\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"tabview-the-close-button-can","controlId":"tabview","controlName":"TabView","headerText":"The close button can be persistent or only visible on hover","xaml":"\u003CTabView CloseButtonOverlayMode=\u0022...\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"tabview-tabview-with-color-tab","controlId":"tabview","controlName":"TabView","headerText":"TabView with color tab icons","xaml":"\u003CTabView\u003E\n \u003CTabView.TabItems\u003E\n \u003CTabViewItem Header=\u0022CMD Prompt\u0022\u003E\n \u003CTabViewItem.IconSource\u003E\n \u003CBitmapIconSource UriSource=\u0022/Assets/SampleMedia/cmd.png\u0022 ShowAsMonochrome=\u0022False\u0022 /\u003E\n \u003C/TabViewItem.IconSource\u003E\n \u003C/TabViewItem\u003E\n \u003CTabViewItem Header=\u0022PowerShell\u0022\u003E\n \u003CTabViewItem.IconSource\u003E\n \u003CBitmapIconSource UriSource=\u0022/Assets/SampleMedia/powershell.png\u0022 ShowAsMonochrome=\u0022False\u0022 /\u003E\n \u003C/TabViewItem.IconSource\u003E\n \u003C/TabViewItem\u003E\n \u003CTabViewItem Header=\u0022Windows Subsystem for Linux\u0022\u003E\n \u003CTabViewItem.IconSource\u003E\n \u003CBitmapIconSource UriSource=\u0022/Assets/SampleMedia/linux.png\u0022 ShowAsMonochrome=\u0022False\u0022 /\u003E\n \u003C/TabViewItem.IconSource\u003E\n \u003C/TabViewItem\u003E\n \u003C/TabView.TabItems\u003E\n\u003C/TabView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"tabview-a-tabview-with-accent","controlId":"tabview","controlName":"TabView","headerText":"A TabView with accent colored TabStrip background","xaml":"\u003CTabView\u003E\n \u003CTabView.Resources\u003E\n \u003CResourceDictionary\u003E\n \u003CResourceDictionary.ThemeDictionaries\u003E\n \u003CResourceDictionary x:Key=\u0022Light\u0022\u003E\n \u003CSolidColorBrush x:Key=\u0022TabViewBackground\u0022 Color=\u0022{ThemeResource SystemAccentColorLight2}\u0022/\u003E\n \u003C/ResourceDictionary\u003E\n \u003CResourceDictionary x:Key=\u0022Dark\u0022\u003E\n \u003CSolidColorBrush x:Key=\u0022TabViewBackground\u0022 Color=\u0022{ThemeResource SystemAccentColorDark2}\u0022/\u003E\n \u003C/ResourceDictionary\u003E\n \u003C/ResourceDictionary.ThemeDictionaries\u003E\n \u003C/ResourceDictionary\u003E\n \u003C/TabView.Resources\u003E\n\u003C/TabView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"tabview-complete-tabview-windowing-sample","controlId":"tabview","controlName":"TabView","headerText":"Complete TabView windowing sample","xaml":"Check out the TabViewWindowingSamplePage.xaml and *.cs files to see the complete code.","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"animatedvisualplayer","controlId":"animatedvisualplayer","controlName":"AnimatedVisualPlayer","headerText":"Playback of a Lottie animation.","xaml":"\u003CAnimatedVisualPlayer x:Name=\u0022Player\u0022 AutoPlay=\u0022False\u0022\u003E\n \u003Canimatedvisuals:LottieLogo1/\u003E\n\u003C/AnimatedVisualPlayer\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"captureelementpreview","controlId":"captureelementpreview","controlName":"Capture Element / Camera Preview","headerText":"A MediaCapture preview displayed via a MediaPlayerElement.","xaml":"\u003CGrid RowDefinitions=\u0022Auto,*\u0022 ColumnDefinitions=\u0022*,100\u0022 MinWidth=\u0022400\u0022 MinHeight=\u0022300\u0022 RowSpacing=\u002210\u0022 ColumnSpacing=\u00224\u0022\u003E\n \u003CTextBlock x:Name=\u0022frameSourceName\u0022 Grid.Row=\u00220\u0022 Grid.Column=\u00220\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003CMediaPlayerElement x:Name=\u0022captureElement\u0022 Grid.Row=\u00221\u0022 Grid.Column=\u00220\u0022 Stretch=\u0022Uniform\u0022 AutoPlay=\u0022True\u0022 /\u003E\n \u003CTextBlock x:Name=\u0022capturedText\u0022 Visibility=\u0022Collapsed\u0022 Grid.Row=\u00220\u0022 Grid.Column=\u00221\u0022 VerticalAlignment=\u0022Center\u0022 Text=\u0022Captured:\u0022 /\u003E\n \u003CGrid x:Name=\u0022captureContainer\u0022 Grid.Row=\u00221\u0022 Grid.Column=\u00221\u0022\u003E\n \u003CScrollViewer VerticalScrollMode=\u0022Enabled\u0022\u003E\n \u003CStackPanel x:Name=\u0022snapshots\u0022 Spacing=\u00222\u0022/\u003E\n \u003C/ScrollViewer\u003E\n \u003C/Grid\u003E\n\u003C/Grid\u003E","csharp":"using Windows.Media.Capture.Frames;\nusing Windows.Media.Capture;\n\n private MediaFrameSourceGroup mediaFrameSourceGroup;\n private MediaCapture mediaCapture;\n\n async private void StartCaptureElement()\n {\n var groups = await MediaFrameSourceGroup.FindAllAsync();\n if (groups.Count == 0)\n {\n frameSourceName.Text = \u0022No camera devices found.\u0022;\n return;\n }\n mediaFrameSourceGroup = groups.First();\n\n frameSourceName.Text = \u0022Viewing: \u0022 \u002B mediaFrameSourceGroup.DisplayName;\n mediaCapture = new MediaCapture();\n var mediaCaptureInitializationSettings = new MediaCaptureInitializationSettings()\n {\n SourceGroup = this.mediaFrameSourceGroup,\n SharingMode = MediaCaptureSharingMode.SharedReadOnly,\n StreamingCaptureMode = StreamingCaptureMode.Video,\n MemoryPreference = MediaCaptureMemoryPreference.Cpu\n };\n await mediaCapture.InitializeAsync(mediaCaptureInitializationSettings);\n\n // Set the MediaPlayerElement\u0027s Source property to the MediaSource for the mediaCapture.\n var frameSource = mediaCapture.FrameSources[this.mediaFrameSourceGroup.SourceInfos[0].Id];\n captureElement.Source = Windows.Media.Core.MediaSource.CreateFromMediaFrameSource(frameSource);\n... }\n\n async private void CapturePhoto_Click(object sender, RoutedEventArgs e)\n {\n // Capture a photo to a stream\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"image","controlId":"image","controlName":"Image","headerText":"A basic image from a local file.","xaml":"\u003CImage Source=\u0022/Assets/SampleMedia/treetops.jpg\u0022 Height=\u0022100\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"image-an-image-decoded-to","controlId":"image","controlName":"Image","headerText":"An image decoded to the rendering size","xaml":"\u003CImage Height=\u0022100\u0022\u003E\n \u003CImage.Source\u003E\n \u003CBitmapImage UriSource=\u0022/Assets/SampleMedia/treetops.jpg\u0022\n DecodePixelHeight=\u0022100\u0022 /\u003E\n \u003C/Image.Source\u003E\n\u003C/Image\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"image-image-stretching","controlId":"image","controlName":"Image","headerText":"Image stretching.","xaml":"\u003CImage Stretch=\u0022...\u0022 Height=\u0022100\u0022 Width=\u0022100\u0022 Source=\u0022/Assets/SampleMedia/valley.jpg\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"image-nine-grid-images","controlId":"image","controlName":"Image","headerText":"Nine grid images.","xaml":"\u003CImage Source=\u0022/Assets/SampleMedia/ninegrid.gif\u0022 Height=\u002282\u0022 /\u003E\n\u003CImage Source=\u0022/Assets/SampleMedia/ninegrid.gif\u0022 NineGrid=\u00223,3,3,3\u0022 Height=\u0022164\u0022 /\u003E\n\u003CImage Source=\u0022/Assets/SampleMedia/ninegrid.gif\u0022 NineGrid=\u002230,20,30,20\u0022 Height=\u0022164\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"image-an-svg-image","controlId":"image","controlName":"Image","headerText":"An SVG image.","xaml":"\u003CImage Source=\u0022/Assets/SampleMedia/MirrorPCConsent.svg\u0022 Height=\u0022100\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"mapcontrol","controlId":"mapcontrol","controlName":"MapControl","headerText":"Showing a pin on the map","xaml":"\u003CMapControl x:Name=\u0022map1\u0022 MapServiceToken=\u0022MapServiceToken\u0022 Height=\u0022600\u0022/\u003E","csharp":"BasicGeoposition centerPosition = new BasicGeoposition { Latitude = 0, Longitude = 0 };\nGeopoint centerPoint = new Geopoint(centerPosition);\n\nmap1.Center = centerPoint;\nmap1.ZoomLevel = 1;\n\nvar myLandmarks = new List\u003CMapElement\u003E();\nBasicGeoposition position = new BasicGeoposition { Latitude = -30.034647, Longitude = -51.217659 };\nGeopoint point = new Geopoint(position);\n\nvar icon = new MapIcon\n{\n Location = point,\n};\n\nmyLandmarks.Add(icon);\n\nvar LandmarksLayer = new MapElementsLayer\n{\n MapElements = myLandmarks\n};\n\nmap1.Layers.Add(LandmarksLayer);","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"mediaplayerelement","controlId":"mediaplayerelement","controlName":"MediaPlayerElement","headerText":"A MediaPlayerElement with transport controls.","xaml":"\u003CMediaPlayerElement Source=\u0022/Assets/SampleMedia/ladybug.wmv\u0022\n AutoPlay=\u0022False\u0022\n AreTransportControlsEnabled=\u0022True\u0022 /\u003E","csharp":"private async void OpenFileButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n{\n var picker = new FileOpenPicker((sender as Button).XamlRoot.ContentIslandEnvironment.AppWindowId);\n var file = await picker.PickSingleFileAsync();\n if (file == null)\n return;\n\n var mediaSource = MediaSource.CreateFromStorageFile(await StorageFile.GetFileFromPathAsync(file.Path));\n Player1.Source = mediaSource;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"mediaplayerelement-a-mediaplayerelement-that-autoplays","controlId":"mediaplayerelement","controlName":"MediaPlayerElement","headerText":"A MediaPlayerElement that autoplays the video.","xaml":"\u003CMediaPlayerElement Source=\u0022Assets/SampleMedia/fishes.wmv\u0022\n AutoPlay=\u0022True\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"personpicture","controlId":"personpicture","controlName":"PersonPicture","headerText":"Select different looks for the person picture.","xaml":"\u003CPersonPicture ......... /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"sound","controlId":"sound","controlName":"Sound","headerText":"Toggling Sound","xaml":null,"csharp":"ElementSoundPlayer.State = ElementSoundPlayerState.Off;\nElementSoundPlayer.State = ElementSoundPlayerState.On;","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"sound-toggling-spatial-audio","controlId":"sound","controlName":"Sound","headerText":"Toggling Spatial Audio","xaml":null,"csharp":"ElementSoundPlayer.State = ElementSoundPlayerState.On;\nElementSoundPlayer.SpatialAudioMode = ElementSpatialAudioMode.On","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"sound-play-specific-system-sound","controlId":"sound","controlName":"Sound","headerText":"Play Specific System Sound","xaml":null,"csharp":"ElementSoundPlayer.State = ElementSoundPlayerState.On;\n\nElementSoundPlayer.Play(ElementSoundKind.Focus);\nElementSoundPlayer.Play(ElementSoundKind.Invoke);\nElementSoundPlayer.Play(ElementSoundKind.Show);\nElementSoundPlayer.Play(ElementSoundKind.Hide);\nElementSoundPlayer.Play(ElementSoundKind.MovePrevious);\nElementSoundPlayer.Play(ElementSoundKind.MoveNext);\nElementSoundPlayer.Play(ElementSoundKind.GoBack);","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"webview2","controlId":"webview2","controlName":"WebView2","headerText":"A simple WebView2 ","xaml":"\u003CWebView2 x:Name=\u0022MyWebView2\u0022 Source=\u0022https://learn.microsoft.com/windows/apps/winui/winui3/\u0022 HorizontalAlignment=\u0022Stretch\u0022 VerticalAlignment=\u0022Stretch\u0022 Grid.Row=\u00221\u0022 MinHeight=\u0022200\u0022 MinWidth=\u0022200\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"acrylic","controlId":"acrylic","controlName":"AcrylicBrush","headerText":"Default in-app acrylic brush.","xaml":"\u003CRectangle Fill=\u0022{ThemeResource AcrylicInAppFillColorDefaultBrush}\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"acrylic-custom-acrylic-inapp-brush","controlId":"acrylic","controlName":"AcrylicBrush","headerText":"Custom acrylic in-app brush.","xaml":"\u003CRectangle Fill=\u0022{ThemeResource CustomAcrylicInAppBrush}\u0022 /\u003E\n\n\u003CResourceDictionary x:Key=\u0022Default\u0022\u003E\n \u003Cmedia:AcrylicBrush x:Key=\u0022CustomAcrylicBrush\u0022 \n TintOpacity=\u0022...\u0022 TintColor=\u0022...\u0022 FallbackColor=\u0022...\u0022 /\u003E\n\u003C/ResourceDictionary\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"acrylic-luminosity-with-inapp-acrylic","controlId":"acrylic","controlName":"AcrylicBrush","headerText":"Luminosity with in-app Acrylic.","xaml":"\u003CRectangle Fill=\u0022{ThemeResource CustomAcrylicInAppLuminosity}\u0022 /\u003E\n\n\u003CResourceDictionary x:Key=\u0022Default\u0022\u003E\n \u003Cmedia:AcrylicBrush x:Key=\u0022CustomAcrylicInAppLuminosity\u0022 \n TintOpacity=\u0022...\u0022 TintLuminosityOpacity=\u0022...\u0022 TintColor=\u0022SkyBlue\u0022 FallbackColor=\u0022SkyBlue\u0022 /\u003E\n\u003C/ResourceDictionary\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"animatedicon","controlId":"animatedicon","controlName":"AnimatedIcon","headerText":"Adding AnimatedIcon to a button","xaml":"\u003CButton PointerEntered=\u0022Button_PointerEntered\u0022 PointerExited=\u0022Button_PointerExited\u0022 Width=\u002275\u0022\u003E\n \u003CAnimatedIcon x:Name=\u0022SearchAnimatedIcon\u0022\u003E\n \u003CAnimatedIcon.Source\u003E\n \u003Canimatedvisuals:.../\u003E\n \u003C/AnimatedIcon.Source\u003E\n \u003CAnimatedIcon.FallbackIconSource\u003E\n \u003CSymbolIconSource Symbol=\u0022Find\u0022/\u003E\n \u003C/AnimatedIcon.FallbackIconSource\u003E\n \u003C/AnimatedIcon\u003E\n\u003C/Button\u003E","csharp":"private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)\n{\n AnimatedIcon.SetState(this.SearchAnimatedIcon, \u0022PointerOver\u0022);\n}\n\nprivate void Button_PointerExited(object sender, PointerRoutedEventArgs e)\n{\n AnimatedIcon.SetState(this.SearchAnimatedIcon, \u0022Normal\u0022);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"animatedicon-adding-animatedicon-to-a","controlId":"animatedicon","controlName":"AnimatedIcon","headerText":"Adding AnimatedIcon to a NavigationView","xaml":"\u003CNavigationView\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Content = \u0022Game Settings\u0022\u003E\n \u003CNavigationViewItem.Icon\u003E\n \u003CAnimatedIcon x:Name=\u0027AnimatedIcon\u0027\u003E\n \u003CAnimatedIcon.Source\u003E\n \u003Canimatedvisuals:AnimatedSettingsVisualSource/\u003E\n \u003C/AnimatedIcon.Source\u003E\n \u003CAnimatedIcon.FallbackIconSource\u003E\n \u003CFontIconSource Glyph=\u0022\u0026#xE713;\u0022/\u003E\n \u003C/AnimatedIcon.FallbackIconSource\u003E\n \u003C/AnimatedIcon\u003E\n \u003C/NavigationViewItem.Icon\u003E\n \u003C/NavigationViewItem\u003E\n \u003C/NavigationView.MenuItems\u003E\n\u003C/NavigationView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"compactsizing","controlId":"compactsizing","controlName":"Compact Sizing","headerText":"Compact Sizing for controls","xaml":"\u003CPage.Resources\u003E\n \u003CResourceDictionary Source=\u0022ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml\u0022 /\u003E\n\u003C/Page.Resources\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"iconelement","controlId":"iconelement","controlName":"IconElement","headerText":"A BitmapIcon with a multicolor bitmap image","xaml":"\u003CBitmapIcon x:Name=\u0022SlicesIcon\u0022 UriSource=\u0022ms-appx:///Assets/YourImage.png\u0022 Width=\u002250\u0022 ShowAsMonochrome=\u0022...\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"iconelement-a-fonticon-using-a","controlId":"iconelement","controlName":"IconElement","headerText":"A FontIcon using a glyph from a specific font family in a button","xaml":"\u003CButton Name=\u0022ExampleButton1\u0022\u003E\n \u003CFontIcon FontFamily=\u0022Segoe MDL2 Assets\u0022 Glyph=\u0022\u0026#xE790;\u0022/\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"iconelement-a-imageicon-using-a","controlId":"iconelement","controlName":"IconElement","headerText":"A ImageIcon using a bitmap image in a button","xaml":"\u003CButton Name=\u0022ImageExample1\u0022 Width=\u0022100\u0022\u003E\n \u003CImageIcon Source=\u0022/Assets/SampleMedia/slices.png\u0022/\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"iconelement-a-imageicon-using-a-2","controlId":"iconelement","controlName":"IconElement","headerText":"A ImageIcon using a SVG image in a button","xaml":"\u003CButton Name=\u0022ImageExample2\u0022\u003E\n \u003CImageIcon Source=\u0022https://raw.githubusercontent.com/DiemenDesign/LibreICONS/master/svg-color/libre-camera-panorama.svg\u0022 Width=\u002250\u0022/\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"iconelement-a-pathicon-in-a","controlId":"iconelement","controlName":"IconElement","headerText":"A PathIcon in a button","xaml":"\u003CButton Name=\u0022Example1Button\u0022\u003E\n \u003CPathIcon Data=\u0022F1 M 16,12 20,2L 20,16 1,16\u0022 HorizontalAlignment=\u0022Center\u0022/\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"iconelement-a-symbolicon-in-a","controlId":"iconelement","controlName":"IconElement","headerText":"A SymbolIcon in a button","xaml":"\u003CButton Name=\u0022AcceptButton\u0022\u003E\n \u003CStackPanel\u003E\n \u003CSymbolIcon Symbol=\u0022Accept\u0022/\u003E\n \u003CTextBlock Text=\u0022Accept\u0022/\u003E\n \u003C/StackPanel\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"line","controlId":"line","controlName":"Line","headerText":"Line","xaml":"\u003CLine Stroke=\u0022SteelBlue\u0022\n X1=\u0022...\u0022 Y1=\u0022...\u0022\n X2=\u0022...\u0022 Y2=\u0022...\u0022\n StrokeThickness=\u0022...\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"line-polyline","controlId":"line","controlName":"Line","headerText":"Polyline","xaml":"\u003CPolyline Stroke=\u0022Black\u0022 StrokeThickness=\u0022...\u0022\n Points=\u002210,100 60,40 200,40 250,100\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"line-path","controlId":"line","controlName":"Line","headerText":"Path","xaml":"\u003C!-- The first segment is a cubic Bezier curve that begins at Point #1 and ends at Point #4, which is drawn by using Point #2 and 3 as the two control points. This segment is indicated by the \u0022C\u0022 command in the Data attribute string. --\u003E\n\u003C!-- The second segment begins with an absolute horizontal line command \u0022H\u0022, which specifies a line drawn from the preceding subpath endpoint (Point #4) to a new endpoint (Point #5). Because it\u0027s a horizontal line command, the value specified is an x-coordinate. --\u003E\n \n\u003CPath Stroke=\u0022DarkGoldenRod\u0022 StrokeThickness=\u0022...\u0022\n Data=\u0022M 10,100 C 100,25 300,250 400,75 H 200\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"line-geometrygroup","controlId":"line","controlName":"Line","headerText":"GeometryGroup","xaml":"\u003CPath Stroke=\u0022Black\u0022 StrokeThickness=\u00224\u0022 Fill=\u0022#CCCCFF\u0022\u003E\n \u003CPath.Data\u003E\n \n \u003C!-- Creates a composite shape from three geometries. --\u003E\n \u003CGeometryGroup FillRule=\u0022EvenOdd\u0022\u003E\n \u003CLineGeometry StartPoint=\u002210,10\u0022 EndPoint=\u002250,30\u0022 /\u003E\n \u003CEllipseGeometry Center=\u002240,70\u0022 RadiusX=\u0022...\u0022 RadiusY=\u0022...\u0022 /\u003E\n \u003CRectangleGeometry Rect=\u002230,55 100 30\u0022 /\u003E\n \u003C/GeometryGroup\u003E\n \u003C/Path.Data\u003E\n\u003C/Path\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"shape","controlId":"shape","controlName":"Shape","headerText":"Ellipse","xaml":"\u003CEllipse Fill=\u0022SteelBlue\u0022 Height=\u0022...\u0022 Width=\u0022...\u0022 StrokeThickness=\u0022...\u0022 Stroke=\u0022Black\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"shape-rectangle","controlId":"shape","controlName":"Shape","headerText":"Rectangle","xaml":"\u003CRectangle Fill=\u0022SteelBlue\u0022 Height=\u0022...\u0022 Width=\u0022...\u0022\n Stroke=\u0022Black\u0022 StrokeThickness=\u0022...\u0022\n RadiusY=\u0022...\u0022 RadiusX=\u0022...\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"shape-polygon","controlId":"shape","controlName":"Shape","headerText":"Polygon","xaml":"\u003CPolygon Fill=\u0022SteelBlue\u0022 Points=\u002210,100 60,40 200,40 250,100\u0022\n StrokeThickness=\u0022...\u0022 Stroke=\u0022Black\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"radialgradientbrush","controlId":"radialgradientbrush","controlName":"RadialGradientBrush","headerText":"RadialGradientBrush Sample","xaml":"\u003CRectangle Width=\u0022200\u0022 Height=\u0022200\u0022\u003E\n \u003CRectangle.Fill\u003E\n \u003Cmedia:RadialGradientBrush\n MappingMode=\u0022...\u0022\n Center=\u0022...,...\u0022\n RadiusX=\u0022...\u0022\n RadiusY=\u0022...\u0022\n GradientOrigin=\u0022...,...\u0022\n SpreadMethod=\u0022...\u0022\u003E\n \u003CGradientStop Color=\u0022Yellow\u0022 Offset=\u00220.0\u0022 /\u003E\n \u003CGradientStop Color=\u0022Blue\u0022 Offset=\u00221\u0022 /\u003E\n \u003C/media:RadialGradientBrush\u003E\n \u003C/Rectangle.Fill\u003E\n\u003C/Rectangle\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"systembackdrops","controlId":"systembackdrops","controlName":"System Backdrops (Mica/Acrylic)","headerText":"Backdrop types","xaml":"\u003C!-- Mica --\u003E\n\u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop/\u003E\n\u003C/Window.SystemBackdrop\u003E\n \n\u003C!-- Mica Alt --\u003E\n\u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop Kind=\u0022BaseAlt\u0022/\u003E\n\u003C/Window.SystemBackdrop\u003E\n\n\u003C!-- Acrylic --\u003E\n\u003CWindow.SystemBackdrop\u003E\n \u003CDesktopAcrylicBackdrop/\u003E\n\u003CWindow.SystemBackdrop\u003E\u003C/Window.SystemBackdrop\u003E\u003C/Window.SystemBackdrop\u003E","csharp":"bool TrySetMicaBackdrop(bool useMicaAlt)\n{\n if (SystemBackdrops.MicaController.IsSupported())\n {\n MicaBackdrop micaBackdrop = new MicaBackdrop();\n micaBackdrop.Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base;\n SystemBackdrop = micaBackdrop;\n\n return true; // Succeeded.\n }\n\n return false; // Mica is not supported on this system.\n}\n\nbool TrySetDesktopAcrylicBackdrop()\n{\n if (DesktopAcrylicController.IsSupported())\n {\n DesktopAcrylicBackdrop DesktopAcrylicBackdrop = new DesktopAcrylicBackdrop();\n SystemBackdrop = DesktopAcrylicBackdrop;\n\n return true; // Succeeded.\n }\n\n return false; // DesktopAcrylic is not supported on this system.\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"systembackdrops-micacontroller","controlId":"systembackdrops","controlName":"System Backdrops (Mica/Acrylic)","headerText":"MicaController","xaml":null,"csharp":"using System.Runtime.InteropServices;\nusing WinRT;\nusing Microsoft.UI.Composition;\nusing Microsoft.UI.Composition.SystemBackdrops;\n\nMicaController micaController;\nSystemBackdropConfiguration configurationSource;\n\nbool TrySetMicaBackdrop(bool useMicaAlt)\n{\n if (MicaController.IsSupported())\n {\n DispatcherQueue.EnsureSystemDispatcherQueue();\n\n // Hooking up the policy object\n configurationSource = new SystemBackdropConfiguration();\n Activated \u002B= Window_Activated;\n Closed \u002B= Window_Closed;\n ((FrameworkElement)Content).ActualThemeChanged \u002B= Window_ThemeChanged;\n\n // Initial configuration state.\n configurationSource.IsInputActive = true;\n SetConfigurationSourceTheme();\n\n micaController = new MicaController();\n micaController.Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base;\n\n // Enable the system backdrop.\n micaController.AddSystemBackdropTarget(this.As\u003CICompositionSupportsSystemBackdrop\u003E());\n micaController.SetSystemBackdropConfiguration(configurationSource);\n return true; // Succeeded.\n }\n\n return false; // Mica is not supported on this system.\n}\n\nprivate void Window_Activated(object sender, WindowActivatedEventArgs args)\n{\n configurationSource.IsInputActive = args.WindowActivationState != WindowActivationState.Deactivated;\n}\n\nprivate void Window_Closed(object sender, WindowEventArgs args)\n{\n // Make sure any Mica/Acrylic controller is disposed\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"systembackdrops-desktopacryliccontroller","controlId":"systembackdrops","controlName":"System Backdrops (Mica/Acrylic)","headerText":"DesktopAcrylicController","xaml":null,"csharp":"using System.Runtime.InteropServices;\nusing WinRT;\nusing Microsoft.UI.Composition;\nusing Microsoft.UI.Composition.SystemBackdrops;\n\nSystemBackdrops.DesktopAcrylicController acrylicController;\nSystemBackdrops.SystemBackdropConfiguration configurationSource;\n\nbool TrySetAcrylicBackdrop(bool useAcrylicThin)\n{\n if (DesktopAcrylicController.IsSupported())\n {\n DispatcherQueue.EnsureSystemDispatcherQueue();\n\n // Hooking up the policy object\n configurationSource = new SystemBackdropConfiguration();\n Activated \u002B= Window_Activated;\n Closed \u002B= Window_Closed;\n ((FrameworkElement)Content).ActualThemeChanged \u002B= Window_ThemeChanged;\n\n // Initial configuration state.\n configurationSource.IsInputActive = true;\n SetConfigurationSourceTheme();\n\n acrylicController = new DesktopAcrylicController();\n acrylicController.Kind = useAcrylicThin ? DesktopAcrylicKind.Thin : DesktopAcrylicKind.Base;\n\n // Enable the system backdrop.\n acrylicController.AddSystemBackdropTarget(As\u003CICompositionSupportsSystemBackdrop\u003E());\n acrylicController.SetSystemBackdropConfiguration(configurationSource);\n return true; // Succeeded.\n }\n\n return false; // Acrylic is not supported on this system.\n}\n\nprivate void Window_Activated(object sender, WindowActivatedEventArgs args)\n{\n configurationSource.IsInputActive = args.WindowActivationState != WindowActivationState.Deactivated;\n}\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"themeshadow","controlId":"themeshadow","controlName":"ThemeShadow","headerText":"ThemeShadow applied to a Border","xaml":"\u003CGrid\u003E\n \u003CGrid x:Name=\u0022ShadowCastGrid\u0022/\u003E\n \u003CBorder x:Name=\u0022ShadowRect\u0022 Translation=\u00220,0,...\u0022 Loaded=\u0022ShadowRect_Loaded\u0022 Width=\u0022200\u0022 Height=\u0022200\u0022 CornerRadius=\u0022{ThemeResource OverlayCornerRadius}\u0022 Background=\u0022{ThemeResource CardBackgroundFillColorDefaultBrush}\u0022/\u003E\n \u003CBorder.Shadow\u003E\n \u003CThemeShadow x:Name=\u0022shadow\u0022/\u003E\n \u003C/Border.Shadow\u003E\n \u003C/Border\u003E \n\u003C/Grid\u003E","csharp":"private void ShadowRect_Loaded(object sender, RoutedEventArgs e)\n{\n shadow.Receivers.Add(ShadowCastGrid);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"autosuggestbox","controlId":"autosuggestbox","controlName":"AutoSuggestBox","headerText":"A basic autosuggest box.","xaml":"\u003CAutoSuggestBox TextChanged=\u0022AutoSuggestBox_TextChanged\u0022\n SuggestionChosen=\u0022AutoSuggestBox_SuggestionChosen\u0022","csharp":"// List of cats\nprivate List\u003Cstring\u003E Cats = new List\u003Cstring\u003E()\n{\n \u0022Abyssinian\u0022,\n \u0022Aegean\u0022,\n \u0022American Bobtail\u0022,\n ...\n};\n\n// Handle text change and present suitable items\nprivate void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)\n{\n // Since selecting an item will also change the text,\n // only listen to changes caused by user entering text.\n if(args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)\n {\n var suitableItems = new List\u003Cstring\u003E();\n var splitText = sender.Text.ToLower().Split(\u0022 \u0022);\n foreach(var cat in Cats)\n {\n var found = splitText.All((key)=\u003E\n {\n return cat.ToLower().Contains(key);\n });\n if(found)\n {\n suitableItems.Add(cat);\n }\n }\n if(suitableItems.Count == 0)\n {\n suitableItems.Add(\u0022No results found\u0022);\n }\n sender.ItemsSource = suitableItems;\n }\n}\n\n// Handle user selecting an item, in our case just output the selected item.\nprivate void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)\n{\n SuggestionOutput.Text = args.SelectedItem.ToString();\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"autosuggestbox-an-autosuggestbox-that-provides","controlId":"autosuggestbox","controlName":"AutoSuggestBox","headerText":"An AutoSuggestBox that provides a SearchBox experience","xaml":"\u003CAutoSuggestBox PlaceholderText=\u0022Type a control name\u0022\n TextChanged=\u0022Control2_TextChanged\u0022\n QueryIcon=\u0022Find\u0022\n QuerySubmitted=\u0022Control2_QuerySubmitted\u0022\n SuggestionChosen=\u0022Control2_SuggestionChosen\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"numberbox","controlId":"numberbox","controlName":"NumberBox","headerText":"A NumberBox that evaluates expressions.","xaml":"\u003CNumberBox Header=\u0022Enter an expression:\u0022 Value=\u0022NaN\u0022 PlaceholderText=\u00221 \u002B 2^2\u0022 AcceptsExpression=\u0022True\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"numberbox-a-numberbox-with-a","controlId":"numberbox","controlName":"NumberBox","headerText":"A NumberBox with a spin button.","xaml":"\u003CNumberBox\n x:Name=\u0022NumberBoxSpinButtonPlacementExample\u0022\n Header=\u0022Enter an integer:\u0022 \n Value=\u00221\u0022 \n SpinButtonPlacementMode=\u0022...\u0022\n SmallChange=\u002210\u0022\n LargeChange=\u0022100\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"numberbox-a-formatted-numberbox-that","controlId":"numberbox","controlName":"NumberBox","headerText":"A formatted NumberBox that rounds to the nearest 0.25.","xaml":"\u003CNumberBox x:Name=\u0022FormattedNumberBox\u0022 Header=\u0022Enter an dollar amount:\u0022 PlaceholderText=\u00220.00\u0022 /\u003E","csharp":"private void SetNumberBoxNumberFormatter()\n{\n IncrementNumberRounder rounder = new IncrementNumberRounder();\n rounder.Increment = 0.25;\n rounder.RoundingAlgorithm = RoundingAlgorithm.RoundHalfUp;\n\n DecimalFormatter formatter = new DecimalFormatter();\n formatter.IntegerDigits = 1;\n formatter.FractionDigits = 2;\n formatter.NumberRounder = rounder;\n FormattedNumberBox.NumberFormatter = formatter;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"passwordbox","controlId":"passwordbox","controlName":"PasswordBox","headerText":"A simple PasswordBox.","xaml":"\u003CPasswordBox Width=\u0022300\u0022 AutomationProperties.Name=\u0022Simple PasswordBox\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"passwordbox-a-passwordbox-with-header","controlId":"passwordbox","controlName":"PasswordBox","headerText":"A PasswordBox with header, placeholder text and custom character.","xaml":"\u003CPasswordBox Width=\u0022300\u0022 Header=\u0022Password\u0022 PlaceholderText=\u0022Enter your password\u0022 PasswordChar=\u0022#\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"passwordbox-a-passwordbox-with-reveal","controlId":"passwordbox","controlName":"PasswordBox","headerText":"A PasswordBox with reveal mode.","xaml":"\u003CPasswordBox Name=\u0022passworBoxWithRevealmode\u0022 Width=\u0022250\u0022 Margin=\u00220,0,8,0\u0022\n PasswordRevealMode=\u0022Hidden\u0022 AutomationProperties.Name=\u0022Sample password box\u0022/\u003E\n\u003CCheckBox Name=\u0022revealModeCheckBox\u0022 Content=\u0022Show password\u0022 IsChecked=\u0022False\u0022\n Checked=\u0022RevealModeCheckbox_Changed\u0022 Unchecked=\u0022RevealModeCheckbox_Changed\u0022/\u003E","csharp":"private void RevealModeCheckbox_Changed(object sender, RoutedEventArgs e)\n{\n if (revealModeCheckBox.IsChecked == true)\n {\n passworBoxWithRevealmode.PasswordRevealMode = PasswordRevealMode.Visible;\n }\n else\n {\n passworBoxWithRevealmode.PasswordRevealMode = PasswordRevealMode.Hidden;\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"richeditbox","controlId":"richeditbox","controlName":"RichEditBox","headerText":"A simple text editor using RichEditBox.","xaml":"\u003CRichEditBox x:Name=\u0022editor\u0022 AutomationProperties.Name=\u0022simple text editor\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"richeditbox-customizing-richeditboxs-commandbarflyout-adding","controlId":"richeditbox","controlName":"RichEditBox","headerText":"Customizing RichEditBox\u0027s CommandBarFlyout - Adding \u0027Share\u0027","xaml":null,"csharp":"private void Menu_Opening(object sender, object e)\n{\n if (sender is not CommandBarFlyout myFlyout)\n {\n return;\n }\n\n if (myFlyout.Target == REBCustom)\n {\n AppBarButton myButton = new AppBarButton();\n myButton.Command = new StandardUICommand(StandardUICommandKind.Share);\n myFlyout.PrimaryCommands.Add(myButton);\n }\n}\n\nprivate void REBCustom_Loaded(object sender, RoutedEventArgs e)\n{\n REBCustom.SelectionFlyout.Opening \u002B= Menu_Opening;\n REBCustom.ContextFlyout.Opening \u002B= Menu_Opening;\n}\n\nprivate void REBCustom_Unloaded(object sender, RoutedEventArgs e)\n{\n REBCustom.SelectionFlyout.Opening -= Menu_Opening;\n REBCustom.ContextFlyout.Opening -= Menu_Opening;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"richeditbox-a-custom-editor-with","controlId":"richeditbox","controlName":"RichEditBox","headerText":"A custom editor with RichEditBox.","xaml":null,"csharp":"private async void OpenButton_Click(object sender, RoutedEventArgs e)\n{\n if (sender is Button button)\n {\n // Create the picker using the AppWindowId from the element\n var picker = new FileOpenPicker(button.XamlRoot.ContentIslandEnvironment.AppWindowId)\n {\n SuggestedStartLocation = PickerLocationId.DocumentsLibrary\n };\n\n // Add file type filters\n picker.FileTypeFilter.Add(\u0022.rtf\u0022);\n\n // Show picker\n PickFileResult result = await picker.PickSingleFileAsync();\n\n if (result != null)\n {\n // Open with StorageFile (needed for RichEditBox)\n StorageFile file = await StorageFile.GetFileFromPathAsync(result.Path);\n\n using IRandomAccessStream randAccStream =\n await file.OpenAsync(FileAccessMode.Read);\n\n // Load file into the RichEditBox\n editor.Document.LoadFromStream(TextSetOptions.FormatRtf, randAccStream);\n }\n }\n}\n\nprivate async void SaveButton_Click(object sender, RoutedEventArgs e)\n{\n if (sender is Button button)\n {\n // Create the picker with AppWindowId\n var savePicker = new FileSavePicker(button.XamlRoot.ContentIslandEnvironment.AppWindowId)\n {\n SuggestedStartLocation = PickerLocationId.DocumentsLibrary,\n SuggestedFileName = \u0022New Document\u0022\n };\n\n // Dropdown of file types the user can save the file as\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"richeditbox-rich-edit-box-in","controlId":"richeditbox","controlName":"RichEditBox","headerText":"Rich edit box in math mode","xaml":"\u003CRichEditBox x:Name=\u0022mathEditor\u0022 FontSize=\u002216\u0022 /\u003E","csharp":"mathEditor.TextDocument.SetMathMode(RichEditMathMode.MathOnly);","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"richeditbox-working-with-mathml-in","controlId":"richeditbox","controlName":"RichEditBox","headerText":"Working with MathML in RichEditBox","xaml":"\u003CRichEditBox x:Name=\u0022mathEditor2\u0022 FontSize=\u002216\u0022 /\u003E","csharp":"mathEditor2.TextDocument.SetMathMode(RichEditMathMode.MathOnly);\n\nprivate void mathEditor2_TextChanged(object sender, RoutedEventArgs e)\n{\n // Extracts the MathML content from the RichEditBox\n string extractedMathML;\n mathEditor2.Document.GetMathML(out extractedMathML);\n \n // If MathML content is available, format and display it in the MathML presenter\n if (!string.IsNullOrEmpty(extractedMathML))\n {\n MathmlPresenter.Code = MathModeHelper.FormatMathML(extractedMathML);\n }\n else\n {\n // If no MathML content exists, display a placeholder comment\n MathmlPresenter.Code = \u0022\u003C!-- No MathML content --\u003E\u0022;\n }\n}\n\nprivate void SetMathmlFormulaBtn_Click(object sender, RoutedEventArgs e)\n{\n // Defines a formula in MathML format\n string formulaMathML =\n \u0022\u003Cmml:math xmlns:mml=\\\u0022http://www.w3.org/1998/Math/MathML\\\u0022 display=\\\u0022block\\\u0022\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mi mathcolor=\\\u0022#000000\\\u0022\u003Ex\u003C/mml:mi\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mo mathcolor=\\\u0022#000000\\\u0022\u003E\\u2208\u003C/mml:mo\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mi mathcolor=\\\u0022#000000\\\u0022\u003EP\u003C/mml:mi\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mfenced\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mrow\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mi mathcolor=\\\u0022#000000\\\u0022\u003EA\u003C/mml:mi\u003E\\r\\n\u0022 \u002B\n \u0022 \u003C/mml:mrow\u003E\\r\\n\u0022 \u002B\n \u0022 \u003C/mml:mfenced\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mo mathcolor=\\\u0022#000000\\\u0022\u003E\\u2194\u003C/mml:mo\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mi mathcolor=\\\u0022#000000\\\u0022\u003Ex\u003C/mml:mi\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mo mathcolor=\\\u0022#000000\\\u0022\u003E\\u2286\u003C/mml:mo\u003E\\r\\n\u0022 \u002B\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"richtextblock","controlId":"richtextblock","controlName":"RichTextBlock","headerText":"A simple RichTextBlock.","xaml":"\u003CRichTextBlock\u003E\n \u003CParagraph\u003EI am a RichTextBlock.\u003C/Paragraph\u003E\n\u003C/RichTextBlock\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"richtextblock-a-richtextblock-with-a","controlId":"richtextblock","controlName":"RichTextBlock","headerText":"A RichTextBlock with a custom selection highlight color.","xaml":"\u003CRichTextBlock SelectionHighlightColor=\u0022Green\u0022\u003E\n \u003CParagraph\u003ERichTextBlock provides a rich text display container that supports\n \u003CRun FontStyle=\u0022Italic\u0022 FontWeight=\u0022Bold\u0022\u003Eformatted text\u003C/Run\u003E,\n \u003CHyperlink NavigateUri=\u0022https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Documents.Hyperlink\u0022\u003Ehyperlinks\u003C/Hyperlink\u003E, inline images, and other rich content.\u003C/Paragraph\u003E\n \u003CParagraph\u003ERichTextBlock also supports a built-in overflow model.\u003C/Paragraph\u003E\n\u003C/RichTextBlock\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"richtextblock-a-richtextblock-with-overflow","controlId":"richtextblock","controlName":"RichTextBlock","headerText":"A RichTextBlock with overflow.","xaml":"\u003CGrid\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition/\u003E\n \u003CColumnDefinition/\u003E\n \u003CColumnDefinition/\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CRichTextBlock Grid.Column=\u00220\u0022 OverflowContentTarget=\u0022{x:Bind firstOverflowContainer}\u0022 TextAlignment=\u0022Justify\u0022 Margin=\u002212,0\u0022\u003E\n \u003CParagraph\u003E\n Linked text containers allow text which does not fit in one element to overflow into a different element on the page.\n Creative use of linked text containers enables basic multicolumn support and other advanced page layouts.\n \u003C/Paragraph\u003E\n \u003C!-- Additional content not shown. --\u003E\n \u003C/RichTextBlock\u003E\n \u003CRichTextBlockOverflow x:Name=\u0022firstOverflowContainer\u0022 OverflowContentTarget=\u0022{x:Bind secondOverflowContainer}\u0022 Grid.Column=\u00221\u0022 Margin=\u002212,0\u0022/\u003E\n \u003CRichTextBlockOverflow x:Name=\u0022secondOverflowContainer\u0022 Grid.Column=\u00222\u0022 Margin=\u002212,0\u0022/\u003E\n\u003C/Grid\u003E\u003C/Grid.ColumnDefinitions\u003E\u003C/Grid.ColumnDefinitions\u003E\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"richtextblock-richtextblock-with-custom-texthighlighting","controlId":"richtextblock","controlName":"RichTextBlock","headerText":"RichTextBlock with custom TextHighlighting","xaml":"\u003CRichTextBlock x:Name=\u0022TextHighlightingRichTextBlock\u0022\u003E\n \u003CParagraph\u003E\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua\n \u003C/Paragraph\u003E\n\u003C/RichTextBlock\u003E","csharp":"private void HighlightColorCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n{\n // Get color to use\n var selectedItem = (sender as ComboBox).SelectedItem as ComboBoxItem;\n var color = Colors.Yellow;\n switch (selectedItem.Content as string)\n {\n case \u0022Yellow\u0022:\n color = Colors.Yellow;\n break;\n case \u0022Red\u0022:\n color = Colors.Red;\n break;\n case \u0022Blue\u0022:\n color = Colors.Blue;\n break;\n }\n\n // Get text range and highlighter\n TextRange textRange = new TextRange()\n {\n StartIndex = 28,\n Length = 11\n };\n TextHighlighter highlighter = new TextHighlighter()\n {\n Background = new SolidColorBrush(color),\n Ranges = { textRange }\n };\n\n // Switch texthighlighter\n TextHighlightingRichTextBlock.TextHighlighters.Clear();\n TextHighlightingRichTextBlock.TextHighlighters.Add(highlighter);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"textblock","controlId":"textblock","controlName":"TextBlock","headerText":"A simple TextBlock.","xaml":"\u003CTextBlock Text=\u0022I am a TextBlock\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"textblock-a-textblock-with-a","controlId":"textblock","controlName":"TextBlock","headerText":"A TextBlock with a style applied.","xaml":"\u003CPage.Resources\u003E\n \u003CStyle TargetType=\u0022TextBlock\u0022 x:Key=\u0022CustomTextBlockStyle\u0022\u003E\n \u003CSetter Property=\u0022FontFamily\u0022 Value=\u0022Comic Sans MS\u0022/\u003E\n \u003CSetter Property=\u0022FontStyle\u0022 Value=\u0022Italic\u0022/\u003E\n \u003C/Style\u003E\n\u003CPage.Resources\u003E\n\n\u003CTextBlock Text=\u0022I am a styled TextBlock\u0022 Style=\u0022{StaticResource CustomTextBlockStyle}\u0022/\u003E\u003C/Page.Resources\u003E\u003C/Page.Resources\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"textblock-a-textblock-with-various","controlId":"textblock","controlName":"TextBlock","headerText":"A TextBlock with various properties set.","xaml":"\u003CTextBlock Text=\u0022I am super excited to be here!\u0022 FontFamily=\u0022Arial\u0022\n FontSize=\u002224\u0022 FontStyle=\u0022Italic\u0022 TextWrapping=\u0022WrapWholeWords\u0022\n CharacterSpacing=\u0022200\u0022 Foreground=\u0022CornflowerBlue\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"textblock-a-textblock-with-inline","controlId":"textblock","controlName":"TextBlock","headerText":"A TextBlock with inline text elements.","xaml":"\u003CTextBlock\u003E\n \u003CRun FontFamily=\u0022Times New Roman\u0022 Foreground=\u0022DarkGray\u0022\u003EText in a TextBlock doesn\u0027t have to be a simple string.\u003C/Run\u003E\n \u003CLineBreak /\u003E\n \u003CSpan\u003E\n Text can be \u003CBold\u003Ebold\u003C/Bold\u003E, \u003CItalic\u003Eitalic\u003C/Italic\u003E, or \u003CUnderline\u003Eunderlined\u003C/Underline\u003E.\n \u003C/Span\u003E\n\u003C/TextBlock\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"textblock-a-selectable-textblock","controlId":"textblock","controlName":"TextBlock","headerText":"A selectable TextBlock","xaml":"\u003CTextBlock IsTextSelectionEnabled=\u0022...\u0022\n Text=\u0022I am a selectable TextBlock with custom SelectionHighlightColor.\u0022\n SelectionHighlightColor=\u0022DarkOrange\u0022\u003E\u003C/TextBlock\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"textbox","controlId":"textbox","controlName":"TextBox","headerText":"A simple TextBox.","xaml":"\u003CTextBox AutomationProperties.Name=\u0022simple TextBox\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"textbox-a-textbox-with-a","controlId":"textbox","controlName":"TextBox","headerText":"A TextBox with a header and placeholder text.","xaml":"\u003CTextBox Header=\u0022Enter your name:\u0022 PlaceholderText=\u0022Name\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"textbox-a-readonly-textbox-with","controlId":"textbox","controlName":"TextBox","headerText":"A read-only TextBox with various properties set.","xaml":"\u003CTextBox Text=\u0022I am super excited to be here!\u0022\n AutomationProperties.Name=\u0022customized TextBox\u0022 IsReadOnly=\u0022True\u0022\n FontFamily=\u0022Arial\u0022 FontSize=\u002224\u0022 FontStyle=\u0022Italic\u0022\n CharacterSpacing=\u0022200\u0022 Foreground=\u0022#5178BE\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"textbox-a-multiline-textbox-with","controlId":"textbox","controlName":"TextBox","headerText":"A multi-line TextBox with spell checking and custom selection highlight color.","xaml":"\u003CTextBox AutomationProperties.Name=\u0022multi-line TextBox\u0022\n TextWrapping=\u0022Wrap\u0022 AcceptsReturn=\u0022True\u0022 IsSpellCheckEnabled=\u0022True\u0022\n SelectionHighlightColor=\u0022Green\u0022 MinWidth=\u0022400\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"xamlcompinterop","controlId":"xamlcompinterop","controlName":"Animation interop","headerText":"Use a natural motion composition animation on a UIElement","xaml":null,"csharp":"Compositor _compositor = Microsoft.UI.Xaml.Media.CompositionTarget.GetCompositorForCurrentThread();\nSpringVector3NaturalMotionAnimation? _springAnimation;\n\nprivate void CreateOrUpdateSpringAnimation(float finalValue)\n{\n if (_springAnimation == null)\n {\n _springAnimation = _compositor.CreateSpringVector3Animation();\n _springAnimation.Target = \u0022Scale\u0022;\n }\n\n _springAnimation.FinalValue = new Vector3(finalValue);\n}\n\nprivate void element_PointerEntered(object sender, PointerRoutedEventArgs e)\n{\n // Scale up to 1.5\n CreateOrUpdateSpringAnimation(1.5f);\n\n (sender as UIElement)?.StartAnimation(_springAnimation);\n}\n\nprivate void element_PointerExited(object sender, PointerRoutedEventArgs e)\n{\n // Scale back down to 1.0\n CreateOrUpdateSpringAnimation(1.0f);\n\n (sender as UIElement)?.StartAnimation(_springAnimation);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"xamlcompinterop-expressionanimation-on-an-ellipse","controlId":"xamlcompinterop","controlName":"Animation interop","headerText":"ExpressionAnimation on an Ellipse element","xaml":"\u003CStackPanel Height=\u0022200\u0022\u003E\n \u003CGrid VerticalAlignment=\u0022Top\u0022\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022*\u0022 /\u003E\n \u003CColumnDefinition Width=\u0022*\u0022 /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003CRectangle x:Name=\u0022rectangle\u0022 Width=\u002250\u0022 Height=\u002250\u0022 Fill=\u0022{ThemeResource SystemAccentColor}\u0022 PointerEntered=\u0022element_PointerEntered\u0022 PointerExited=\u0022element_PointerExited\u0022 /\u003E\n \u003CEllipse x:Name=\u0022ellipse\u0022 Grid.Column=\u00221\u0022 Width=\u002250\u0022 Height=\u002250\u0022 Margin=\u002255,0\u0022 Fill=\u0022{ThemeResource SystemAccentColor}\u0022/\u003E\n \u003C/Grid\u003E\n\u003C/StackPanel\u003E","csharp":"// NOTE: The rectangle scales up and down using the same element_PointerEntered/Exited events as the prior sample.\n\nCompositor _compositor = Microsoft.UI.Xaml.Media.CompositionTarget.GetCompositorForCurrentThread();\n\n// Set up the relationship between the rectangle and the ellipse.\nprivate void ExpressionSample_Loaded(object sender, RoutedEventArgs e)\n{\n var expressionAnim = _compositor.CreateExpressionAnimation();\n\n // The ellipse\u0027s scale is inversely proportional to the rectangle\u0027s scale\n expressionAnim.Expression = \u0022Vector3(1/scaleElement.Scale.X, 1/scaleElement.Scale.Y, 1)\u0022;\n expressionAnim.Target = \u0022Scale\u0022;\n\n // Use SetExpressionReferenceParameter to alias a UIElement into the expression string\n expressionAnim.SetExpressionReferenceParameter(\u0022scaleElement\u0022, rectangle);\n\n // Start the animation on the ellipse\n ellipse.StartAnimation(expressionAnim);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"xamlcompinterop-driving-several-related-animations","controlId":"xamlcompinterop","controlName":"Animation interop","headerText":"Driving several related animations together using ExpressionAnimation","xaml":null,"csharp":"// NOTE: Each of the buttons scale up and down using the same element_PointerEntered/Exited events as the prior samples.\n\nprivate void StackedButtonsExample_Loaded(object sender, RoutedEventArgs e)\n{\n // Animate the translation of each button relative to the scale and translation of the button above.\n var anim = _compositor.CreateExpressionAnimation();\n anim.Expression = \u0022(above.Scale.Y - 1) * 50 \u002B above.Translation.Y % (50 * index)\u0022;\n anim.Target = \u0022Translation.Y\u0022;\n\n // Animate the second button relative to the first.\n anim.SetExpressionReferenceParameter(\u0022above\u0022, ExpressionButton1);\n anim.SetScalarParameter(\u0022index\u0022, 1);\n ExpressionButton2.StartAnimation(anim);\n\n // Animate the third button relative to the second.\n anim.SetExpressionReferenceParameter(\u0022above\u0022, ExpressionButton2);\n anim.SetScalarParameter(\u0022index\u0022, 2);\n ExpressionButton3.StartAnimation(anim);\n\n // Animate the fourth button relative to the third.\n anim.SetExpressionReferenceParameter(\u0022above\u0022, ExpressionButton3);\n anim.SetScalarParameter(\u0022index\u0022, 3);\n ExpressionButton4.StartAnimation(anim);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"xamlcompinterop-reference-actualsize-in-expressionanimations","controlId":"xamlcompinterop","controlName":"Animation interop","headerText":"Reference ActualSize in ExpressionAnimations to make novel layouts based on size","xaml":null,"csharp":"private void ActualSizeExample_Loaded(object sender, RoutedEventArgs e)\n{\n // We will lay out some buttons in a circle.\n // The formulas we will use are:\n // X = radius * cos(theta) \u002B xOffset\n // Y = radius * sin(theta) \u002B yOffset\n // radius = 1/2 the width and height of the parent container\n // theta = the angle for each element. The starting value of theta depends on both the number of elements and the relative index of each element.\n // xOffset = The starting horizontal offset for the element. \n // yOffset = The starting vertical offset for the element.\n\n String radius = \u0022(source.ActualSize.X / 2)\u0022; // Since the layout is a circle, width and height are equivalent meaning we could use X or Y. We\u0027ll use X.\n String theta = \u0022.02 * \u0022 \u002B radius \u002B \u0022 \u002B ((2 * Pi)/total)*index\u0022; // The first value is the rate of angular change based on radius. The last value spaces the buttons equally.\n String xOffset = radius; // We offset x by radius because the buttons naturally layout along the left edge. We need to move them to center of the circle first.\n String yOffset = \u00220\u0022; // We don\u0027t need to offset y because the buttons naturally layout vertically centered.\n\n // We combine X, Y, and Z subchannels into a single animation because we can only start a single animation on Translation.\n String expression = String.Format(\u0022Vector3({0}*cos({1})\u002B{2}, {0}*sin({1})\u002B{3},0)\u0022, radius, theta, xOffset, yOffset);\n\n int totalElements = 8;\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"xamlcompinterop-reference-actualoffset-and-actualsize","controlId":"xamlcompinterop","controlName":"Animation interop","headerText":"Reference ActualOffset and ActualSize in ExpressionAnimations to position elements relative to each other","xaml":"\u003CGrid HorizontalAlignment=\u0022Left\u0022 Margin=\u00220,12,0,0\u0022\u003E\n \u003CTextBlock x:Name=\u0022PopupTarget\u0022 \n TextWrapping=\u0022WrapWholeWords\u0022 \n Margin=\u0022{x:Bind MarginSlider.Value, Converter={StaticResource doubleToThicknessConverter}, Mode=OneWay}\u0022 \n FontSize=\u0022{x:Bind FontSizeSlider.Value, Mode=OneWay}\u0022 \n Text=\u0022... lorem ipsum ...\u0022 /\u003E\n\n \u003C!-- Notice that the popup is a sibling to the target, not an ancestor. --\u003E\n \u003CPopup x:Name=\u0022Popup\u0022 Margin=\u00225\u0022\u003E\n \u003CGrid MinWidth=\u002250\u0022 MaxWidth=\u0022200\u0022 MinHeight=\u002250\u0022 BorderBrush=\u0022LightGray\u0022 BorderThickness=\u00222\u0022 Background=\u0022{ThemeResource FlyoutBackgroundThemeBrush}\u0022\u003E\n \u003CTextBlock Text=\u0022I am always right aligned center to the target.\u0022 TextWrapping=\u0022WrapWholeWords\u0022 Margin=\u00226\u0022 FontSize=\u002212\u0022 VerticalAlignment=\u0022Center\u0022 /\u003E\n \u003C/Grid\u003E\n \u003C/Popup\u003E\n\u003C/Grid\u003E","csharp":"private void ActualOffsetExample_Loaded(object sender, RoutedEventArgs e)\n{\n // This sample positions a popup relative to a block of text that has variable layout size based on font size.\n var anim = _compositor.CreateExpressionAnimation();\n\n anim.Expression = \u0022Vector3(source.ActualOffset.X \u002B source.ActualSize.X, source.ActualOffset.Y \u002B source.ActualSize.Y / 2 - 25, 0)\u0022;\n anim.Target = \u0022Translation\u0022;\n anim.SetExpressionReferenceParameter(\u0022source\u0022, PopupTarget);\n\n Popup.StartAnimation(anim);\n\n Popup.IsOpen = true;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"connectedanimation","controlId":"connectedanimation","controlName":"Connected Animation","headerText":"A connected animation between a list page and a detail page","xaml":"\u003C!-- COLLECTION PAGE BELOW--\u003E\n\u003CListView x:Name=\u0022collection\u0022\n IsItemClickEnabled=\u0022True\u0022\n SelectionMode=\u0022None\u0022\n ItemClick=\u0022collection_ItemClick\u0022\n Grid.Row=\u00222\u0022 \u003E\n \u003CListView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CGrid Margin=\u00220,12,0,12\u0022 AutomationProperties.Name=\u0022{x:Bind Title}\u0022\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 MinWidth=\u0022150\u0022/\u003E\n \u003CColumnDefinition Width=\u0022*\u0022 /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n\n \u003C!-- The image to connect between pages. --\u003E\n \u003CImage x:Name=\u0022connectedElement\u0022 Source=\u0022{x:Bind ImageLocation}\u0022 MaxHeight=\u0022100\u0022 Stretch=\u0022Fill\u0022/\u003E\n\n \u003CStackPanel Margin=\u002212,0,0,0\u0022 Grid.Column=\u00221\u0022 \u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022 Style=\u0022{ThemeResource SubtitleTextBlockStyle}\u0022 HorizontalAlignment=\u0022Left\u0022 Margin=\u00220,0,0,6\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022Views: \u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 FontWeight=\u0022Bold\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Views}\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Margin=\u00225,0,0,0\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022Likes: \u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 FontWeight=\u0022Bold\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Likes}\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Margin=\u00225,0,0,0\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Description}\u0022 Style=\u0022{ThemeResource BodyTextBlockStyle}\u0022 FontStyle=\u0022Italic\u0022 Margin=\u00220,12,0,0\u0022 TextTrimming=\u0022CharacterEllipsis\u0022 MaxWidth=\u0022500\u0022 MaxLines=\u00221\u0022/\u003E\n \u003C/StackPanel\u003E\n\n \u003C/StackPanel\u003E\n \u003C/Grid\u003E\n \u003C/DataTemplate\u003E\u003C/ListView.ItemTemplate\u003E\u003C/ListView\u003E\n\u003C!-- NOTE: XAML truncated \u2014 additional sibling elements omitted --\u003E","csharp":"// To see the source code: \n// https://github.com/microsoft/WinUI-Gallery/blob/main/WinUIGallery/ConnectedAnimationPages/CollectionPage.xaml.cs\n// https://github.com/microsoft/WinUI-Gallery/blob/main/WinUIGallery/ConnectedAnimationPages/DetailedInfoPage.xaml.cs\n\n// COLLECTION PAGE\npublic sealed partial class CollectionPage : Page\n{\n CustomDataObject? _storeditem;\n\n public CollectionPage()\n {\n this.InitializeComponent();\n\n // Ensure that the MainPage is only created once, and cached during navigation.\n this.NavigationCacheMode = NavigationCacheMode.Enabled;\n\n collection.ItemsSource = WinUIGallery.ControlPages.CustomDataObject.GetDataObjects();\n }\n\n private async void collection_Loaded(object sender, RoutedEventArgs e)\n {\n if (_storeditem != null)\n {\n // If the connected item appears outside the viewport, scroll it into view.\n collection.ScrollIntoView(_storeditem, ScrollIntoViewAlignment.Default);\n collection.UpdateLayout();\n\n // Play the second connected animation. \n ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation(\u0022BackConnectedAnimation\u0022);\n if (animation != null)\n {\n // Setup the \u0022back\u0022 configuration if the API is present. \n if (ApiInformation.IsApiContractPresent(\u0022Windows.Foundation.UniversalApiContract\u0022, 7))\n {\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"connectedanimation-a-connected-animation-between","controlId":"connectedanimation","controlName":"Connected Animation","headerText":"A connected animation between elements on the same page","xaml":"\u003CGridView x:Name=\u0022collection\u0022 IsItemClickEnabled=\u0022True\u0022 ItemClick=\u0022TipsGrid_ItemClick\u0022\n HorizontalAlignment=\u0022Center\u0022 MaxWidth=\u00221400\u0022\u003E\n \u003CGridView.ItemContainerStyle\u003E\n \u003CStyle BasedOn=\u0022{StaticResource GridViewItemRevealStyle}\u0022 TargetType=\u0022GridViewItem\u0022\u003E\n \u003CStyle.Setters\u003E\n \u003CSetter Property=\u0022Margin\u0022 Value=\u00224\u0022 /\u003E\n \u003C/Style.Setters\u003E\n \u003C/Style\u003E\n \u003C/GridView.ItemContainerStyle\u003E\n \u003CGridView.ItemTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CGrid x:Name=\u0022connectedElement\u0022 Width=\u0022150\u0022 Height=\u0022110\u0022\n AutomationProperties.Name=\u0022{Binding Title}\u0022 CornerRadius=\u00224\u0022\u003E\n \u003CImage Source=\u0022{Binding ImageLocation}\u0022 Stretch=\u0022UniformToFill\u0022 /\u003E\n \u003CBorder Padding=\u00228,4\u0022 VerticalAlignment=\u0022Bottom\u0022\n Background=\u0022{ThemeResource AcrylicBackgroundFillColorBaseBrush}\u0022\u003E\n \u003CTextBlock Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Text=\u0022{Binding Title}\u0022 /\u003E\n \u003C/Border\u003E\n \u003C/Grid\u003E\n \u003C/DataTemplate\u003E\n \u003C/GridView.ItemTemplate\u003E\n\u003C/GridView\u003E\n\n\u003CGrid x:Name=\u0022SmokeGrid\u0022 HorizontalAlignment=\u0022Stretch\u0022 VerticalAlignment=\u0022Stretch\u0022\n Background=\u0022{ThemeResource SmokeFillColorDefaultBrush}\u0022 Visibility=\u0022Collapsed\u0022\u003E\n \u003CGrid x:Name=\u0022destinationElement\u0022 Width=\u0022400\u0022 Height=\u0022320\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022\n BorderBrush=\u0022{ThemeResource CardStrokeColorDefaultBrush}\u0022 BorderThickness=\u00221\u0022\n CornerRadius=\u00228\u0022\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022*\u0022 /\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CImage x:Name=\u0022detailImage\u0022 Grid.Row=\u00220\u0022 Stretch=\u0022UniformToFill\u0022 /\u003E\n \u003CButton Width=\u002236\u0022 Height=\u002236\u0022 Margin=\u00228\u0022\n HorizontalAlignment=\u0022Right\u0022 VerticalAlignment=\u0022Top\u0022\n AutomationProperties.Name=\u0022Close\u0022 Click=\u0022BackButton_Click\u0022\n ToolTipService.ToolTip=\u0022Close\u0022\u003E\n \u003CButton.Content\u003E\u003C/Button.Content\u003E\u003C/Button\u003E\u003C/Grid\u003E\u003C/Grid\u003E\n\u003C!-- NOTE: XAML truncated \u2014 additional sibling elements omitted --\u003E","csharp":"public sealed partial class CardPage : Page\n{\n CustomDataObject? _storedItem;\n\n public CardPage()\n {\n this.InitializeComponent();\n collection.ItemsSource = CustomDataObject.GetDataObjects(includeAllItems: true);\n }\n\n private async void BackButton_Click(object sender, RoutedEventArgs e)\n {\n ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView()\n .PrepareToAnimate(\u0022backwardsAnimation\u0022, destinationElement);\n SmokeGrid.Children.Remove(destinationElement);\n\n // Collapse the smoke when the animation completes.\n animation.Completed \u002B= Animation_Completed;\n\n // If the connected item appears outside the viewport, scroll it into view.\n collection.ScrollIntoView(_storedItem, ScrollIntoViewAlignment.Default);\n collection.UpdateLayout();\n\n animation.Configuration = new DirectConnectedAnimationConfiguration();\n\n // Play the connected animation back to the collection.\n await collection.TryStartConnectedAnimationAsync(animation, _storedItem, \u0022connectedElement\u0022);\n }\n\n private void Animation_Completed(ConnectedAnimation sender, object args)\n {\n SmokeGrid.Visibility = Visibility.Collapsed;\n SmokeGrid.Children.Add(destinationElement);\n }\n\n private void TipsGrid_ItemClick(object sender, ItemClickEventArgs e)\n {\n ConnectedAnimation? animation = null;\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"connectedanimation-a-simple-connected-animation","controlId":"connectedanimation","controlName":"Connected Animation","headerText":"A simple connected animation","xaml":null,"csharp":"// Prepare animation on Source page\nprivate void NavigateButton_Click(object sender, RoutedEventArgs e)\n{\n ConnectedAnimationService.GetForCurrentView().PrepareToAnimate(\u0022ForwardConnectedAnimation\u0022, SourceElement);\n Frame.Navigate(typeof(DestinationPage), null, new SuppressNavigationTransitionInfo());\n}\n\n// Start animation on Destination page\nprotected override void OnNavigatedTo(NavigationEventArgs e)\n{\n base.OnNavigatedTo(e);\n\n var anim = ConnectedAnimationService.GetForCurrentView().GetAnimation(\u0022ForwardConnectedAnimation\u0022);\n if (anim != null)\n {\n anim.TryStart(DestinationElement);\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"connectedanimation-connected-animation-with-itemsrepeater","controlId":"connectedanimation","controlName":"Connected Animation","headerText":"Connected animation with ItemsRepeater","xaml":"\u003C!-- Unlike ListView/GridView, ItemsRepeater does not have built-in\n ConnectedAnimation methods. Use ConnectedAnimationService directly. --\u003E\n\n\u003CScrollViewer x:Name=\u0022scrollViewer\u0022\u003E\n \u003CItemsRepeater\n x:Name=\u0022repeater\u0022\n ItemsSource=\u0022{x:Bind Items}\u0022\u003E\n \u003CItemsRepeater.Layout\u003E\n \u003CUniformGridLayout\n MinColumnSpacing=\u00228\u0022\n MinItemHeight=\u0022120\u0022\n MinItemWidth=\u0022150\u0022\n MinRowSpacing=\u00228\u0022 /\u003E\n \u003C/ItemsRepeater.Layout\u003E\n \u003CItemsRepeater.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CGrid CornerRadius=\u00224\u0022\u003E\n \u003C!-- The element named \u0022connectedElement\u0022 will be animated --\u003E\n \u003CImage x:Name=\u0022connectedElement\u0022\n Source=\u0022{x:Bind ImageLocation}\u0022\n Stretch=\u0022UniformToFill\u0022 /\u003E\n \u003CBorder VerticalAlignment=\u0022Bottom\u0022\n Background=\u0022{ThemeResource AcrylicBackgroundFillColorBaseBrush}\u0022\n Padding=\u00228,4\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022\n Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 /\u003E\n \u003C/Border\u003E\n \u003C/Grid\u003E\n \u003C/DataTemplate\u003E\n \u003C/ItemsRepeater.ItemTemplate\u003E\n \u003C/ItemsRepeater\u003E\n\u003C/ScrollViewer\u003E","csharp":"// ItemsRepeater does not have PrepareConnectedAnimation() or\n// TryStartConnectedAnimationAsync() like ListView/GridView.\n// Use ConnectedAnimationService.PrepareToAnimate() directly instead.\n\nprivate CustomDataObject _storedItem;\nprivate double _persistedScrollPosition;\n\nprivate void Repeater_ElementPrepared(ItemsRepeater sender, ItemsRepeaterElementPreparedEventArgs args)\n{\n // Attach a Tapped handler to each item container.\n args.Element.Tapped -= Item_Tapped;\n args.Element.Tapped \u002B= Item_Tapped;\n}\n\nprivate void Item_Tapped(object sender, TappedRoutedEventArgs e)\n{\n var element = sender as FrameworkElement;\n _storedItem = repeater.ItemsSourceView.GetAt(\n repeater.GetElementIndex(element)) as CustomDataObject;\n\n // Find the named element in the DataTemplate and prepare the animation.\n if (FindChildByName(element, \u0022connectedElement\u0022) is UIElement source)\n {\n ConnectedAnimationService.GetForCurrentView()\n .PrepareToAnimate(\u0022ForwardConnectedAnimation\u0022, source);\n }\n\n // Save scroll position for back navigation.\n _persistedScrollPosition = scrollViewer.VerticalOffset;\n\n Frame.Navigate(typeof(DetailPage), _storedItem,\n new SuppressNavigationTransitionInfo());\n}\n\nprotected override void OnNavigatedTo(NavigationEventArgs e)\n{\n base.OnNavigatedTo(e);\n if (_storedItem == null) return;\n\n // Restore scroll position so the target element is visible.\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"easingfunction","controlId":"easingfunction","controlName":"Easing Functions","headerText":"Standard Easing Function","xaml":"\u003CStoryboard x:Name=\u0022Storyboard1\u0022\u003E\n \u003CDoubleAnimation Storyboard.TargetName=\u0022Translation\u0022 Storyboard.TargetProperty=\u0022X\u0022 From=\u00220\u0022 To=\u0022200\u0022 \u003E\n \u003CDoubleAnimation.EasingFunction\u003E\n \u003CCircleEase EasingMode=\u0022EaseInOut\u0022 /\u003E\n \u003C/DoubleAnimation.EasingFunction\u003E\n \u003C/DoubleAnimation\u003E\n\u003C/Storyboard\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"easingfunction-accelerate-easing-function","controlId":"easingfunction","controlName":"Easing Functions","headerText":"Accelerate Easing Function","xaml":"\u003CStoryboard x:Name=\u0022Storyboard2\u0022\u003E\n \u003CDoubleAnimation Storyboard.TargetName=\u0022Translation\u0022 Storyboard.TargetProperty=\u0022X\u0022 From=\u00220\u0022 To=\u0022200\u0022 \u003E\n \u003CDoubleAnimation.EasingFunction\u003E\n \u003CExponentialEase Exponent=\u0022...\u0022 EasingMode=\u0022EaseIn\u0022 /\u003E\n \u003C/DoubleAnimation.EasingFunction\u003E\n \u003C/DoubleAnimation\u003E\n\u003C/Storyboard\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"easingfunction-decelerate-easing-function","controlId":"easingfunction","controlName":"Easing Functions","headerText":"Decelerate Easing Function","xaml":"\u003CStoryboard x:Name=\u0022Storyboard3\u0022\u003E\n \u003CDoubleAnimation Storyboard.TargetName=\u0022Translation\u0022 Storyboard.TargetProperty=\u0022X\u0022 From=\u00220\u0022 To=\u0022200\u0022 \u003E\n \u003CDoubleAnimation.EasingFunction\u003E\n \u003CExponentialEase Exponent=\u0022...\u0022 EasingMode=\u0022EaseOut\u0022 /\u003E\n \u003C/DoubleAnimation.EasingFunction\u003E\n \u003C/DoubleAnimation\u003E\n\u003C/Storyboard\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"easingfunction-other-xaml-easing-functions","controlId":"easingfunction","controlName":"Easing Functions","headerText":"Other XAML Easing Functions","xaml":"\u003CStoryboard x:Name=\u0022Storyboard3\u0022\u003E\n \u003CDoubleAnimation Storyboard.TargetName=\u0022Translation\u0022 Storyboard.TargetProperty=\u0022X\u0022 From=\u00220\u0022 To=\u0022200\u0022 \u003E\n \u003CDoubleAnimation.EasingFunction\u003E\n \u003C.../\u003E\n \u003C/DoubleAnimation.EasingFunction\u003E\n \u003C/DoubleAnimation\u003E\n\u003C/Storyboard\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"implicittransition","controlId":"implicittransition","controlName":"Implicit Transitions","headerText":"Automatically animate changes to Opacity","xaml":"\u003C!-- Automatically animate changes to Opacity --\u003E\n\u003CRectangle x:Name=\u0022rectangle\u0022 Width=\u002250\u0022 Height=\u002250\u0022 Opacity=\u00220.5\u0022\u003E\n \u003CRectangle.OpacityTransition\u003E\n \u003CScalarTransition /\u003E\n \u003C/Rectangle.OpacityTransition\u003E\n\u003C/Rectangle\u003E","csharp":"private void button_Click(object sender, RoutedEventArgs e)\n{\n rectangle.Opacity = ...;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"implicittransition-automatically-animate-changes-to","controlId":"implicittransition","controlName":"Implicit Transitions","headerText":"Automatically animate changes to Rotation","xaml":"\u003C!-- Automatically animate changes to Rotation --\u003E\n\u003CRectangle x:Name=\u0022rectangle\u0022 Width=\u002250\u0022 Height=\u002250\u0022 Rotation=\u00220\u0022 \u003E\n \u003CRectangle.RotationTransition\u003E\n \u003CScalarTransition /\u003E\n \u003C/Rectangle.RotationTransition\u003E\n\u003C/Rectangle\u003E","csharp":"private void button_Click(object sender, RoutedEventArgs e)\n{\n rectangle.Rotation = ...; // Clockwise, in degrees\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"implicittransition-automatically-animate-changes-to-2","controlId":"implicittransition","controlName":"Implicit Transitions","headerText":"Automatically animate changes to Scale","xaml":"\u003C!-- Automatically animate changes to Scale --\u003E\n\u003CRectangle x:Name=\u0022rectangle\u0022 Width=\u002250\u0022 Height=\u002250\u0022 Scale=\u00221,1,1\u0022 \u003E\n \u003CRectangle.ScaleTransition\u003E\n \u003CVector3Transition /\u003E\n \u003C/Rectangle.ScaleTransition\u003E\n\u003C/Rectangle\u003E","csharp":"using System.Numerics;\nprivate void button_Click(object sender, RoutedEventArgs e)\n{\n rectangle.Scale = new Vector3(..., ..., ...);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"implicittransition-automatically-animate-changes-to-3","controlId":"implicittransition","controlName":"Implicit Transitions","headerText":"Automatically animate changes to Translation","xaml":"\u003C!-- Automatically animate changes to Translation --\u003E\n\u003CRectangle x:Name=\u0022rectangle\u0022 Width=\u002250\u0022 Height=\u002250\u0022 Translation=\u00220,0,0\u0022 \u003E\n \u003CRectangle.TranslationTransition\u003E\n \u003CVector3Transition /\u003E\n \u003C/Rectangle.TranslationTransition\u003E\n\u003C/Rectangle\u003E","csharp":"using System.Numerics;\nprivate void button_Click(object sender, RoutedEventArgs e)\n{\n rectangle.Translation = new Vector3(..., ..., ...);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"implicittransition-implicitly-animate-when-the","controlId":"implicittransition","controlName":"Implicit Transitions","headerText":"Implicitly animate when the Background changes","xaml":"\u003CContentPresenter x:Name=\u0022BrushPresenter\u0022 Background=\u0022Blue\u0022 Width=\u002250\u0022 Height=\u002250\u0022\u003E\n \u003CContentPresenter.BackgroundTransition\u003E\n \u003CBrushTransition /\u003E\n \u003C/ContentPresenter.BackgroundTransition\u003E\n\u003C/ContentPresenter\u003E","csharp":"private void button_Click(object sender, RoutedEventArgs e)\n{\n // Note that this is a new brush instance, not a new color on the same brush.\n if (HasBlueBackground(BrushPresenter))\n {\n BrushPresenter.Background = new SolidColorBrush(Yellow);\n }\n else\n {\n BrushPresenter.Background = new SolidColorBrush(Blue);\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"implicittransition-implicitly-animate-when-the-2","controlId":"implicittransition","controlName":"Implicit Transitions","headerText":"Implicitly animate when the Grid\u0027s theme changes","xaml":"\u003CGrid x:Name=\u0022ThemeExampleGrid\u0022 Background=\u0022{ThemeResource SolidBackgroundFillColorBaseBrush}\u0022 \u003E\n \u003CGrid.BackgroundTransition\u003E\n \u003CBrushTransition /\u003E\n \u003C/Grid.BackgroundTransition\u003E\n \u003CStackPanel Margin=\u002212\u0022 Spacing=\u00226\u0022\u003E\n \u003CTextBlock Text=\u0022Lorem Ipsum\u0022 Style=\u0022{ThemeResource SubtitleTextBlockStyle}\u0022 /\u003E\n \u003CTextBlock Text=\u0022The background of this grid animates when the theme changes.\u0022 TextWrapping=\u0022WrapWholeWords\u0022 /\u003E\n \u003CButton Content=\u0022Button\u0022 /\u003E\n \u003CCheckBox Content=\u0022CheckBox\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Grid\u003E","csharp":"private void ThemeButton_Click(object sender, RoutedEventArgs e)\n{\n ThemeExampleGrid.RequestedTheme = ThemeExampleGrid.RequestedTheme == ElementTheme.Dark ? ElementTheme.Light : ElementTheme.Dark;\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"pagetransition","controlId":"pagetransition","controlName":"Page Transitions","headerText":"Page transitions","xaml":"\u003CFrame x:Name=\u0022ContentFrame\u0022\u003E\n \u003CFrame.ContentTransitions\u003E\n \u003CTransitionCollection\u003E\n \u003CNavigationThemeTransition /\u003E\n \u003C/TransitionCollection\u003E\n \u003C/Frame.ContentTransitions\u003E\n\u003C/Frame\u003E","csharp":"ContentFrame.Navigate(typeof(SamplePage), null...);","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"themetransition","controlId":"themetransition","controlName":"Theme Transitions","headerText":"Use the EntranceThemeTransition when adding items to your page.","xaml":"\u003CStackPanel x:Name=\u0022EntranceStackPanel\u0022 Orientation=\u0022Horizontal\u0022\u003E\n \u003CStackPanel.ChildrenTransitions\u003E\n \u003CTransitionCollection\u003E\n \u003CEntranceThemeTransition IsStaggeringEnabled=\u0022True\u0022 /\u003E\n \u003C/TransitionCollection\u003E\n \u003C/StackPanel.ChildrenTransitions\u003E\n \u003CRectangle Width=\u002250\u0022 Height=\u002250\u0022 Margin=\u00225\u0022 Fill=\u0022LightBlue\u0022 /\u003E\n \u003CRectangle Width=\u002250\u0022 Height=\u002250\u0022 Margin=\u00225\u0022 Fill=\u0022LightBlue\u0022 /\u003E\n \u003CRectangle Width=\u002250\u0022 Height=\u002250\u0022 Margin=\u00225\u0022 Fill=\u0022LightBlue\u0022 /\u003E\n \u003CRectangle Width=\u002250\u0022 Height=\u002250\u0022 Margin=\u00225\u0022 Fill=\u0022LightBlue\u0022 /\u003E\n \u003CRectangle Width=\u002250\u0022 Height=\u002250\u0022 Margin=\u00225\u0022 Fill=\u0022LightBlue\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"themetransition-use-the-repositionthemetransition-to","controlId":"themetransition","controlName":"Theme Transitions","headerText":"Use the RepositionThemeTransition to react to layout changes.","xaml":"\u003CRectangle x:Name=\u0022RightRectangle\u0022 Fill=\u0022Blue\u0022 \u003E\n \u003CRectangle.Transitions\u003E\n \u003CTransitionCollection\u003E\n \u003CRepositionThemeTransition /\u003E\n \u003C/TransitionCollection\u003E\n \u003C/Rectangle.Transitions\u003E\n\u003C/Rectangle\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"themetransition-use-contentthemetransition-to-animate","controlId":"themetransition","controlName":"Theme Transitions","headerText":"Use ContentThemeTransition to animate content refreshes.","xaml":"\u003CListView\u003E\n \u003CListView.ItemContainerTransitions\u003E\n \u003CTransitionCollection\u003E\n \u003CContentThemeTransition /\u003E\n \u003C/TransitionCollection\u003E\n \u003C/ListView.ItemContainerTransitions\u003E\n\u003C/ListView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"themetransition-use-adddeletethemetransition-to-animate","controlId":"themetransition","controlName":"Theme Transitions","headerText":"Use AddDeleteThemeTransition to animate adding and removing items from a collection.","xaml":"\u003CListView\u003E\n \u003CListView.ItemContainerTransitions\u003E\n \u003CTransitionCollection\u003E\n \u003CAddDeleteThemeTransition /\u003E\n \u003C/TransitionCollection\u003E\n \u003C/ListView.ItemContainerTransitions\u003E\n\u003C/ListView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"themetransition-use-popupthemetransition-to-animate","controlId":"themetransition","controlName":"Theme Transitions","headerText":"Use PopupThemeTransition to animate opening and closing a popup.","xaml":"\u003CPopup x:Name=\u0022ExamplePopup\u0022\u003E\n \u003CPopup.ChildTransitions\u003E\n \u003CTransitionCollection\u003E\n \u003CPopupThemeTransition /\u003E\n \u003C/TransitionCollection\u003E\n \u003C/Popup.ChildTransitions\u003E\n \u003CBorder Background=\u0022{ThemeResource FlyoutBackgroundThemeBrush}\u0022 BorderThickness=\u00222\u0022 BorderBrush=\u0022{ThemeResource SystemControlForegroundChromeGrayBrush}\u0022\u003E\n \u003CStackPanel Margin=\u002210\u0022\u003E\n \u003CTextBlock Text=\u0022This is a popup using PopupThemeTransition\u0022 /\u003E\n \u003CButton Content=\u0022Close Popup\u0022 Click=\u0022ClosePopupButton_Click\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Border\u003E\n\u003C/Popup\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"parallaxview","controlId":"parallaxview","controlName":"ParallaxView","headerText":"Parallax on a ListView","xaml":"\u003CGrid\u003E\n \u003CParallaxView Source=\u0022{Binding ElementName=listView}\u0022 VerticalShift=\u0022500\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 /\u003E\n \u003C/ParallaxView\u003E\n \u003CListView x:Name=\u0022listView\u0022 ItemsSource=\u0022{x:Bind Items}\u0022\u003E\n \u003CListView.Header\u003E\n \u003CTextBlock Text=\u0022Scroll the list to see parallaxing of image\u0022 /\u003E\n \u003C/ListView.Header\u003E\n \u003C/ListView\u003E\n\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"parallaxview-parallax-with-a-scrollview","controlId":"parallaxview","controlName":"ParallaxView","headerText":"Parallax with a ScrollView","xaml":"\u003CGrid\u003E\n \u003CParallaxView Source=\u0022{Binding ElementName=scrollView}\u0022 VerticalShift=\u0022500\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022/\u003E\n \u003C/ParallaxView\u003E\n \u003CTextBlock Text=\u0022Scroll the rectangles to see parallaxing of image\u0022 MaxWidth=\u0022280\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Top\u0022 Foreground=\u0022White\u0022\n FontSize=\u002228\u0022 TextWrapping=\u0022WrapWholeWords\u0022/\u003E\n \u003CScrollView x:Name=\u0022scrollView\u0022 Width=\u0022150\u0022 HorizontalAlignment=\u0022Left\u0022\u003E\n \u003CStackPanel\u003E\n \u003CRectangle Fill=\u0022AliceBlue\u0022 Height=\u0022150\u0022/\u003E\n \u003C!-- ... --\u003E\n \u003CRectangle Fill=\u0022Cyan\u0022 Height=\u0022150\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/ScrollView\u003E\n\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appwindow","controlId":"appwindow","controlName":"AppWindow","headerText":"Creating and customizing an AppWindow from a Window instance","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022\n VerticalAlignment=\u0022Center\u0022\n Spacing=\u00228\u0022\u003E\n \u003CButton x:Name=\u0022Hide\u0022\n Content=\u0022Hide\u0022\n Click=\u0022Hide_Click\u0022\n \u003CToolTipService.ToolTip\u003E\n \u003CTextBlock Text=\u0022Hides the window from all UX representations in the system but keeps the object alive.\u0022\n TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003C/ToolTipService.ToolTip\u003E\n \u003C/Button\u003E\n \u003CButton x:Name=\u0022Show\u0022\n Click=\u0022Show_Click\u0022\n \u003CToolTipService.ToolTip\u003E\n \u003CTextBlock Text=\u0022Hides and then shows the window and activates it after 3 seconds.\u0022\n TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003C/ToolTipService.ToolTip\u003E\n \u003CTextBlock Text=\u0022Hide and show the window after 3 seconds\u0022 TextWrapping=\u0022WrapWholeWords\u0022 TextAlignment=\u0022Center\u0022/\u003E\n \u003C/Button\u003E\n \u003CButton x:Name=\u0022Close\u0022\n Click=\u0022Close_Click\u0022\n Margin=\u00220,16,0,0\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022 VerticalAlignment=\u0022Center\u0022\u003E\n \u003CSymbolIcon Symbol=\u0022Cancel\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022\n Margin=\u00220,0,4,0\u0022 /\u003E\n \u003CTextBlock Text=\u0022Close\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003CToolTipService.ToolTip\u003E\n \u003CTextBlock Text=\u0022Closes the window and releases all resources.\u0022\n TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003C/ToolTipService.ToolTip\u003E\n \u003C/Button\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":"using Microsoft.UI.Windowing;\r\nusing Microsoft.UI.Xaml;\r\n\r\nnamespace YourNamespace;\r\n \r\npublic sealed partial class SampleWindow1 : Window\r\n{ \r\n public SampleWindow1()\r\n {\r\n this.InitializeComponent();\r\n\r\n // Set the window title\r\n AppWindow.Title = \u0022...\u0022;\r\n\r\n // Set the window size (including borders)\r\n AppWindow.Resize(new Windows.Graphics.SizeInt32(..., ...));\r\n\r\n // Set the window position on screen\r\n AppWindow.Move(new Windows.Graphics.PointInt32(..., ...));\r\n \r\n // Set the taskbar icon (displayed in the taskbar)\r\n AppWindow.SetTaskbarIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022);\r\n\r\n // Set the title bar icon (displayed in the window\u0027s title bar)\r\n AppWindow.SetTitleBarIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022);\r\n\r\n // Set the window icon (affects both taskbar and title bar, can be omitted if the above two are set)\r\n // AppWindow.SetIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022); \r\n \r\n AppWindow.TitleBar.PreferredTheme = TitleBarTheme.UseDefaultAppMode;\r\n }\r\n \r\n private void Show_Click(object sender, RoutedEventArgs e)\r\n {\r\n AppWindow.Hide();\r\n Task.Delay(3000).ContinueWith(t =\u003E AppWindow.Show());\r\n }\r\n\r\n private void Hide_Click(object sender, RoutedEventArgs e)\r\n {\r\n AppWindow.Hide();\r\n }\r\n\r\n private void Close_Click(object sender, RoutedEventArgs e)\r\n {\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appwindow-centering-appwindow-on-the","controlId":"appwindow","controlName":"AppWindow","headerText":"Centering AppWindow on the screen using the available display area","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022 Spacing=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022This is a centred sample window\u0022 Style=\u0022{ThemeResource TitleTextBlockStyle}\u0022 TextAlignment=\u0022Center\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":"using Microsoft.UI.Windowing;\nusing Microsoft.UI.Xaml;\nusing Windows.Graphics;\n\nnamespace YourNamesapace;\n\npublic sealed partial class SampleWindow2 : Window\n{\n public SampleWindow2()\n {\n this.InitializeComponent();\n AppWindow.SetIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022);\n AppWindow.TitleBar.PreferredTheme = TitleBarTheme.UseDefaultAppMode;\n\n // Center the window on the screen.\n CenterWindow();\n }\n\n // Centers the given AppWindow on the screen based on the available display area.\n private void CenterWindow()\n {\n var area = DisplayArea.GetFromWindowId(AppWindow.Id, DisplayAreaFallback.Nearest)?.WorkArea;\n if (area == null) return;\n AppWindow.Move(new PointInt32((area.Value.Width - AppWindow.Size.Width) / 2, (area.Value.Height - AppWindow.Size.Height) / 2));\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appwindow-appwindow-with-overlapedpresenter","controlId":"appwindow","controlName":"AppWindow","headerText":"AppWindow with OverlapedPresenter","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022\n VerticalAlignment=\u0022Center\u0022\n Spacing=\u002210\u0022\u003E\n \u003CButton x:Name=\u0022MaximizeBtn\u0022\n Content=\u0022Maximize\u0022\n Click=\u0022MaximizeBtn_Click\u0022\n \u003CButton x:Name=\u0022MinimizeBtn\u0022\n Content=\u0022Minimize\u0022\n Click=\u0022MinimizeBtn_Click\u0022\n \u003CButton x:Name=\u0022RestoreBtn\u0022\n Click=\u0022RestoreBtn_Click\u0022\n \u003CTextBlock Text=\u0022Minimize and restore the window after 3 seconds\u0022 TextWrapping=\u0022WrapWholeWords\u0022 TextAlignment=\u0022Center\u0022/\u003E\n \u003C/Button\u003E\n \u003CButton x:Name=\u0022CloseBtn\u0022\n Click=\u0022CloseBtn_Click\u0022\n Margin=\u00220,16,0,0\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\n VerticalAlignment=\u0022Center\u0022\u003E\n \u003CSymbolIcon Symbol=\u0022Cancel\u0022\n Margin=\u00220,0,4,0\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022 /\u003E\n \u003CTextBlock Text=\u0022Close\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Button\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":"using Microsoft.UI.Windowing;\r\nusing Microsoft.UI.Xaml;\r\nusing System.Threading.Tasks;\r\n\r\nnamespace YourNamespace;\r\n\r\npublic sealed partial class SampleWindow3 : Window\r\n{\r\n public SampleWindow3()\r\n {\r\n this.InitializeComponent();\r\n\r\n AppWindow.SetIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022);\r\n AppWindow.TitleBar.PreferredTheme = TitleBarTheme.UseDefaultAppMode; \r\n OverlappedPresenter presenter = OverlappedPresenter.Create();\r\n \r\n presenter.IsAlwaysOnTop = ...;\r\n presenter.IsMaximizable = ...;\r\n presenter.IsMinimizable = ...;\r\n presenter.IsResizable = ...;\r\n presenter.SetBorderAndTitleBar(..., ...);\r\n\r\n AppWindow.SetPresenter(presenter);\r\n\r\n SizeChanged \u002B= SampleWindow3_SizeChanged;\r\n }\r\n\r\n private void MaximizeRestoreBtn_Click(object sender, RoutedEventArgs e)\r\n {\r\n OverlappedPresenter presenter = (OverlappedPresenter)AppWindow.Presenter;\r\n if (presenter.State == OverlappedPresenterState.Maximized)\r\n {\r\n presenter.Restore();\r\n }\r\n else\r\n {\r\n presenter.Maximize();\r\n }\r\n }\r\n\r\n private void SampleWindow3_SizeChanged(object sender, WindowSizeChangedEventArgs e)\r\n {\r\n OverlappedPresenter presenter = (OverlappedPresenter)AppWindow.Presenter;\r\n MaximizeRestoreBtn.Content = presenter.State == OverlappedPresenterState.Maximized ? \u0022Restore\u0022 : \u0022Maximize\u0022;\r\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appwindow-setting-the-minimum-and","controlId":"appwindow","controlName":"AppWindow","headerText":"Setting the minimum and maximum width / height on an AppWindow using OverlappedPresenter","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022\n VerticalAlignment=\u0022Center\u0022\n Spacing=\u002210\u0022\u003E\n \u003CButton x:Name=\u0022MaximizeBtn\u0022\n Content=\u0022Maximize\u0022\n Click=\u0022MaximizeBtn_Click\u0022\n \u003CButton x:Name=\u0022MinimizeBtn\u0022\n Content=\u0022Minimize\u0022\n Click=\u0022MinimizeBtn_Click\u0022\n \u003CButton x:Name=\u0022RestoreBtn\u0022\n Click=\u0022RestoreBtn_Click\u0022\n \u003CTextBlock Text=\u0022Minimize and restore the window after 3 seconds\u0022 TextWrapping=\u0022WrapWholeWords\u0022 TextAlignment=\u0022Center\u0022/\u003E\n \u003C/Button\u003E\n \u003CButton x:Name=\u0022CloseBtn\u0022\n Click=\u0022CloseBtn_Click\u0022\n Margin=\u00220,16,0,0\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\n VerticalAlignment=\u0022Center\u0022\u003E\n \u003CSymbolIcon Symbol=\u0022Cancel\u0022\n Margin=\u00220,0,4,0\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022 /\u003E\n \u003CTextBlock Text=\u0022Close\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Button\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":"using Microsoft.UI.Windowing;\r\nusing Microsoft.UI.Xaml;\r\nusing System.Threading.Tasks;\r\n\r\nnamespace YourApp\n\r\npublic sealed partial class SampleWindow4 : Window\r\n{\r\n public SampleWindow4(int MinWidth, int MinHeight, int MaxWidth, int MaxHeight)\r\n {\r\n this.InitializeComponent();\r\n\r\n AppWindow.Resize(new Windows.Graphics.SizeInt32(800, 500));\r\n AppWindow.SetIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022);\r\n AppWindow.TitleBar.PreferredTheme = TitleBarTheme.UseDefaultAppMode;\r\n\r\n OverlappedPresenter presenter = OverlappedPresenter.Create();\r\n presenter.PreferredMinimumWidth = MinWidth;\r\n presenter.PreferredMinimumHeight = MinHeight;\r\n presenter.PreferredMaximumWidth = MaxWidth;\r\n presenter.PreferredMaximumHeight = MaxHeight;\r\n presenter.IsMaximizable = false;\r\n\r\n AppWindow.SetPresenter(presenter);\r\n }\r\n\r\n private void MinimizeBtn_Click(object sender, RoutedEventArgs e)\r\n {\r\n OverlappedPresenter presenter = (OverlappedPresenter)AppWindow.Presenter;\r\n presenter.Minimize();\r\n }\r\n\r\n private void RestoreBtn_Click(object sender, RoutedEventArgs e)\r\n {\r\n OverlappedPresenter presenter = (OverlappedPresenter)AppWindow.Presenter;\r\n presenter.Minimize();\r\n Task.Delay(3000).ContinueWith(t =\u003E presenter.Restore());\r\n }\r\n\r\n private void CloseBtn_Click(object sender, RoutedEventArgs e)\r\n {\r\n this.Close();\r\n }\r\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appwindow-modal-window-with-overlappedpresenter","controlId":"appwindow","controlName":"AppWindow","headerText":"Modal window with OverlappedPresenter using AppWindow","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022 Spacing=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022Modal Window\u0022 Style=\u0022{ThemeResource TitleTextBlockStyle}\u0022 TextAlignment=\u0022Center\u0022 /\u003E\n\n \u003CTextBlock Text=\u0022This is a modal window created using AppWindow with OverlappedPresenter.\u0022 Style=\u0022{ThemeResource BodyTextBlockStyle}\u0022 TextAlignment=\u0022Center\u0022 TextWrapping=\u0022Wrap\u0022 /\u003E\n\n \u003CStackPanel Orientation=\u0022Horizontal\u0022 HorizontalAlignment=\u0022Center\u0022 Spacing=\u00228\u0022\u003E\n \u003CButton Content=\u0022OK\u0022 Width=\u002280\u0022 Click=\u0022OKButton_Click\u0022 /\u003E\n \u003CButton Content=\u0022Cancel\u0022 Width=\u002280\u0022 Click=\u0022CancelButton_Click\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":"using Microsoft.UI;\nusing Microsoft.UI.Windowing;\nusing Microsoft.UI.Xaml;\nusing System;\nusing System.Runtime.InteropServices;\nusing WinRT.Interop;\n\nnamespace YourNamespace;\n\npublic sealed partial class ModalWindow : Window\n{\n public ModalWindow()\n {\n this.InitializeComponent();\n\n var dpi = Windows.Win32.PInvoke.GetDpiForWindow(new Windows.Win32.Foundation.HWND(WinRT.Interop.WindowNative.GetWindowHandle(this)));\n var scalingFactor = (float)dpi / 96;\n\n AppWindow.Resize(new Windows.Graphics.SizeInt32((int)(400.0f * scalingFactor), (int)(300.0f * scalingFactor)));\n AppWindow.SetIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022);\n AppWindow.TitleBar.PreferredTheme = TitleBarTheme.UseDefaultAppMode;\n\n OverlappedPresenter presenter = OverlappedPresenter.CreateForDialog();\n\n // Set this modal window\u0027s owner (the main application window).\n // The main window can be retrieved from App.xaml.cs if it\u0027s set as a static property.\n SetWindowOwner(owner: App.StartupWindow);\n\n // Make the window modal (blocks interaction with the owner window until closed).\n presenter.IsModal = true;\n\n // Apply the presenter settings to the AppWindow.\n AppWindow.SetPresenter(presenter);\n\n // Show the modal window.\n AppWindow.Show();\n\n Closed \u002B= ModalWindow_Closed;\n }\n\n // Sets the owner window of the modal window.\n private void SetWindowOwner(Window owner)\n {\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appwindow-appwindow-with-fullscreenpresenter","controlId":"appwindow","controlName":"AppWindow","headerText":"AppWindow with FullScreenPresenter","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022\n VerticalAlignment=\u0022Center\u0022\n Spacing=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022This window is running in Fullscreen mode\u0022\n Style=\u0022{ThemeResource TitleTextBlockStyle}\u0022\n TextAlignment=\u0022Center\u0022 /\u003E\n \u003CButton x:Name=\u0022Close\u0022\n Click=\u0022Close_Click\u0022\n HorizontalAlignment=\u0022Center\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\n VerticalAlignment=\u0022Center\u0022\u003E\n \u003CSymbolIcon Symbol=\u0022Cancel\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022\n Margin=\u00220,0,4,0\u0022 /\u003E\n \u003CTextBlock Text=\u0022Close\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Button\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":"using Microsoft.UI.Windowing;\nusing Microsoft.UI.Xaml;\n\nnamespace YourNamespace;\n\npublic sealed partial class SampleWindow6 : Window\n{\n public SampleWindow6()\n {\n this.InitializeComponent();\n AppWindow.SetIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022);\n AppWindow.TitleBar.PreferredTheme = TitleBarTheme.UseDefaultAppMode;\n\n // Set the window to Full-Screen mode\n AppWindow.SetPresenter(AppWindowPresenterKind.FullScreen);\n }\n\n private void Close_Click(object sender, RoutedEventArgs e)\n {\n this.Close();\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appwindow-appwindow-with-compactoverlaypresenter","controlId":"appwindow","controlName":"AppWindow","headerText":"AppWindow with CompactOverlayPresenter","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022 Spacing=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022This window is set to CompactOverlay (Picture-in-Picture) mode.\u0022 TextAlignment=\u0022Center\u0022 TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":"using Microsoft.UI.Windowing;\r\nusing Microsoft.UI.Xaml;\r\n\r\nnamespace YourNamespace;\r\n\r\npublic sealed partial class SampleWindow7 : Window\r\n{\r\n public SampleWindow7(string InitialSize)\r\n {\r\n this.InitializeComponent();\r\n\r\n AppWindow.SetIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022);\r\n AppWindow.TitleBar.PreferredTheme = TitleBarTheme.UseDefaultAppMode;\r\n\r\n // Creates a CompactOverlay (Picture-in-Picture) presenter\r\n CompactOverlayPresenter presenter = CompactOverlayPresenter.Create();\r\n\r\n // Sets the initial size of the CompactOverlay window\r\n presenter.InitialSize = CompactOverlaySize....;\r\n\r\n // Applies the CompactOverlay presenter to the window\r\n AppWindow.SetPresenter(presenter);\r\n }\r\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appwindowtitlebar","controlId":"appwindowtitlebar","controlName":"AppWindowTitleBar","headerText":"AppWindowTitleBar color customization","xaml":null,"csharp":"using Microsoft.UI;\nusing Microsoft.UI.Windowing;\nusing Microsoft.UI.Xaml;\nusing Windows.UI;\n\npublic sealed partial class AppWindowTitleBarWindow : Window\n{\n public AppWindowTitleBarWindow()\n {\n InitializeComponent();\n\n AppWindow.TitleBar.BackgroundColor = ColorHelper.FromArgb(...);\n AppWindow.TitleBar.ForegroundColor = ColorHelper.FromArgb(...);\n AppWindow.TitleBar.ButtonBackgroundColor = ColorHelper.FromArgb(...);\n AppWindow.TitleBar.ButtonForegroundColor = ColorHelper.FromArgb(...);\n AppWindow.TitleBar.ButtonHoverBackgroundColor = ColorHelper.FromArgb(...);\n AppWindow.TitleBar.ButtonHoverForegroundColor = ColorHelper.FromArgb(...);\n AppWindow.TitleBar.InactiveBackgroundColor = ColorHelper.FromArgb(...);\n AppWindow.TitleBar.InactiveForegroundColor = ColorHelper.FromArgb(...);\n AppWindow.TitleBar.ButtonInactiveBackgroundColor = ColorHelper.FromArgb(...);\n AppWindow.TitleBar.ButtonInactiveForegroundColor = ColorHelper.FromArgb(...);\n AppWindow.TitleBar.ButtonPressedBackgroundColor = ColorHelper.FromArgb(...);\n AppWindow.TitleBar.ButtonPressedForegroundColor = ColorHelper.FromArgb(...);\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appwindowtitlebar-extending-content-into-the","controlId":"appwindowtitlebar","controlName":"AppWindowTitleBar","headerText":"Extending content into the AppWindowTitleBar area","xaml":null,"csharp":"using Microsoft.UI.Windowing;\nusing Microsoft.UI.Xaml;\n\npublic sealed partial class AppWindowTitleBarExtendWindow : Window\n{\n public AppWindowTitleBarExtendWindow()\n {\n InitializeComponent();\n AppWindow.TitleBar.ExtendsContentIntoTitleBar = ...;\n if (AppWindow.TitleBar.ExtendsContentIntoTitleBar)\n {\n AppWindow.TitleBar.HeightOption = TitleBarHeightOption....;\n }\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appwindowtitlebar-appwindowtitlebar-preferred-theme-and","controlId":"appwindowtitlebar","controlName":"AppWindowTitleBar","headerText":"AppWindowTitleBar preferred theme and height options","xaml":null,"csharp":"using Microsoft.UI;\nusing Microsoft.UI.Windowing;\nusing Microsoft.UI.Xaml;\n \npublic sealed partial class AppWindowTitleBarThemeHeightWindow : Window\n{\n public AppWindowTitleBarThemeHeightWindow()\n {\n InitializeComponent();\n AppWindow.TitleBar.PreferredTheme = TitleBarTheme....;\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"createmultiplewindows","controlId":"createmultiplewindows","controlName":"Multiple windows","headerText":"Create single threaded Multiple Top level Windows(MTW).","xaml":null,"csharp":"// Ensure you close the child window before closing the parent window to avoid application crash.\nvar childWindow = new Window()\n{\n ExtendsContentIntoTitleBar = true,\n SystemBackdrop = new MicaBackdrop(),\n Content = new Page()\n {\n Content = new TextBlock()\n {\n Text = \u0022New child window!\u0022,\n HorizontalAlignment = HorizontalAlignment.Center,\n VerticalAlignment = VerticalAlignment.Center,\n },\n // Get the theme from the parent.\n RequestedTheme = this.ActualTheme,\n }\n};\n\nchildWindow.AppWindow.ResizeClient(new SizeInt32(500, 500));\nchildWindow.Activate();","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"titlebar","controlId":"titlebar","controlName":"TitleBar","headerText":"TitleBar configuration","xaml":"\u003CTitleBar\n Title=\u0022...\u0022\n Subtitle=\u0022...\u0022\n IsBackButtonVisible=\u0022...\u0022\n IsPaneToggleButtonVisible=\u0022...\u0022\u003E\n \u003CTitleBar.IconSource\u003E\n \u003CImageIconSource ImageSource=\u0022/Assets/Tiles/GalleryIcon.ico\u0022 /\u003E\n \u003C/TitleBar.IconSource\u003E\n \u003CTitleBar.Content\u003E\n \u003CAutoSuggestBox\n VerticalAlignment=\u0022Center\u0022\n PlaceholderText=\u0022Search..\u0022\n QueryIcon=\u0022Find\u0022 /\u003E\n \u003C/TitleBar.Content\u003E\n \u003CTitleBar.RightHeader\u003E\n \u003CPersonPicture\n Initials=\u0022JD\u0022 /\u003E\n \u003C/TitleBar.RightHeader\u003E\n\u003C/TitleBar\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"titlebar-end-to-end-titlebar","controlId":"titlebar","controlName":"TitleBar","headerText":"End to end TitleBar sample","xaml":"\u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003C!-- TitleBar --\u003E\n \u003CRowDefinition Height=\u0022*\u0022 /\u003E\n \u003C!-- NavigationView --\u003E\n \u003C/Grid.RowDefinitions\u003E\n\n \u003CTitleBar\n x:Name=\u0022titleBar\u0022\n BackRequested=\u0022TitleBar_BackRequested\u0022\n IsBackButtonVisible=\u0022{x:Bind navFrame.CanGoBack, Mode=OneWay}\u0022\n IsPaneToggleButtonVisible=\u0022True\u0022\n PaneToggleRequested=\u0022TitleBar_PaneToggleRequested\u0022 /\u003E\n\n \u003CNavigationView\n x:Name=\u0022navView\u0022\n Grid.Row=\u00221\u0022\n IsBackButtonVisible=\u0022Collapsed\u0022\n IsPaneToggleButtonVisible=\u0022False\u0022\u003E\n \u003CNavigationView.MenuItems... /\u003E\n \u003CFrame x:Name=\u0022navFrame\u0022 /\u003E\n \u003C/NavigationView\u003E\n\u003C/Grid\u003E","csharp":"this.ExtendsContentIntoTitleBar = true; // Extend the content into the title bar and hide the default titlebar\n this.SetTitleBar(titleBar); // Set the custom title bar","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"clipboard","controlId":"clipboard","controlName":"Clipboard","headerText":"Copy text to the Clipboard","xaml":"\u003CButton Content=\u0022Copy Text to the Clipboard\u0022 Click=\u0022CopyText_Click\u0022/\u003E","csharp":"private void CopyText_Click(object sender, RoutedEventArgs args)\n{\n\tvar package = new DataPackage();\n\tpackage.SetText(\u0022Copy this text\u0022);\n\tClipboard.SetContent(package);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"clipboard-paste-text-from-the","controlId":"clipboard","controlName":"Clipboard","headerText":"Paste text from the Clipboard","xaml":"\u003CButton Content=\u0022Paste Text from the Clipboard\u0022 Click=\u0022PasteText_Click\u0022/\u003E","csharp":"private async void PasteText_Click(object sender, RoutedEventArgs args)\n{\n\tvar package = Clipboard.GetContent();\n\tif (package.Contains(StandardDataFormats.Text))\n\t{\n\t\tvar text = await package.GetTextAsync();\n\t}\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"clipboard-copy-and-paste-an","controlId":"clipboard","controlName":"Clipboard","headerText":"Copy and paste an image","xaml":null,"csharp":"private void CopyImage_Click(object sender, RoutedEventArgs args)\n{\n var package = new DataPackage();\n var imageUri = new Uri(\u0022ms-appx:///Assets/YourImage.png\u0022);\n package.SetBitmap(RandomAccessStreamReference.CreateFromUri(imageUri));\n Clipboard.SetContent(package);\n}\n\nprivate async void PasteImage_Click(object sender, RoutedEventArgs args)\n{\n var package = Clipboard.GetContent();\n if (package.Contains(StandardDataFormats.Bitmap))\n {\n var imageReference = await package.GetBitmapAsync();\n using (var imageStream = await imageReference.OpenReadAsync())\n {\n var bitmapImage = new BitmapImage();\n bitmapImage.SetSource(imageStream);\n PastedImage.Source = bitmapImage;\n }\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"clipboard-copy-and-paste-files","controlId":"clipboard","controlName":"Clipboard","headerText":"Copy and paste files","xaml":null,"csharp":"private async void CopyFiles_Click(object sender, RoutedEventArgs args)\n{\n var filePicker = new FileOpenPicker\n {\n ViewMode = PickerViewMode.List,\n FileTypeFilter = { \u0022*\u0022 }\n };\n\n // Initialize the picker with the current window handle (required in WinUI 3)\n var hwnd = WinRT.Interop.WindowNative.GetWindowHandle(App.MainWindow);\n WinRT.Interop.InitializeWithWindow.Initialize(filePicker, hwnd);\n\n var storageItems = await filePicker.PickMultipleFilesAsync();\n if (storageItems.Count \u003E 0)\n {\n var package = new DataPackage();\n package.SetStorageItems(storageItems);\n package.RequestedOperation = DataPackageOperation.Copy;\n Clipboard.SetContent(package);\n }\n}\n\nprivate async void PasteFiles_Click(object sender, RoutedEventArgs args)\n{\n var package = Clipboard.GetContent();\n if (package.Contains(StandardDataFormats.StorageItems))\n {\n var storageItems = await package.GetStorageItemsAsync();\n var operation = package.RequestedOperation;\n // Display the file names and the requested operation\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"clipboard-clipboard-history-and-roaming","controlId":"clipboard","controlName":"Clipboard","headerText":"Clipboard history and roaming options","xaml":null,"csharp":"private void CopyWithOptions_Click(object sender, RoutedEventArgs args)\n{\n var package = new DataPackage();\n package.SetText(\u0022Text with clipboard options\u0022);\n\n var options = new ClipboardContentOptions();\n options.IsAllowedInHistory = true;\n options.IsRoamable = true;\n\n Clipboard.SetContentWithOptions(package, options);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"clipboard-other-clipboard-operations","controlId":"clipboard","controlName":"Clipboard","headerText":"Other clipboard operations","xaml":null,"csharp":"// Show available formats on the clipboard\nvar package = Clipboard.GetContent();\nforeach (var format in package.AvailableFormats)\n{\n // Display each format\n}\n\n// Clear the clipboard\nClipboard.Clear();\n\n// Register for clipboard content changes\nClipboard.ContentChanged \u002B= (s, e) =\u003E\n{\n // Handle clipboard content change\n};","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"storagepickers","controlId":"storagepickers","controlName":"Storage pickers","headerText":"Pick single file","xaml":"\u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CButton x:Name=\u0022PickSingleFileButton\u0022 Content=\u0022Pick a single file\u0022 Click=\u0022PickSingleFileButton_Click\u0022/\u003E\n \u003CTextBlock x:Name=\u0022PickedSingleFileTextBlock\u0022 Text=\u0022No file picked\u0022/\u003E\n\u003C/StackPanel\u003E","csharp":"private async void PickSingleFileButton_Click(object sender, RoutedEventArgs e)\n{\n if (sender is Button button)\n {\n //disable the button to avoid double-clicking\n button.IsEnabled = false;\n\n var picker = new FileOpenPicker(button.XamlRoot.ContentIslandEnvironment.AppWindowId);...\n\n picker.CommitButtonText = \u0022...\u0022;\n\n picker.SuggestedStartLocation = PickerLocationId....;\n\n picker.ViewMode = PickerViewMode....;\n\n // Show the picker dialog window\n var file = await picker.PickSingleFileAsync();\n PickedSingleFileTextBlock.Text = file != null\n ? \u0022Picked: \u0022 \u002B file.Path\n : \u0022No file selected.\u0022;\n\n //re-enable the button\n button.IsEnabled = true;\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"storagepickers-pick-multiple-files","controlId":"storagepickers","controlName":"Storage pickers","headerText":"Pick multiple files","xaml":"\u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CButton x:Name=\u0022PickMultipleFilesButton\u0022 Content=\u0022Pick multiple files\u0022 Click=\u0022PickMultipleFilesButton_Click\u0022/\u003E\n \u003CTextBlock x:Name=\u0022PickedMultipleFilesTextBlock\u0022 Text=\u0022No files picked\u0022/\u003E\n\u003C/StackPanel\u003E","csharp":"private async void PickMultipleFilesButton_Click(object sender, RoutedEventArgs e)\n{\n if (sender is Button button)\n {\n //disable the button to avoid double-clicking\n button.IsEnabled = false;\n\n var picker = new FileOpenPicker(button.XamlRoot.ContentIslandEnvironment.AppWindowId);...\n \n picker.CommitButtonText = \u0022...\u0022;\n \n picker.SuggestedStartLocation = PickerLocationId....;\n \n picker.ViewMode = PickerViewMode....;\n\n // Show the picker dialog window\n var files = await picker.PickMultipleFilesAsync();\n\n if (files.Count \u003E 0)\n {\n PickedMultipleFilesTextBlock.Text = \u0022\u0022;\n foreach (var file in files)\n {\n PickedMultipleFilesTextBlock.Text \u002B= \u0022- Picked: \u0022 \u002B file.Path \u002B Environment.NewLine;\n }\n }\n else\n {\n PickedMultipleFilesTextBlock.Text = \u0022No files selected.\u0022;\n }\n\n //re-enable the button\n button.IsEnabled = true;\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"storagepickers-save-file","controlId":"storagepickers","controlName":"Storage pickers","headerText":"Save file","xaml":"\u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CTextBox x:Name=\u0022FileContentTextBox\u0022 Header=\u0022File content\u0022 TextWrapping=\u0022Wrap\u0022 AcceptsReturn=\u0022True\u0022\n \u003CButton x:Name=\u0022SaveFileButton\u0022 Content=\u0022Save a file\u0022 Click=\u0022SaveFileButton_Click\u0022 /\u003E\n \u003CTextBlock x:Name=\u0022SavedFileTextBlock\u0022 Grid.Column=\u00221\u0022 Text=\u0022No file saved\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":"private async void SaveFileButton_Click(object sender, RoutedEventArgs e)\n{\n if (sender is Button button)\n {\n button.IsEnabled = false;\n\n var picker = new FileSavePicker(button.XamlRoot.ContentIslandEnvironment.AppWindowId);\n.........\n picker.DefaultFileExtension = \u0022...\u0022;\n\n picker.SuggestedFileName = \u0022...\u0022;\n\n picker.CommitButtonText = \u0022...\u0022;\n\n picker.SuggestedStartLocation = PickerLocationId....;\n \n picker.SuggestedFolder = \u0022...\u0022;\n\n // Show the picker dialog\n var result = await picker.PickSaveFileAsync();\n\n if (result != null)\n {\n string savePath = result.Path;\n await File.WriteAllTextAsync(savePath, FileContentTextBox.Text);\n SavedFileTextBlock.Text = \u0022File saved to: \u0022 \u002B savePath;\n }\n else\n {\n SavedFileTextBlock.Text = \u0022File save canceled.\u0022;\n }\n\n button.IsEnabled = true;\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"storagepickers-pick-folder","controlId":"storagepickers","controlName":"Storage pickers","headerText":"Pick folder","xaml":"\u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CButton x:Name=\u0022PickFolderButton\u0022 Content=\u0022Pick a folder\u0022 Click=\u0022PickFolderButton_Click\u0022 /\u003E\n \u003CTextBlock x:Name=\u0022PickedFolderTextBlock\u0022 Text=\u0022No folder picked\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":"private async void PickFolderButton_Click(object sender, RoutedEventArgs e)\n{\n if (sender is Button button)\n {\n // disable the button to avoid double-clicking\n button.IsEnabled = false;\n\n // Clear previous returned folder name\n PickedFolderTextBlock.Text = \u0022\u0022;\n\n var picker = new FolderPicker(button.XamlRoot.ContentIslandEnvironment.AppWindowId);\n\n picker.CommitButtonText = \u0022...\u0022;\n picker.SuggestedStartLocation = PickerLocationId....;\n picker.ViewMode = PickerViewMode....;\n\n // Show the picker dialog window\n var folder = await picker.PickSingleFolderAsync();\n PickedFolderTextBlock.Text = folder != null\n ? \u0022Picked: \u0022 \u002B folder.Path\n : \u0022No folder selected.\u0022;\n\n // re-enable the button\n button.IsEnabled = true;\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appnotification","controlId":"appnotification","controlName":"App notifications","headerText":"Basic notification","xaml":null,"csharp":"AppNotification notification = new AppNotificationBuilder()\n .AddText(\u0022Welcome to WinUI 3 Gallery\u0022)\n .AddText(\u0022Explore interactive samples and discover the power of modern Windows UI.\u0022)\n .BuildNotification();\n\nAppNotificationManager.Default.Show(notification);","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appnotification-informational-notification-with-logo","controlId":"appnotification","controlName":"App notifications","headerText":"Informational notification with logo and custom audio","xaml":null,"csharp":"AppNotification notification = new AppNotificationBuilder()\n .AddText(\u0022Control Highlight: PersonPicture\u0022)\n .AddText(\u0022Use the PersonPicture control to display user avatars with initials or images.\u0022)\n .SetAppLogoOverride(new Uri(\u0022ms-appx:///Assets/ControlImages/PersonPicture.png\u0022), AppNotificationImageCrop.Circle)\n .SetAudioEvent(AppNotificationSoundEvent....)\n .SetTimeStamp(DateTime.Now) \n .BuildNotification();\n\nAppNotificationManager.Default.Show(notification);","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appnotification-visual-notification-with-hero","controlId":"appnotification","controlName":"App notifications","headerText":"Visual notification with hero image and attribution","xaml":null,"csharp":"AppNotification notification = new AppNotificationBuilder()\n .AddText(\u0022Harbor Scene with Boats\u0022)\n .AddText(\u0022A quiet harbor with boats gently anchored in view.\u0022)\n .SetHeroImage(new Uri(\u0022ms-appx:///Assets/YourImage.png\u0022))\n .SetAttributionText(\u0022WinUI gallery assets\u0022)\n .BuildNotification();\n\nAppNotificationManager.Default.Show(notification);","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appnotification-notification-with-appnotification-controls","controlId":"appnotification","controlName":"App notifications","headerText":"Notification with AppNotification controls","xaml":null,"csharp":"AppNotification notification = new AppNotificationBuilder()\n .AddText(\u0022Survey\u0022)\n .AddText(\u0022Please select your satisfaction level and leave a comment.\u0022)\n .AddComboBox(new AppNotificationComboBox(\u0022satisfaction\u0022)\n .AddItem(\u00221\u0022, \u0022Very Bad\u0022)\n .AddItem(\u00222\u0022, \u0022Bad\u0022)\n .AddItem(\u00223\u0022, \u0022Neutral\u0022)\n .AddItem(\u00224\u0022, \u0022Good\u0022)\n .AddItem(\u00225\u0022, \u0022Excellent\u0022)\n .SetSelectedItem(\u00223\u0022))\n .AddTextBox(\u0022comment\u0022, \u0022Leave a comment here...\u0022,\u0022\u0022)\n .AddButton(new AppNotificationButton(\u0022Submit\u0022)\n .AddArgument(\u0022action\u0022, \u0022submit_survey\u0022))\n .BuildNotification();\n\nAppNotificationManager.Default.Show(notification);","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"appnotification-notification-with-progressbar","controlId":"appnotification","controlName":"App notifications","headerText":"Notification with ProgressBar","xaml":null,"csharp":"AppNotification notification = new AppNotificationBuilder()\n .AddText(\u0022Progress Bar Example\u0022)\n .AddText(\u0022This is a sample notification showing how to use a progress bar.\u0022)\n .AddProgressBar(new AppNotificationProgressBar()\n {\n Title = \u0022Demo Progress\u0022,\n Value = 0.6, // 60%\n ValueStringOverride = \u002260%\u0022,\n Status = \u0022In progress...\u0022\n })\n .BuildNotification();\n\nAppNotificationManager.Default.Show(notification);","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"badgenotificationmanager","controlId":"badgenotificationmanager","controlName":"Badge notifications","headerText":"Setting badge notifications with count","xaml":null,"csharp":"private void SetBadgeCountButton_Click(object sender, RoutedEventArgs e)\n{\n BadgeNotificationManager.Current.SetBadgeAsCount(...);\n}\n\nprivate void ClearBadgeButton_Click(object sender, RoutedEventArgs e)\n{\n BadgeNotificationManager.Current.ClearBadge();\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"badgenotificationmanager-setting-badge-notifications-with","controlId":"badgenotificationmanager","controlName":"Badge notifications","headerText":"Setting badge notifications with Glyph","xaml":null,"csharp":"private void SetBadgeGlyphButton_Click(object sender, RoutedEventArgs e)\n{\n BadgeNotificationManager.Current.SetBadgeAsGlyph(BadgeNotificationGlyph....);\n}\n\nprivate void ClearBadgeButton_Click(object sender, RoutedEventArgs e)\n{\n BadgeNotificationManager.Current.ClearBadge();\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"jumplist","controlId":"jumplist","controlName":"JumpList","headerText":"Adding tasks to the jump list","xaml":null,"csharp":"var jumpList = await JumpList.LoadCurrentAsync();\n\nvar task = JumpListItem.CreateWithArguments(\u0022/compose\u0022, \u0022New Message\u0022);\ntask.Description = \u0022Compose a new message\u0022;\ntask.Logo = new Uri(\u0022ms-appx:///Assets/Tiles/AppList.targetsize-48.png\u0022);\n\njumpList.Items.Add(task);\nawait jumpList.SaveAsync();","source":"gallery","nugetPackage":null,"xmlnsImports":[]},{"id":"jumplist-adding-items-to-a","controlId":"jumplist","controlName":"JumpList","headerText":"Adding items to a custom group","xaml":null,"csharp":"var jumpList = await JumpList.LoadCurrentAsync();\n\nvar item = JumpListItem.CreateWithArguments(\u0022/project-alpha\u0022, \u0022Project Alpha\u0022);\nitem.GroupName = \u0022Projects\u0022;\nitem.Description = \u0022Open Project Alpha\u0022;\nitem.Logo = new Uri(\u0022ms-appx:///Assets/Tiles/AppList.targetsize-48.png\u0022);\n\njumpList.Items.Add(item);\nawait jumpList.SaveAsync();","source":"gallery","nugetPackage":null,"xmlnsImports":[]}] \ No newline at end of file +[{"id":"xamlresources-1","controlId":"xamlresources","controlName":"Resources","headerText":"App","xaml":"\u003C!-- App.xaml --\u003E\n\u003CApplication\u003E\n \u003CApplication.Resources\u003E\n \u003C!-- Define an application-wide color resource --\u003E\n \u003CColor x:Key=\u0022PrimaryColor\u0022\u003E#0078D4\u003C/Color\u003E\n \u003C/Application.Resources\u003E\n\u003C/Application\u003E\n\n\u003C!-- YourPage.xaml --\u003E\n\u003CPage\u003E\n \u003CPage.Resources\u003E\n \u003C!-- Define page-level solid color brushes --\u003E\n \u003CSolidColorBrush x:Key=\u0022HighlightBrush\u0022 Color=\u0022#A94DC1\u0022 /\u003E\n \u003CSolidColorBrush x:Key=\u0022FontColor\u0022 Color=\u0022White\u0022 /\u003E\n \u003C/Page.Resources\u003E\n\n \u003C!-- StackPanel using the application-level resource \u0027PrimaryColor\u0027 --\u003E\n \u003CStackPanel Background=\u0022{StaticResource PrimaryColor}\u0022 Padding=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022Using application-level resources\u0022 Foreground=\u0022White\u0022 FontSize=\u002224\u0022 /\u003E\n\n \u003C!-- StackPanel using the page-level resource \u0027HighlightBrush\u0027 --\u003E\n \u003CStackPanel Background=\u0022{StaticResource HighlightBrush}\u0022 Padding=\u00228\u0022 Margin=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022Using page-level resources\u0022 Foreground=\u0022{StaticResource FontColor}\u0022 FontSize=\u002218\u0022 /\u003E\n\n \u003C!-- StackPanel with control-level resources defined within its own Resources --\u003E\n \u003CStackPanel Padding=\u00228\u0022 Margin=\u00228\u0022\u003E\n \u003CStackPanel.Resources\u003E\n \u003C!-- Define control-level resources --\u003E\n \u003CColor x:Key=\u0022BackgroundColor\u0022\u003E#E2241A\u003C/Color\u003E\n \u003Cx:String x:Key=\u0022Description\u0022\u003EUsing control-level resources\u003C/x:String\u003E\n \u003C/StackPanel.Resources\u003E\n \u003CGrid Background=\u0022{StaticResource BackgroundColor}\u0022 Padding=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022{StaticResource Description}\u0022 Foreground=\u0022White\u0022/\u003E\n \u003C/Grid\u003E\n \u003C/StackPanel\u003E\n \u003C/StackPanel\u003E\n \u003C/StackPanel\u003E\n\u003C/Page\u003E","csharp":"// Retrieve application-level resource\nvar primaryColor = (Windows.UI.Color)Application.Current.Resources[\u0022PrimaryColor\u0022];\n\n// Retrieve page-level resource\nvar highlightBrush = (SolidColorBrush)this.Resources[\u0022HighlightBrush\u0022];\n\n// Retrieve control-level resources\nvar headerFontSize = (double)newGrid.Resources[\u0022HeaderFontSize\u0022];\nvar welcomeMessage = (string)newGrid.Resources[\u0022Description\u0022];","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Reusable definitions for shared values to ensure consistency and maintainability.","relatedControls":["XamlStyles","Templates","Binding"],"apiNamespace":null,"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"}]},{"id":"xamlresources-2","controlId":"xamlresources","controlName":"Resources","headerText":"StaticResource versus ThemeResource","xaml":"\u003CStackPanel\u003E\n \u003CGrid Background=\u0022{StaticResource SolidBackgroundFillColorBaseBrush}\u0022\u003E\n \u003CTextBlock\n Text=\u0022StaticResource uses the value defined when the app starts and does not update when the theme changes.\u0022\n Foreground=\u0022{StaticResource TextFillColorPrimaryBrush}\u0022\n FontSize=\u002216\u0022\n TextWrapping=\u0022Wrap\u0022/\u003E\n \u003C/Grid\u003E\n\n \u003CGrid Background=\u0022{ThemeResource SolidBackgroundFillColorBaseBrush}\u0022\u003E\n \u003CTextBlock\n Text=\u0022ThemeResource adapts automatically to the current theme. If the app switches from Light to Dark, the color defined by ThemeResource changes.\u0022\n Foreground=\u0022{ThemeResource TextFillColorPrimaryBrush}\u0022\n FontSize=\u002216\u0022\n TextWrapping=\u0022Wrap\u0022/\u003E\n \u003C/Grid\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Reusable definitions for shared values to ensure consistency and maintainability.","relatedControls":["XamlStyles","Templates","Binding"],"apiNamespace":null,"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"}]},{"id":"xamlresources-3","controlId":"xamlresources","controlName":"Resources","headerText":"Define a new theme resource","xaml":"\u003CGrid\u003E\n \u003CGrid.Resources\u003E\n \u003CResourceDictionary\u003E\n \u003CResourceDictionary.ThemeDictionaries\u003E\n \u003CResourceDictionary x:Key=\u0022Default\u0022\u003E\n \u003CSolidColorBrush x:Key=\u0022BackgroundBrush\u0022 Color=\u0022#EEE\u0022 /\u003E\n \u003CSolidColorBrush x:Key=\u0022TextBrush\u0022 Color=\u0022#333\u0022 /\u003E\n \u003Cx:String x:Key=\u0022ThemeString\u0022\u003ELight theme\u003C/x:String\u003E\n \u003CImageSource x:Key=\u0022ImageSource\u0022\u003Ems-appx:///Assets/YourImage.png\n \u003C/ResourceDictionary\u003E\n \u003CResourceDictionary x:Key=\u0022Dark\u0022\u003E\n \u003CSolidColorBrush x:Key=\u0022BackgroundBrush\u0022 Color=\u0022#333\u0022 /\u003E\n \u003CSolidColorBrush x:Key=\u0022TextBrush\u0022 Color=\u0022#EEE\u0022 /\u003E\n \u003Cx:String x:Key=\u0022ThemeString\u0022\u003EDark theme\u003C/x:String\u003E\n \u003CImageSource x:Key=\u0022ImageSource\u0022\u003Ems-appx:///Assets/YourImage.png\n \u003C/ResourceDictionary\u003E\n \u003C/ResourceDictionary.ThemeDictionaries\u003E\n \u003C/ResourceDictionary\u003E\n \u003C/Grid.Resources\u003E\n \u003CStackPanel\n Padding=\u00228\u0022\n HorizontalAlignment=\u0022Center\u0022\n VerticalAlignment=\u0022Center\u0022\n Background=\u0022{ThemeResource BackgroundBrush}\u0022\u003E\n \u003CTextBlock\n Foreground=\u0022{ThemeResource TextBrush}\u0022\n Style=\u0022{StaticResource SubtitleTextBlockStyle}\u0022\n Text=\u0022{ThemeResource ThemeString}\u0022 /\u003E\n \u003CImage Source=\u0022{ThemeResource ImageSource}\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Grid\u003E\u003C/ImageSource\u003E\u003C/ResourceDictionary\u003E\u003C/ImageSource\u003E\u003C/ResourceDictionary\u003E\u003C/ResourceDictionary.ThemeDictionaries\u003E\u003C/ResourceDictionary\u003E\u003C/Grid.Resources\u003E\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Reusable definitions for shared values to ensure consistency and maintainability.","relatedControls":["XamlStyles","Templates","Binding"],"apiNamespace":null,"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"}]},{"id":"xamlstyles-1","controlId":"xamlstyles","controlName":"Style","headerText":"Creating and applying a style","xaml":"\u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CStackPanel.Resources\u003E\n \u003CStyle x:Key=\u0022CustomButtonStyle\u0022 TargetType=\u0022Button\u0022 BasedOn=\u0022{StaticResource ButtonRevealStyle}\u0022\u003E\n \u003CSetter Property=\u0022Background\u0022 Value=\u0022{ThemeResource AccentAcrylicBackgroundFillColorDefaultBrush}\u0022 /\u003E\n \u003CSetter Property=\u0022MinWidth\u0022 Value=\u0022200\u0022 /\u003E\n \u003C/Style\u003E\n \u003C/StackPanel.Resources\u003E\n \u003CButton Content=\u0022Default button\u0022 /\u003E\n \u003CButton Content=\u0022Styled button\u0022 Style=\u0022{StaticResource CustomButtonStyle}\u0022 /\u003E\n \u003CButton Content=\u0022Styled button (overridden)\u0022 Style=\u0022{StaticResource CustomButtonStyle}\u0022\n Background=\u0022{ThemeResource SystemFillColorCriticalBackgroundBrush}\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A XAML style is a Reusable property settings to define consistent UI design elements.","relatedControls":["XamlResources","Templates","Binding"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"xamlstyles-2","controlId":"xamlstyles","controlName":"Style","headerText":"Style without a key (implicit style)","xaml":"\u003CStackPanel\u003E\n \u003CStackPanel.Resources\u003E\n \u003CStyle TargetType=\u0022TextBlock\u0022\u003E\n \u003CSetter Property=\u0022FontSize\u0022 Value=\u002216\u0022 /\u003E\n \u003CSetter Property=\u0022FontFamily\u0022 Value=\u0022Consolas\u0022 /\u003E\n \u003CSetter Property=\u0022FontWeight\u0022 Value=\u0022Bold\u0022 /\u003E\n \u003C/Style\u003E\n \u003C/StackPanel.Resources\u003E\n\n \u003CTextBlock Text=\u0022This style is applied automatically!\u0022 /\u003E\n \u003CTextBlock Text=\u0022No need to set a key.\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A XAML style is a Reusable property settings to define consistent UI design elements.","relatedControls":["XamlResources","Templates","Binding"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"binding-1","controlId":"binding","controlName":"Binding","headerText":"Binding between controls","xaml":"\u003CGrid ColumnSpacing=\u002212\u0022\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022auto\u0022 /\u003E\n \u003CColumnDefinition Width=\u0022auto\u0022 /\u003E\n \u003CColumnDefinition Width=\u0022auto\u0022 /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n\n \u003CStackPanel Spacing=\u00228\u0022 Grid.Column=\u00220\u0022\u003E\n \u003CTextBlock Text=\u0022One-Way Binding\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n \u003C!-- One-Way Binding: The target TextBox mirrors the text entered in the SourceTextBox, but any change in the target is not reflected back to the source --\u003E\n \u003CTextBox x:Name=\u0022SourceTextBoxOneWay\u0022 Width=\u0022200\u0022 HorizontalAlignment=\u0022Left\u0022 PlaceholderText=\u0022Enter text here\u0022 /\u003E\n \u003CTextBox x:Name=\u0022TargetTextBoxOneWay\u0022 Width=\u0022200\u0022 HorizontalAlignment=\u0022Left\u0022 PlaceholderText=\u0022Mirrors above text\u0022\n Text=\u0022{x:Bind SourceTextBoxOneWay.Text, Mode=OneWay}\u0022 /\u003E\n \u003C/StackPanel\u003E\n\n \u003CAppBarSeparator Grid.Column=\u00221\u0022 /\u003E\n\n \u003CStackPanel Spacing=\u00228\u0022 Grid.Column=\u00222\u0022\u003E\n \u003CTextBlock Text=\u0022Two-Way Binding\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n \u003C!-- Two-Way Binding: Changes in the SourceTextBox are automatically reflected in the TargetTextBox, and vice versa --\u003E\n \u003CTextBox x:Name=\u0022SourceTextBoxTwoWay\u0022 Width=\u0022200\u0022 HorizontalAlignment=\u0022Left\u0022 PlaceholderText=\u0022Enter text here\u0022 /\u003E\n \u003CTextBox x:Name=\u0022TargetTextBoxTwoWay\u0022 Width=\u0022200\u0022 HorizontalAlignment=\u0022Left\u0022 PlaceholderText=\u0022Mirrors and edits above text\u0022\n Text=\u0022{x:Bind SourceTextBoxTwoWay.Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Connecting UI elements to data for automatic synchronization and updates.","relatedControls":["XamlResources","XamlStyles","Templates"],"apiNamespace":null,"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"}]},{"id":"binding-2","controlId":"binding","controlName":"Binding","headerText":"Binding to a property in code-behind","xaml":"\u003CTextBlock\n Text=\u0022{x:Bind GreetingMessage}\u0022\n FontSize=\u002224\u0022\n HorizontalAlignment=\u0022Center\u0022\n VerticalAlignment=\u0022Center\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.Generic;\nusing System.ComponentModel;\n\npublic string GreetingMessage { get; set; } = \u0022Hello, WinUI 3!\u0022;","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Connecting UI elements to data for automatic synchronization and updates.","relatedControls":["XamlResources","XamlStyles","Templates"],"apiNamespace":null,"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"}]},{"id":"binding-3","controlId":"binding","controlName":"Binding","headerText":"Using a function in x:Bind","xaml":"\u003CDatePicker x:Name=\u0022DatePickerControl\u0022 Header=\u0022Select a date\u0022 /\u003E\n\u003CTextBlock Text=\u0022{x:Bind FormatDate(DatePickerControl.SelectedDate), Mode=OneWay}\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.Generic;\nusing System.ComponentModel;\n\npublic string FormatDate(DateTimeOffset? date)\n {\n if (date.HasValue)\n {\n return \u0022Selected date is: \u0022 \u002B date.Value.ToString(\u0022dddd, MMMM d, yyyy\u0022);\n }\n else\n {\n return \u0022No date selected\u0022;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Connecting UI elements to data for automatic synchronization and updates.","relatedControls":["XamlResources","XamlStyles","Templates"],"apiNamespace":null,"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"}]},{"id":"binding-4","controlId":"binding","controlName":"Binding","headerText":"Using a converter in Binding","xaml":"\u003CPage...\n xmlns:c=\u0022using:YourNamespace\u0022\u003E\n\n \u003CPage.Resources\u003E\n \u003C!-- Declare the converter --\u003E\n \u003Cc:EmptyStringToVisibilityConverter x:Key=\u0022EmptyStringToVisibilityConverter\u0022 /\u003E\n \u003C/Page.Resources\u003E\n\n \u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003C!-- Input TextBox --\u003E\n \u003CTextBox x:Name=\u0022InputTextBox\u0022 Header=\u0022Enter Text:\u0022 Width=\u0022300\u0022 /\u003E\n\n \u003C!-- TextBlock Visibility Depends on Input Text --\u003E\n \u003CTextBlock Text=\u0022The input is not empty.\u0022\n Visibility=\u0022{Binding Text, ElementName=InputTextBox, Converter={StaticResource EmptyStringToVisibilityConverter}}\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Page\u003E","csharp":"using Microsoft.UI.Xaml.Data;\nusing Microsoft.UI.Xaml;\n\nnamespace YourNamespace\n{\n public class EmptyStringToVisibilityConverter : IValueConverter\n {\n // Visibility value when the input string is empty or null\n public Visibility EmptyValue { get; set; } = Visibility.Collapsed;\n\n // Visibility value when the input string is non-empty\n public Visibility NonEmptyValue { get; set; } = Visibility.Visible;\n\n public object Convert(object value, Type targetType, object parameter, string language)\n {\n // Return EmptyValue if the input is null or empty, otherwise NonEmptyValue\n return value is string stringValue \u0026\u0026 !string.IsNullOrEmpty(stringValue) \n ? NonEmptyValue \n : EmptyValue;\n }\n\n public object ConvertBack(object value, Type targetType, object parameter, string language)\n {\n // ConvertBack is not needed and not implemented in this case\n throw new NotImplementedException();\n }\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Connecting UI elements to data for automatic synchronization and updates.","relatedControls":["XamlResources","XamlStyles","Templates"],"apiNamespace":null,"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"}]},{"id":"binding-5","controlId":"binding","controlName":"Binding","headerText":"Binding to a view model","xaml":"\u003CTextBlock Text=\u0022Title:\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n\u003CTextBlock Text=\u0022{Binding Title}\u0022 FontSize=\u002216\u0022 /\u003E\n\n\u003CTextBlock Text=\u0022Description:\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n\u003CTextBlock Text=\u0022{Binding Description}\u0022 FontSize=\u002216\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.Generic;\nusing System.ComponentModel;\n\npublic ExampleViewModel ViewModel { get; set; }\n\n public List\u003CListDetailItem\u003E Items { get; set; }\n\n public BindingPage()\n {\n this.InitializeComponent();\n\n ViewModel = new ExampleViewModel\n {\n Title = \u0022Welcome to WinUI 3\u0022,\n Description = \u0022This is an example of binding to a view model.\u0022,\n NullString = string.Empty,\n };\n DataContext = ViewModel;\n\n Items = new List\u003CListDetailItem\u003E\n {\n new ListDetailItem\n {\n Id = 0,\n Title = \u0022Item 1\u0022,\n Text = \u0022Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id facilisis lectus. Cras nec convallis ante, quis pulvinar tellus.\u0022,\n DateCreated = new DateTime(2025, 6, 15, 9, 30, 0)\n },\n new ListDetailItem\n {\n Id = 1,\n Title = \u0022Item 2\u0022,\n Text = \u0022Quisque accumsan pretium ligula in faucibus. Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris.\u0022,\n DateCreated = new DateTime(2025, 7, 22, 14, 15, 0)\n },\n new ListDetailItem\n {\n Id = 2,\n Title = \u0022Item 3\u0022,\n Text = \u0022Ut consequat magna luctus justo egestas vehicula. Integer pharetra risus libero, et posuere justo mattis et.\u0022,\n DateCreated = new DateTime(2025, 8, 3, 11, 0, 0)\n },\n new ListDetailItem\n {\n Id = 3,\n Title = \u0022Item 4\u0022,\n Text = \u0022Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc.\u0022,\n DateCreated = new DateTime(2025, 9, 10, 16, 45, 0)\n }\n };\n }\n\n public string FormatDate(DateTimeOffset? date)\n {\n if (date.HasValue)\n {\n return \u0022Selected date is: \u0022 \u002B date.Value.ToString(\u0022dddd, MMMM d, yyyy\u0022);\n }\n else\n {\n return \u0022No date selected\u0022;\n }\n }\n}\n\npublic partial class ExampleViewModel : INotifyPropertyChanged\n{\n private string _title = string.Empty;\n\npublic class ListDetailItem\n{\n public int Id { get; set; }\n public string Title { get; set; } = string.Empty;\n public string Text { get; set; } = string.Empty;\n public DateTime DateCreated { get; set; }\n public string DateCreatedFormatted =\u003E DateCreated.ToString(\u0022MMM d, yyyy h:mm tt\u0022);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Connecting UI elements to data for automatic synchronization and updates.","relatedControls":["XamlResources","XamlStyles","Templates"],"apiNamespace":null,"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"}]},{"id":"binding-6","controlId":"binding","controlName":"Binding","headerText":"Binding with TargetNullValue","xaml":"\u003C!--TargetNullValue property help handle scenarios where the binding source is null--\u003E\n\u003CTextBlock Text=\u0022{Binding ViewModel.NullString, Mode=OneWay, TargetNullValue=\u0027Anonymous User\u0027}\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.Generic;\nusing System.ComponentModel;\n\npublic ExampleViewModel ViewModel { get; set; }\n\n public List\u003CListDetailItem\u003E Items { get; set; }\n\n public BindingPage()\n {\n this.InitializeComponent();\n\n ViewModel = new ExampleViewModel\n {\n Title = \u0022Welcome to WinUI 3\u0022,\n Description = \u0022This is an example of binding to a view model.\u0022,\n NullString = string.Empty,\n };\n DataContext = ViewModel;\n\n Items = new List\u003CListDetailItem\u003E\n {\n new ListDetailItem\n {\n Id = 0,\n Title = \u0022Item 1\u0022,\n Text = \u0022Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id facilisis lectus. Cras nec convallis ante, quis pulvinar tellus.\u0022,\n DateCreated = new DateTime(2025, 6, 15, 9, 30, 0)\n },\n new ListDetailItem\n {\n Id = 1,\n Title = \u0022Item 2\u0022,\n Text = \u0022Quisque accumsan pretium ligula in faucibus. Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris.\u0022,\n DateCreated = new DateTime(2025, 7, 22, 14, 15, 0)\n },\n new ListDetailItem\n {\n Id = 2,\n Title = \u0022Item 3\u0022,\n Text = \u0022Ut consequat magna luctus justo egestas vehicula. Integer pharetra risus libero, et posuere justo mattis et.\u0022,\n DateCreated = new DateTime(2025, 8, 3, 11, 0, 0)\n },\n new ListDetailItem\n {\n Id = 3,\n Title = \u0022Item 4\u0022,\n Text = \u0022Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc.\u0022,\n DateCreated = new DateTime(2025, 9, 10, 16, 45, 0)\n }\n };\n }\n\n public string FormatDate(DateTimeOffset? date)\n {\n if (date.HasValue)\n {\n return \u0022Selected date is: \u0022 \u002B date.Value.ToString(\u0022dddd, MMMM d, yyyy\u0022);\n }\n else\n {\n return \u0022No date selected\u0022;\n }\n }\n}\n\npublic partial class ExampleViewModel : INotifyPropertyChanged\n{\n private string _title = string.Empty;\n\npublic class ListDetailItem\n{\n public int Id { get; set; }\n public string Title { get; set; } = string.Empty;\n public string Text { get; set; } = string.Empty;\n public DateTime DateCreated { get; set; }\n public string DateCreatedFormatted =\u003E DateCreated.ToString(\u0022MMM d, yyyy h:mm tt\u0022);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Connecting UI elements to data for automatic synchronization and updates.","relatedControls":["XamlResources","XamlStyles","Templates"],"apiNamespace":null,"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"}]},{"id":"binding-7","controlId":"binding","controlName":"Binding","headerText":"Binding a collection with data templates","xaml":"\u003CListView\n x:Name=\u0022ListDetailListView\u0022\n ItemsSource=\u0022{x:Bind Items}\u0022\n SelectionMode=\u0022Single\u0022\u003E\n \u003CListView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:ListDetailItem\u0022\u003E\n \u003CStackPanel Padding=\u00224\u0022 Spacing=\u00222\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n \u003CTextBlock Text=\u0022{x:Bind DateCreatedFormatted}\u0022\n Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/DataTemplate\u003E\n \u003C/ListView.ItemTemplate\u003E\n\u003C/ListView\u003E\n\n\u003C!-- Detail panel bound to the selected item --\u003E\n\u003CStackPanel DataContext=\u0022{x:Bind ListDetailListView.SelectedItem, Mode=OneWay}\u0022\u003E\n \u003CTextBlock Text=\u0022{Binding Title}\u0022 FontSize=\u002220\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n \u003CTextBlock Text=\u0022{Binding DateCreatedFormatted}\u0022\n Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 /\u003E\n \u003CTextBlock Text=\u0022{Binding Text}\u0022 TextWrapping=\u0022Wrap\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.Generic;\nusing System.ComponentModel;\n\npublic List\u003CListDetailItem\u003E Items { get; set; }\n\n public BindingPage()\n {\n this.InitializeComponent();\n\n ViewModel = new ExampleViewModel\n {\n Title = \u0022Welcome to WinUI 3\u0022,\n Description = \u0022This is an example of binding to a view model.\u0022,\n NullString = string.Empty,\n };\n DataContext = ViewModel;\n\n Items = new List\u003CListDetailItem\u003E\n {\n new ListDetailItem\n {\n Id = 0,\n Title = \u0022Item 1\u0022,\n Text = \u0022Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id facilisis lectus. Cras nec convallis ante, quis pulvinar tellus.\u0022,\n DateCreated = new DateTime(2025, 6, 15, 9, 30, 0)\n },\n new ListDetailItem\n {\n Id = 1,\n Title = \u0022Item 2\u0022,\n Text = \u0022Quisque accumsan pretium ligula in faucibus. Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris.\u0022,\n DateCreated = new DateTime(2025, 7, 22, 14, 15, 0)\n },\n new ListDetailItem\n {\n Id = 2,\n Title = \u0022Item 3\u0022,\n Text = \u0022Ut consequat magna luctus justo egestas vehicula. Integer pharetra risus libero, et posuere justo mattis et.\u0022,\n DateCreated = new DateTime(2025, 8, 3, 11, 0, 0)\n },\n new ListDetailItem\n {\n Id = 3,\n Title = \u0022Item 4\u0022,\n Text = \u0022Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc.\u0022,\n DateCreated = new DateTime(2025, 9, 10, 16, 45, 0)\n }\n };\n }\n\n public string FormatDate(DateTimeOffset? date)\n {\n if (date.HasValue)\n {\n return \u0022Selected date is: \u0022 \u002B date.Value.ToString(\u0022dddd, MMMM d, yyyy\u0022);\n }\n else\n {\n return \u0022No date selected\u0022;\n }\n }\n}\n\npublic partial class ExampleViewModel : INotifyPropertyChanged\n{\n private string _title = string.Empty;\n\npublic class ListDetailItem\n{\n public int Id { get; set; }\n public string Title { get; set; } = string.Empty;\n public string Text { get; set; } = string.Empty;\n public DateTime DateCreated { get; set; }\n public string DateCreatedFormatted =\u003E DateCreated.ToString(\u0022MMM d, yyyy h:mm tt\u0022);\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Connecting UI elements to data for automatic synchronization and updates.","relatedControls":["XamlResources","XamlStyles","Templates"],"apiNamespace":null,"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"}]},{"id":"templates-1","controlId":"templates","controlName":"Templates","headerText":"Customize the look of a TextBox with a ControlTemplate","xaml":"\u003CGrid\u003E\n \u003CGrid.Resources\u003E\n \u003CControlTemplate x:Key=\u0022CustomTextBoxTemplate\u0022 TargetType=\u0022TextBox\u0022\u003E\n \u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022{TemplateBinding Header}\u0022 /\u003E\n \u003CBorder\n Background=\u0022{ThemeResource CardBackgroundFillColorDefaultBrush}\u0022\n BorderBrush=\u0022{TemplateBinding BorderBrush}\u0022\n BorderThickness=\u00222\u0022\n CornerRadius=\u00224\u0022\u003E\n \u003CStackPanel Margin=\u00224\u0022 Orientation=\u0022Horizontal\u0022 Spacing=\u00224\u0022\u003E\n \u003CSymbolIcon Symbol=\u0022Edit\u0022 /\u003E\n \u003CScrollViewer\n x:Name=\u0022ContentElement\u0022\n Padding=\u0022{TemplateBinding Padding}\u0022\n HorizontalScrollBarVisibility=\u0022{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}\u0022\n VerticalScrollBarVisibility=\u0022{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Border\u003E\n \u003C/StackPanel\u003E\n \u003C/ControlTemplate\u003E\n \u003C/Grid.Resources\u003E\n \u003CTextBox\n Padding=\u00228\u0022\n BorderBrush=\u0022{ThemeResource AccentFillColorDefaultBrush}\u0022\n Header=\u0022Enter text here\u0022\n Template=\u0022{StaticResource CustomTextBoxTemplate}\u0022 /\u003E\n\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Customize controls\u0027 visuals, item layouts, and data presentation in XAML.","relatedControls":["Binding","XamlStyles","CustomUserControls"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"templates-2","controlId":"templates","controlName":"Templates","headerText":"Customize a ComboBox\u0027s ItemTemplate using a DataTemplate","xaml":"\u003CGrid\u003E\n \u003CGrid.Resources\u003E\n \u003CDataTemplate x:Key=\u0022CustomComboBoxItemTemplate\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022 Spacing=\u00228\u0022\u003E\n \u003CEllipse\n Fill=\u0022{ThemeResource AccentFillColorDefaultBrush}\u0022 /\u003E\n \u003CTextBlock Text=\u0022{Binding}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/DataTemplate\u003E\n \u003C/Grid.Resources\u003E\n \u003CComboBox Header=\u0022Options\u0022 ItemTemplate=\u0022{StaticResource CustomComboBoxItemTemplate}\u0022 SelectedIndex=\u00220\u0022\u003E\n \u003CComboBox.Items\u003E\n \u003Cx:String\u003EOption 1\u003C/x:String\u003E\n \u003Cx:String\u003EOption 2\u003C/x:String\u003E\n \u003Cx:String\u003EOption 3\u003C/x:String\u003E\n \u003C/ComboBox.Items\u003E\n \u003C/ComboBox\u003E\n\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Customize controls\u0027 visuals, item layouts, and data presentation in XAML.","relatedControls":["Binding","XamlStyles","CustomUserControls"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"templates-3","controlId":"templates","controlName":"Templates","headerText":"Customize an ItemsControl with an ItemsPanelTemplate","xaml":"\u003CListView\u003E\n \u003CListView.ItemsPanel\u003E\n \u003CItemsPanelTemplate\u003E\n \u003CWrapGrid Orientation=\u0022Horizontal\u0022 /\u003E\n \u003C/ItemsPanelTemplate\u003E\n \u003C/ListView.ItemsPanel\u003E\n \n \u003CListViewItem\u003EItem 01\u003C/ListViewItem\u003E\n \u003CListViewItem\u003EItem 02\u003C/ListViewItem\u003E\n \u003C!-- ... --\u003E\n \u003CListViewItem\u003EItem 20\u003C/ListViewItem\u003E\n\u003C/ListView\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System.IO;\nusing Windows.Storage;\n\nprivate void LayoutSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (e.AddedItems[0] is RadioButton selectedRadioButton)\n {\n // Check the tag of the selected RadioButton\n if (selectedRadioButton.Tag.ToString() == \u0022WrapGrid\u0022)\n {\n MyListView.ItemsPanel = (ItemsPanelTemplate)Resources[\u0022WrapGridTemplate\u0022];\n Example3.Xaml = ReadSampleCodeFileContent(\u0022TemplatesSample3_WrapGrid_xaml\u0022);\n }\n else if (selectedRadioButton.Tag.ToString() == \u0022StackPanel\u0022)\n {\n MyListView.ItemsPanel = (ItemsPanelTemplate)Resources[\u0022StackPanelTemplate\u0022];\n Example3.Xaml = ReadSampleCodeFileContent(\u0022TemplatesSample3_StackPanel_xaml\u0022);\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Customize controls\u0027 visuals, item layouts, and data presentation in XAML.","relatedControls":["Binding","XamlStyles","CustomUserControls"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"customusercontrols-1","controlId":"customusercontrols","controlName":"Custom \u0026 User Controls","headerText":"Counter Control with Increment/Decrement Mode","xaml":"\u003C!-- Generic.xaml --\u003E\n\u003CResourceDictionary \n xmlns=\u0022http://schemas.microsoft.com/winfx/2006/xaml/presentation\u0022\n xmlns:x=\u0022http://schemas.microsoft.com/winfx/2006/xaml\u0022\n xmlns:local=\u0022using:YourNamesapace\u0022\u003E\n\n \u003C!-- Style definition for CounterControl --\u003E\n \u003CStyle TargetType=\u0022local:CounterControl\u0022\u003E\n \u003CSetter Property=\u0022Template\u0022\u003E\n \u003CSetter.Value\u003E\n \u003C!-- ControlTemplate defines the structure of CounterControl --\u003E\n \u003CControlTemplate TargetType=\u0022local:CounterControl\u0022\u003E\n \u003CStackPanel HorizontalAlignment=\u0022Left\u0022 Spacing=\u00228\u0022\u003E\n \u003CTextBlock x:Name=\u0022CountText\u0022 FontSize=\u002220\u0022 Text=\u00220\u0022 HorizontalAlignment=\u0022Center\u0022 /\u003E\n \u003CButton x:Name=\u0022ActionButton\u0022 Content=\u0022Increase\u0022 HorizontalAlignment=\u0022Center\u0022 Width=\u0022100\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/ControlTemplate\u003E\n \u003C/Setter.Value\u003E\n \u003C/Setter\u003E\n \u003C/Style\u003E\n\u003C/ResourceDictionary\u003E\n\n\u003C!-- YourPage.xaml --\u003E\n\u003CPage ...\n xmlns:controls=\u0022using:YourNamesapace\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022 Spacing=\u00228\u0022\u003E\n \u003Ccontrols:CounterControl Mode=\u0022Increment\u0022 /\u003E\n \u003Ccontrols:CounterControl Mode=\u0022Decrement\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Page\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nnamespace YourNamespace;\n\n// Enum defining the counter mode: Increment or Decrement\npublic enum CounterMode\n{\n Increment,\n Decrement\n}\n\n// Custom control class that extends Control\npublic sealed class CounterControl : Control\n{\n // DependencyProperty for storing the count value\n public static readonly DependencyProperty CountProperty =\n DependencyProperty.Register(nameof(Count), typeof(int), typeof(CounterControl), new PropertyMetadata(0));\n\n // DependencyProperty for determining the counter mode (Increment or Decrement)\n public static readonly DependencyProperty ModeProperty =\n DependencyProperty.Register(nameof(Mode), typeof(CounterMode), typeof(CounterControl), new PropertyMetadata(CounterMode.Increment));\n\n // Constructor setting the default style key\n public CounterControl()\n {\n this.DefaultStyleKey = typeof(CounterControl);\n }\n\n // Property to get and set the count value\n public int Count\n {\n get =\u003E (int)GetValue(CountProperty);\n set =\u003E SetValue(CountProperty, value);\n }\n\n // Property to get and set the counter mode\n public CounterMode Mode\n {\n get =\u003E (CounterMode)GetValue(ModeProperty);\n set =\u003E SetValue(ModeProperty, value);\n }\n\n // Fields for UI elements retrieved from the control template\n private Button? ActionButton;\n private TextBlock? CountText;\n\n // Method executed when the control\u0027s template is applied\n protected override void OnApplyTemplate()\n {\n base.OnApplyTemplate();\n\n // Retrieve template elements\n ActionButton = GetTemplateChild(nameof(ActionButton)) as Button;\n CountText = GetTemplateChild(nameof(CountText)) as TextBlock;\n\n // Attach event handler to button if it exists\n if (ActionButton is not null)\n {\n ActionButton.Click \u002B= (sender, e) =\u003E\n {\n Count = Mode == CounterMode.Increment ? Count \u002B 1 : Count - 1;\n UpdateUI();\n };\n\n UpdateButtonText();\n }\n\n UpdateUI();\n }\n\n private void UpdateUI()\n {\n if (CountText is not null)\n {\n CountText.Text = Count.ToString();\n }\n }\n\n private void UpdateButtonText()\n {\n if (ActionButton is not null)\n {\n ActionButton.Content = Mode == CounterMode.Increment ? \u0022Increase\u0022 : \u0022Decrease\u0022;\n }\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Create reusable UI components with custom functionality and appearance.","relatedControls":["Templates","XamlStyles"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"customusercontrols-2","controlId":"customusercontrols","controlName":"Custom \u0026 User Controls","headerText":"Basic Custom Password Box with Validation","xaml":"\u003CResourceDictionary\n xmlns=\u0022http://schemas.microsoft.com/winfx/2006/xaml/presentation\u0022\n xmlns:x=\u0022http://schemas.microsoft.com/winfx/2006/xaml\u0022\n xmlns:local=\u0022using:YourNamespace\u0022\u003E\n \n \u003CStyle TargetType=\u0022local:ValidatedPasswordBox\u0022\u003E\n \u003CSetter Property=\u0022IsTabStop\u0022 Value=\u0022False\u0022 /\u003E\n \u003CSetter Property=\u0022Template\u0022\u003E\n \u003CSetter.Value\u003E\n \u003CControlTemplate TargetType=\u0022local:ValidatedPasswordBox\u0022\u003E\n \u003CStackPanel Spacing=\u00224\u0022\u003E\n \u003CPasswordBox x:Name=\u0022PasswordInput\u0022 /\u003E\n \u003CRichTextBlock x:Name=\u0022ValidationRichText\u0022\n AutomationProperties.LiveSetting=\u0022Polite\u0022\n TextWrapping=\u0022Wrap\u0022\n IsTextSelectionEnabled=\u0022False\u0022\n Visibility=\u0022Collapsed\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/ControlTemplate\u003E\n \u003C/Setter.Value\u003E\n \u003C/Setter\u003E\n \u003C/Style\u003E\n\u003C/ResourceDictionary\u003E\n\n\u003C!-- YourPage.xaml --\u003E\n\u003CPage ...\n xmlns:controls=\u0022using:YourNamesapace\u0022\u003E\n \u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003Ccontrols:ValidatedPasswordBox x:Name=\u0022PasswordInput\u0022 MinLength=\u00228\u0022 Width=\u0022240\u0022 HorizontalAlignment=\u0022Left\u0022\n Header=\u0022Password\u0022 PlaceholderText=\u0022Enter password...\u0022 /\u003E\n \u003CButton Content=\u0022Submit\u0022 IsEnabled=\u0022{x:Bind PasswordInput.IsValid, Mode=OneWay}\u0022\n Style=\u0022{StaticResource AccentButtonStyle}\u0022 Width=\u0022240\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Page\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation.Peers;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Documents;\nusing Microsoft.UI.Xaml.Media;\nusing System.Linq;\nusing Windows.UI;\n\nnamespace YourNamespace;\n\n// Custom control for a validated password box\npublic sealed partial class ValidatedPasswordBox : Control\n{\n // Register a dependency property for the Password value.\n // Note: The PropertyMetadata includes a callback (OnPasswordChanged) so that the UI updates\n // whenever the password or related properties change.\n public static readonly DependencyProperty PasswordProperty =\n DependencyProperty.Register(nameof(Password), typeof(string), typeof(ValidatedPasswordBox), new PropertyMetadata(string.Empty, OnPasswordChanged));\n\n public static readonly DependencyProperty IsValidProperty =\n DependencyProperty.Register(nameof(IsValid), typeof(bool), typeof(ValidatedPasswordBox), new PropertyMetadata(false));\n\n public static readonly DependencyProperty MinLengthProperty =\n DependencyProperty.Register(nameof(MinLength), typeof(int), typeof(ValidatedPasswordBox), new PropertyMetadata(8, OnPasswordChanged));\n\n public static readonly DependencyProperty HeaderProperty =\n DependencyProperty.Register(nameof(Header), typeof(string), typeof(ValidatedPasswordBox), new PropertyMetadata(string.Empty, OnPasswordChanged));\n\n public static readonly DependencyProperty PlaceholderTextProperty =\n DependencyProperty.Register(nameof(PlaceholderText), typeof(string), typeof(ValidatedPasswordBox), new PropertyMetadata(string.Empty, OnPasswordChanged));\n\n public ValidatedPasswordBox()\n {\n this.DefaultStyleKey = typeof(ValidatedPasswordBox);\n }\n\n // CLR property wrappers\n public string Password { get =\u003E (string)GetValue(PasswordProperty); set =\u003E SetValue(PasswordProperty, value); }\n public bool IsValid { get =\u003E (bool)GetValue(IsValidProperty); set =\u003E SetValue(IsValidProperty, value); }\n public int MinLength { get =\u003E (int)GetValue(MinLengthProperty); set =\u003E SetValue(MinLengthProperty, value); }\n public string Header { get =\u003E (string)GetValue(HeaderProperty); set =\u003E SetValue(HeaderProperty, value); }\n public string PlaceholderText { get =\u003E (string)GetValue(PlaceholderTextProperty); set =\u003E SetValue(PlaceholderTextProperty, value); }\n\n // Template parts for password input and validation messages\n private PasswordBox? PasswordInput { get; set; }\n}\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Create reusable UI components with custom functionality and appearance.","relatedControls":["Templates","XamlStyles"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"customusercontrols-3","controlId":"customusercontrols","controlName":"Custom \u0026 User Controls","headerText":"Temperature Converter UserControl example","xaml":"\u003C!-- TemperatureConverterControl.xaml --\u003E\n\u003CUserControl ...\u003E\n \u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CTextBox Header=\u0022Enter Temperature in Celsius\u0022 x:Name=\u0022InputTextBox\u0022 Width=\u0022200\u0022 PlaceholderText=\u0022Celsius\u0022 /\u003E\n \u003CButton Content=\u0022Convert to Fahrenheit\u0022 Width=\u0022200\u0022 Click=\u0022Button_Click\u0022 /\u003E\n \u003CTextBlock x:Name=\u0022ResultTextBlock\u0022 FontWeight=\u0022SemiBold\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/UserControl\u003E\n\n\u003C!-- Yourpage.xaml --\u003E\n\u003CPage ...\n xmlns:local=\u0022using:YourNamesapce\u0022\u003E\n \u003CGrid\u003E\n \u003Clocal:TemperatureConverterControl /\u003E\n \u003C/Grid\u003E\n\u003C/Page\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nnamespace YourNamesapace;\n\npublic sealed partial class TemperatureConverterControl : UserControl\n{\n public TemperatureConverterControl()\n {\n this.InitializeComponent();\n }\n\n private void Button_Click(object sender, RoutedEventArgs e)\n {\n string input = InputTextBox.Text;\n double celsius = 0;\n\n bool isNumber = double.TryParse(input, out celsius);\n\n if (isNumber)\n {\n double fahrenheit = (celsius * 9 / 5) \u002B 32;\n ResultTextBlock.Text = \u0022Fahrenheit: \u0022 \u002B fahrenheit.ToString(\u0022F2\u0022) \u002B \u0022\u00B0F\u0022;\n }\n else\n {\n ResultTextBlock.Text = \u0022Invalid input!\u0022;\n }\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Create reusable UI components with custom functionality and appearance.","relatedControls":["Templates","XamlStyles"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"geometry-1","controlId":"geometry","controlName":"Geometry","headerText":"","xaml":"\u003CGrid CornerRadius=\u0022{StaticResource OverlayCornerRadius}\u0022/\u003E\n\u003CGrid CornerRadius=\u0022{StaticResource ControlCornerRadius}\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Windows.ApplicationModel.DataTransfer;\n\nprivate void CopyOverlayResourceToClipboardButton_Click(object sender, RoutedEventArgs e)\n {\n DataPackage package = new DataPackage();\n package.SetText(\u0022OverlayCornerRadius\u0022);\n Clipboard.SetContent(package);\n }\n\nprivate void CopyControlResourceToClipboardButton_Click(object sender, RoutedEventArgs e)\n {\n DataPackage package = new DataPackage();\n package.SetText(\u0022ControlCornerRadius\u0022);\n Clipboard.SetContent(package);\n }\n\nprivate void ShowGeometryButtonClick1(object sender, RoutedEventArgs e)\n {\n ShowGeometryInfoTooltip1.IsOpen = !ShowGeometryInfoTooltip1.IsOpen;\n }\n\nprivate void ShowGeometryButtonClick2(object sender, RoutedEventArgs e)\n {\n ShowGeometryInfoTooltip2.IsOpen = !ShowGeometryInfoTooltip2.IsOpen;\n }\n\nprivate void ShowGeometryButtonClick3(object sender, RoutedEventArgs e)\n {\n ShowGeometryInfoTooltip3.IsOpen = !ShowGeometryInfoTooltip3.IsOpen;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Clear geometric design ensures visual coherence and structure.","relatedControls":[],"apiNamespace":null,"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/src/controls/dev/CommonStyles/Common_themeresources_any.xaml"}]},{"id":"typography-1","controlId":"typography","controlName":"Typography","headerText":"Type ramp","xaml":"\u003CTextBlock Text=\u0022Caption\u0022 Style=\u0022{StaticResource CaptionTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Body\u0022 Style=\u0022{StaticResource BodyTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Body Strong\u0022 Style=\u0022{StaticResource BodyStrongTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Body Large\u0022 Style=\u0022{StaticResource BodyLargeTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Body Strong Strong\u0022 Style=\u0022{StaticResource BodyLargeStrongTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Subtitle\u0022 Style=\u0022{StaticResource SubtitleTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Title\u0022 Style=\u0022{StaticResource TitleTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Title Large\u0022 Style=\u0022{StaticResource TitleLargeTextBlockStyle}\u0022/\u003E\n\u003CTextBlock Text=\u0022Display\u0022 Style=\u0022{StaticResource DisplayTextBlockStyle}\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void ShowTypographyButtonClick1(object sender, RoutedEventArgs e)\n {\n ShowTypographyInfoTooltip1.IsOpen = !ShowTypographyInfoTooltip1.IsOpen;\n }\n\nprivate void ShowTypographyButtonClick2(object sender, RoutedEventArgs e)\n {\n ShowTypographyInfoTooltip2.IsOpen = !ShowTypographyInfoTooltip2.IsOpen;\n }\n\nprivate void ShowTypographyButtonClick3(object sender, RoutedEventArgs e)\n {\n ShowTypographyInfoTooltip3.IsOpen = !ShowTypographyInfoTooltip3.IsOpen;\n }\n\nprivate void ShowTypographyButtonClick4(object sender, RoutedEventArgs e)\n {\n ShowTypographyInfoTooltip4.IsOpen = !ShowTypographyInfoTooltip4.IsOpen;\n }\n\nprivate void ShowTypographyButtonClick5(object sender, RoutedEventArgs e)\n {\n ShowTypographyInfoTooltip5.IsOpen = !ShowTypographyInfoTooltip5.IsOpen;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Typography design guides attention with intuitive fonts and hierarchy.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilitykeyboard-1","controlId":"accessibilitykeyboard","controlName":"Keyboard Navigation","headerText":"Non-interactive controls should not be in the tab order","xaml":"\u003CStackPanel Spacing=\u00224\u0022\u003E\n \u003CButton Content=\u0022First\u0022 /\u003E\n \u003C!-- Non-interactive controls should not be in the tab order --\u003E\n \u003CTextBlock Text=\u0022(not present)\u0022 /\u003E\n \u003CButton Content=\u0022Second\u0022 /\u003E\n \u003C!-- Disabled controls should not be in the tab order --\u003E\n \u003CButton Content=\u0022(not present)\u0022 IsEnabled=\u0022False\u0022 /\u003E\n \u003CButton Content=\u0022Third\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Keyboard-friendly design enables seamless interactions.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilitykeyboard-2","controlId":"accessibilitykeyboard","controlName":"Keyboard Navigation","headerText":"This example is a bit contrived, since you could fix the tab order by reordering the elements in the XAML, but sometimes\u2026","xaml":"\u003CGrid RowSpacing=\u00228\u0022 ColumnSpacing=\u00228\u0022\u003E\n \u003CGrid.RowDefinitions\u003E\n\t \u003CRowDefinition Height=\u0022Auto\u0022/\u003E\n\t \u003CRowDefinition Height=\u0022Auto\u0022/\u003E\n\t \u003CRowDefinition Height=\u0022Auto\u0022/\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CGrid.ColumnDefinitions\u003E\n\t \u003CColumnDefinition Width=\u0022Auto\u0022/\u003E\n\t \u003CColumnDefinition Width=\u0022Auto\u0022/\u003E\n\t \u003CColumnDefinition Width=\u0022Auto\u0022/\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n\n \u003CTextBlock Grid.Column=\u00221\u0022 HorizontalAlignment=\u0022Center\u0022 Text=\u0022Column 1\u0022/\u003E\n \u003CTextBlock Grid.Column=\u00222\u0022 HorizontalAlignment=\u0022Center\u0022 Text=\u0022Column 2\u0022/\u003E\n\n \u003C!--\n This example is a bit contrived, since you could fix the\n tab order by reordering the elements in the XAML, but\n sometimes that is not easy to do.\n --\u003E\n \u003CTextBlock Grid.Row=\u00221\u0022 VerticalAlignment=\u0022Center\u0022 Text=\u0022Row 1\u0022/\u003E\n \u003CButton Grid.Column=\u00221\u0022 Grid.Row=\u00221\u0022 Content=\u0022First stop\u0022 TabIndex=\u00221\u0022 HorizontalAlignment=\u0022Stretch\u0022/\u003E\n \u003CButton Grid.Column=\u00222\u0022 Grid.Row=\u00221\u0022 Content=\u0022Third stop\u0022 TabIndex=\u00223\u0022 HorizontalAlignment=\u0022Stretch\u0022/\u003E\n\n \u003CTextBlock Grid.Row=\u00222\u0022 VerticalAlignment=\u0022Center\u0022 Text=\u0022Row 2\u0022/\u003E\n \u003CButton Grid.Column=\u00221\u0022 Grid.Row=\u00222\u0022 Content=\u0022Second stop\u0022 TabIndex=\u00222\u0022 HorizontalAlignment=\u0022Stretch\u0022/\u003E\n \u003CButton Grid.Column=\u00222\u0022 Grid.Row=\u00222\u0022 Content=\u0022Not a stop\u0022 IsTabStop=\u0022False\u0022 HorizontalAlignment=\u0022Stretch\u0022/\u003E\n\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Keyboard-friendly design enables seamless interactions.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilitykeyboard-3","controlId":"accessibilitykeyboard","controlName":"Keyboard Navigation","headerText":"ListViews fully support arrow keys, for example","xaml":"\u003C!-- ListViews fully support arrow keys, for example --\u003E\n\u003CListView\n AutomationProperties.Name=\u0022Colors\u0022\u003E\n \u003CListViewItem\u003ERed\u003C/ListViewItem\u003E\n \u003CListViewItem\u003EBlue\u003C/ListViewItem\u003E\n \u003CListViewItem\u003EGreen\u003C/ListViewItem\u003E\n \u003CListViewItem\u003EYellow\u003C/ListViewItem\u003E\n\u003C/ListView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Keyboard-friendly design enables seamless interactions.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilitykeyboard-4","controlId":"accessibilitykeyboard","controlName":"Keyboard Navigation","headerText":"XYFocusKeyboardNavigation enables arrow keys between the buttons","xaml":"\u003CStackPanel\n Background=\u0022{ThemeResource CardBackgroundFillColorSecondaryBrush}\u0022\n BorderBrush=\u0022{ThemeResource SurfaceStrokeColorDefaultBrush}\u0022\n AutomationProperties.Name=\u0022Potatoes?\u0022\n BorderThickness=\u00221\u0022\n Spacing=\u00228\u0022\n Padding=\u00228\u0022\n CornerRadius=\u00224\u0022\u003E\n \u003CTextBlock\n Style=\u0022{ThemeResource BodyStrongTextBlockStyle}\u0022\n Text=\u0022Potatoes?\u0022 /\u003E\n \u003C!--\n XYFocusKeyboardNavigation enables arrow keys between the buttons.\n\n Note that:\n\n - The buttons are still tabbable by default\n - Home/End and PgUp/PgDn do not work\n - Screen readers do not read PositionInSet/SizeOfSet (\u00221 of 3\u0022)\n\n All of that would require custom work.\n --\u003E\n \u003CStackPanel\n Spacing=\u00224\u0022\n Orientation=\u0022Horizontal\u0022\n XYFocusKeyboardNavigation=\u0022Enabled\u0022\u003E\n \u003CButton Content=\u0022Boil \u0027em\u0022 /\u003E\n \u003CButton Content=\u0022Mash \u0027em\u0022 /\u003E\n \u003CButton Content=\u0022Stick \u0027em in a stew\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Keyboard-friendly design enables seamless interactions.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilitykeyboard-5","controlId":"accessibilitykeyboard","controlName":"Keyboard Navigation","headerText":"Chartreuse is an uncommon color, so we explain it in the tooltip","xaml":"\u003CGrid ColumnSpacing=\u00228\u0022 RowSpacing=\u00228\u0022\u003E\n\u003CGrid.RowDefinitions\u003E\n\t\u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n\t\u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n\u003C/Grid.RowDefinitions\u003E\n\n\u003CGrid.ColumnDefinitions\u003E\n\t\u003CColumnDefinition Width=\u0022Auto\u0022/\u003E\n\t\u003CColumnDefinition Width=\u0022Auto\u0022/\u003E\n\t\u003CColumnDefinition Width=\u0022Auto\u0022/\u003E\n\u003C/Grid.ColumnDefinitions\u003E\n\n\u003CRectangle x:Name=\u0022ColorRectangle\u0022 Fill=\u0022Red\u0022\n\tGrid.ColumnSpan=\u00223\u0022/\u003E\n\n\u003CButton Click=\u0022MakeRedButton_Click\u0022 Content=\u0022Red\u0022 Grid.Row=\u00221\u0022\n\tToolTipService.ToolTip=\u0022Shortcut: Ctrl\u002BR\u0022\u003E\n\t\u003CButton.KeyboardAccelerators\u003E\n\t\t\u003CKeyboardAccelerator Modifiers=\u0022Control\u0022 Key=\u0022R\u0022 /\u003E\n\t\u003C/Button.KeyboardAccelerators\u003E\n\u003C/Button\u003E\n\t\n\u003CButton Click=\u0022MakeBlueButton_Click\u0022 Content=\u0022Blue\u0022\n\tGrid.Row=\u00221\u0022 Grid.Column=\u00221\u0022\n\tToolTipService.ToolTip=\u0022Shortcut: Ctrl\u002BB\u0022\u003E\n\t\u003CButton.KeyboardAccelerators\u003E\n\t\t\u003CKeyboardAccelerator Modifiers=\u0022Control\u0022 Key=\u0022B\u0022 /\u003E\n\t\u003C/Button.KeyboardAccelerators\u003E\n\u003C/Button\u003E\n\n\u003C!--\n Chartreuse is an uncommon color, so we explain it in the tooltip.\n This replaces the auto-generated tooltip, so we manually mention\n the hotkey in the custom tooltip.\n--\u003E\n\u003CButton Click=\u0022MakeChartreuseButton_Click\u0022 Content=\u0022Chartreuse\u0022\n\tGrid.Row=\u00221\u0022 Grid.Column=\u00221\u0022\n\tToolTipService.ToolTip=\u0022A greenish yellow (Ctrl\u002BG)\u0022\u003E\n\t\u003CButton.KeyboardAccelerators\u003E\n\t\t\u003CKeyboardAccelerator Modifiers=\u0022Control\u0022 Key=\u0022G\u0022 /\u003E\n\t\u003C/Button.KeyboardAccelerators\u003E\n\u003C/Button\u003E\n\u003C/Grid\u003E","csharp":"using Microsoft.UI;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\n\nprivate void MakeRedButton_Click(object sender, RoutedEventArgs e)\n {\n ColorRectangle.Fill = new SolidColorBrush(Colors.Red);\n }\n\nprivate void MakeBlueButton_Click(object sender, RoutedEventArgs e)\n {\n ColorRectangle.Fill = new SolidColorBrush(Colors.Blue);\n }\n\nprivate void MakeChartreuseButton_Click(object sender, RoutedEventArgs e)\n {\n ColorRectangle.Fill = new SolidColorBrush(Colors.Chartreuse);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Keyboard-friendly design enables seamless interactions.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilitykeyboard-6","controlId":"accessibilitykeyboard","controlName":"Keyboard Navigation","headerText":"","xaml":"\u003CMenuBar\u003E\n \u003CMenuBarItem Title=\u0022File\u0022 AccessKey=\u0022F\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022New\u0022 AccessKey=\u0022N\u0022 /\u003E\n \u003CMenuFlyoutItem Text=\u0022Open...\u0022 AccessKey=\u0022O\u0022 /\u003E\n \u003CMenuFlyoutItem Text=\u0022Save\u0022 AccessKey=\u0022S\u0022 /\u003E\n \u003CMenuFlyoutItem Text=\u0022Exit\u0022 AccessKey=\u0022E\u0022 /\u003E\n \u003C/MenuBarItem\u003E\n\n \u003CMenuBarItem Title=\u0022Edit\u0022 AccessKey=\u0022E\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Undo\u0022 AccessKey=\u0022U\u0022 /\u003E\n \u003CMenuFlyoutItem Text=\u0022Cut\u0022 AccessKey=\u0022X\u0022 /\u003E\n \u003CMenuFlyoutItem Text=\u0022Copy\u0022 AccessKey=\u0022C\u0022 /\u003E\n \u003CMenuFlyoutItem Text=\u0022Paste\u0022 AccessKey=\u0022V\u0022 /\u003E\n \u003C/MenuBarItem\u003E\n\n \u003CMenuBarItem Title=\u0022Help\u0022 AccessKey=\u0022H\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022About\u0022 AccessKey=\u0022A\u0022 /\u003E\n \u003C/MenuBarItem\u003E\n\u003C/MenuBar\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Keyboard-friendly design enables seamless interactions.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilityscreenreader-1","controlId":"accessibilityscreenreader","controlName":"Screen Reader","headerText":"Most controls automatically get names from their content","xaml":"\u003C!-- Most controls automatically get names from their content --\u003E\n\u003CButton Content=\u0022Download survey\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Inclusive design ensures meaningful content for assistive technologies.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilityscreenreader-2","controlId":"accessibilityscreenreader","controlName":"Screen Reader","headerText":"Headers are promoted to name","xaml":"\u003C!-- Headers are promoted to name --\u003E\n\u003CTextBox Header=\u0022Name\u0022 /\u003E\n\n\u003C!-- As are placeholders --\u003E\n\u003CTextBox PlaceholderText=\u0022Nickname\u0022 /\u003E\n\n\u003C!-- If both are provided, headers are name and placeholders are moved to description --\u003E\n\u003CTextBox Header=\u0022Email\u0022 PlaceholderText=\u0022test@example.com\u0022 MinWidth=\u0022200\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Inclusive design ensures meaningful content for assistive technologies.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilityscreenreader-3","controlId":"accessibilityscreenreader","controlName":"Screen Reader","headerText":"Add a name to this ListView to be heard when screen reader users enter it","xaml":"\u003C!-- Add a name to this ListView to be heard when screen reader users enter it --\u003E\n\u003CListView Width=\u0022300\u0022\nAutomationProperties.Name=\u0022Contacts\u0022\u003E\n\u003CListViewItem\u003ENathan Quinn\u003C/ListViewItem\u003E\n\u003CListViewItem\u003EJessica Lamber\u003C/ListViewItem\u003E\n\u003CListViewItem\u003ECarl Bond\u003C/ListViewItem\u003E\n\u003CListViewItem\u003EJessica Russel\u003C/ListViewItem\u003E\n\u003C/ListView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Inclusive design ensures meaningful content for assistive technologies.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilityscreenreader-4","controlId":"accessibilityscreenreader","controlName":"Screen Reader","headerText":"Add \u0022alt text\u0022 to this image so screen reader users can understand it","xaml":"\u003C!-- Add \u0022alt text\u0022 to this image so screen reader users can understand it --\u003E\n\u003CImage AutomationProperties.Name=\u0022Grapes\u0022 Source=\u0022ms-appx:///Assets/YourImage.png\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Inclusive design ensures meaningful content for assistive technologies.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilityscreenreader-5","controlId":"accessibilityscreenreader","controlName":"Screen Reader","headerText":"","xaml":"\u003CTextBlock x:Name=\u0022InputLabel\u0022 AutomationProperties.AccessibilityView=\u0022Raw\u0022 Text=\u0022Searching Photos:\u0022/\u003E\n\u003CTextBox AutomationProperties.LabeledBy=\u0022{x:Bind InputLabel}\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Inclusive design ensures meaningful content for assistive technologies.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilityscreenreader-6","controlId":"accessibilityscreenreader","controlName":"Screen Reader","headerText":"Description and help text: add descriptions and help text to controls","xaml":"\u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003C!-- Use FullDescription to connect visible descriptions to their controls --\u003E\n \u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CCheckBox Content=\u0022Clear cache on exit\u0022\n AutomationProperties.FullDescription=\u0022{x:Bind ClearCacheDescription.Text}\u0022 /\u003E\n \u003CTextBlock x:Name=\u0022ClearCacheDescription\u0022\n Text=\u0022Deletes all cached items when closing the browser. This includes cookies, images, and browsing history.\u0022\n AutomationProperties.AccessibilityView=\u0022Raw\u0022\n Foreground=\u0022{ThemeResource TextFillColorSecondaryBrush}\u0022 /\u003E\n \u003C/StackPanel\u003E\n\n \u003C!-- Use HelpText and/or tooltips to explain nuances of controls --\u003E\n \u003CButton Content=\u0022Cancel RSS subscriptions\u0022\n ToolTipService.ToolTip=\u0022Launch the cancellation wizard\u0022\n AutomationProperties.HelpText=\u0022Launch the cancellation wizard\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Inclusive design ensures meaningful content for assistive technologies.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilityscreenreader-7","controlId":"accessibilityscreenreader","controlName":"Screen Reader","headerText":"Position in set: indicate the position of an element within a set","xaml":"\u003CStackPanel\u003E\n \u003C!-- Many controls automatically indicate position in set --\u003E\n \u003CTextBlock Text=\u0022Students\u0022\n Style=\u0022{ThemeResource BodyStrongTextBlockStyle}\u0022\n x:Name=\u0022StudentsLabel\u0022\n AutomationProperties.AccessibilityView=\u0022Raw\u0022 /\u003E\n \u003CListView AutomationProperties.LabeledBy=\u0022{x:Bind StudentsLabel}\u0022\u003E\n \u003CListView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022x:String\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/ListView.ItemTemplate\u003E\n \u003Cx:String\u003ENathan Quinn\u003C/x:String\u003E\n \u003Cx:String\u003EJessica Lamber\u003C/x:String\u003E\n \u003Cx:String\u003ECarl Bond\u003C/x:String\u003E\n \u003Cx:String\u003EJessica Russel\u003C/x:String\u003E\n \u003C/ListView\u003E\n\n \u003C!-- Custom layouts may need to specify PositionInSet and SizeOfSet manually. --\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\n Spacing=\u00228\u0022\u003E\n \u003CButton AutomationProperties.PositionInSet=\u00221\u0022\n AutomationProperties.SizeOfSet=\u00223\u0022\n Content=\u0022View\u0022 /\u003E\n \u003CButton AutomationProperties.PositionInSet=\u00222\u0022\n AutomationProperties.SizeOfSet=\u00223\u0022\n Content=\u0022Rename\u0022 /\u003E\n \u003CButton AutomationProperties.PositionInSet=\u00223\u0022\n AutomationProperties.SizeOfSet=\u00223\u0022\n Content=\u0022Delete\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Inclusive design ensures meaningful content for assistive technologies.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilityscreenreader-8","controlId":"accessibilityscreenreader","controlName":"Screen Reader","headerText":"Remove a control from the content visual tree","xaml":"\u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n\u003C!-- The image is not necessary for screen readers as it does not contain any information.\n Thus we remove it from the content visual tree with AccessibilityView=\u0022Raw\u0022 --\u003E\n\u003CImage Source=\u0022/Assets/SampleMedia/treetops.jpg\u0022 AutomationProperties.AccessibilityView=\u0022Raw\u0022 Height=\u002240\u0022 VerticalAlignment=\u0022Top\u0022/\u003E\n\u003CTextBlock TextWrapping=\u0022WrapWholeWords\u0022 MaxWidth=\u0022400\u0022 Margin=\u00228,0,0,0\u0022\u003EThis is some demo text.\n The image on the left is just for decoration and serves no informational purpose.\n To prevent Narrator or other screen readers from reading out the image, we set the accessibility view to \u0022Raw\u0022 which removes it from the content visual tree.\u003C/TextBlock\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Inclusive design ensures meaningful content for assistive technologies.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilityscreenreader-9","controlId":"accessibilityscreenreader","controlName":"Screen Reader","headerText":"The navigation pane for our app","xaml":"\u003CGrid\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022200\u0022 /\u003E\n \u003CColumnDefinition Width=\u0022*\u0022 /\u003E\n \u003CColumnDefinition Width=\u0022200\u0022 /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n\n \u003C!-- The navigation pane for our app --\u003E\n \u003CStackPanel\n Grid.Column=\u00220\u0022\n Spacing=\u00228\u0022\n Padding=\u00226\u0022\n Background=\u0022{ThemeResource CardStrokeColorDefaultBrush}\u0022\n CornerRadius=\u0022{StaticResource ControlCornerRadius}\u0022\n AutomationProperties.LandmarkType=\u0022Navigation\u0022\u003E\n \u003CAutoSuggestBox\n PlaceholderText=\u0022Search\u0022\n AutomationProperties.LandmarkType=\u0022Search\u0022/\u003E\n \u003CButton Content=\u0022Open settings\u0022 /\u003E\n \u003C/StackPanel\u003E\n\n \u003C!-- The main content of our app --\u003E\n \u003CStackPanel\n Grid.Column=\u00221\u0022\n Padding=\u00226\u0022\n AutomationProperties.LandmarkType=\u0022Main\u0022\u003E\n \u003CTextBlock TextWrapping=\u0022WrapWholeWords\u0022\u003E\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum\n \u003C/TextBlock\u003E\n \u003C/StackPanel\u003E\n\n \u003C!-- A custom sidebar with a custom landmark name --\u003E\n \u003CStackPanel\n Grid.Column=\u00222\u0022\n Padding=\u00226\u0022\n Background=\u0022{ThemeResource CardStrokeColorDefaultBrush}\u0022\n CornerRadius=\u0022{StaticResource ControlCornerRadius}\u0022\n Spacing=\u00228\u0022\n AutomationProperties.LandmarkType=\u0022Custom\u0022\n AutomationProperties.LocalizedLandmarkType=\u0022Current viewers\u0022\u003E\n \u003CTextBlock\n Text=\u0022Current viewers\u0022\n Style=\u0022{ThemeResource BodyStrongTextBlockStyle}\u0022\n AutomationProperties.HeadingLevel=\u0022Level1\u0022 /\u003E\u003C/StackPanel\u003E\u003C/Grid\u003E\n\u003C!-- ...truncated --\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Inclusive design ensures meaningful content for assistive technologies.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilityscreenreader-10","controlId":"accessibilityscreenreader","controlName":"Screen Reader","headerText":"Here is the main header for the whole text","xaml":"\u003CStackPanel MaxWidth=\u0022500\u0022\u003E\n\u003C!-- Here is the main header for the whole text. It gets HeadingLevel 1 --\u003E\n\u003CTextBlock AutomationProperties.HeadingLevel=\u0022Level1\u0022 FontSize=\u002226\u0022\u003ELorem ipsums\u003C/TextBlock\u003E\n\u003C!-- The following TextBlock is the header for the standard lorem ipsum text, thus it is only HeadingLevel 2--\u003E\n\u003CTextBlock AutomationProperties.HeadingLevel=\u0022Level2\u0022 FontSize=\u002222\u0022\u003ELorem ipsum\u003C/TextBlock\u003E\n\u003CTextBlock TextWrapping=\u0022WrapWholeWords\u0022\u003ELorem ipsum dolor sit amet, consectetur adipiscing elit. \n Pellentesque feugiat velit pulvinar, vehicula nisi at, molestie risus. \n Duis consequat auctor libero vitae consectetur. Nullam efficitur euismod lacinia.\u003C/TextBlock\u003E\n \n\u003CTextBlock AutomationProperties.HeadingLevel=\u0022Level2\u0022 FontSize=\u002222\u0022\u003ECat ipsum\u003C/TextBlock\u003E\n\u003C!-- This is the header for the standard cat ipsum section, which is hierarchically below the cat ipsum header, resulting in HeadingLevel 3 --\u003E\n\u003CTextBlock AutomationProperties.HeadingLevel=\u00223\u0022 FontSize=\u002218\u0022\u003EStandard\u003C/TextBlock\u003E\n\u003CTextBlock TextWrapping=\u0022WrapWholeWords\u0022\u003EMice litter kitter kitty litty little kitten big roar roar feed me \n but i will ruin the couch with my claws and hunt by meowing loudly at 5am next to human.\u003C/TextBlock\u003E\n\u003CTextBlock AutomationProperties.HeadingLevel=\u00223\u0022 FontSize=\u002218\u0022\u003ECat breeds\u003C/TextBlock\u003E\n\u003CTextBlock TextWrapping=\u0022WrapWholeWords\u0022\u003ETabby abyssinian for jaguar. Thai russian blue and ragdoll, ocicat. \n Mouser puma so american bobtail for donskoy balinese . Scottish fold manx so siamese.\u003C/TextBlock\u003E\n \n\u003CTextBlock AutomationProperties.HeadingLevel=\u00222\u0022 FontSize=\u002222\u0022\u003EBacon ipsum\u003C/TextBlock\u003E\n\u003CTextBlock TextWrapping=\u0022WrapWholeWords\u0022\u003EBacon ipsum dolor amet meatball nulla labore, \n tempor sirloin chicken frankfurter tail drumstick ex cupim ground round.\u003C/TextBlock\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Inclusive design ensures meaningful content for assistive technologies.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"accessibilityscreenreader-11","controlId":"accessibilityscreenreader","controlName":"Screen Reader","headerText":"These TextBlocks could reasonably be headings, too","xaml":"\u003CStackPanel AutomationProperties.Name=\u0022Album browser\u0022\u003E\n \u003CStackPanel AutomationProperties.Name=\u0022My albums\u0022\u003E\n \u003C!-- These TextBlocks could reasonably be headings, too. --\u003E\n \u003CTextBlock\n Text=\u0022My albums\u0022\n Style=\u0022{ThemeResource BodyStrongTextBlockStyle}\u0022 /\u003E\n \u003CListView\u003E\n \u003Cx:String\u003ETrip to Redmond\u003C/x:String\u003E\n \u003Cx:String\u003EVisiting Ben\u003C/x:String\u003E\n \u003C/ListView\u003E\n \u003C/StackPanel\u003E\n \u003CStackPanel AutomationProperties.Name=\u0022Shared with me\u0022\u003E\n \u003CTextBlock\n Text=\u0022Shared with me\u0022\n Style=\u0022{ThemeResource BodyStrongTextBlockStyle}\u0022 /\u003E\n \u003CListView\u003E\n \u003Cx:String\u003EPaul\u0027s winter vacation\u003C/x:String\u003E\n \u003Cx:String\u003ECool street photography\u003C/x:String\u003E\n \u003Cx:String\u003EValeria\u0027s cat\u003C/x:String\u003E\n \u003C/ListView\u003E\n \u003C/StackPanel\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Inclusive design ensures meaningful content for assistive technologies.","relatedControls":[],"apiNamespace":null,"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"}]},{"id":"appbarbutton-1","controlId":"appbarbutton","controlName":"AppBarButton","headerText":"An AppBarButton with a symbol icon.","xaml":"\u003CAppBarButton Icon=\u0022Like\u0022 Label=\u0022SymbolIcon\u0022 Click=\u0022AppBarButton_Click\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void AppBarButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is Button b)\n {\n string name = b.Name;\n\n switch (name)\n {\n case \u0022Button1\u0022:\n Control1Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button2\u0022:\n Control2Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button3\u0022:\n Control3Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button4\u0022:\n Control4Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button5\u0022:\n Control5Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A button that\u0027s styled for use in a CommandBar.","relatedControls":["AppBarToggleButton","AppBarSeparator","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"appbarbutton-2","controlId":"appbarbutton","controlName":"AppBarButton","headerText":"An AppBarButton with a bitmap icon.","xaml":"\u003CAppBarButton Label=\u0022BitmapIcon\u0022 Click=\u0022AppBarButton_Click\u0022\u003E\n \u003CAppBarButton.Icon\u003E\n \u003CBitmapIcon UriSource=\u0022ms-appx:///Assets/YourImage.png\u0022/\u003E\n \u003C/AppBarButton.Icon\u003E\n\u003C/AppBarButton\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void AppBarButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is Button b)\n {\n string name = b.Name;\n\n switch (name)\n {\n case \u0022Button1\u0022:\n Control1Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button2\u0022:\n Control2Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button3\u0022:\n Control3Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button4\u0022:\n Control4Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button5\u0022:\n Control5Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A button that\u0027s styled for use in a CommandBar.","relatedControls":["AppBarToggleButton","AppBarSeparator","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"appbarbutton-3","controlId":"appbarbutton","controlName":"AppBarButton","headerText":"An AppBarButton with a font icon.","xaml":"\u003CAppBarButton Label=\u0022FontIcon\u0022 Click=\u0022AppBarButton_Click\u0022\u003E\n \u003CAppBarButton.Icon\u003E\n \u003CFontIcon FontFamily=\u0022Candara\u0022 Glyph=\u0022\u0026#x03A3;\u0022/\u003E\n \u003C/AppBarButton.Icon\u003E\n\u003C/AppBarButton\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void AppBarButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is Button b)\n {\n string name = b.Name;\n\n switch (name)\n {\n case \u0022Button1\u0022:\n Control1Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button2\u0022:\n Control2Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button3\u0022:\n Control3Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button4\u0022:\n Control4Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button5\u0022:\n Control5Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A button that\u0027s styled for use in a CommandBar.","relatedControls":["AppBarToggleButton","AppBarSeparator","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"appbarbutton-4","controlId":"appbarbutton","controlName":"AppBarButton","headerText":"An AppBarButton with a path icon.","xaml":"\u003CAppBarButton Label=\u0022PathIcon\u0022 Click=\u0022AppBarButton_Click\u0022\u003E\n \u003CAppBarButton.Content\u003E\n \u003CViewbox Stretch=\u0022Uniform\u0022\u003E\n \u003CPathIcon Data=\u0022F1 M 20,20L 24,10L 24,24L 5,24\u0022/\u003E\n \u003C/Viewbox\u003E\n \u003C/AppBarButton.Content\u003E\n\u003C/AppBarButton\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void AppBarButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is Button b)\n {\n string name = b.Name;\n\n switch (name)\n {\n case \u0022Button1\u0022:\n Control1Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button2\u0022:\n Control2Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button3\u0022:\n Control3Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button4\u0022:\n Control4Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button5\u0022:\n Control5Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A button that\u0027s styled for use in a CommandBar.","relatedControls":["AppBarToggleButton","AppBarSeparator","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"appbarbutton-5","controlId":"appbarbutton","controlName":"AppBarButton","headerText":"An AppBarButton with a KeyboardAccelerator","xaml":"\u003CAppBarButton Icon=\u0022Save\u0022 Label=\u0022Save\u0022 Click=\u0022AppBarButton_Click\u0022\u003E\n \u003CAppBarButton.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Modifiers=\u0022Control\u0022 Key=\u0022S\u0022/\u003E\n \u003CAppBarButton.KeyboardAccelerators/\u003E\n\u003C/AppBarButton\u003E\u003C/AppBarButton.KeyboardAccelerators\u003E\u003C/AppBarButton\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void AppBarButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is Button b)\n {\n string name = b.Name;\n\n switch (name)\n {\n case \u0022Button1\u0022:\n Control1Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button2\u0022:\n Control2Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button3\u0022:\n Control3Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button4\u0022:\n Control4Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button5\u0022:\n Control5Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A button that\u0027s styled for use in a CommandBar.","relatedControls":["AppBarToggleButton","AppBarSeparator","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"appbarbutton-6","controlId":"appbarbutton","controlName":"AppBarButton","headerText":"An AppBarButton that opens a Flyout containing an input control.","xaml":"\u003CAppBarButton AllowFocusOnInteraction=\u0022True\u0022 Icon=\u0022Edit\u0022 Label=\u0022Edit\u0022\u003E\n \u003CAppBarButton.Flyout\u003E\n \u003CFlyout/\u003E\n \u003CTextBox MinWidth=\u0022240\u0022 PlaceholderText=\u0022Input text here\u0022/\u003E\n \u003CFlyout/\u003E\n \u003CAppBarButton.Flyout\u003E\n\u003C/AppBarButton\u003E\u003C/AppBarButton.Flyout\u003E\u003C/AppBarButton.Flyout\u003E\u003C/AppBarButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A button that\u0027s styled for use in a CommandBar.","relatedControls":["AppBarToggleButton","AppBarSeparator","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"appbarseparator-1","controlId":"appbarseparator","controlName":"AppBarSeparator","headerText":"AppBarButtons separated by AppBarSeparators.","xaml":"\u003CCommandBar\u003E\n \u003CCommandBar.PrimaryCommands\u003E\n \u003CAppBarButton Icon=\u0022AttachCamera\u0022 Label=\u0022Attach Camera\u0022/\u003E\n \u003CAppBarSeparator /\u003E\n \u003CAppBarButton Icon=\u0022Like\u0022 Label=\u0022Like\u0022/\u003E\n \u003CAppBarButton Icon=\u0022Dislike\u0022 Label=\u0022Dislike\u0022/\u003E\n \u003CAppBarSeparator /\u003E\n \u003CAppBarButton Icon=\u0022Orientation\u0022 Label=\u0022Orientation\u0022/\u003E\n \u003C/CommandBar.PrimaryCommands\u003E\n\u003C/CommandBar\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A vertical line that\u0027s used to visually separate groups of commands in an app bar.","relatedControls":["AppBarButton","AppBarToggleButton","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"appbartogglebutton-1","controlId":"appbartogglebutton","controlName":"AppBarToggleButton","headerText":"An AppBarToggleButton with a symbol icon.","xaml":"\u003CAppBarToggleButton Icon=\u0022Shuffle\u0022 Label=\u0022SymbolIcon\u0022 Click=\u0022AppBarButton_Click\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void AppBarButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is AppBarToggleButton b)\n {\n string name = b.Name;\n\n switch (name)\n {\n case \u0022Button1\u0022:\n Control1Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n case \u0022Button2\u0022:\n Control2Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n case \u0022Button3\u0022:\n Control3Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n case \u0022Button4\u0022:\n Control4Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"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.","relatedControls":["AppBarButton","AppBarSeparator","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"appbartogglebutton-2","controlId":"appbartogglebutton","controlName":"AppBarToggleButton","headerText":"An AppBarToggleButton with a bitmap icon.","xaml":"\u003CAppBarToggleButton Label=\u0022BitmapIcon\u0022 Click=\u0022AppBarButton_Click\u0022\u003E\n \u003CAppBarToggleButton.Icon\u003E\n \u003CBitmapIcon UriSource=\u0022ms-appx:///Assets/YourImage.png\u0022/\u003E\n \u003C/AppBarToggleButton.Icon\u003E\n\u003C/AppBarToggleButton\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void AppBarButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is AppBarToggleButton b)\n {\n string name = b.Name;\n\n switch (name)\n {\n case \u0022Button1\u0022:\n Control1Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n case \u0022Button2\u0022:\n Control2Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n case \u0022Button3\u0022:\n Control3Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n case \u0022Button4\u0022:\n Control4Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"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.","relatedControls":["AppBarButton","AppBarSeparator","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"appbartogglebutton-3","controlId":"appbartogglebutton","controlName":"AppBarToggleButton","headerText":"An AppBarToggleButton with a font icon.","xaml":"\u003CAppBarToggleButton Label=\u0022FontIcon\u0022 Click=\u0022AppBarButton_Click\u0022\u003E\n \u003CAppBarToggleButton.Icon\u003E\n \u003CFontIcon FontFamily=\u0022Candara\u0022 Glyph=\u0022\u0026#x03A3;\u0022/\u003E\n \u003C/AppBarToggleButton.Icon\u003E\n\u003C/AppBarToggleButton\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void AppBarButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is AppBarToggleButton b)\n {\n string name = b.Name;\n\n switch (name)\n {\n case \u0022Button1\u0022:\n Control1Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n case \u0022Button2\u0022:\n Control2Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n case \u0022Button3\u0022:\n Control3Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n case \u0022Button4\u0022:\n Control4Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"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.","relatedControls":["AppBarButton","AppBarSeparator","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"appbartogglebutton-4","controlId":"appbartogglebutton","controlName":"AppBarToggleButton","headerText":"A three-state AppBarToggleButton with a path icon.","xaml":"\u003CAppBarToggleButton Label=\u0022PathIcon\u0022 Click=\u0022AppBarButton_Click\u0022 IsThreeState=\u0022True\u0022\u003E\n \u003CAppBarToggleButton.Icon\u003E\n \u003CPathIcon Data=\u0022F1 M 20,20L 24,10L 24,24L 5,24\u0022/\u003E\n \u003C/AppBarToggleButton.Icon\u003E\n\u003C/AppBarToggleButton\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void AppBarButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is AppBarToggleButton b)\n {\n string name = b.Name;\n\n switch (name)\n {\n case \u0022Button1\u0022:\n Control1Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n case \u0022Button2\u0022:\n Control2Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n case \u0022Button3\u0022:\n Control3Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n case \u0022Button4\u0022:\n Control4Output.Text = \u0022IsChecked = \u0022 \u002B b.IsChecked.ToString();\n break;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"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.","relatedControls":["AppBarButton","AppBarSeparator","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"commandbar-1","controlId":"commandbar","controlName":"CommandBar","headerText":"A command bar with labels on the side free floating in a page","xaml":"\u003CCommandBar Background=\u0022Transparent\u0022 IsOpen=\u0022True\u0022 DefaultLabelPosition=\u0022Right\u0022...\u003E\n \u003CAppBarButton Icon=\u0022Add\u0022 Label=\u0022Add\u0022/\u003E\n \u003CAppBarButton Icon=\u0022Edit\u0022 Label=\u0022Edit\u0022/\u003E\n \u003CAppBarButton Icon=\u0022Share\u0022 Label=\u0022Share\u0022/\u003E\n \u003CCommandBar.SecondaryCommands\u003E\n \u003CAppBarButton Icon=\u0022Setting\u0022 Label=\u0022Settings\u0022\u003E\n \u003CAppBarButton.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Modifiers=\u0022Control\u0022 Key=\u0022I\u0022 /\u003E\n \u003C/AppBarButton.KeyboardAccelerators\u003E\n \u003C/AppBarButton\u003E...\n \u003C/CommandBar.SecondaryCommands\u003E\n\u003C/CommandBar\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System.ComponentModel;\n\nprivate void OpenButton_Click(object sender, RoutedEventArgs e)\n {\n PrimaryCommandBar.IsOpen = true;\n PrimaryCommandBar.IsSticky = true;\n }\n\nprivate void CloseButton_Click(object sender, RoutedEventArgs e)\n {\n PrimaryCommandBar.IsOpen = false;\n PrimaryCommandBar.IsSticky = false;\n }\n\nprivate void AddSecondaryCommands_Click(object sender, RoutedEventArgs e)\n {\n // Add compact button to the command bar. It provides functionality specific\n // to this page, and is removed when leaving the page.\n\n if (PrimaryCommandBar.SecondaryCommands.Count == 1)\n {\n var newButton = new AppBarButton();\n newButton.Icon = new SymbolIcon(Symbol.Add);\n newButton.Label = \u0022Button 1\u0022;\n newButton.KeyboardAccelerators.Add(new Microsoft.UI.Xaml.Input.KeyboardAccelerator()\n {\n Key = Windows.System.VirtualKey.N,\n Modifiers = Windows.System.VirtualKeyModifiers.Control\n });\n PrimaryCommandBar.SecondaryCommands.Add(newButton);\n\n newButton = new AppBarButton\n {\n Icon = new SymbolIcon(Symbol.Delete),\n Label = \u0022Button 2\u0022\n };\n PrimaryCommandBar.SecondaryCommands.Add(newButton);\n newButton.KeyboardAccelerators.Add(new Microsoft.UI.Xaml.Input.KeyboardAccelerator()\n {\n Key = Windows.System.VirtualKey.Delete\n });\n PrimaryCommandBar.SecondaryCommands.Add(new AppBarSeparator());\n\n newButton = new AppBarButton();\n newButton.Icon = new SymbolIcon(Symbol.FontDecrease);\n newButton.Label = \u0022Button 3\u0022;\n newButton.KeyboardAccelerators.Add(new Microsoft.UI.Xaml.Input.KeyboardAccelerator()\n {\n Key = Windows.System.VirtualKey.Subtract,\n Modifiers = Windows.System.VirtualKeyModifiers.Control\n });\n PrimaryCommandBar.SecondaryCommands.Add(newButton);\n\n newButton = new AppBarButton();\n newButton.Icon = new SymbolIcon(Symbol.FontIncrease);\n newButton.Label = \u0022Button 4\u0022;\n newButton.KeyboardAccelerators.Add(new Microsoft.UI.Xaml.Input.KeyboardAccelerator()\n {\n Key = Windows.System.VirtualKey.Add,\n Modifiers = Windows.System.VirtualKeyModifiers.Control\n });\n PrimaryCommandBar.SecondaryCommands.Add(newButton);\n\n }\n MultipleButtons = true;\n }\n\nprivate void RemoveSecondaryCommands_Click(object sender, RoutedEventArgs e)\n {\n RemoveSecondaryCommands();\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A toolbar for displaying application-specific commands that handles layout and resizing of its contents.","relatedControls":["AppBarButton","AppBarToggleButton","AppBarSeparator"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"commandbarflyout-1","controlId":"commandbarflyout","controlName":"CommandBarFlyout","headerText":"CommandBarFlyout for commands on an in-app object","xaml":"\u003CPage.Resources\u003E\n \u003CCommandBarFlyout Placement=\u0022Right\u0022 x:Name=\u0022CommandBarFlyout1\u0022\u003E\n \u003CAppBarButton Label=\u0022Share\u0022 Icon=\u0022Share\u0022 ToolTipService.ToolTip=\u0022Share\u0022 Click=\u0022OnElementClicked\u0022 /\u003E\n \u003CAppBarButton Label=\u0022Save\u0022 Icon=\u0022Save\u0022 ToolTipService.ToolTip=\u0022Save\u0022 Click=\u0022OnElementClicked\u0022 /\u003E\n \u003CAppBarButton Label=\u0022Delete\u0022 Icon=\u0022Delete\u0022 ToolTipService.ToolTip=\u0022Delete\u0022 Click=\u0022OnElementClicked\u0022 /\u003E\n \u003CCommandBarFlyout.SecondaryCommands\u003E\n \u003CAppBarButton x:Name=\u0022ResizeButton1\u0022 Label=\u0022Resize\u0022 Click=\u0022OnElementClicked\u0022 /\u003E\n \u003CAppBarButton x:Name=\u0022MoveButton1\u0022 Label=\u0022Move\u0022 Click=\u0022OnElementClicked\u0022 /\u003E\n \u003C/CommandBarFlyout.SecondaryCommands\u003E\n \u003C/CommandBarFlyout\u003E\n\u003C/Page.Resources\u003E\n\n\u003CButton x:Name=\u0022myImageButton\u0022 AutomationProperties.Name=\u0022mountain\u0022 Padding=\u00220\u0022\n Click=\u0022MyImageButton_Click\u0022 ContextRequested=\u0022MyImageButton_ContextRequested\u0022 \u003E\n \u003CImage x:Name=\u0022Image1\u0022 Height=\u0022300\u0022 Source=\u0022/Assets/SampleMedia/rainier.jpg\u0022/\u003E\n\u003C/Button\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.Primitives;\nusing Microsoft.UI.Xaml.Input;\nusing Windows.Foundation.Metadata;\n\nprivate void MyImageButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n {\n // Show a context menu in transient mode\n // Focus will not move to the menu\n ShowMenu(true);\n }\n\nprivate void MyImageButton_ContextRequested(Microsoft.UI.Xaml.UIElement sender, ContextRequestedEventArgs args)\n {\n // Show a context menu in standard mode\n // Focus will move to the menu\n ShowMenu(false);\n }\n\nprivate void ShowMenu(bool isTransient)\n {\n if (ApiInformation.IsApiContractPresent(\u0022Windows.Foundation.UniversalApiContract\u0022, 7))\n {\n FlyoutShowOptions myOption = new FlyoutShowOptions\n {\n ShowMode = isTransient ? FlyoutShowMode.Transient : FlyoutShowMode.Standard,\n Placement = FlyoutPlacementMode.RightEdgeAlignedTop\n };\n CommandBarFlyout1.ShowAt(Image1, myOption);\n }\n else\n {\n CommandBarFlyout1.ShowAt(Image1);\n }\n }\n\nprivate void OnElementClicked(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n {\n if (sender is not AppBarButton appBarButton)\n {\n return;\n }\n\n // Do custom logic\n SelectedOptionText.Text = \u0022You clicked: \u0022 \u002B appBarButton.Label;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A mini-toolbar displaying proactive commands, and an optional menu of commands.","relatedControls":["CommandBar","MenuFlyout","RichEditBox","TextBox","StandardUICommand","XamlUICommand"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"menubar-1","controlId":"menubar","controlName":"MenuBar","headerText":"A simple MenuBar","xaml":"\u003CMenuBar\u003E\n \u003CMenuBarItem Title=\u0022File\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022New\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Open...\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Save\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Exit\u0022/\u003E\n \u003C/MenuBarItem\u003E\n\n \u003CMenuBarItem Title=\u0022Edit\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Undo\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Cut\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Copy\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Paste\u0022/\u003E\n \u003C/MenuBarItem\u003E\n\n \u003CMenuBarItem Title=\u0022Help\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022About\u0022/\u003E\n \u003C/MenuBarItem\u003E\n\u003C/MenuBar\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\n\nprivate void OnElementClicked(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n {\n if (sender is not MenuFlyoutItem selectedFlyoutItem)\n {\n return;\n }\n\n string exampleNumber = selectedFlyoutItem.Name.Substring(0, 1);\n\n if (exampleNumber == \u0022o\u0022)\n {\n SelectedOptionText.Text = \u0022You clicked: \u0022 \u002B selectedFlyoutItem.Text;\n }\n else if (exampleNumber == \u0022t\u0022)\n {\n SelectedOptionText1.Text = \u0022You clicked: \u0022 \u002B selectedFlyoutItem.Text;\n }\n else if (exampleNumber == \u0022z\u0022)\n {\n SelectedOptionText2.Text = \u0022You clicked: \u0022 \u002B selectedFlyoutItem.Text;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A classic menu, allowing the display of MenuItems containing MenuFlyoutItems.","relatedControls":["CommandBar","MenuFlyout","StandardUICommand","XamlUICommand"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"menubar-2","controlId":"menubar","controlName":"MenuBar","headerText":"MenuBar with keyboard accelerators","xaml":null,"csharp":"using Microsoft.UI.Xaml.Controls;\n\nprivate void OnElementClicked(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n {\n if (sender is not MenuFlyoutItem selectedFlyoutItem)\n {\n return;\n }\n\n string exampleNumber = selectedFlyoutItem.Name.Substring(0, 1);\n\n if (exampleNumber == \u0022o\u0022)\n {\n SelectedOptionText.Text = \u0022You clicked: \u0022 \u002B selectedFlyoutItem.Text;\n }\n else if (exampleNumber == \u0022t\u0022)\n {\n SelectedOptionText1.Text = \u0022You clicked: \u0022 \u002B selectedFlyoutItem.Text;\n }\n else if (exampleNumber == \u0022z\u0022)\n {\n SelectedOptionText2.Text = \u0022You clicked: \u0022 \u002B selectedFlyoutItem.Text;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A classic menu, allowing the display of MenuItems containing MenuFlyoutItems.","relatedControls":["CommandBar","MenuFlyout","StandardUICommand","XamlUICommand"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"menubar-3","controlId":"menubar","controlName":"MenuBar","headerText":"MenuBar with submenus, separators, and radio items","xaml":"\u003CMenuBar\u003E\n \u003CMenuBarItem Title=\u0022File\u0022\u003E\n \u003CMenuFlyoutSubItem Text=\u0022New\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Plain Text Document\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Rich Text Document\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Other Formats...\u0022/\u003E\n \u003C/MenuFlyoutSubItem\u003E\n \u003CMenuFlyoutItem Text=\u0022Open...\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Save\u0022/\u003E\n \u003CMenuFlyoutSeparator /\u003E\n \u003CMenuFlyoutItem Text=\u0022Exit\u0022/\u003E\n \u003C/MenuBarItem\u003E\n\n \u003CMenuBarItem Title=\u0022Edit\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Undo\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Cut\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Copy\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Paste\u0022/\u003E\n \u003C/MenuBarItem\u003E\n\n \u003CMenuBarItem Title=\u0022View\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Output\u0022/\u003E\n \u003CMenuFlyoutSeparator/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Landscape\u0022 GroupName=\u0022OrientationGroup\u0022/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Portrait\u0022 GroupName=\u0022OrientationGroup\u0022 IsChecked=\u0022True\u0022/\u003E\n \u003CMenuFlyoutSeparator/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Small icons\u0022 GroupName=\u0022SizeGroup\u0022/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Medium icons\u0022 IsChecked=\u0022True\u0022 GroupName=\u0022SizeGroup\u0022/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Large icons\u0022 GroupName=\u0022SizeGroup\u0022/\u003E\n \u003C/MenuBarItem\u003E\n \n \u003CMenuBarItem Title=\u0022Help\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022About\u0022/\u003E\n \u003C/MenuBarItem\u003E\n\u003C/MenuBar\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\n\nprivate void OnElementClicked(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n {\n if (sender is not MenuFlyoutItem selectedFlyoutItem)\n {\n return;\n }\n\n string exampleNumber = selectedFlyoutItem.Name.Substring(0, 1);\n\n if (exampleNumber == \u0022o\u0022)\n {\n SelectedOptionText.Text = \u0022You clicked: \u0022 \u002B selectedFlyoutItem.Text;\n }\n else if (exampleNumber == \u0022t\u0022)\n {\n SelectedOptionText1.Text = \u0022You clicked: \u0022 \u002B selectedFlyoutItem.Text;\n }\n else if (exampleNumber == \u0022z\u0022)\n {\n SelectedOptionText2.Text = \u0022You clicked: \u0022 \u002B selectedFlyoutItem.Text;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A classic menu, allowing the display of MenuItems containing MenuFlyoutItems.","relatedControls":["CommandBar","MenuFlyout","StandardUICommand","XamlUICommand"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"menuflyout-1","controlId":"menuflyout","controlName":"MenuFlyout","headerText":"An AppBarButton with a MenuFlyout.","xaml":"\u003CAppBarButton Icon=\u0022Sort\u0022 IsCompact=\u0022True\u0022 ToolTipService.ToolTip=\u0022Sort\u0022 AutomationProperties.Name=\u0022Sort\u0022\u003E\n \u003CAppBarButton.Flyout\u003E\n \u003CMenuFlyout\u003E\n \u003CMenuFlyoutItem Text=\u0022By rating\u0022 Click=\u0022MenuFlyoutItem_Click\u0022 Tag=\u0022rating\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022By match\u0022 Click=\u0022MenuFlyoutItem_Click\u0022 Tag=\u0022match\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022By distance\u0022 Click=\u0022MenuFlyoutItem_Click\u0022 Tag=\u0022distance\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/AppBarButton.Flyout\u003E\n\u003C/AppBarButton\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)\n {\n if (sender is MenuFlyoutItem selectedItem)\n {\n string? sortOption = selectedItem.Tag.ToString();\n switch (sortOption)\n {\n case \u0022rating\u0022:\n //SortByRating();\n break;\n case \u0022match\u0022:\n //SortByMatch();\n break;\n case \u0022distance\u0022:\n //SortByDistance();\n break;\n }\n Control1Output.Text = \u0022Sort by: \u0022 \u002B sortOption;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows a contextual list of simple commands or options.","relatedControls":["Flyout","ContentDialog","Button","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"menuflyout-2","controlId":"menuflyout","controlName":"MenuFlyout","headerText":"A MenuFlyout with ToggleMenuFlyoutItems and MenuFlyoutSeparator.","xaml":"\u003CButton Content=\u0022Options\u0022\u003E\n \u003CButton.Flyout\u003E\n \u003CMenuFlyout\u003E\n \u003CMenuFlyoutItem Text=\u0022Reset\u0022/\u003E\n \u003CMenuFlyoutSeparator/\u003E\n \u003CToggleMenuFlyoutItem Text=\u0022Repeat\u0022 IsChecked=\u0022...\u0022/\u003E\n \u003CToggleMenuFlyoutItem Text=\u0022Shuffle\u0022 IsChecked=\u0022...\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/Button.Flyout\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows a contextual list of simple commands or options.","relatedControls":["Flyout","ContentDialog","Button","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"menuflyout-3","controlId":"menuflyout","controlName":"MenuFlyout","headerText":"A MenuFlyout with cascading menus.","xaml":"\u003CButton Content=\u0022File Options\u0022\u003E\n \u003CButton.Flyout\u003E\n \u003CMenuFlyout\u003E\n \u003CMenuFlyoutItem Text=\u0022Open\u0022/\u003E\n \u003CMenuFlyoutSubItem Text=\u0022Send to\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Bluetooth\u0022 /\u003E\n \u003CMenuFlyoutItem Text=\u0022Desktop (shortcut)\u0022 /\u003E\n \u003CMenuFlyoutSubItem Text=\u0022Compressed file\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Compress and email\u0022 /\u003E\n \u003CMenuFlyoutItem Text=\u0022Compress to .7z\u0022 /\u003E\n \u003CMenuFlyoutItem Text=\u0022Compress to .zip\u0022 /\u003E\n \u003C/MenuFlyoutSubItem\u003E\n \u003C/MenuFlyoutSubItem\u003E\n \u003C/MenuFlyout\u003E\n \u003C/Button.Flyout\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows a contextual list of simple commands or options.","relatedControls":["Flyout","ContentDialog","Button","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"menuflyout-4","controlId":"menuflyout","controlName":"MenuFlyout","headerText":"A MenuFlyout with SplitMenuFlyoutItems.","xaml":"\u003CButton Content=\u0022File Options\u0022\u003E\n \u003CButton.Flyout\u003E\n \u003CMenuFlyout\u003E\n \u003CSplitMenuFlyoutItem Text=\u0022Save\u0022 Click=\u0022SplitMenuFlyoutItem_Click\u0022\u003E\n \u003CSplitMenuFlyoutItem.Icon\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE74E;\u0022/\u003E\n \u003C/SplitMenuFlyoutItem.Icon\u003E\n \u003CMenuFlyoutItem Text=\u0022Save as .docx\u0022 Click=\u0022SplitMenuFlyoutItem_Click\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Save as .pdf\u0022 Click=\u0022SplitMenuFlyoutItem_Click\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Save as .txt\u0022 Click=\u0022SplitMenuFlyoutItem_Click\u0022/\u003E\n \u003C/SplitMenuFlyoutItem\u003E\n \u003CSplitMenuFlyoutItem Text=\u0022Share\u0022 Icon=\u0022Share\u0022 Click=\u0022SplitMenuFlyoutItem_Click\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Share via email\u0022 Click=\u0022SplitMenuFlyoutItem_Click\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Share via link\u0022 Click=\u0022SplitMenuFlyoutItem_Click\u0022/\u003E\n \u003C/SplitMenuFlyoutItem\u003E\n \u003C/MenuFlyout\u003E\n \u003C/Button.Flyout\u003E\n\u003C/Button\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void SplitMenuFlyoutItem_Click(object sender, RoutedEventArgs e)\n {\n if (sender is MenuFlyoutItem selectedItem)\n {\n Control3bOutput.Text = \u0022Clicked: \u0022 \u002B selectedItem.Text;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows a contextual list of simple commands or options.","relatedControls":["Flyout","ContentDialog","Button","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"menuflyout-5","controlId":"menuflyout","controlName":"MenuFlyout","headerText":"A MenuFlyout with icons.","xaml":"\u003CButton Content=\u0022Edit Options\u0022\u003E\n \u003CButton.Flyout\u003E\n \u003CMenuFlyout\u003E\n \u003CMenuFlyoutItem Text=\u0022Share\u0022\u003E\n \u003CMenuFlyoutItem.Icon\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE72D;\u0022/\u003E\n \u003C/MenuFlyoutItem.Icon\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003CMenuFlyoutItem Text=\u0022Copy\u0022 Icon=\u0022Copy\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Delete\u0022 Icon=\u0022Delete\u0022/\u003E\n \u003CMenuFlyoutSeparator/\u003E\n \u003CMenuFlyoutItem Text=\u0022Rename\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Select\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/Button.Flyout\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows a contextual list of simple commands or options.","relatedControls":["Flyout","ContentDialog","Button","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"menuflyout-6","controlId":"menuflyout","controlName":"MenuFlyout","headerText":"A MenuFlyout with icons and Keyboard Accelerators.","xaml":"\u003CButton Content=\u0022Edit Options\u0022\u003E\n \u003CButton.Flyout\u003E\n \u003CMenuFlyout\u003E\n \u003CMenuFlyoutItem Text=\u0022Share\u0022\u003E\n \u003CMenuFlyoutItem.Icon\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE72D;\u0022/\u003E\n \u003C/MenuFlyoutItem.Icon\u003E\n \u003CMenuFlyoutItem.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Key=\u0022S\u0022 Modifiers=\u0022Control\u0022/\u003E\n \u003C/MenuFlyoutItem.KeyboardAccelerators\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003CMenuFlyoutItem Text=\u0022Copy\u0022 Icon=\u0022Copy\u0022\u003E\n \u003CMenuFlyoutItem.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Key=\u0022C\u0022 Modifiers=\u0022Control\u0022/\u003E\n \u003C/MenuFlyoutItem.KeyboardAccelerators\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003CMenuFlyoutItem Text=\u0022Delete\u0022 Icon=\u0022Delete\u0022\u003E\n \u003CMenuFlyoutItem.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Key=\u0022Delete\u0022 /\u003E\n \u003C/MenuFlyoutItem.KeyboardAccelerators\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003CMenuFlyoutSeparator/\u003E\n \u003CMenuFlyoutItem Text=\u0022Rename\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Select\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/Button.Flyout\u003E\n\u003C/Button\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void Example5_Loaded(object sender, RoutedEventArgs e)\n {\n\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows a contextual list of simple commands or options.","relatedControls":["Flyout","ContentDialog","Button","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"menuflyout-7","controlId":"menuflyout","controlName":"MenuFlyout","headerText":"A MenuFlyout with RadioMenuFlyoutItems","xaml":"\u003CButton Content=\u0022Options\u0022\u003E\n \u003CButton.Flyout\u003E\n \u003CMenuFlyout\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Landscape\u0022 GroupName=\u0022OrientationGroup\u0022/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Portrait\u0022 GroupName=\u0022OrientationGroup\u0022 IsChecked=\u0022True\u0022/\u003E\n \u003CMenuFlyoutSeparator/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Small icons\u0022 GroupName=\u0022SizeGroup\u0022/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Medium icons\u0022 IsChecked=\u0022True\u0022 GroupName=\u0022SizeGroup\u0022/\u003E\n \u003CRadioMenuFlyoutItem Text=\u0022Large icons\u0022 GroupName=\u0022SizeGroup\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/Button.Flyout\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows a contextual list of simple commands or options.","relatedControls":["Flyout","ContentDialog","Button","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"swipecontrol-1","controlId":"swipecontrol","controlName":"SwipeControl","headerText":"Swipe right to reveal actions","xaml":"\u003CBorder\u003E\n \u003CBorder.Resources\u003E\n \u003CFontIconSource x:Key=\u0022AcceptIcon\u0022 Glyph=\u0022\u0026#xE8FB;\u0022/\u003E\n \u003CFontIconSource x:Key=\u0022FlagIcon\u0022 Glyph=\u0022\u0026#xE7C1;\u0022/\u003E\n\n \u003CSwipeItems x:Key=\u0022left\u0022 Mode=\u0022Reveal\u0022\u003E\n \u003CSwipeItem Text=\u0022Accept\u0022 IconSource=\u0022{StaticResource AcceptIcon}\u0022 Invoked=\u0022Accept_ItemInvoked\u0022/\u003E\n \u003CSwipeItem Text=\u0022Flag\u0022 IconSource=\u0022{StaticResource FlagIcon}\u0022 Invoked=\u0022Flag_ItemInvoked\u0022/\u003E\n \u003C/SwipeItems\u003E\n \u003C/Border.Resources\u003E\n \u003CSwipeControl BorderThickness=\u00221\u0022\n LeftItems=\u0022{StaticResource left}\u0022 BorderBrush=\u0022{ThemeResource ButtonBackground}\u0022\n \u003CTextBlock Text=\u0022Swipe Right\u0022 Margin=\u002212\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003C/SwipeControl\u003E\n\u003C/Border\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System.Collections.ObjectModel;\n\nprivate void Accept_ItemInvoked(SwipeItem sender, SwipeItemInvokedEventArgs args)\n {\n isAccepted = !isAccepted;\n CheckAcceptFlagBool(args.SwipeControl);\n\n if (isAccepted)\n {\n FontIconSource cancelIcon = new FontIconSource() { Glyph = \u0022\\ue711\u0022 };\n sender.IconSource = cancelIcon;\n sender.Text = \u0022Cancel\u0022;\n }\n else\n {\n FontIconSource acceptIcon = new FontIconSource() { Glyph = \u0022\\ue10B\u0022 };\n sender.IconSource = acceptIcon;\n sender.Text = \u0022Accept\u0022;\n }\n }\n\nprivate void Flag_ItemInvoked(SwipeItem sender, SwipeItemInvokedEventArgs args)\n {\n isFlagged = !isFlagged;\n CheckAcceptFlagBool(args.SwipeControl);\n\n if (isFlagged)\n {\n FontIconSource filledFlagIcon = new FontIconSource() { Glyph = \u0022\\ueB4B\u0022 };\n sender.IconSource = filledFlagIcon;\n sender.Text = \u0022Unmark\u0022;\n }\n else\n {\n FontIconSource flagIcon = new FontIconSource() { Glyph = \u0022\\ue129\u0022 };\n sender.IconSource = flagIcon;\n sender.Text = \u0022Flag\u0022;\n }\n }\n\nprivate void CheckAcceptFlagBool(SwipeControl swipeCtrl)\n {\n if (isAccepted \u0026\u0026 !isFlagged)\n {\n ((TextBlock)swipeCtrl.Content).Text = \u0022Swipe Right - Accepted\u0022;\n }\n else if (isAccepted \u0026\u0026 isFlagged)\n {\n ((TextBlock)swipeCtrl.Content).Text = \u0022Swipe Right - Accepted \u0026 Flagged\u0022;\n }\n else if (!isAccepted \u0026\u0026 isFlagged)\n {\n ((TextBlock)swipeCtrl.Content).Text = \u0022Swipe Right - Flagged\u0022;\n }\n else\n {\n ((TextBlock)swipeCtrl.Content).Text = \u0022Swipe Right\u0022;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Touch gesture for quick menu actions on items.","relatedControls":["GridView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"swipecontrol-2","controlId":"swipecontrol","controlName":"SwipeControl","headerText":"Swipe left to invoke an execute","xaml":"\u003CBorder\u003E\n \u003CBorder.Resources\u003E\n \u003CFontIconSource x:Key=\u0022DeleteIcon\u0022 Glyph=\u0022\u0026#xE74D;\u0022/\u003E\n \u003CSwipeItems x:Key=\u0022right\u0022 Mode=\u0022Execute\u0022\u003E\n \u003CSwipeItem Text=\u0022Archive\u0022 IconSource=\u0022{StaticResource ArchiveIcon}\u0022\n BehaviorOnInvoked=\u0022Close\u0022 Invoked=\u0022DeleteOne_ItemInvoked\u0022/\u003E\n \u003C/SwipeItems\u003E\n \u003C/Border.Resources\u003E\n \u003CSwipeControl BorderThickness=\u00221\u0022 BorderBrush=\u0022{ThemeResource ButtonBackground}\u0022\n RightItems=\u0022{StaticResource right}\u0022\n \u003CTextBlock Text=\u0022Swipe Left\u0022 Margin=\u002212\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003C/SwipeControl\u003E\n\u003C/Border\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System.Collections.ObjectModel;\n\nprivate void DeleteOne_ItemInvoked(SwipeItem sender, SwipeItemInvokedEventArgs args)\n {\n isArchived = !isArchived;\n\n if (isArchived)\n {\n ((TextBlock)args.SwipeControl.Content).Text = \u0022Archived - Swipe Left\u0022;\n }\n else\n {\n ((TextBlock)args.SwipeControl.Content).Text = \u0022Swipe Left\u0022;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Touch gesture for quick menu actions on items.","relatedControls":["GridView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"swipecontrol-3","controlId":"swipecontrol","controlName":"SwipeControl","headerText":"Custom Swipe in a ListView","xaml":"\u003CListView x:Name=\u0022lv\u0022 Width=\u0022400\u0022 Height=\u0022300\u0022 Margin=\u002212\u0022\u003E\n \u003CListView.Resources\u003E\n \u003CFontIconSource x:Key=\u0022ReplyAllIcon\u0022 Glyph=\u0022\u0026#xE8C2;\u0022/\u003E\n \u003CFontIconSource x:Key=\u0022ReadIcon\u0022 Glyph=\u0022\u0026#xE8C3;\u0022/\u003E\n \u003CFontIconSource x:Key=\u0022DeleteIcon\u0022 Glyph=\u0022\u0026#xE74D;\u0022/\u003E\n\n \u003CSwipeItems x:Key=\u0022left\u0022 Mode=\u0022Reveal\u0022\u003E\n \u003CSwipeItem Text=\u0022Reply All\u0022 IconSource=\u0022{StaticResource ReplyAllIcon}\u0022\n Background=\u0022#FF3e6fa7\u0022 Foreground=\u0022White\u0022/\u003E\n \u003CSwipeItem Text=\u0022Open\u0022 IconSource=\u0022{StaticResource ReadIcon}\u0022\n Background=\u0022#FFff9501\u0022 Foreground=\u0022White\u0022/\u003E\n \u003C/SwipeItems\u003E\n \u003CSwipeItems x:Key=\u0022right\u0022 Mode=\u0022Execute\u0022\u003E\n \u003CSwipeItem Text=\u0022Delete\u0022 IconSource=\u0022{StaticResource DeleteIcon}\u0022\n Background=\u0022#FFF4B183\u0022 Invoked=\u0022DeleteItem_ItemInvoked\u0022/\u003E\n \u003C/SwipeItems\u003E\n \u003C/ListView.Resources\u003E\n\n \u003CListView.ItemTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CSwipeControl BorderThickness=\u00220,1,0,0\u0022 BorderBrush=\u0022{ThemeResource ButtonBackground}\u0022 Height=\u002268\u0022\n RightItems=\u0022{StaticResource right}\u0022\u003E\n \u003CTextBlock Text=\u0022{Binding}\u0022 FontSize=\u002224\u0022 Margin=\u002212\u0022\n HorizontalAlignment=\u0022Stretch\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003C/SwipeControl\u003E\n \u003C/DataTemplate\u003E\n \u003C/ListView.ItemTemplate\u003E\n\u003C/ListView\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System.Collections.ObjectModel;\n\nprivate void DeleteItem_ItemInvoked(SwipeItem sender, SwipeItemInvokedEventArgs args)\n {\n items.Remove(args.SwipeControl.DataContext);\n }\n\npublic SwipeControlPage()\n {\n this.InitializeComponent();\n var source = @\u0022Swipe Item 1,Swipe Item 2,Swipe Item 3,Swipe Item 4\u0022.Split(\u0027,\u0027);\n foreach (var item in source)\n items.Add(item);\n lv.ItemsSource = items;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Touch gesture for quick menu actions on items.","relatedControls":["GridView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"swipecontrol-4","controlId":"swipecontrol","controlName":"SwipeControl","headerText":"Gradient Background","xaml":"\u003CBorder\u003E\n \u003CBorder.Resources\u003E\n \u003CFontIconSource x:Key=\u0022LockIcon\u0022 Glyph=\u0022\u0026#xE72E;\u0022/\u003E\n \u003CLinearGradientBrush x:Key=\u0022PurpleGradient\u0022 StartPoint=\u00220,0.5\u0022 EndPoint=\u00221,0.5\u0022\u003E\n \u003CGradientStop Color=\u0022#ff8990f9\u0022 Offset=\u00220.0\u0022/\u003E\n \u003CGradientStop Color=\u0022#ff5b66fb\u0022 Offset=\u00220.5\u0022/\u003E\n \u003CGradientStop Color=\u0022#ff5c1df4\u0022 Offset=\u00221.0\u0022/\u003E\n \u003CLinearGradientBrush/\u003E\n \u003CSwipeItems x:Key=\u0022right\u0022 Mode=\u0022Execute\u0022\u003E\n \u003CSwipeItem Text=\u0022Lock\u0022 Background=\u0022{StaticResource PurpleGradient}\u0022 \n BehaviorOnInvoked=\u0022Close\u0022 IconSource=\u0022{StaticResource LockIcon}\u0022/\u003E\n \u003C/SwipeItems\u003E\n \u003C/Border.Resources\u003E\n \u003CSwipeControl BorderThickness=\u00221\u0022 BorderBrush=\u0022{ThemeResource ButtonBackground}\u0022\n RightItems=\u0022{StaticResource right}\u0022\n \u003CTextBlock Text=\u0022Swipe Left\u0022 Margin=\u002212\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003C/SwipeControl\u003E\n\u003C/Border\u003E\u003C/LinearGradientBrush\u003E\u003C/Border.Resources\u003E\u003C/Border\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Touch gesture for quick menu actions on items.","relatedControls":["GridView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"swipecontrol-5","controlId":"swipecontrol","controlName":"SwipeControl","headerText":"Custom icons","xaml":"\u003CBorder\u003E\n \u003CBorder.Resources\u003E\n \u003CSwipeItems x:Key=\u0022left\u0022 Mode=\u0022Reveal\u0022\u003E\n \u003CSwipeItem Text=\u0022Coffee\u0022\u003E\n \u003CSwipeItem.IconSource\u003E\n \u003CBitmapIconSource UriSource=\u0022ms-appx:///Assets/YourImage.png\u0022/\u003E\n \u003CSwipeItem.IconSource/\u003E\n \u003CSwipeItem/\u003E\n \u003C/SwipeItems\u003E\n \u003C/Border.Resources\u003E\n \u003CSwipeControl BorderThickness=\u00221\u0022\n LeftItems=\u0022{StaticResource left}\u0022 BorderBrush=\u0022{ThemeResource ButtonBackground}\u0022\n \u003CTextBlock Text=\u0022Swipe Right\u0022 Margin=\u002212\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003C/SwipeControl\u003E\n\u003C/Border\u003E\u003C/SwipeItem.IconSource\u003E\u003C/SwipeItem\u003E\u003C/SwipeItems\u003E\u003C/Border.Resources\u003E\u003C/Border\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Touch gesture for quick menu actions on items.","relatedControls":["GridView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"standarduicommand-1","controlId":"standarduicommand","controlName":"StandardUICommand","headerText":"Exposing a command in multiple controls using StandardUICommand","xaml":"\u003CSwipeItem x:Name=\u0022DeleteSwipeItem\u0022 Background=\u0022Red\u0022 Command=\u0022{x:Bind Command}\u0022 CommandParameter=\u0022{x:Bind Text}\u0022 /\u003E\n\n\u003CAppBarButton x:Name=\u0022HoverButton\u0022 IsTabStop=\u0022False\u0022 HorizontalAlignment=\u0022Right\u0022 Visibility=\u0022Collapsed\u0022 \n Command=\u0022{x:Bind Command}\u0022 CommandParameter=\u0022{x:Bind Text}\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing System.Collections.ObjectModel;\nusing Windows.Foundation.Metadata;\n\nprivate void ControlExample_Loaded(object sender, RoutedEventArgs e)\n {\n if (ApiInformation.IsApiContractPresent(\u0022Windows.Foundation.UniversalApiContract\u0022, 7))\n {\n var deleteCommand = new StandardUICommand(StandardUICommandKind.Delete);\n deleteCommand.ExecuteRequested \u002B= DeleteCommand_ExecuteRequested;\n\n DeleteFlyoutItem.Command = deleteCommand;\n\n for (var i = 0; i \u003C 15; i\u002B\u002B)\n {\n collection.Add(new ListItemData { Text = \u0022List item \u0022 \u002B i.ToString(), Command = deleteCommand });\n }\n }\n else\n {\n for (var i = 0; i \u003C 15; i\u002B\u002B)\n {\n collection.Add(new ListItemData { Text = \u0022List item \u0022 \u002B i.ToString(), Command = null });\n }\n }\n }\n\nprivate void ListViewRight_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)\n {\n MenuFlyout flyout = new MenuFlyout();\n ListItemData data = (ListItemData)args.Item;\n MenuFlyoutItem item = new MenuFlyoutItem() { Command = data.Command };\n flyout.Opened \u002B= delegate (object? element, object e)\n {\n if ((element as MenuFlyout)?.Target is not ListViewItem elementToHighlight)\n {\n return;\n }\n\n elementToHighlight.IsSelected = true;\n };\n flyout.Items.Add(item);\n args.ItemContainer.ContextFlyout = flyout;\n }\n\nprivate void ListView_Loaded(object sender, RoutedEventArgs e)\n {\n var listView = (ListView)sender;\n listView.ItemsSource = collection;\n }\n\nprivate void ListViewSwipeContainer_PointerEntered(object sender, PointerRoutedEventArgs e)\n {\n if (e.Pointer.PointerDeviceType == Microsoft.UI.Input.PointerDeviceType.Mouse || e.Pointer.PointerDeviceType == Microsoft.UI.Input.PointerDeviceType.Pen)\n {\n VisualStateManager.GoToState(sender as Control, \u0022HoverButtonsShown\u0022, true);\n }\n }\n\nprivate void ListViewSwipeContainer_PointerExited(object sender, PointerRoutedEventArgs e)\n {\n VisualStateManager.GoToState(sender as Control, \u0022HoverButtonsHidden\u0022, true);\n }\n\npublic class ListItemData\n{\n public string Text { get; set; } = string.Empty;\n public ICommand? Command { get; set; }\n\n public override string ToString()\n {\n return Text;\n }\n}\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A StandardUICommand is a built-in \u0027XamlUICommand\u0027 which represents a commonly used command, e.g. \u0027Save\u0027.","relatedControls":["XamlUICommand","AppBarButton","AppBarToggleButton","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Input","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"}]},{"id":"xamluicommand-1","controlId":"xamluicommand","controlName":"XamlUICommand","headerText":"Creating a reusable command with XamlUICommand","xaml":"\u003CPage.Resources\u003E\n \u003CXamlUICommand x:Name=\u0022CustomXamlUICommand\u0022 ExecuteRequested=\u0022CustomXamlUICommand_ExecuteRequested\u0022 \n\tDescription=\u0022This is a custom command\u0022 Label=\u0022Custom Command\u0022\u003E\n \u003CXamlUICommand.IconSource\u003E\n \u003CSymbolIconSource Symbol=\u0022Favorite\u0022 /\u003E\n \u003C/XamlUICommand.IconSource\u003E\n \u003CXamlUICommand.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Key=\u0022D\u0022 Modifiers=\u0022Control\u0022/\u003E\n \u003C/XamlUICommand.KeyboardAccelerators\u003E\n \u003C/XamlUICommand\u003E\n\u003C/Page.Resources\u003E\n\n\u003CRelativePanel Grid.Row=\u00221\u0022\u003E\n \u003CAppBarButton x:Name=\u0022CustomButton\u0022 Command=\u0022{StaticResource CustomXamlUICommand}\u0022/\u003E\n \u003CTextBlock x:Name=\u0022XamlUICommandOutput\u0022 Margin=\u00228,0,0,0\u0022 FontFamily=\u0022Global User Interface\u0022 \n RelativePanel.RightOf=\u0022CustomButton\u0022 RelativePanel.AlignVerticalCenterWith=\u0022CustomButton\u0022 /\u003E\n\u003C/RelativePanel\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\n\nprivate void CustomXamlUICommand_ExecuteRequested(XamlUICommand sender, ExecuteRequestedEventArgs args)\n {\n XamlUICommandOutput.Text = \u0022You fired the custom command\u0022;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An object which is used to define the look and feel of a given command.","relatedControls":["StandardUICommand","AppBarButton","AppBarToggleButton","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Input","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"}]},{"id":"flipview-1","controlId":"flipview","controlName":"FlipView","headerText":"A simple FlipView with items declared inline.","xaml":"\u003CFlipView MaxWidth=\u0022400\u0022 Height=\u0022270\u0022\n AutomationProperties.AutomationControlType=\u0022List\u0022\n AutomationProperties.LocalizedControlType=\u0022list\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Cliff\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Grapes\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Rainier\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Sunset\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Valley\u0022/\u003E\n\u003C/FlipView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Presents a collection of items that the user can flip through, one item at a time.","relatedControls":["GridView","ListView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"flipview-2","controlId":"flipview","controlName":"FlipView","headerText":"A FlipView showing bound data with a data template.","xaml":"\u003CFlipView MaxWidth=\u0022400\u0022 Height=\u0022180\u0022 BorderBrush=\u0022Black\u0022 BorderThickness=\u00221\u0022\n AutomationProperties.AutomationControlType=\u0022List\u0022\n AutomationProperties.LocalizedControlType=\u0022list\u0022\n ItemsSource=\u0022{x:Bind Items, Mode=OneWay}\u0022\u003E\n \u003CFlipView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022data:ControlInfoDataItem\u0022\u003E\n \u003CGrid\u003E\n \u003CImage Height=\u0022120\u0022 Source=\u0022{x:Bind ImagePath}\u0022 Stretch=\u0022Uniform\u0022 VerticalAlignment=\u0022Top\u0022/\u003E\n \u003CBorder Background=\u0022#A5FFFFFF\u0022 Height=\u002260\u0022 VerticalAlignment=\u0022Bottom\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022 Foreground=\u0022#CCFFFFFF\u0022 Padding=\u002212,12\u0022 Style=\u0022{StaticResource TitleTextBlockStyle}\u0022 HorizontalAlignment=\u0022Center\u0022/\u003E\n \u003C/Border\u003E\n \u003C/Grid\u003E\n \u003C/DataTemplate\u003E\n \u003C/FlipView.ItemTemplate\u003E\n\u003C/FlipView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Presents a collection of items that the user can flip through, one item at a time.","relatedControls":["GridView","ListView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"flipview-3","controlId":"flipview","controlName":"FlipView","headerText":"Vertical FlipView","xaml":"\u003CFlipView MaxWidth=\u0022400\u0022 Height=\u0022270\u0022\n AutomationProperties.AutomationControlType=\u0022List\u0022\n AutomationProperties.LocalizedControlType=\u0022list\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Cliff\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Grapes\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Rainier\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Sunset\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022Valley\u0022/\u003E\n \u003CFlipView.ItemsPanel \u003E\n \u003CItemsPanelTemplate\u003E\n \u003CVirtualizingStackPanel Orientation=\u0022Vertical\u0022/\u003E\n \u003C/ItemsPanelTemplate\u003E\n \u003C/FlipView.ItemsPanel\u003E\n\u003CFlipView\u003E\u003C/FlipView\u003E\u003C/FlipView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Presents a collection of items that the user can flip through, one item at a time.","relatedControls":["GridView","ListView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"gridview-1","controlId":"gridview","controlName":"GridView","headerText":"Basic GridView with Simple DataTemplate","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003CGridView\n x:Name=\u0022BasicGridView\u0022\n ItemTemplate=\u0022{StaticResource ImageTemplate}\u0022\n IsItemClickEnabled=\u0022True\u0022\n ItemClick=\u0022BasicGridView_ItemClick\u0022\n SelectionMode=\u0022Single\u0022/\u003E\n \n\u003CDataTemplate x:Key=\u0022ImageTemplate\u0022 x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CImage Stretch=\u0022UniformToFill\u0022 Source=\u0022{x:Bind ImageLocation}\u0022 Width=\u0022190\u0022 Height=\u0022130\u0022/\u003E\n\u003C/DataTemplate\u003E\n \n\u003C!-- In this example, the GridView\u0027s ItemTemplate property is bound to a data template (shown above)\ncalled ImageTemplate, defined in the Page.Resources section of the XAML file. \n \nThe data template is defined to display an object of type CustomDataObject, which is created from a class\nthat\u0027s defined in the code-behind (see code below).\n \nThe ItemsSource for the GridView is an ObservableCollection\u003CCustomDataObject\u003E called Items and\nis defined in the C# code-behind. It is bound to the GridView\u0027s ItemsSource property in the code-behind.\n \nThe IsItemClickEnabled property allows items to be clicked, and a function called BasicGridView_ItemClick \nis called when an item is clicked. This function is defined in the C# code-behind and simply outputs \nthe title of the selected item into a TextBlock below the GridView. --\u003E\u003C/CustomDataObject\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\n\nprivate void BasicGridView_ItemClick(object sender, ItemClickEventArgs e)\n {\n if (e.ClickedItem is not CustomDataObject clickedItem)\n {\n return;\n }\n\n ClickOutput0.Text = \u0022You clicked \u0022 \u002B clickedItem.Title \u002B \u0022.\u0022;\n }\n\nprotected override void OnNavigatedTo(NavigationEventArgs e)\n {\n base.OnNavigatedTo(e);\n\n // Get data objects and place them into an ObservableCollection\n List\u003CCustomDataObject\u003E tempList = CustomDataObject.GetDataObjects();\n ObservableCollection\u003CCustomDataObject\u003E Items = new ObservableCollection\u003CCustomDataObject\u003E(tempList);\n ObservableCollection\u003CCustomDataObject\u003E Items2 = new ObservableCollection\u003CCustomDataObject\u003E(tempList);\n BasicGridView.ItemsSource = Items2;\n ContentGridView.ItemsSource = Items;\n StyledGrid.ItemsSource = Items;\n\n DisplayDT.Value = @\u0022\u003C!-- ImageTemplate: --\u003E\n\u003CDataTemplate x:Key=\u0027ImageTemplate\u0027 x:DataType=\u0027local: CustomDataObject\u0027\u003E\n \u003CImage Stretch = \u0027UniformToFill\u0027 Source = \u0027{x:Bind ImageLocation}\u0027 \n AutomationProperties.Name = \u0027{x:Bind Title}\u0027 Width = \u0027190\u0027 Height = \u0027130\u0027 \n AutomationProperties.AccessibilityView = \u0027Raw\u0027/\u003E\n\u003C/DataTemplate\u003E \u0022;\n\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items in rows and columns.","relatedControls":["ItemsView","ListView","FlipView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"gridview-2","controlId":"gridview","controlName":"GridView","headerText":"GridView with Layout Customization","xaml":"\u003C!-- The GridView used for this example is shown below. Setter properties are used to customize \nsome parts of the GridViewItems (i.e. the margins). --\u003E\n\u003CGridView\n x:Name=\u0022StyledGrid\u0022\n ItemTemplate=\u0022{StaticResource ImageOverlayTemplate}\u0022\u003E\n\n \u003CGridView.ItemContainerStyle\u003E\n \u003CStyle TargetType=\u0022GridViewItem\u0022 BasedOn=\u0022{StaticResource DefaultGridViewItemStyle}\u0022\u003E\n \u003CSetter Property=\u0022Margin\u0022 Value=\u0022..., ..., ..., ...\u0022/\u003E\n \u003C/Style\u003E\n \u003C/GridView.ItemContainerStyle\u003E\n \n \u003C!-- An extra property also needs to be added to the GridView\u0027s ItemsWrapGrid. \n The following sets the maximum # of items to show before wrapping.--\u003E\n \u003CGridView.ItemsPanel\u003E\n \u003CItemsPanelTemplate\u003E\n \u003CItemsWrapGrid x:Name=\u0022MaxItemsWrapGrid\u0022 \n MaximumRowsOrColumns=\u0022...\u0022 \n Orientation=\u0022Horizontal\u0022/\u003E\n \u003C/ItemsPanelTemplate\u003E\n \u003C/GridView.ItemsPanel\u003E \n\u003C/GridView\u003E \n \n\u003C!-- In this example, the GridView\u0027s ItemTemplate property is bound to a data template (shown below)\ncalled ImageOverlayTemplate, defined in the Page.Resources section of the XAML file. \n \nThe data template is defined to display a CustomDataObject object (same type as in above sample). --\u003E\n \n\u003CDataTemplate x:Name=\u0022ImageOverlayTemplate\u0022 x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CGrid Width=\u0022100\u0022\u003E\n \u003CImage Source=\u0022{x:Bind ImageLocation}\u0022 Stretch=\u0022UniformToFill\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Vertical\u0022 Height=\u002240\u0022 VerticalAlignment=\u0022Bottom\u0022 Padding=\u00225,1,5,1\u0022 \n Background=\u0022LightGray\u0022 Opacity=\u0022.75\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Likes}\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 \n Foreground=\u0022{ThemeResource SystemControlPageTextBaseMediumBrush}\u0022/\u003E\u003C/StackPanel\u003E\u003C/StackPanel\u003E\u003C/Grid\u003E\u003C/DataTemplate\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\n\nprivate void StyledGrid_InitWrapGrid(object sender, RoutedEventArgs e)\n {\n if (sender is not ItemsWrapGrid itemsWrapGrid)\n {\n return;\n }\n\n // Update ItemsWrapGrid object created on page load by assigning it to StyledGrid\u0027s ItemWrapGrid\n StyledGridIWG = itemsWrapGrid;\n\n // Now we can change StyledGrid\u0027s MaximumRowsorColumns property within its ItemsPanel\u003EItemsPanelTemplate\u003EItemsWrapGrid.\n StyledGridIWG.MaximumRowsOrColumns = 3;\n }\n\nprivate void NumberBox_ValueChanged(Microsoft.UI.Xaml.Controls.NumberBox sender, Microsoft.UI.Xaml.Controls.NumberBoxValueChangedEventArgs args)\n {\n if (StyledGridIWG == null) { return; }\n\n // Only update either max-row value or margins\n if (sender == WrapItemCount)\n {\n StyledGridIWG.MaximumRowsOrColumns = (int)WrapItemCount.Value;\n return;\n }\n\n int rowSpace = (int)RowSpace.Value;\n int columnSpace = (int)ColumnSpace.Value;\n for (int i = 0; i \u003C StyledGrid.Items.Count; i\u002B\u002B)\n {\n if (StyledGrid.ContainerFromIndex(i) is not GridViewItem item)\n {\n continue;\n }\n\n Thickness NewMargin = item.Margin;\n NewMargin.Left = columnSpace;\n NewMargin.Top = rowSpace;\n NewMargin.Right = columnSpace;\n NewMargin.Bottom = rowSpace;\n\n item.Margin = NewMargin;\n }\n }\n\nprotected override void OnNavigatedTo(NavigationEventArgs e)\n {\n base.OnNavigatedTo(e);\n\n // Get data objects and place them into an ObservableCollection\n List\u003CCustomDataObject\u003E tempList = CustomDataObject.GetDataObjects();\n ObservableCollection\u003CCustomDataObject\u003E Items = new ObservableCollection\u003CCustomDataObject\u003E(tempList);\n ObservableCollection\u003CCustomDataObject\u003E Items2 = new ObservableCollection\u003CCustomDataObject\u003E(tempList);\n BasicGridView.ItemsSource = Items2;\n ContentGridView.ItemsSource = Items;\n StyledGrid.ItemsSource = Items;\n\n DisplayDT.Value = @\u0022\u003C!-- ImageTemplate: --\u003E\n\u003CDataTemplate x:Key=\u0027ImageTemplate\u0027 x:DataType=\u0027local: CustomDataObject\u0027\u003E\n \u003CImage Stretch = \u0027UniformToFill\u0027 Source = \u0027{x:Bind ImageLocation}\u0027 \n AutomationProperties.Name = \u0027{x:Bind Title}\u0027 Width = \u0027190\u0027 Height = \u0027130\u0027 \n AutomationProperties.AccessibilityView = \u0027Raw\u0027/\u003E\n\u003C/DataTemplate\u003E \u0022;\n\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items in rows and columns.","relatedControls":["ItemsView","ListView","FlipView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"gridview-3","controlId":"gridview","controlName":"GridView","headerText":"Content inside of a GridView.","xaml":"\u003C!-- The GridView used for this sample is shown below, with all of the necessary added properties. --\u003E\n\u003CGridView \n x:Name=\u0022ContentGridView\u0022\n ItemsSource=\u0022{x:Bind Items}\u0022\n ItemTemplate=\u0022{StaticResource ...}\u0022\n IsItemClickEnabled=\u0022...\u0022\n CanDragItems=\u0022...\u0022\n AllowDrop=\u0022...\u0022\n CanReorderItems=\u0022...\u0022\n SelectionMode=\u0022...\u0022\n SelectionChanged=\u0022ContentGridView_SelectionChanged\u0022\n ItemClick=\u0022ContentGridView_ItemClick\u0022 \n FlowDirection=\u0022...\u0022/\u003E\n\n\u003C!-- ContentGridView_SelectionChanged and ContentGridView_ItemClick are functions defined in the code-behind\nto handle the events of when a selection changes on the GridView and when an item is clicked. --\u003E\n \n\u003C!-- The data template bound to this GridView\u0027s ItemTemplate property is based on which one you\nselect from the options on the right. The currently selected DataTemplate is: --\u003E\n\n...","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\n\nprivate void ContentGridView_ItemClick(object sender, ItemClickEventArgs e)\n {\n if (e.ClickedItem is not CustomDataObject clickedItem)\n {\n return;\n }\n\n ClickOutput.Text = \u0022You clicked \u0022 \u002B clickedItem.Title \u002B \u0022.\u0022;\n }\n\nprivate void ContentGridView_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (sender is GridView gridView)\n {\n SelectionOutput.Text = string.Format(\u0022You have selected {0} item(s).\u0022, gridView.SelectedItems.Count);\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items in rows and columns.","relatedControls":["ItemsView","ListView","FlipView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"itemsrepeater-1","controlId":"itemsrepeater","controlName":"ItemsRepeater","headerText":"Basic, non-interactive items laid out by ItemsRepeater","xaml":"\u003C!-- The ItemsRepeater and ScrollViewer used: --\u003E\n\u003CScrollViewer HorizontalScrollBarVisibility=\u0022Auto\u0022 \n HorizontalScrollMode=\u0022Auto\u0022 \n IsVerticalScrollChainingEnabled=\u0022False\u0022\n \u003CItemsRepeater\n ItemsSource=\u0022{x:Bind BarItems}\u0022\n Layout=\u0022{StaticResource ...}\u0022\n ItemTemplate=\u0022{StaticResource ...}\u0022 /\u003E\n\u003C/ScrollViewer\u003E\n \n\u003C!-- The Layout specifications used: --\u003E\n \n... \n \n\u003C!-- The DataTemplate used: ...--\u003E\n \n...","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Automation.Peers;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Hosting;\nusing Microsoft.UI.Xaml.Input;\nusing System;\nusing System.Collections;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Collections.Specialized;\nusing System.Linq;\n\nprivate void AddBtn_Click(object sender, RoutedEventArgs e)\n {\n BarItems?.Add(new Bar(random.Next(this.MaxLength), this.MaxLength));\n DeleteBtn.IsEnabled = true;\n }\n\nprivate void DeleteBtn_Click(object sender, RoutedEventArgs e)\n {\n if (BarItems?.Count \u003E 0)\n {\n BarItems.RemoveAt(0);\n if (BarItems.Count == 0)\n {\n DeleteBtn.IsEnabled = false;\n }\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A flexible, primitive control for data-driven layouts.","relatedControls":["ItemsView","ScrollView","ScrollViewer","ListView","GridView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"itemsrepeater-2","controlId":"itemsrepeater","controlName":"ItemsRepeater","headerText":"Virtualizing, scrollable list of items laid out by ItemsRepeater","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003C!-- The ItemsRepeater and ScrollViewer used: --\u003E\n\u003CScrollViewer x:Name=\u0022scrollViewer\u0022\n IsVerticalScrollChainingEnabled=\u0022False\u0022\n Padding=\u00220,0,16,0\u0022\u003E\n \u003CItemsRepeater\n ItemsSource=\u0022{x:Bind NumberedItems}\u0022\n Layout=\u0022{StaticResource ...}\u0022\n ItemTemplate=\u0022{StaticResource ...}\u0022 /\u003E\n\u003CScrollViewer/\u003E \n \n\u003C!-- The Layout specifications used: --\u003E\n \n... \n \n\u003C!-- The ItemTemplate is bound to a DataTemplateSelector called MyDataTemplateSelector. \nMyDataTemplateSelector is defined in the code-behind to return the Accent DataTemplate \nfor odd-numbered-items, and returns the Normal DataTemplate for even-numbered-items \n(shown in C# code-behind section below). The two data templates and the XAML declaration\nof MyDataTemplateSelector are below: --\u003E\n\n\u003CMyDataTemplateSelector x:Key=\u0022MyDataTemplateSelector\u0022\n Normal=\u0022{StaticResource NormalItemTemplate}\u0022\n Accent=\u0022{StaticResource AccentItemTemplate}\u0022/\u003E \n \n\u003CDataTemplate x:Key=\u0022NormalItemTemplate\u0022 x:DataType=\u0022x:Int32\u0022\u003E\n \u003CButton HorizontalAlignment=\u0022Stretch\u0022 VerticalAlignment=\u0022Stretch\u0022 \n\t Background=\u0022{ThemeResource SystemChromeLowColor}\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind}\u0022 /\u003E\n \u003C/Button\u003E\n\u003C/DataTemplate\u003E\n\n\u003CDataTemplate x:Key=\u0022AccentItemTemplate\u0022 x:DataType=\u0022x:Int32\u0022\u003E\n \u003CButton HorizontalAlignment=\u0022Stretch\u0022 VerticalAlignment=\u0022Stretch\u0022 \n\t Background=\u0022{ThemeResource SystemAccentColor}\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind}\u0022 /\u003E\n \u003C/Button\u003E\n\u003C/DataTemplate\u003E\n \n\u003C!-- The ItemsSource for this ItemsRepeater is a list of integers called NumberedItems.--\u003E\n \n\u003C!-- ActivityFeedLayout is a custom designed virtualizing layout that loads images only as you come \naccross them, defined in the code-behind. View the WinUI Gallery source code to see more\ndetails about this custom layout. --\u003E\u003C/ScrollViewer\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Automation.Peers;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Hosting;\nusing Microsoft.UI.Xaml.Input;\nusing System;\nusing System.Collections;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Collections.Specialized;\nusing System.Linq;\n\nprivate void LayoutBtn_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (((sender as RadioButtons)?.SelectedItem as RadioButton)?.Tag is string layoutKey)\n {\n repeater2.Layout = Resources[layoutKey] as Microsoft.UI.Xaml.Controls.VirtualizingLayout;\n\n layout2.Value = layoutKey;\n\n if (layoutKey == \u0022UniformGridLayout2\u0022)\n {\n SampleCodeLayout2.Value = @\u0022\u003CUniformGridLayout x:Key=\u0022\u0022UniformGridLayout2\u0022\u0022 MinItemWidth=\u0022\u0022108\u0022\u0022 MinItemHeight=\u0022\u0022108\u0022\u0022\n MinRowSpacing=\u0022\u002212\u0022\u0022 MinColumnSpacing=\u0022\u002212\u0022\u0022/\u003E\u0022;\n }\n else if (layoutKey == \u0022MyFeedLayout\u0022)\n {\n SampleCodeLayout2.Value = @\u0022\u003Ccommon:ActivityFeedLayout x:Key=\u0022\u0022MyFeedLayout\u0022\u0022 ColumnSpacing=\u0022\u002212\u0022\u0022\n RowSpacing=\u0022\u002212\u0022\u0022 MinItemSize=\u0022\u002280, 108\u0022\u0022/\u003E\u0022;\n }\n }\n }\n\npublic ObservableCollection\u003Cint\u003E Numbers { get; }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A flexible, primitive control for data-driven layouts.","relatedControls":["ItemsView","ScrollView","ScrollViewer","ListView","GridView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"itemsrepeater-3","controlId":"itemsrepeater","controlName":"ItemsRepeater","headerText":"ItemsRepeater with mixed-type collection","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003C!-- This is the ItemsRepeater used in this example: --\u003E\n\u003CItemsRepeater x:Name=\u0022MixedTypeRepeater\u0022 \n Margin=\u00220,0,12,0\u0022\n HorizontalAlignment=\u0022Stretch\u0022\n ItemTemplate=\u0022{StaticResource StringOrIntTemplateSelector}\u0022\u003E\n\n \u003CItemsRepeater.Layout\u003E\n \u003CUniformGridLayout MinItemWidth=\u0022200\u0022 MinItemHeight=\u0022200\u0022/\u003E\n \u003C/ItemsRepeater.Layout\u003E\n\u003C/ItemsRepeater\u003E\n\n\u003C!-- The ItemsSource is bound in the C# code-behind to an ObservableCollection called \nStringsAndInts. StringsAndInts has both string objects and integer objects. The ItemTemplate\nis a DataTemplateSelector called StringOrIntTemplateSelector, and is defined in the \ncode-behind and shown in the C# code-behind section below. The layout is a simple \nUniformGridLayout where each item is a 200x200 square. --\u003E\n \n\u003C!-- StringOrIntTemplateSelector assesses the type of an item, and returns StringDataTemplate if \nthe item is a string, and IntDataTemplate if the item is an integer. \nThe XAML code directly below binds the DataTemplateSelector to those two data templates, and \ndefines each of them: --\u003E\n \n\u003CStringOrIntTemplateSelector x:Key=\u0022StringOrIntTemplateSelector\u0022\n StringTemplate=\u0022{StaticResource StringDataTemplate}\u0022\n IntTemplate=\u0022{StaticResource IntDataTemplate}\u0022/\u003E \n \n\u003CDataTemplate x:Key=\u0022StringDataTemplate\u0022 x:DataType=\u0022x:String\u0022\u003E\n \u003CGrid Background=\u0022{ThemeResource SystemControlBackgroundAccentBrush}\u0022 Margin=\u002210\u0022\u003E\n \u003CTextBlock Padding=\u002210\u0022 Text=\u0022{x:Bind}\u0022 \n Foreground=\u0022{ThemeResource SystemControlForegroundChromeWhiteBrush}\u0022\n HorizontalAlignment=\u0022Center\u0022 TextWrapping=\u0022Wrap\u0022 \n VerticalAlignment=\u0022Center\u0022/\u003E\n \u003C/Grid\u003E\n\u003C/DataTemplate\u003E\n\n\u003CDataTemplate x:Key=\u0022IntDataTemplate\u0022 x:DataType=\u0022x:Int32\u0022\u003E\u003C/DataTemplate\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Automation.Peers;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Hosting;\nusing Microsoft.UI.Xaml.Input;\nusing System;\nusing System.Collections;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Collections.Specialized;\nusing System.Linq;\n\nprivate void InitializeData()\n {\n if (BarItems == null)\n {\n BarItems = new ObservableCollection\u003CBar\u003E();\n }\n BarItems.Add(new Bar(300, this.MaxLength));\n BarItems.Add(new Bar(25, this.MaxLength));\n BarItems.Add(new Bar(175, this.MaxLength));\n\n List\u003Cobject\u003E basicData = new List\u003Cobject\u003E\n {\n 64,\n \u0022Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u0022,\n 128,\n \u0022Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\u0022,\n 256,\n \u0022Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\u0022,\n 512,\n \u0022Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\u0022,\n 1024\n };\n MixedTypeRepeater.ItemsSource = basicData;\n\n List\u003CNestedCategory\u003E nestedCategories = new List\u003CNestedCategory\u003E\n {\n new NestedCategory(\u0022Fruits\u0022, GetFruits()),\n new NestedCategory(\u0022Vegetables\u0022, GetVegetables()),\n new NestedCategory(\u0022Grains\u0022, GetGrains()),\n new NestedCategory(\u0022Proteins\u0022, GetProteins())\n };\n\n outerRepeater.ItemsSource = nestedCategories;\n\n // Set sample code to display on page\u0027s initial load\n SampleCodeLayout.Value = @\u0022\u003CStackLayout x:Name=\u0022\u0022VerticalStackLayout\u0022\u0022 Orientation=\u0022\u0022Vertical\u0022\u0022 Spacing=\u0022\u00228\u0022\u0022/\u003E\u0022;\n\n SampleCodeDT.Value = @\u0022\u003CDataTemplate x:Key=\u0022\u0022HorizontalBarTemplate\u0022\u0022 x:DataType=\u0022\u0022l:Bar\u0022\u0022\u003E\n \u003CBorder Background=\u0022\u0022{ThemeResource SystemChromeLowColor}\u0022\u0022 Width=\u0022\u0022{x:Bind MaxLength}\u0022\u0022 \u003E\n \u003CRectangle Fill=\u0022\u0022{ThemeResource SystemAccentColor}\u0022\u0022 Width=\u0022\u0022{x:Bind Length}\u0022\u0022 \n Height=\u0022\u002224\u0022\u0022 HorizontalAlignment=\u0022\u0022Left\u0022\u0022/\u003E \n \u003C/Border\u003E\n\u003C/DataTemplate\u003E\u0022;\n\n SampleCodeLayout2.Value = @\u0022\u003Ccommon:ActivityFeedLayout x:Key=\u0022\u0022MyFeedLayout\u0022\u0022 ColumnSpacing=\u0022\u002212\u0022\u0022\n RowSpacing=\u0022\u002212\u0022\u0022 MinItemSize=\u0022\u002280, 108\u0022\u0022/\u003E\u0022;\n\n animatedScrollRepeater.ItemsSource = ColorList;\n\n animatedScrollRepeater.ElementPrepared \u002B= OnElementPrepared;\n}\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A flexible, primitive control for data-driven layouts.","relatedControls":["ItemsView","ScrollView","ScrollViewer","ListView","GridView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"itemsrepeater-4","controlId":"itemsrepeater","controlName":"ItemsRepeater","headerText":"Laying out nested ItemsRepeaters","xaml":"\u003C!-- The nested ItemsRepeater experience is achieved by creating one ItemsRepeater (outerRepeater below) \nand creating another ItemsRepeater (innerRepeater below) inside the outer one\u0027s DataTemplate. Below is \nthe outer ItemsRepeater definition and the DataTemplate it uses. --\u003E\n \n\u003CScrollViewer HorizontalScrollMode=\u0022Auto\u0022 HorizontalScrollBarVisibility=\u0022Auto\u0022\u003E\n \u003CItemsRepeater \n x:Name=\u0022outerRepeater\u0022\n VerticalAlignment=\u0022Top\u0022\n ItemTemplate =\u0022{StaticResource CategoryTemplate}\u0022\u003E\n \u003CItemsRepeater.Layout\u003E\n \u003CStackLayout Orientation=\u0022Vertical\u0022 /\u003E\n \u003C/ItemsRepeater.Layout\u003E\n \u003C/ItemsRepeater\u003E\n\u003C/ScrollViewer\u003E\n \n\u003CDataTemplate x:Key=\u0022CategoryTemplate\u0022 x:DataType=\u0022l:NestedCategory\u0022\u003E\n \u003CStackPanel\u003E\n \u003CTextBlock Text=\u0022{x:Bind CategoryName}\u0022 Padding=\u00228\u0022 Style=\u0022{StaticResource TitleTextBlockStyle}\u0022/\u003E\n \u003CItemsRepeater x:Name=\u0022innerRepeater\u0022\n ItemsSource=\u0022{x:Bind CategoryItems}\u0022\n ItemTemplate=\u0022{StaticResource StringDataTemplateColor}\u0022\u003E\n \u003CItemsRepeater.Layout\u003E\n \u003CStackLayout Orientation=\u0022Horizontal\u0022 /\u003E\n \u003C/ItemsRepeater.Layout\u003E\n \u003C/ItemsRepeater\u003E\n \u003C/StackPanel\u003E\n\u003C/DataTemplate\u003E\n \n\u003C!-- The DataTemplate shown above is bound to a custom-class type called NestedCategory, \nwhich is defined in the code-behind. NestedCategory objects have the following two attributes: \na CategoryName (string), and a collection of strings called CategoryItems. --\u003E\n \n\u003C!-- The inner ItemsRepeater is bound to its own, separate DataTemplate called StringDataTemplateColor: --\u003E\n \n\u003CDataTemplate x:Key=\u0022StringDataTemplateColor\u0022 x:DataType=\u0022x:String\u0022\u003E\n \u003CGrid Background=\u0022{StaticResource SystemControlBackgroundAccentBrush}\u0022 Margin=\u002210, 0, 10 10\u0022\u003E\u003C/Grid\u003E\u003C/DataTemplate\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Automation.Peers;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Hosting;\nusing Microsoft.UI.Xaml.Input;\nusing System;\nusing System.Collections;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Collections.Specialized;\nusing System.Linq;\n\nprivate void InitializeData()\n {\n if (BarItems == null)\n {\n BarItems = new ObservableCollection\u003CBar\u003E();\n }\n BarItems.Add(new Bar(300, this.MaxLength));\n BarItems.Add(new Bar(25, this.MaxLength));\n BarItems.Add(new Bar(175, this.MaxLength));\n\n List\u003Cobject\u003E basicData = new List\u003Cobject\u003E\n {\n 64,\n \u0022Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u0022,\n 128,\n \u0022Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\u0022,\n 256,\n \u0022Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\u0022,\n 512,\n \u0022Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\u0022,\n 1024\n };\n MixedTypeRepeater.ItemsSource = basicData;\n\n List\u003CNestedCategory\u003E nestedCategories = new List\u003CNestedCategory\u003E\n {\n new NestedCategory(\u0022Fruits\u0022, GetFruits()),\n new NestedCategory(\u0022Vegetables\u0022, GetVegetables()),\n new NestedCategory(\u0022Grains\u0022, GetGrains()),\n new NestedCategory(\u0022Proteins\u0022, GetProteins())\n };\n\n outerRepeater.ItemsSource = nestedCategories;\n\n // Set sample code to display on page\u0027s initial load\n SampleCodeLayout.Value = @\u0022\u003CStackLayout x:Name=\u0022\u0022VerticalStackLayout\u0022\u0022 Orientation=\u0022\u0022Vertical\u0022\u0022 Spacing=\u0022\u00228\u0022\u0022/\u003E\u0022;\n\n SampleCodeDT.Value = @\u0022\u003CDataTemplate x:Key=\u0022\u0022HorizontalBarTemplate\u0022\u0022 x:DataType=\u0022\u0022l:Bar\u0022\u0022\u003E\n \u003CBorder Background=\u0022\u0022{ThemeResource SystemChromeLowColor}\u0022\u0022 Width=\u0022\u0022{x:Bind MaxLength}\u0022\u0022 \u003E\n \u003CRectangle Fill=\u0022\u0022{ThemeResource SystemAccentColor}\u0022\u0022 Width=\u0022\u0022{x:Bind Length}\u0022\u0022 \n Height=\u0022\u002224\u0022\u0022 HorizontalAlignment=\u0022\u0022Left\u0022\u0022/\u003E \n \u003C/Border\u003E\n\u003C/DataTemplate\u003E\u0022;\n\n SampleCodeLayout2.Value = @\u0022\u003Ccommon:ActivityFeedLayout x:Key=\u0022\u0022MyFeedLayout\u0022\u0022 ColumnSpacing=\u0022\u002212\u0022\u0022\n RowSpacing=\u0022\u002212\u0022\u0022 MinItemSize=\u0022\u002280, 108\u0022\u0022/\u003E\u0022;\n\n animatedScrollRepeater.ItemsSource = ColorList;\n\n animatedScrollRepeater.ElementPrepared \u002B= OnElementPrepared;\n}\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A flexible, primitive control for data-driven layouts.","relatedControls":["ItemsView","ScrollView","ScrollViewer","ListView","GridView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"itemsrepeater-5","controlId":"itemsrepeater","controlName":"ItemsRepeater","headerText":"Animated Scrolling and Content Display","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003C!-- The below code shows the XAML for the ItemsRepeater as well as the\ncolor-changing rectangle besides it. --\u003E\n\n\u003CGrid\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u00221*\u0022/\u003E\n \u003CColumnDefinition Width=\u00221*\u0022/\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n\n \u003CScrollViewer x:Name=\u0022Animated_ScrollViewer\u0022 \n Grid.Column=\u00220\u0022\n ViewChanging=\u0022Animated_ScrollViewer_ViewChanging\u0022\u003E\n \u003CItemsRepeater x:Name=\u0022animatedScrollRepeater\u0022 \u003E\n \u003CItemsRepeater.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022x:String\u0022\u003E\n \u003CButton Content=\u0022{x:Bind}\u0022\n Background=\u0022{x:Bind}\u0022\n Click=\u0022Animated_GotItem\u0022 \n GotFocus=\u0022Animated_GotItem\u0022 \n HorizontalAlignment=\u0022Stretch\u0022\n Foreground=\u0022{ThemeResource ButtonForeground}\u0022/\u003E\n \u003C/DataTemplate\u003E\n \u003C/ItemsRepeater.ItemTemplate\u003E\n \u003C/ItemsRepeater\u003E\n \u003C/ScrollViewer\u003E\n\n \u003CRectangle x:Name=\u0022colorRectangle\u0022\n Grid.Column=\u00221\u0022\n Stroke=\u0022Black\u0022\n Margin=\u002210,0,0,0\u0022/\u003E\n\u003C/Grid\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Automation.Peers;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Hosting;\nusing Microsoft.UI.Xaml.Input;\nusing System;\nusing System.Collections;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Collections.Specialized;\nusing System.Linq;\n\nprivate void InitializeData()\n {\n if (BarItems == null)\n {\n BarItems = new ObservableCollection\u003CBar\u003E();\n }\n BarItems.Add(new Bar(300, this.MaxLength));\n BarItems.Add(new Bar(25, this.MaxLength));\n BarItems.Add(new Bar(175, this.MaxLength));\n\n List\u003Cobject\u003E basicData = new List\u003Cobject\u003E\n {\n 64,\n \u0022Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u0022,\n 128,\n \u0022Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\u0022,\n 256,\n \u0022Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\u0022,\n 512,\n \u0022Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\u0022,\n 1024\n };\n MixedTypeRepeater.ItemsSource = basicData;\n\n List\u003CNestedCategory\u003E nestedCategories = new List\u003CNestedCategory\u003E\n {\n new NestedCategory(\u0022Fruits\u0022, GetFruits()),\n new NestedCategory(\u0022Vegetables\u0022, GetVegetables()),\n new NestedCategory(\u0022Grains\u0022, GetGrains()),\n new NestedCategory(\u0022Proteins\u0022, GetProteins())\n };\n\n outerRepeater.ItemsSource = nestedCategories;\n\n // Set sample code to display on page\u0027s initial load\n SampleCodeLayout.Value = @\u0022\u003CStackLayout x:Name=\u0022\u0022VerticalStackLayout\u0022\u0022 Orientation=\u0022\u0022Vertical\u0022\u0022 Spacing=\u0022\u00228\u0022\u0022/\u003E\u0022;\n\n SampleCodeDT.Value = @\u0022\u003CDataTemplate x:Key=\u0022\u0022HorizontalBarTemplate\u0022\u0022 x:DataType=\u0022\u0022l:Bar\u0022\u0022\u003E\n \u003CBorder Background=\u0022\u0022{ThemeResource SystemChromeLowColor}\u0022\u0022 Width=\u0022\u0022{x:Bind MaxLength}\u0022\u0022 \u003E\n \u003CRectangle Fill=\u0022\u0022{ThemeResource SystemAccentColor}\u0022\u0022 Width=\u0022\u0022{x:Bind Length}\u0022\u0022 \n Height=\u0022\u002224\u0022\u0022 HorizontalAlignment=\u0022\u0022Left\u0022\u0022/\u003E \n \u003C/Border\u003E\n\u003C/DataTemplate\u003E\u0022;\n\n SampleCodeLayout2.Value = @\u0022\u003Ccommon:ActivityFeedLayout x:Key=\u0022\u0022MyFeedLayout\u0022\u0022 ColumnSpacing=\u0022\u002212\u0022\u0022\n RowSpacing=\u0022\u002212\u0022\u0022 MinItemSize=\u0022\u002280, 108\u0022\u0022/\u003E\u0022;\n\n animatedScrollRepeater.ItemsSource = ColorList;\n\n animatedScrollRepeater.ElementPrepared \u002B= OnElementPrepared;\n}\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A flexible, primitive control for data-driven layouts.","relatedControls":["ItemsView","ScrollView","ScrollViewer","ListView","GridView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"itemsrepeater-6","controlId":"itemsrepeater","controlName":"ItemsRepeater","headerText":"Virtualized, Content-Heavy Layout with Filtering and Sorting","xaml":"\u003C!-- XAML Code: --\u003E\n\u003CItemsRepeaterScrollHost\u003E\n \u003CScrollViewer\u003E\n \u003CItemsRepeater x:Name=\u0022VariedImageSizeRepeater\u0022 \n\t\t\t ItemTemplate=\u0022{StaticResource RecipeTemplate}\u0022\u003E\n\t \n \u003C!-- IMPORTANT: This ItemsRepeater uses a custom-created layout \n\t\tcalled VariedImageSize Layout (referenced below).You can find \n \t\tthe full source code for this layout in the file \n\t\tVariedImageSizeLayout.cs in the WinUI Gallery repo. --\u003E\n\n \u003CItemsRepeater.Layout\u003E\n \u003Ccommon:VariedImageSizeLayout Width=\u0022200\u0022 /\u003E\n \u003C/ItemsRepeater.Layout\u003E\n \u003C/ItemsRepeater\u003E\n \u003C/ScrollViewer\u003E\n\u003C/ItemsRepeaterScrollHost\u003E\n\n\u003C!-- DataTemplate used: --\u003E\n\u003C!-- This repeater holds Recipe objects, which is a custom class defined in \n the code-behind, and shown below. --\u003E\n\u003CDataTemplate x:DataType=\u0022l:Recipe\u0022 x:Key=\u0022RecipeTemplate\u0022\u003E\n \u003CStackPanel BorderThickness=\u00221\u0022 Background=\u0022LightGray\u0022 Margin=\u00225\u0022\u003E\n \u003CStackPanel Background=\u0022{x:Bind Color}\u0022 Margin=\u00228\u0022 Height=\u002275\u0022 Opacity=\u0022.8\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Num.ToString()}\u0022 FontSize=\u002235\u0022 TextAlignment=\u0022Center\u0022 \n Padding=\u002212\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003CTextBlock \n x:Name=\u0022recipeName\u0022 \n Text=\u0022{x:Bind Name}\u0022\n TextWrapping=\u0022Wrap\u0022\n Margin=\u002215,0,10,0\u0022 \n Style=\u0022{StaticResource TitleTextBlockStyle}\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Ingredients}\u0022 Style=\u0022{StaticResource BodyTextBlockStyle}\u0022 Margin=\u002215,0,15,15\u0022/\u003E\n \u003C/StackPanel\u003E\n\u003C/DataTemplate\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Automation.Peers;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Hosting;\nusing Microsoft.UI.Xaml.Input;\nusing System;\nusing System.Collections;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Collections.Specialized;\nusing System.Linq;\n\npublic void FilterRecipes_FilterChanged(object sender, RoutedEventArgs e)\n {\n UpdateSortAndFilter();\n }\n\nprivate void UpdateSortAndFilter()\n {\n // Find all recipes that ingredients include what was typed into the filtering text box\n var filteredTypes = staticRecipeData.Where(i =\u003E i.Ingredients.Contains(FilterRecipes.Text, StringComparison.InvariantCultureIgnoreCase));\n // Sort the recipes by whichever sorting mode was last selected (least to most ingredients by default)\n var sortedFilteredTypes = IsSortDescending ?\n filteredTypes.OrderByDescending(i =\u003E i.IngList.Count()) :\n filteredTypes.OrderBy(i =\u003E i.IngList.Count());\n // Re-initialize MyItemsSource object with this newly filtered data\n filteredRecipeData.InitializeCollection(sortedFilteredTypes);\n\n var peer = FrameworkElementAutomationPeer.FromElement(VariedImageSizeRepeater);\n\n peer.RaiseNotificationEvent(AutomationNotificationKind.Other, AutomationNotificationProcessing.ImportantMostRecent, $\u0022Filtered recipes, {sortedFilteredTypes.Count()} results.\u0022, \u0022RecipesFilteredNotificationActivityId\u0022);\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A flexible, primitive control for data-driven layouts.","relatedControls":["ItemsView","ScrollView","ScrollViewer","ListView","GridView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"itemsview-1","controlId":"itemsview","controlName":"ItemsView","headerText":"Basic ItemsView","xaml":"\u003CDataTemplate x:Key=\u0022ImageTemplate\u0022 x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CItemContainer HorizontalAlignment=\u0022Left\u0022 Width=\u0022200\u0022 Height=\u0022140\u0022 AutomationProperties.Name=\u0022{x:Bind Title}\u0022\u003E\n \u003CImage Stretch=\u0022UniformToFill\u0022 HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022 Source=\u0022{x:Bind ImageLocation}\u0022 Margin=\u00224\u0022 AutomationProperties.AccessibilityView=\u0022Raw\u0022/\u003E\n \u003C/ItemContainer\u003E\n\u003C/DataTemplate\u003E\n\n\u003CItemsView Width=\u0022220\u0022 Height=\u0022400\u0022 HorizontalAlignment=\u0022Left\u0022\n ItemTemplate=\u0022{StaticResource ImageTemplate}\u0022 IsItemInvokedEnabled=\u0022True\u0022 ItemInvoked=\u0022BasicItemsView_ItemInvoked\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Threading.Tasks;\n\nprivate void BasicItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs e)\n {\n if (e.InvokedItem is not CustomDataObject invokedItem)\n {\n return;\n }\n\n tblBasicInvokeOutput.Text = \u0022You invoked \u0022 \u002B invokedItem.Title \u002B \u0022.\u0022;\n }\n\nprivate void ItemsViewPage_Loaded(object sender, RoutedEventArgs e)\n {\n this.Loaded -= ItemsViewPage_Loaded;\n\n if (SwappableLayoutsItemsView != null)\n {\n SwappableLayoutsItemsView.ScrollView.ViewChanged \u002B= SwappableLayoutsItemsViewScrollView_ViewChanged;\n\n linedFlowLayout = SwappableLayoutsItemsView.Layout as LinedFlowLayout;\n linedFlowLayoutItemTemplate = SwappableLayoutsItemsView.ItemTemplate as DataTemplate;\n }\n\n // Get data objects and place them into an ObservableCollection\n List\u003CCustomDataObject\u003E tempList = CustomDataObject.GetDataObjects(includeAllItems: true);\n ObservableCollection\u003CCustomDataObject\u003E Items = new ObservableCollection\u003CCustomDataObject\u003E(tempList);\n\n if (BasicItemsView != null)\n {\n BasicItemsView.ItemsSource = Items;\n }\n\n Task.Run(delegate ()\n {\n _ = DispatcherQueue.TryEnqueue(Microsoft.UI.Dispatching.DispatcherQueuePriority.Low, () =\u003E\n {\n if (SwappableLayoutsItemsView != null)\n {\n // Temporarily setting the items source asynchronously to avoid LinedFlowLayout bug.\n SwappableLayoutsItemsView.ItemsSource = Items;\n }\n });\n });\n\n if (SwappableSelectionModesItemsView != null)\n {\n SwappableSelectionModesItemsView.ItemsSource = Items;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items using various layouts.","relatedControls":["AnnotatedScrollBar","ItemsRepeater","ListView","GridView","ScrollView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"itemsview-2","controlId":"itemsview","controlName":"ItemsView","headerText":"ItemsView with swappable layouts","xaml":"\u003CDataTemplate x:Key=\u0022LinedFlowLayoutItemTemplate\u0022 x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CItemContainer AutomationProperties.Name=\u0022{x:Bind Title}\u0022\u003E\n \u003CGrid\u003E\n \u003CImage Source=\u0022{x:Bind ImageLocation}\u0022 Stretch=\u0022UniformToFill\u0022 HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022 MinWidth=\u002270\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Vertical\u0022 Height=\u002240\u0022 VerticalAlignment=\u0022Bottom\u0022 Padding=\u00225,1,5,1\u0022 Background=\u0022{ThemeResource SystemControlBackgroundBaseMediumBrush}\u0022 Opacity=\u0022.75\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Likes}\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003CTextBlock Text=\u0022 Likes\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/StackPanel\u003E\n \u003C/Grid\u003E\n \u003C/ItemContainer\u003E\n\u003C/DataTemplate\u003E\n\n\u003CItemsView Width=\u0022500\u0022 Height=\u0022400\u0022 HorizontalAlignment=\u0022Left\u0022\n ItemTemplate=\u0022{StaticResource LinedFlowLayoutItemTemplate}\u0022\u003E\n \u003CItemsView.Layout\u003E\n \u003CLinedFlowLayout ItemsStretch=\u0022Fill\u0022 LineHeight=\u0022160\u0022 LineSpacing=\u00225\u0022 MinItemSpacing=\u00225\u0022/\u003E\n \u003C/ItemsView.Layout\u003E\n\u003C/ItemsView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Threading.Tasks;\n\nprivate void RbLayout_Checked(object sender, RoutedEventArgs e)\n {\n if (sender is RadioButton rb \u0026\u0026 SwappableLayoutsItemsView != null)\n {\n switch (rb.Content.ToString())\n {\n case \u0022LinedFlowLayout\u0022:\n if (linedFlowLayout != null \u0026\u0026 linedFlowLayoutItemTemplate != null)\n {\n SwappableLayoutsItemsView.Layout = linedFlowLayout;\n SwappableLayoutsItemsView.ItemTemplate = linedFlowLayoutItemTemplate;\n\n spLinedFlowLayoutOptions.Visibility = Visibility.Visible;\n spStackLayoutOptions.Visibility = Visibility.Collapsed;\n spUniformGridLayoutOptions.Visibility = Visibility.Collapsed;\n }\n break;\n\n case \u0022StackLayout\u0022:\n if (stackLayout == null)\n {\n stackLayout = new StackLayout()\n {\n Spacing = 5\n };\n }\n\n if (stackLayoutItemTemplate == null)\n {\n stackLayoutItemTemplate = Resources[\u0022StackLayoutItemTemplate\u0022] as DataTemplate;\n }\n\n SwappableLayoutsItemsView.Layout = stackLayout;\n SwappableLayoutsItemsView.ItemTemplate = stackLayoutItemTemplate;\n\n spLinedFlowLayoutOptions.Visibility = Visibility.Collapsed;\n spStackLayoutOptions.Visibility = Visibility.Visible;\n spUniformGridLayoutOptions.Visibility = Visibility.Collapsed;\n break;\n\n case \u0022UniformGridLayout\u0022:\n if (uniformGridLayout == null)\n {\n uniformGridLayout = new UniformGridLayout()\n {\n MinRowSpacing = 5,\n MinColumnSpacing = 5,\n MaximumRowsOrColumns = 3\n };\n }\n\n if (uniformGridLayoutItemTemplate == null)\n {\n uniformGridLayoutItemTemplate = Resources[\u0022UniformGridLayoutItemTemplate\u0022] as DataTemplate;\n }\n\n SwappableLayoutsItemsView.Layout = uniformGridLayout;\n SwappableLayoutsItemsView.ItemTemplate = uniformGridLayoutItemTemplate;\n\n spLinedFlowLayoutOptions.Visibility = Visibility.Collapsed;\n spStackLayoutOptions.Visibility = Visibility.Collapsed;\n spUniformGridLayoutOptions.Visibility = Visibility.Visible;\n break;\n }\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items using various layouts.","relatedControls":["AnnotatedScrollBar","ItemsRepeater","ListView","GridView","ScrollView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"itemsview-3","controlId":"itemsview","controlName":"ItemsView","headerText":"ItemsView item invocation and selection","xaml":"\u003CDataTemplate x:Key=\u0022UniformGridLayoutItemTemplate\u0022 x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CItemContainer AutomationProperties.Name=\u0022{x:Bind Title}\u0022\u003E\n \u003CGrid Width=\u0022150\u0022\u003E\n \u003CImage Source=\u0022{x:Bind ImageLocation}\u0022 Stretch=\u0022UniformToFill\u0022 HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Vertical\u0022 Height=\u002240\u0022 VerticalAlignment=\u0022Bottom\u0022 Padding=\u00225,1,5,1\u0022 Background=\u0022{ThemeResource SystemControlBackgroundBaseMediumBrush}\u0022 Opacity=\u0022.75\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Likes}\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003CTextBlock Text=\u0022 Likes\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Foreground=\u0022{ThemeResource SystemControlForegroundAltHighBrush}\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/StackPanel\u003E\n \u003C/Grid\u003E\n \u003C/ItemContainer\u003E\n\u003C/DataTemplate\u003E\n\n\u003CItemsView Width=\u0022500\u0022 Height=\u0022400\u0022 HorizontalAlignment=\u0022Left\u0022\n SelectionMode=\u0022...\u0022\n IsItemInvokedEnabled=\u0022...\u0022\n ItemTemplate=\u0022{StaticResource UniformGridLayoutItemTemplate}\u0022\n ItemInvoked=\u0022SwappableSelectionModesItemsView_ItemInvoked\u0022\n SelectionChanged=\u0022SwappableSelectionModesItemsView_SelectionChanged\u0022\u003E\n \u003CItemsView.Layout\u003E\n \u003CUniformGridLayout MinRowSpacing=\u00225\u0022 MinColumnSpacing=\u00225\u0022 MaximumRowsOrColumns=\u00223\u0022/\u003E\n \u003C/ItemsView.Layout\u003E\n\u003C/ItemsView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Threading.Tasks;\n\nprivate void SwappableSelectionModesItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs e)\n {\n if (e.InvokedItem is not CustomDataObject invokedItem)\n {\n return;\n }\n\n tblInvocationOutput.Text = \u0022You invoked \u0022 \u002B invokedItem.Title \u002B \u0022.\u0022;\n }\n\nprivate void SwappableSelectionModesItemsView_SelectionChanged(ItemsView sender, ItemsViewSelectionChangedEventArgs e)\n {\n if (SwappableSelectionModesItemsView != null)\n {\n tblSelectionOutput.Text = string.Format(\u0022You have selected {0} item(s).\u0022, SwappableSelectionModesItemsView.SelectedItems.Count);\n }\n }\n\nprivate void CmbSelectionMode_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (SwappableSelectionModesItemsView != null \u0026\u0026 sender is ComboBox cmb)\n {\n SwappableSelectionModesItemsView.SelectionMode = (ItemsViewSelectionMode)cmb.SelectedIndex;\n }\n }\n\nprivate void ChkIsItemInvokedEnabled_IsCheckedChanged(object sender, RoutedEventArgs e)\n {\n tblInvocationOutput.Text = string.Empty;\n\n if (SwappableSelectionModesItemsView != null \u0026\u0026 chkIsItemInvokedEnabled != null)\n {\n SwappableSelectionModesItemsView.IsItemInvokedEnabled = chkIsItemInvokedEnabled.IsChecked is true;\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items using various layouts.","relatedControls":["AnnotatedScrollBar","ItemsRepeater","ListView","GridView","ScrollView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"listbox-1","controlId":"listbox","controlName":"ListBox","headerText":"A ListBox with items defined inline and its minimum width set.","xaml":"\u003CListBox SelectionChanged=\u0022ColorListBox_SelectionChanged\u0022 MinWidth=\u0022200\u0022\u003E\n \u003Cx:String\u003EBlue\u003C/x:String\u003E\n \u003Cx:String\u003EGreen\u003C/x:String\u003E\n \u003Cx:String\u003ERed\u003C/x:String\u003E\n \u003Cx:String\u003EYellow\u003C/x:String\u003E\n\u003C/ListBox\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\n\nprivate void ColorListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n string? colorName = e.AddedItems[0].ToString();\n switch (colorName)\n {\n case \u0022Yellow\u0022:\n Control1Output.Fill = new SolidColorBrush(Microsoft.UI.Colors.Yellow);\n break;\n case \u0022Green\u0022:\n Control1Output.Fill = new SolidColorBrush(Microsoft.UI.Colors.Green);\n break;\n case \u0022Blue\u0022:\n Control1Output.Fill = new SolidColorBrush(Microsoft.UI.Colors.Blue);\n break;\n case \u0022Red\u0022:\n Control1Output.Fill = new SolidColorBrush(Microsoft.UI.Colors.Red);\n break;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents an inline list of items that the user can select from.","relatedControls":["ComboBox","RadioButton","CheckBox","AutoSuggestBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","docs":[{"title":"ListBox - API","uri":"https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.listbox"},{"title":"ListBoxItem - API","uri":"https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.listboxitem"}]},{"id":"listbox-2","controlId":"listbox","controlName":"ListBox","headerText":"A ListBox with its ItemsSource and Height set.","xaml":"\u003CListBox ItemsSource=\u0022{x:Bind Fonts}\u0022 DisplayMemberPath=\u0022Item1\u0022 SelectedValuePath=\u0022Item2\u0022 Height=\u0022164\u0022 Loaded=\u0022ListBox2_Loaded\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents an inline list of items that the user can select from.","relatedControls":["ComboBox","RadioButton","CheckBox","AutoSuggestBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","docs":[{"title":"ListBox - API","uri":"https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.listbox"},{"title":"ListBoxItem - API","uri":"https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.listboxitem"}]},{"id":"listview-1","controlId":"listview","controlName":"ListView","headerText":"Basic ListView with Simple DataTemplate","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003CListView\n x:Name=\u0022BaseExample\u0022\n ItemTemplate=\u0022{StaticResource ContactListViewTemplate}\u0022\n BorderThickness=\u00221\u0022\n BorderBrush=\u0022{ThemeResource SystemControlForegroundBaseMediumLowBrush}\u0022\n HorizontalAlignment=\u0022Left\u0022/\u003E\n \n\u003C!-- In this example, the ListView\u0027s ItemTemplate property is bound to a data template (shown below)\ncalled ContactListViewTemplate, defined in a Page.Resources section. --\u003E\n \n\u003CDataTemplate x:Key=\u0022ContactListViewTemplate\u0022 x:DataType=\u0022local:Contact\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Name}\u0022 x:Phase=\u00221\u0022 Margin=\u00220,5,0,5\u0022/\u003E\n\u003C/DataTemplate\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\n\npublic ListViewPage()\n {\n this.InitializeComponent();\n // Add first item to inverted list so it\u0027s not empty\n AddItemToEnd();\n BaseExample.Loaded \u002B= BaseExample_Loaded;\n }\n\nprivate void AddItemToEnd()\n {\n InvertedListView.Items.Add(\n new Message(\u0022Message \u0022 \u002B \u002B\u002BmessageNumber, DateTime.Now, HorizontalAlignment.Right)\n );\n }\n\n private void MessageReceived(object sender, RoutedEventArgs e)\n {\n InvertedListView.Items.Add(\n new Message(\u0022Message \u0022 \u002B \u002B\u002BmessageNumber, DateTime.Now, HorizontalAlignment.Left)\n );\n }\n\n //===================================================================================================================\n // ListView with Images Sample\n //===================================================================================================================\n\n private void TextBlock_IsTextTrimmedChanged(TextBlock sender, IsTextTrimmedChangedEventArgs args)\n {\n var textBlock = sender as TextBlock;\n var text = textBlock.IsTextTrimmed ? textBlock.Text : string.Empty;\n\n ToolTipService.SetToolTip(textBlock, text);\n }\n\n //===================================================================================================================\n // ListView with context menu\n //===================================================================================================================\n\n private void ContactDeleteMenuItem_Click(object sender, RoutedEventArgs e)\n {\n if ((sender as FrameworkElement)?.DataContext is not Contact contact)\n {\n return;\n }\n\n contacts4ContextMenu.Remove(contact);\n }\n}\n\npublic class Message\n{\n public string MsgText { get; private set; }\n public DateTime MsgDateTime { get; private set; }\n public HorizontalAlignment MsgAlignment { get; set; }\n public Message(string text, DateTime dateTime, HorizontalAlignment align)\n {\n MsgText = text;\n MsgDateTime = dateTime;\n MsgAlignment = align;\n }\n\n public override string ToString()\n {\n return MsgDateTime.ToString() \u002B \u0022 \u0022 \u002B MsgText;\n }\n}\n\npublic class Contact\n{\n public string FirstName { get; private set; }\n public string LastName { get; private set; }\n public string Company { get; private set; }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items in a vertical list.","relatedControls":["ItemsView","GridView","StandardUICommand","FlipView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"listview-2","controlId":"listview","controlName":"ListView","headerText":"ListView with Selection Support","xaml":"\u003C!-- To create this sample, add/change the following properties onto the code for the base example above: --\u003E\n \n\u003CListView \n SelectionMode=\u0022...\u0022 \n ItemTemplate=\u0022{StaticResource ContactListViewTemplate}\u0022/\u003E\n \n\u003C!-- DataTemplate used: --\u003E\n\n\u003CDataTemplate x:Key=\u0022ContactListViewTemplate\u0022 x:DataType=\u0022local:Contact\u0022\u003E\n \u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022*\u0022/\u003E\n \u003CRowDefinition Height=\u0022*\u0022/\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022/\u003E\n \u003CColumnDefinition Width=\u0022*\u0022/\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003CEllipse x:Name=\u0022Ellipse\u0022\n Grid.RowSpan=\u00222\u0022\n Width =\u002232\u0022\n Margin=\u00226\u0022\n VerticalAlignment=\u0022Center\u0022\n HorizontalAlignment=\u0022Center\u0022\n Fill=\u0022{ThemeResource SystemControlBackgroundBaseMediumBrush}\u0022/\u003E\n \u003CTextBlock Grid.Column=\u00221\u0022\n Text=\u0022{x:Bind Name}\u0022\n x:Phase=\u00221\u0022\n Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022\n Margin=\u002212,6,0,0\u0022/\u003E\n \u003CTextBlock Grid.Column=\u00221\u0022\n Grid.Row=\u00221\u0022\n Text=\u0022{x:Bind Company}\u0022\n x:Phase=\u00222\u0022\n Style=\u0022{ThemeResource BodyTextBlockStyle}\u0022\n Margin=\u002212,0,0,6\u0022/\u003E\n \u003C/Grid\u003E\n\u003C/DataTemplate\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\n\nprivate void SelectionModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (Control2 != null)\n {\n string? selectionMode = e.AddedItems[0].ToString();\n switch (selectionMode)\n {\n case \u0022None\u0022:\n Control2.SelectionMode = ListViewSelectionMode.None;\n break;\n case \u0022Single\u0022:\n Control2.SelectionMode = ListViewSelectionMode.Single;\n break;\n case \u0022Multiple\u0022:\n Control2.SelectionMode = ListViewSelectionMode.Multiple;\n break;\n case \u0022Extended\u0022:\n Control2.SelectionMode = ListViewSelectionMode.Extended;\n break;\n }\n }\n }\n\nprotected override async void OnNavigatedTo(NavigationEventArgs e)\n {\n Items = ControlInfoDataSource.Instance.Groups.Take(3).SelectMany(g =\u003E g.Items).ToList();\n BaseExample.ItemsSource = await Contact.GetContactsAsync();\n Control2.ItemsSource = await Contact.GetContactsAsync();\n contacts1 = await Contact.GetContactsAsync();\n\n DragDropListView.ItemsSource = contacts1;\n\n contacts2.Add(new Contact(\u0022John\u0022, \u0022Doe\u0022, \u0022ABC Printers\u0022));\n contacts2.Add(new Contact(\u0022Jane\u0022, \u0022Doe\u0022, \u0022XYZ Refrigerators\u0022));\n contacts2.Add(new Contact(\u0022Santa\u0022, \u0022Claus\u0022, \u0022North Pole Toy Factory Inc.\u0022));\n DragDropListView2.ItemsSource = contacts2;\n\n Control4.ItemsSource = WinUIGallery.ControlPages.CustomDataObject.GetDataObjects();\n ContactsCVS.Source = await Contact.GetContactsGroupedAsync();\n\n // Initialize list of contacts to be filtered\n contacts3 = await Contact.GetContactsAsync();\n contacts3Filtered = new ObservableCollection\u003CContact\u003E(contacts3);\n\n // Initializze list of contacts for context menu sample\n contacts4ContextMenu = await Contact.GetContactsAsync();\n ContextMenuList.ItemsSource = contacts4ContextMenu;\n\n FilteredListView.ItemsSource = contacts3Filtered;\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items in a vertical list.","relatedControls":["ItemsView","GridView","StandardUICommand","FlipView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"listview-3","controlId":"listview","controlName":"ListView","headerText":"ListViews with Drag, Drop, and Reordering Support","xaml":"\u003C!-- Full code to implement dragging and dropping between lists can be found in the \nsource code for the WinUI Gallery. --\u003E\n\n\u003C!-- The following properties should be added to the ListView definitions to build this sample. --\u003E\n\u003CListView CanDragItems=\u0022True\u0022 CanReorderItems=\u0022True\u0022 AllowDrop=\u0022True\u0022\n SelectionMode=\u0022Single\u0022 /\u003E\n \n\u003C!-- DataTemplate used is the same as the above sample. --\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\n\nprivate void ListView_DragItemsStarting(object sender, DragItemsStartingEventArgs e)\n {\n var contactsToMove = e.Items.OfType\u003CContact\u003E().ToList();\n e.Data.Properties[\u0022contacts\u0022] = contactsToMove;\n e.Data.RequestedOperation = DataPackageOperation.Move;\n }\n\nprivate void Source_DragOver(object sender, DragEventArgs e)\n {\n e.AcceptedOperation = DataPackageOperation.Move;\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items in a vertical list.","relatedControls":["ItemsView","GridView","StandardUICommand","FlipView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"listview-4","controlId":"listview","controlName":"ListView","headerText":"ListView with Grouped Headers","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003C!-- ListViews with grouped items must be bound to a CollectionViewSource, as shown below.\nThis CollectionViewSource is defined in the XAML below, but is bound to an ItemsSource in the C#\ncode-behind. See the C# code below for more details on how to create/bind to a grouped list. --\u003E\n\n\u003CCollectionViewSource x:Name=\u0022ContactsCVS\u0022 IsSourceGrouped=\u0022True\u0022/\u003E\n \n\u003CListView ItemsSource=\u0022{x:Bind ContactsCVS.View, Mode=OneWay}\u0022\u003E\n \u003CListView.ItemsPanel\u003E\n \u003CItemsPanelTemplate\u003E\n \u003CItemsStackPanel AreStickyGroupHeadersEnabled=\u0022...\u0022/\u003E\n \u003C/ItemsPanelTemplate\u003E\n \u003C/ListView.ItemsPanel\u003E\n \u003CListView.GroupStyle\u003E\n \u003CGroupStyle \u003E\n \u003CGroupStyle.HeaderTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:GroupInfoList\u0022\u003E\n \u003CBorder AutomationProperties.AccessibilityView=\u0022Raw\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Key}\u0022 Style=\u0022{ThemeResource TitleTextBlockStyle}\u0022 AutomationProperties.AccessibilityView=\u0022Raw\u0022/\u003E\n \u003C/Border\u003E\n \u003C/DataTemplate\u003E\n \u003C/GroupStyle.HeaderTemplate\u003E\n \u003C/GroupStyle\u003E\n \u003C/ListView.GroupStyle\u003E\n\u003C/ListView\u003E\n \n\u003C!-- Data template used is same as above examples. --\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\n\nprivate void StackPanel_loaded(object sender, RoutedEventArgs e)\n {\n stackPanelObj = sender as ItemsStackPanel;\n }\n\nprivate void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)\n {\n if (StickySwitch != null \u0026\u0026 stackPanelObj is not null)\n {\n if (StickySwitch.IsOn == true)\n {\n stackPanelObj.AreStickyGroupHeadersEnabled = true;\n }\n else\n {\n stackPanelObj.AreStickyGroupHeadersEnabled = false;\n }\n }\n }\n\npublic partial class GroupInfoList : List\u003Cobject\u003E\n{\n public GroupInfoList(IEnumerable\u003Cobject\u003E items) : base(items)\n {\n }\n public object? Key { get; set; }\n\n public override string ToString()\n {\n return \u0022Group \u0022 \u002B Key?.ToString();\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items in a vertical list.","relatedControls":["ItemsView","GridView","StandardUICommand","FlipView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"listview-5","controlId":"listview","controlName":"ListView","headerText":"ListView with filtering","xaml":"\u003C!-- XAML Code --\u003E\n\n\u003C!-- The ListView\u0027s ItemsSource is an ObservableCollection\u003CContact\u003E that is defined and bound\nin the code-behind, called contactsFiltered. This ListView uses the same DataTemplate as the\nsamples above it, called ContactListViewTemplate - you can see its definition above. --\u003E\n\n\u003CListView \n x:Name=\u0022FilteredListView\u0022\n ItemTemplate=\u0022{StaticResource ContactListViewTemplate}\u0022\n SelectionMode=\u0022Single\u0022\n ShowsScrollingPlaceholders=\u0022True\u0022\n BorderThickness=\u00221\u0022\n BorderBrush=\u0022{ThemeResource SystemControlForegroundBaseMediumLowBrush}\u0022/\u003E\n\n\u003C!-- The textboxes used for filtering are shown below: --\u003E\n\u003CStackPanel Width=\u0022200\u0022\u003E\n \u003CTextBlock Margin=\u00228,8,8,4\u0022 Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022\u003EFilter by...\u003C/TextBlock\u003E\n \u003CTextBox x:Name=\u0022FilterByFirstName\u0022 Width=\u0022150\u0022 Header=\u0022First name\u0022 Margin=\u00228\u0022\n\t HorizontalAlignment=\u0022Left\u0022 TextChanged=\u0022OnFilterChanged\u0022/\u003E\n \u003CTextBox x:Name=\u0022FilterByLastName\u0022 Width=\u0022150\u0022 Header=\u0022Last name\u0022 Margin=\u00228\u0022\n\t HorizontalAlignment=\u0022Left\u0022 TextChanged=\u0022OnFilterChanged\u0022/\u003E\n \u003CTextBox x:Name=\u0022FilterByCompany\u0022 Width=\u0022150\u0022 Header=\u0022Company\u0022 Margin=\u00228\u0022 \n\t HorizontalAlignment=\u0022Left\u0022 TextChanged=\u0022OnFilterChanged\u0022/\u003E\n\u003C/StackPanel\u003E\u003C/Contact\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\n\nprotected override async void OnNavigatedTo(NavigationEventArgs e)\n {\n Items = ControlInfoDataSource.Instance.Groups.Take(3).SelectMany(g =\u003E g.Items).ToList();\n BaseExample.ItemsSource = await Contact.GetContactsAsync();\n Control2.ItemsSource = await Contact.GetContactsAsync();\n contacts1 = await Contact.GetContactsAsync();\n\n DragDropListView.ItemsSource = contacts1;\n\n contacts2.Add(new Contact(\u0022John\u0022, \u0022Doe\u0022, \u0022ABC Printers\u0022));\n contacts2.Add(new Contact(\u0022Jane\u0022, \u0022Doe\u0022, \u0022XYZ Refrigerators\u0022));\n contacts2.Add(new Contact(\u0022Santa\u0022, \u0022Claus\u0022, \u0022North Pole Toy Factory Inc.\u0022));\n DragDropListView2.ItemsSource = contacts2;\n\n Control4.ItemsSource = WinUIGallery.ControlPages.CustomDataObject.GetDataObjects();\n ContactsCVS.Source = await Contact.GetContactsGroupedAsync();\n\n // Initialize list of contacts to be filtered\n contacts3 = await Contact.GetContactsAsync();\n contacts3Filtered = new ObservableCollection\u003CContact\u003E(contacts3);\n\n // Initializze list of contacts for context menu sample\n contacts4ContextMenu = await Contact.GetContactsAsync();\n ContextMenuList.ItemsSource = contacts4ContextMenu;\n\n FilteredListView.ItemsSource = contacts3Filtered;\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items in a vertical list.","relatedControls":["ItemsView","GridView","StandardUICommand","FlipView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"listview-6","controlId":"listview","controlName":"ListView","headerText":"ListView for Messaging or Data Logging","xaml":"\u003CListView x:Name=\u0022InvertedListView\u0022\n ItemTemplate=\u0022{StaticResource MessageViewTemplate}\u0022\u003E\n \n \u003C!-- The ItemsStackPanel must be edited to update the following two properties --\u003E\n \u003C!-- These properties allow the list to grow from the bottom --\u003E\n \u003CListView.ItemsPanel\u003E\n \u003CItemsPanelTemplate\u003E\n \u003CItemsStackPanel ItemsUpdatingScrollMode=\u0022KeepLastItemInView\u0022 \n VerticalAlignment=\u0022Bottom\u0022/\u003E\n \u003C/ItemsPanelTemplate\u003E\n \u003C/ListView.ItemsPanel\u003E\n\n \u003C!-- This setter property is created so ListViewItems correctly align to the left or right. --\u003E\n \u003CListView.ItemContainerStyle\u003E\n \u003CStyle TargetType=\u0022ListViewItem\u0022\u003E\n \u003CSetter Property=\u0022HorizontalContentAlignment\u0022 Value=\u0022Stretch\u0022/\u003E\n \u003C/Style\u003E\n \u003C/ListView.ItemContainerStyle\u003E\n\u003C/ListView\u003E\n\n\u003C!-- Data template used: --\u003E\n\u003C!-- The data template is bound to a custom DataType called Message. --\u003E\n\u003C!-- Each Message object has a color and alignment assigned to it based on whether it was \nsent or received, and those values are bound in the DataTemplate.--\u003E\n\u003CDataTemplate x:Key=\u0022MessageViewTemplate\u0022 x:DataType=\u0022local:Message\u0022\u003E\n \u003CGrid Height=\u0022Auto\u0022 Margin=\u00224\u0022 HorizontalAlignment=\u0022{x:Bind MsgAlignment}\u0022\u003E\n \u003CStackPanel MinHeight=\u002275\u0022 Width=\u0022350\u0022 Padding=\u002210, 0, 0, 10\u0022 Background=\u0022{ThemeResource SystemColorHighlightColor}\u0022 CornerRadius=\u0022{StaticResource ControlCornerRadius}\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind MsgText}\u0022 Padding=\u00220, 10, 0, 0\u0022 FontSize=\u002220\u0022 Foreground=\u0022{ThemeResource SystemColorHighlightTextColor}\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind MsgDateTime}\u0022 Padding=\u00220, 0, 0, 10\u0022 FontSize=\u002215\u0022 Foreground=\u0022{ThemeResource SystemColorHighlightTextColor}\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/Grid\u003E\n\u003C/DataTemplate\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\n\nprivate void AddItemToEnd()\n {\n InvertedListView.Items.Add(\n new Message(\u0022Message \u0022 \u002B \u002B\u002BmessageNumber, DateTime.Now, HorizontalAlignment.Right)\n );\n }\n\npublic class Message\n{\n public string MsgText { get; private set; }\n public DateTime MsgDateTime { get; private set; }\n public HorizontalAlignment MsgAlignment { get; set; }\n public Message(string text, DateTime dateTime, HorizontalAlignment align)\n {\n MsgText = text;\n MsgDateTime = dateTime;\n MsgAlignment = align;\n }\n\n public override string ToString()\n {\n return MsgDateTime.ToString() \u002B \u0022 \u0022 \u002B MsgText;\n }\n}\n\nprivate void MessageReceived(object sender, RoutedEventArgs e)\n {\n InvertedListView.Items.Add(\n new Message(\u0022Message \u0022 \u002B \u002B\u002BmessageNumber, DateTime.Now, HorizontalAlignment.Left)\n );\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items in a vertical list.","relatedControls":["ItemsView","GridView","StandardUICommand","FlipView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"listview-7","controlId":"listview","controlName":"ListView","headerText":"ListView with Images","xaml":"\u003CListView x:Name=\u0022Control4\u0022\n BorderThickness=\u00221\u0022\n BorderBrush=\u0022{ThemeResource ControlStrongStrokeColorDefaultBrush}\u0022\u003E\n \n\u003C!-- Data Template Used: --\u003E\n\u003C!-- The data template is bound to a custom-created data type called CustomDataObject. --\u003E\n\u003C!-- The full code for the class can be found in this page\u0027s source code, but its attributes are referenced/bound below. --\u003E\n\n\u003CDataTemplate x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CGrid Margin=\u00220,12,0,12\u0022 AutomationProperties.Name=\u0022{x:Bind Title}\u0022\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 MinWidth=\u0022150\u0022/\u003E\n \u003CColumnDefinition Width=\u0022*\u0022 /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003CImage Source=\u0022{x:Bind ImageLocation}\u0022 MaxHeight=\u0022100\u0022 Stretch=\u0022Fill\u0022/\u003E\n\n \u003CStackPanel Margin=\u002212,0,0,0\u0022 Grid.Column=\u00221\u0022 \u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022 FontSize=\u002214\u0022 FontWeight=\u0022SemiBold\u0022 Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022\n HorizontalAlignment=\u0022Left\u0022 Margin=\u00220,0,0,6\u0022 LineHeight=\u002220\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Description}\u0022 FontFamily=\u0022Segoe UI\u0022 FontWeight=\u0022Normal\u0022 Style=\u0022{ThemeResource BodyTextBlockStyle}\u0022\n TextTrimming=\u0022CharacterEllipsis\u0022 Width=\u0022350\u0022 MaxLines=\u00221\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Views}\u0022 HorizontalAlignment=\u0022Left\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Margin=\u00220,0,0,0\u0022/\u003E\n \u003CTextBlock Text=\u0022 Views \u0022 HorizontalAlignment=\u0022Left\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022/\u003E\n \u003CTextBlock Text=\u0022 \u0026#x22C5; \u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 \n HorizontalAlignment=\u0022Left\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Likes}\u0022 HorizontalAlignment=\u0022Left\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Margin=\u00225,0,0,0\u0022/\u003E\n \u003CTextBlock Text=\u0022 Likes\u0022 HorizontalAlignment=\u0022Left\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022/\u003E\n \u003C/StackPanel\u003E\u003C/StackPanel\u003E\u003C/Grid\u003E\u003C/DataTemplate\u003E\u003C/ListView\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\n\nprivate void TextBlock_IsTextTrimmedChanged(TextBlock sender, IsTextTrimmedChangedEventArgs args)\n {\n var textBlock = sender as TextBlock;\n var text = textBlock.IsTextTrimmed ? textBlock.Text : string.Empty;\n\n ToolTipService.SetToolTip(textBlock, text);\n }\n\nprotected override async void OnNavigatedTo(NavigationEventArgs e)\n {\n Items = ControlInfoDataSource.Instance.Groups.Take(3).SelectMany(g =\u003E g.Items).ToList();\n BaseExample.ItemsSource = await Contact.GetContactsAsync();\n Control2.ItemsSource = await Contact.GetContactsAsync();\n contacts1 = await Contact.GetContactsAsync();\n\n DragDropListView.ItemsSource = contacts1;\n\n contacts2.Add(new Contact(\u0022John\u0022, \u0022Doe\u0022, \u0022ABC Printers\u0022));\n contacts2.Add(new Contact(\u0022Jane\u0022, \u0022Doe\u0022, \u0022XYZ Refrigerators\u0022));\n contacts2.Add(new Contact(\u0022Santa\u0022, \u0022Claus\u0022, \u0022North Pole Toy Factory Inc.\u0022));\n DragDropListView2.ItemsSource = contacts2;\n\n Control4.ItemsSource = WinUIGallery.ControlPages.CustomDataObject.GetDataObjects();\n ContactsCVS.Source = await Contact.GetContactsGroupedAsync();\n\n // Initialize list of contacts to be filtered\n contacts3 = await Contact.GetContactsAsync();\n contacts3Filtered = new ObservableCollection\u003CContact\u003E(contacts3);\n\n // Initializze list of contacts for context menu sample\n contacts4ContextMenu = await Contact.GetContactsAsync();\n ContextMenuList.ItemsSource = contacts4ContextMenu;\n\n FilteredListView.ItemsSource = contacts3Filtered;\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items in a vertical list.","relatedControls":["ItemsView","GridView","StandardUICommand","FlipView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"listview-8","controlId":"listview","controlName":"ListView","headerText":"ListView with context menus","xaml":"\u003CListView\n ItemsSource=\u0022{x:Bind contacts, Mode=OneWay}\u0022\n SelectionMode=\u0022Single\u0022\n ShowsScrollingPlaceholders=\u0022True\u0022\n BorderThickness=\u00221\u0022\n BorderBrush=\u0022{ThemeResource ControlStrongStrokeColorDefaultBrush}\u0022\n HorizontalAlignment=\u0022Left\u0022\u003E\n \u003CListView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:Contact\u0022\u003E\n \u003CGrid\u003E\n \u003CGrid.ContextFlyout\u003E\n \u003CMenuFlyout\u003E\n \u003CMenuFlyoutItem Text=\u0022Delete\u0022 Click=\u0022ContactDeleteMenuItem_Click\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/Grid.ContextFlyout\u003E\n \n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022*\u0022/\u003E\n \u003CRowDefinition Height=\u0022*\u0022/\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022/\u003E\n \u003CColumnDefinition Width=\u0022*\u0022/\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003CEllipse x:Name=\u0022Ellipse\u0022\n Grid.RowSpan=\u00222\u0022\n Width =\u002232\u0022\n Margin=\u00226\u0022\n VerticalAlignment=\u0022Center\u0022\n HorizontalAlignment=\u0022Center\u0022\n Fill=\u0022{ThemeResource ControlStrongFillColorDefaultBrush}\u0022/\u003E\n \u003CTextBlock Grid.Column=\u00221\u0022\n Text=\u0022{x:Bind Name}\u0022\n x:Phase=\u00221\u0022\n Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022\n Margin=\u002212,6,0,0\u0022/\u003E\n \u003CTextBlock Grid.Column=\u00221\u0022\n Grid.Row=\u00221\u0022\n Text=\u0022{x:Bind Company}\u0022\n x:Phase=\u00222\u0022\n Style=\u0022{ThemeResource BodyTextBlockStyle}\u0022\n Margin=\u002212,0,0,6\u0022/\u003E\n \u003C/Grid\u003E\n \u003C/DataTemplate\u003E\n \u003C/ListView.ItemTemplate\u003E\n\u003C/DataTemplate\u003E\u003C/ListView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\n\nprivate void ContactDeleteMenuItem_Click(object sender, RoutedEventArgs e)\n {\n if ((sender as FrameworkElement)?.DataContext is not Contact contact)\n {\n return;\n }\n\n contacts4ContextMenu.Remove(contact);\n }\n\npublic class Contact\n{\n public string FirstName { get; private set; }\n public string LastName { get; private set; }\n public string Company { get; private set; }\n public string Name =\u003E FirstName \u002B \u0022 \u0022 \u002B LastName;\n\n public Contact(string firstName, string lastName, string company)\n {\n FirstName = firstName;\n LastName = lastName;\n Company = company;\n }\n public async static Task\u003CObservableCollection\u003CContact\u003E\u003E GetContactsAsync()\n {\n IList\u003Cstring\u003E lines = await FileLoader.LoadLines(\u0022Assets/SampleMedia/Contacts.txt\u0022);\n\n ObservableCollection\u003CContact\u003E contacts = new ObservableCollection\u003CContact\u003E();\n\n for (int i = 0; i \u003C lines.Count - 2; i \u002B= 3)\n {\n contacts.Add(new Contact(lines[i], lines[i \u002B 1], lines[i \u002B 2]));\n }\n\n return contacts;\n }\n\n public static async Task\u003CObservableCollection\u003CGroupInfoList\u003E\u003E GetContactsGroupedAsync()\n {\n var query = from item in await GetContactsAsync()\n group item by item.LastName.Substring(0, 1).ToUpper() into g\n orderby g.Key\n select new GroupInfoList(g) { Key = g.Key };\n\n return new ObservableCollection\u003CGroupInfoList\u003E(query);\n }\n\n public override string ToString()\n {\n return $\u0022{Name}, {Company}\u0022;\n }\n}\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a collection of items in a vertical list.","relatedControls":["ItemsView","GridView","StandardUICommand","FlipView","SemanticZoom"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"pulltorefresh-1","controlId":"pulltorefresh","controlName":"PullToRefresh","headerText":"Basic PullToRefresh","xaml":"\u003CRefreshContainer x:Name=\u0022rc\u0022 RefreshRequested=\u0022rc_RefreshRequested\u0022\u003E\n \u003CListView x:Name=\u0022lv\u0022 Width=\u0022300\u0022 Height=\u0022300\u0022 BorderThickness=\u00221\u0022 BorderBrush=\u0022Black\u0022/\u003E\n\u003C/RefreshContainer\u003E","csharp":"using Microsoft.UI.Composition;\nusing Microsoft.UI.Dispatching;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Hosting;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Media.Imaging;\nusing Microsoft.UI.Xaml.Navigation;\nusing System;\nusing System.Collections.ObjectModel;\nusing Windows.Foundation;\nusing Windows.Foundation.Metadata;\nusing Windows.UI.ViewManagement;\n\nprivate void rc_RefreshRequested(RefreshContainer sender, RefreshRequestedEventArgs args)\n {\n this.RefreshCompletionDeferral1 = args.GetDeferral();\n //Do some work to show new content!\n timer1.Start();\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Provides the ability to pull on a collection of items in a list/grid to refresh the contents of the collection.","relatedControls":["ScrollView","ScrollViewer","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"pulltorefresh-2","controlId":"pulltorefresh","controlName":"PullToRefresh","headerText":"Custom Icon PullToRefresh","xaml":"\u003CRefreshContainer x:Name=\u0022rc\u0022 RefreshRequested=\u0022rc_RefreshRequested\u0022\u003E\n \u003CRefreshContainer.Visualizer\u003E\n \u003CRefreshVisualizer RefreshStateChanged=\u0022rv2_RefreshStateChanged\u0022\u003E\n \u003CRefreshVisualizer.Content\u003E\n \u003CSymbolIcon Symbol=\u0022AddFriend\u0022/\u003E\n \u003C/RefreshVisualizer.Content\u003E\n \u003C/RefreshVisualizer\u003E\n \u003C/RefreshContainer.Visualizer\u003E\n \u003CListView x:Name=\u0022lv\u0022 Width=\u0022300\u0022 Height=\u0022300\u0022 BorderThickness=\u00221\u0022 BorderBrush=\u0022Black\u0022/\u003E\n\u003C/RefreshContainer\u003E","csharp":"using Microsoft.UI.Composition;\nusing Microsoft.UI.Dispatching;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Hosting;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Media.Imaging;\nusing Microsoft.UI.Xaml.Navigation;\nusing System;\nusing System.Collections.ObjectModel;\nusing Windows.Foundation;\nusing Windows.Foundation.Metadata;\nusing Windows.UI.ViewManagement;\n\npublic PullToRefreshPage()\n {\n this.InitializeComponent();\n\n if (ApiInformation.IsApiContractPresent(\u0022Windows.Foundation.UniversalApiContract\u0022, 6))\n {\n rc2 = new RefreshContainer();\n rc2.RefreshRequested \u002B=\n new TypedEventHandler\u003CRefreshContainer, RefreshRequestedEventArgs\u003E(rc2_RefreshRequested);\n\n rv2 = new RefreshVisualizer();\n rv2.RefreshStateChanged \u002B=\n new TypedEventHandler\u003CRefreshVisualizer, RefreshStateChangedEventArgs\u003E(rv2_RefreshStateChanged);\n\n Image ptrImage = new Image();\n AccessibilitySettings accessibilitySettings = new AccessibilitySettings();\n // Checking light theme\n if ((ThemeHelper.RootTheme == ElementTheme.Light || Application.Current.RequestedTheme == ApplicationTheme.Light)\n \u0026\u0026 !accessibilitySettings.HighContrast)\n {\n ptrImage.Source = new BitmapImage(new Uri(\u0022ms-appx:///Assets/SampleMedia/SunBlack.png\u0022));\n }\n // Checking high contrast theme\n else if (accessibilitySettings.HighContrast\n \u0026\u0026 accessibilitySettings.HighContrastScheme.Equals(\u0022High Contrast Black\u0022))\n {\n ptrImage.Source = new BitmapImage(new Uri(\u0022ms-appx:///Assets/SampleMedia/SunBlack.png\u0022));\n }\n else\n {\n ptrImage.Source = new BitmapImage(new Uri(\u0022ms-appx:///Assets/SampleMedia/SunWhite.png\u0022));\n\n }\n\n ptrImage.Width = 35;\n ptrImage.Height = 35;\n\n rv2.Content = ptrImage;\n rc2.Visualizer = rv2;\n\n ListView lv2 = new ListView\n {\n Width = 200,\n Height = 200,\n BorderThickness = new Thickness() { Left = 1, Top = 1, Right = 1, Bottom = 1 },\n HorizontalAlignment = HorizontalAlignment.Center,\n BorderBrush = (Brush)Application.Current.Resources[\u0022TextControlBorderBrush\u0022]\n };\n\n rc2.Content = lv2;\n\n Ex2Grid.Children.Add(rc2);\n Grid.SetRow(rc2, 1);\n Grid.SetRow(lv2, 1);\n\n timer1.Interval = new TimeSpan(0, 0, 0, 0, 500);\n timer1.Tick \u002B= Timer1_Tick;\n\n timer2.Interval = new TimeSpan(0, 0, 0, 0, 800);\n timer2.Tick \u002B= Timer2_Tick;\n}}\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Provides the ability to pull on a collection of items in a list/grid to refresh the contents of the collection.","relatedControls":["ScrollView","ScrollViewer","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"treeview-1","controlId":"treeview","controlName":"TreeView","headerText":"A simple TreeView with drag and drop support","xaml":"\u003CTreeView x:Name=\u0022sampleTreeView\u0022 CanDragItems=\u0022True\u0022 AllowDrop=\u0022True\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System.Collections.ObjectModel;\n\npublic TreeViewPage()\n {\n this.InitializeComponent();\n this.DataContext = this;\n DataSource = GetData();\n\n InitializeSampleTreeView(sampleTreeView);\n InitializeSampleTreeView(sampleTreeView2);\n }\n\nprivate ObservableCollection\u003CExplorerItem\u003E DataSource;\n\nprivate ObservableCollection\u003CExplorerItem\u003E GetData()\n {\n return new ObservableCollection\u003CExplorerItem\u003E\n {\n new ExplorerItem\n {\n Name = \u0022Documents\u0022,\n Type = ExplorerItem.ExplorerItemType.Folder,\n Children =\n {\n new ExplorerItem { Name = \u0022ProjectProposal\u0022, Type = ExplorerItem.ExplorerItemType.File },\n new ExplorerItem { Name = \u0022BudgetReport\u0022, Type = ExplorerItem.ExplorerItemType.File }\n }\n },\n new ExplorerItem\n {\n Name = \u0022Projects\u0022,\n Type = ExplorerItem.ExplorerItemType.Folder,\n Children =\n {\n new ExplorerItem { Name = \u0022Project Plan\u0022, Type = ExplorerItem.ExplorerItemType.File }\n }\n }\n };\n }\n}\n\npublic class ExplorerItem\n{\n public enum ExplorerItemType\n {\n Folder,\n File,\n }\n\n public string Name { get; set; } = string.Empty;\n\nprivate void InitializeSampleTreeView(TreeView sampleTreeView)\n {\n TreeViewNode workFolder = new TreeViewNode() { Content = \u0022Work Documents\u0022 };\n workFolder.IsExpanded = true;\n\n workFolder.Children.Add(new TreeViewNode() { Content = \u0022XYZ Functional Spec\u0022 });\n workFolder.Children.Add(new TreeViewNode() { Content = \u0022Feature Schedule\u0022 });\n\n TreeViewNode remodelFolder = new TreeViewNode() { Content = \u0022Home Remodel\u0022 };\n remodelFolder.IsExpanded = true;\n\n remodelFolder.Children.Add(new TreeViewNode() { Content = \u0022Contractor Contact Info\u0022 });\n remodelFolder.Children.Add(new TreeViewNode() { Content = \u0022Paint Color Scheme\u0022 });\n\n TreeViewNode personalFolder = new TreeViewNode() { Content = \u0022Personal Documents\u0022 };\n personalFolder.IsExpanded = true;\n personalFolder.Children.Add(remodelFolder);\n\n sampleTreeView.RootNodes.Add(workFolder);\n sampleTreeView.RootNodes.Add(personalFolder);\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items.","relatedControls":["ListView","ItemsRepeater"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"treeview-2","controlId":"treeview","controlName":"TreeView","headerText":"A TreeView with Multi-selection enabled","xaml":"\u003CTreeView x:Name=\u0022sampleTreeView\u0022 SelectionMode=\u0022Multiple\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System.Collections.ObjectModel;\n\npublic TreeViewPage()\n {\n this.InitializeComponent();\n this.DataContext = this;\n DataSource = GetData();\n\n InitializeSampleTreeView(sampleTreeView);\n InitializeSampleTreeView(sampleTreeView2);\n }\n\nprivate ObservableCollection\u003CExplorerItem\u003E DataSource;\n\nprivate ObservableCollection\u003CExplorerItem\u003E GetData()\n {\n return new ObservableCollection\u003CExplorerItem\u003E\n {\n new ExplorerItem\n {\n Name = \u0022Documents\u0022,\n Type = ExplorerItem.ExplorerItemType.Folder,\n Children =\n {\n new ExplorerItem { Name = \u0022ProjectProposal\u0022, Type = ExplorerItem.ExplorerItemType.File },\n new ExplorerItem { Name = \u0022BudgetReport\u0022, Type = ExplorerItem.ExplorerItemType.File }\n }\n },\n new ExplorerItem\n {\n Name = \u0022Projects\u0022,\n Type = ExplorerItem.ExplorerItemType.Folder,\n Children =\n {\n new ExplorerItem { Name = \u0022Project Plan\u0022, Type = ExplorerItem.ExplorerItemType.File }\n }\n }\n };\n }\n}\n\npublic class ExplorerItem\n{\n public enum ExplorerItemType\n {\n Folder,\n File,\n }\n\n public string Name { get; set; } = string.Empty;\n\nprivate void InitializeSampleTreeView(TreeView sampleTreeView)\n {\n TreeViewNode workFolder = new TreeViewNode() { Content = \u0022Work Documents\u0022 };\n workFolder.IsExpanded = true;\n\n workFolder.Children.Add(new TreeViewNode() { Content = \u0022XYZ Functional Spec\u0022 });\n workFolder.Children.Add(new TreeViewNode() { Content = \u0022Feature Schedule\u0022 });\n\n TreeViewNode remodelFolder = new TreeViewNode() { Content = \u0022Home Remodel\u0022 };\n remodelFolder.IsExpanded = true;\n\n remodelFolder.Children.Add(new TreeViewNode() { Content = \u0022Contractor Contact Info\u0022 });\n remodelFolder.Children.Add(new TreeViewNode() { Content = \u0022Paint Color Scheme\u0022 });\n\n TreeViewNode personalFolder = new TreeViewNode() { Content = \u0022Personal Documents\u0022 };\n personalFolder.IsExpanded = true;\n personalFolder.Children.Add(remodelFolder);\n\n sampleTreeView.RootNodes.Add(workFolder);\n sampleTreeView.RootNodes.Add(personalFolder);\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items.","relatedControls":["ListView","ItemsRepeater"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"treeview-3","controlId":"treeview","controlName":"TreeView","headerText":"A TreeView with DataBinding Using ItemSource","xaml":"\u003CTreeView ItemsSource=\u0022{x:Bind DataSource}\u0022\u003E\n \u003CTreeView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:ExplorerItem\u0022\u003E\n \u003CTreeViewItem ItemsSource=\u0022{x:Bind Children}\u0022 Content=\u0022{x:Bind Name}\u0022/\u003E\n \u003C/DataTemplate\u003E\n \u003C/TreeView.ItemTemplate\u003E\n\u003C/TreeView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System.Collections.ObjectModel;\n\nprivate ObservableCollection\u003CExplorerItem\u003E DataSource;\n\npublic class ExplorerItem\n{\n public enum ExplorerItemType\n {\n Folder,\n File,\n }\n\n public string Name { get; set; } = string.Empty;\n public ExplorerItemType Type { get; set; }\n public ObservableCollection\u003CExplorerItem\u003E Children { get; set; } = new ObservableCollection\u003CExplorerItem\u003E();\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items.","relatedControls":["ListView","ItemsRepeater"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"treeview-4","controlId":"treeview","controlName":"TreeView","headerText":"A TreeView with ItemTemplateSelector","xaml":"\u003CPage ...\n xmlns:local=\u0022using:YourNamespace\u0022 \u003E\n\n \u003CPage.Resources\u003E\n \u003C!-- DataTemplate for folders --\u003E\n \u003CDataTemplate x:Key=\u0022FolderTemplate\u0022 x:DataType=\u0022local:ExplorerItem\u0022\u003E \n \u003CTreeViewItem AutomationProperties.Name=\u0022{x:Bind Name}\u0022\n ItemsSource=\u0022{x:Bind Children}\u0022 IsExpanded=\u0022True\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CImage Width=\u002220\u0022 Source=\u0022../Assets/SampleMedia/folder.png\u0022/\u003E\n \u003CTextBlock Margin=\u00220,0,10,0\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Name}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/TreeViewItem\u003E\n \u003C/DataTemplate\u003E\n\n \u003C!-- DataTemplate for files --\u003E\n \u003CDataTemplate x:Key=\u0022FileTemplate\u0022 x:DataType=\u0022local:ExplorerItem\u0022\u003E \n \u003CTreeViewItem AutomationProperties.Name=\u0022{x:Bind Name}\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE8A5;\u0022 /\u003E\n \u003CTextBlock Margin=\u00220,0,10,0\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Name}\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/TreeViewItem\u003E\n \u003C/DataTemplate\u003E\n\n \u003C!-- Template selector for ExplorerItem types --\u003E\n \u003Clocal:ExplorerItemTemplateSelector x:Key=\u0022ExplorerItemTemplateSelector\u0022\n FolderTemplate=\u0022{StaticResource FolderTemplate}\u0022\n FileTemplate=\u0022{StaticResource FileTemplate}\u0022 /\u003E\n \u003C/Page.Resources\u003E\n\n \u003C!-- TreeView bound to DataSource, using the ItemTemplateSelector --\u003E\n \u003CTreeView ItemsSource=\u0022{x:Bind DataSource}\u0022\n ItemTemplateSelector=\u0022{StaticResource ExplorerItemTemplateSelector}\u0022 /\u003E\n\u003C/Page\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System.Collections.ObjectModel;\n\nprivate ObservableCollection\u003CExplorerItem\u003E DataSource;\n\npublic class ExplorerItem\n{\n public enum ExplorerItemType\n {\n Folder,\n File,\n }\n\n public string Name { get; set; } = string.Empty;\n public ExplorerItemType Type { get; set; }\n public ObservableCollection\u003CExplorerItem\u003E Children { get; set; } = new ObservableCollection\u003CExplorerItem\u003E();\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that contain nested items.","relatedControls":["ListView","ItemsRepeater"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"calendardatepicker-1","controlId":"calendardatepicker","controlName":"CalendarDatePicker","headerText":"CalendarDatePicker with a header and placeholder text.","xaml":"\u003CCalendarDatePicker PlaceholderText=\u0022Pick a date\u0022 Header=\u0022Calendar\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that lets users pick a date value using a calendar.","relatedControls":["DatePicker","CalendarView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"calendarview-1","controlId":"calendarview","controlName":"CalendarView","headerText":"A basic calendar view.","xaml":"\u003CCalendarView \n SelectionMode=\u0022...\u0022 \n IsGroupLabelVisible=\u0022...\u0022\n IsOutOfScopeEnabled=\u0022...\u0022\n Language=\u0022...\u0022\n CalendarIdentifier=\u0022...\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing Windows.Globalization;\n\nprivate void SelectionMode_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (Enum.TryParse\u003CCalendarViewSelectionMode\u003E((sender as ComboBox)?.SelectedItem.ToString(), out CalendarViewSelectionMode selectionMode))\n {\n Control1.SelectionMode = selectionMode;\n }\n }\n\nprivate void calendarLanguages_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (calendarLanguages.SelectedItem is Language selectedLang \u0026\u0026\n Windows.Globalization.Language.IsWellFormed(selectedLang.Code))\n {\n Control1.Language = selectedLang.Code;\n }\n }\n\npublic ObservableCollection\u003CLanguage\u003E Languages { get; set; } = new(new LanguageList().Languages);\n\npublic CalendarViewPage()\n {\n this.InitializeComponent();\n\n List\u003Cstring\u003E calendarIdentifiers = new List\u003Cstring\u003E()\n {\n CalendarIdentifiers.Gregorian,\n CalendarIdentifiers.Hebrew,\n CalendarIdentifiers.Hijri,\n CalendarIdentifiers.Japanese,\n CalendarIdentifiers.Julian,\n CalendarIdentifiers.Korean,\n CalendarIdentifiers.Persian,\n CalendarIdentifiers.Taiwan,\n CalendarIdentifiers.Thai,\n CalendarIdentifiers.UmAlQura,\n };\n\n calendarIdentifier.ItemsSource = calendarIdentifiers;\n calendarIdentifier.SelectedItem = CalendarIdentifiers.Gregorian;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that presents a calendar for a user to choose a date from.","relatedControls":["CalendarDatePicker","DatePicker","TimePicker"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"datepicker-1","controlId":"datepicker","controlName":"DatePicker","headerText":"A simple DatePicker with a header.","xaml":"\u003CDatePicker Header=\u0022Pick a date\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that lets a user pick a date value.","relatedControls":["CalendarDatePicker","CalendarView","TimePicker"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"datepicker-2","controlId":"datepicker","controlName":"DatePicker","headerText":"A DatePicker with day formatted and year hidden.","xaml":"\u003CDatePicker DayFormat=\u0022{}{day.integer} ({dayofweek.abbreviated})\u0022 YearVisible=\u0022False\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System;\n\nprotected override void OnNavigatedTo(NavigationEventArgs e)\n {\n // Set the default date to 2 months from the current date.\n Control2.Date = DateTimeOffset.Now.AddMonths(2);\n\n // Set the minimum year to the current year.\n Control2.MinYear = DateTimeOffset.Now;\n\n // Set the maximum year to 5 years in the future.\n Control2.MaxYear = DateTimeOffset.Now.AddYears(5);\n\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that lets a user pick a date value.","relatedControls":["CalendarDatePicker","CalendarView","TimePicker"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"timepicker-1","controlId":"timepicker","controlName":"TimePicker","headerText":"A simple TimePicker.","xaml":"\u003CTimePicker/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A configurable control that lets a user pick a time value.","relatedControls":["DatePicker","CalendarView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"timepicker-2","controlId":"timepicker","controlName":"TimePicker","headerText":"A TimePicker with a header and minute increments specified.","xaml":"\u003CTimePicker Header=\u0022Arrival time\u0022 MinuteIncrement=\u002215\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A configurable control that lets a user pick a time value.","relatedControls":["DatePicker","CalendarView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"timepicker-3","controlId":"timepicker","controlName":"TimePicker","headerText":"A TimePicker using a 24-hour clock, initialized to current time.","xaml":"\u003Cxmlns:sys=\u0022using:System\u0022\u003E\n \n \u003CTimePicker ClockIdentifier=\u002224HourClock\u0022 Header=\u002224 hour clock\u0022 SelectedTime=\u0022{x:Bind sys:DateTime.Now.TimeOfDay}\u0022 /\u003E\u003C/xmlns:sys\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A configurable control that lets a user pick a time value.","relatedControls":["DatePicker","CalendarView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"button-1","controlId":"button","controlName":"Button","headerText":"A simple Button with text content.","xaml":"\u003CButton Content=\u0022Standard XAML button\u0022 Click=\u0022Button_Click\u0022 .../\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void Button_Click(object sender, RoutedEventArgs e)\n {\n if (sender is Button b)\n {\n string name = b.Name;\n\n switch (name)\n {\n case \u0022Button1\u0022:\n Control1Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button2\u0022:\n Control2Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that responds to user input and raises a Click event.","relatedControls":["ToggleButton","RepeatButton","HyperlinkButton","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"button-2","controlId":"button","controlName":"Button","headerText":"A Button with graphical content.","xaml":"\u003CButton Content=\u0022Button\u0022 Click=\u0022Button_Click\u0022 AutomationProperties.Name=\u0022Pie\u0022\u003E\n \u003CImage Source=\u0022/Assets/SampleMedia/Slices.png\u0022 AutomationProperties.Name=\u0022Slice\u0022/\u003E\n\u003C/Button\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void Button_Click(object sender, RoutedEventArgs e)\n {\n if (sender is Button b)\n {\n string name = b.Name;\n\n switch (name)\n {\n case \u0022Button1\u0022:\n Control1Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n case \u0022Button2\u0022:\n Control2Output.Text = \u0022You clicked: \u0022 \u002B name;\n break;\n\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that responds to user input and raises a Click event.","relatedControls":["ToggleButton","RepeatButton","HyperlinkButton","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"button-3","controlId":"button","controlName":"Button","headerText":"Built-in styles applied to Button.","xaml":"\u003CButton Style=\u0022{StaticResource AccentButtonStyle}\u0022 Content=\u0022Accent style button\u0022/\u003E\n\u003CButton Style=\u0022{StaticResource SubtleButtonStyle}\u0022 Content=\u0022Subtle style button\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that responds to user input and raises a Click event.","relatedControls":["ToggleButton","RepeatButton","HyperlinkButton","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"button-4","controlId":"button","controlName":"Button","headerText":"Wrapping Buttons with large content","xaml":"\u003CStackPanel\u003E\n \u003CTextBlock Text=\u0022The following buttons\u0027 content may get clipped if we don\u0027t pay careful attention to their layout containers.\u0022 Margin=\u00220,0,0,8\u0022 TextWrapping=\u0022Wrap\u0022/\u003E\n \u003CTextBlock Text=\u0022One option to mitigate clipped content is to place Buttons underneath each other, allowing for more space to grow horizontally:\u0022 Margin=\u00220,0,0,8\u0022 TextWrapping=\u0022Wrap\u0022/\u003E\n \u003CButton HorizontalAlignment=\u0022Stretch\u0022 Margin=\u00220,0,0,5\u0022\u003EThis is some text that is too long and will get cut off\u003C/Button\u003E\n \u003CButton HorizontalAlignment=\u0022Stretch\u0022\u003EThis is another text that would result in being cut off\u003C/Button\u003E\n\n \u003CTextBlock Text=\u0022Another option is to explicitly wrap the Button\u0027s content\u0022 Margin=\u00220,8,0,8\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022 HorizontalAlignment=\u0022Center\u0022\u003E\n \u003CButton MaxWidth=\u0022240\u0022 Margin=\u00220,0,8,0\u0022\u003E\n \u003CTextBlock Text=\u0022This is some text that is too long and will get cut off\u0022 TextWrapping=\u0022WrapWholeWords\u0022/\u003E\n \u003C/Button\u003E\n \u003CButton MaxWidth=\u0022240\u0022\u003E\n \u003CTextBlock Text=\u0022This is another text that would result in being cut off\u0022 TextWrapping=\u0022WrapWholeWords\u0022/\u003E\n \u003C/Button\u003E\n \u003C/StackPanel\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that responds to user input and raises a Click event.","relatedControls":["ToggleButton","RepeatButton","HyperlinkButton","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"dropdownbutton-1","controlId":"dropdownbutton","controlName":"DropDownButton","headerText":"Simple DropDownButton","xaml":"\u003CDropDownButton Content=\u0022Email\u0022\u003E\n \u003CDropDownButton.Flyout\u003E\n \u003CMenuFlyout Placement=\u0022Bottom\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Send\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Reply\u0022/\u003E\n \u003CMenuFlyoutItem Text=\u0022Reply All\u0022/\u003E\n \u003C/MenuFlyout\u003E\n \u003C/DropDownButton.Flyout\u003E\n\u003C/DropDownButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A button that displays a flyout of choices when clicked.","relatedControls":["SplitButton","ToggleSplitButton","ToggleButton","RepeatButton","HyperlinkButton","AppBarButton","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"dropdownbutton-2","controlId":"dropdownbutton","controlName":"DropDownButton","headerText":"DropDownButton with Icons","xaml":"\u003CDropDownButton AutomationProperties.Name=\u0022Email\u0022\u003E\n \u003CDropDownButton.Content\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE715;\u0022/\u003E\n \u003C/DropDownButton.Content\u003E\n \u003CDropDownButton.Flyout\u003E\n \u003CMenuFlyout Placement=\u0022Bottom\u0022\u003E\n \u003CMenuFlyoutItem Text=\u0022Send\u0022\u003E\n \u003CMenuFlyoutItem.Icon\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE725;\u0022/\u003E\n \u003C/MenuFlyoutItem.Icon\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003CMenuFlyoutItem Text=\u0022Reply\u0022\u003E\n \u003CMenuFlyoutItem.Icon\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE8CA;\u0022/\u003E\n \u003C/MenuFlyoutItem.Icon\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003CMenuFlyoutItem Text=\u0022Reply All\u0022\u003E\n \u003CMenuFlyoutItem.Icon\u003E\n \u003CFontIcon Glyph=\u0022\u0026#xE8C2;\u0022/\u003E\n \u003C/MenuFlyoutItem.Icon\u003E\n \u003C/MenuFlyoutItem\u003E\n \u003C/MenuFlyout\u003E\n \u003C/DropDownButton.Flyout\u003E\n\u003C/DropDownButton\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A button that displays a flyout of choices when clicked.","relatedControls":["SplitButton","ToggleSplitButton","ToggleButton","RepeatButton","HyperlinkButton","AppBarButton","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"hyperlinkbutton-1","controlId":"hyperlinkbutton","controlName":"HyperlinkButton","headerText":"A hyperlink button that navigates to a URI.","xaml":"\u003CHyperlinkButton Content=\u0022Microsoft home page\u0022 NavigateUri=\u0022https://www.microsoft.com\u0022 .../\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A button that appears as hyperlink text, and can navigate to a URI or handle a Click event.","relatedControls":["Button","ToggleButton","RepeatButton","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"hyperlinkbutton-2","controlId":"hyperlinkbutton","controlName":"HyperlinkButton","headerText":"A hyperlink button that handles a Click event.","xaml":"\u003CHyperlinkButton Content=\u0022ToggleButton\u0022 Click=\u0022HyperlinkButton_Click\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void GoToHyperlinkButton_Click(object sender, RoutedEventArgs e)\n {\n App.MainWindow.Navigate(typeof(ItemPage), \u0022ToggleButton\u0022);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A button that appears as hyperlink text, and can navigate to a URI or handle a Click event.","relatedControls":["Button","ToggleButton","RepeatButton","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"repeatbutton-1","controlId":"repeatbutton","controlName":"RepeatButton","headerText":"A simple RepeatButton with text content.","xaml":"\u003CRepeatButton Content=\u0022Click and hold\u0022 Click=\u0022RepeatButton_Click\u0022 .../\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation.Peers;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void RepeatButton_Click(object sender, RoutedEventArgs e)\n {\n _clicks \u002B= 1;\n Control1Output.Text = \u0022Number of clicks: \u0022 \u002B _clicks;\n\n AutomationPeer peer = FrameworkElementAutomationPeer.FromElement(Control1Output) ?? FrameworkElementAutomationPeer.CreatePeerForElement(Control1Output);\n peer?.RaiseAutomationEvent(AutomationEvents.LiveRegionChanged);\n }\n\nprivate static int _clicks = 0;","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A button that raises its Click event repeatedly from the time it\u0027s pressed until it\u0027s released.","relatedControls":["Button","ToggleButton","HyperlinkButton","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls.Primitives","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"}]},{"id":"togglebutton-1","controlId":"togglebutton","controlName":"ToggleButton","headerText":"A simple ToggleButton with text content.","xaml":"\u003CToggleButton Content=\u0022ToggleButton\u0022 Click=\u0022Button_Click\u0022 .../\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void ToggleButton_Checked(object sender, RoutedEventArgs e)\n {\n Control1Output.Text = \u0022On\u0022;\n }\n\nprivate void ToggleButton_Unchecked(object sender, RoutedEventArgs e)\n {\n Control1Output.Text = \u0022Off\u0022;\n }\n\npublic ToggleButtonPage()\n {\n this.InitializeComponent();\n\n // Set initial output value.\n Control1Output.Text = Toggle1.IsChecked is true ? \u0022On\u0022 : \u0022Off\u0022;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A button that can be switched between two states like a CheckBox.","relatedControls":["Button","AppBarToggleButton","ToggleSwitch","CheckBox","CommandBarFlyout","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls.Primitives","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"}]},{"id":"splitbutton-1","controlId":"splitbutton","controlName":"SplitButton","headerText":"A SplitButton controlling text color in a RichEditBox","xaml":"\u003CSplitButton x:Name=\u0022myColorButton\u0022 Click=\u0022myColorButton_Click\u0022\u003E\n \u003CBorder x:Name=\u0022CurrentColor\u0022 Width=\u002232\u0022 Height=\u002232\u0022 Background=\u0022Green\u0022 CornerRadius=\u00224,0,0,4\u0022/\u003E\n \u003CSplitButton.Flyout\u003E\n \u003CFlyout Placement=\u0022Bottom\u0022\u003E\n \u003C!-- flyout content --\u003E\n \u003C/Flyout\u003E\n \u003C/SplitButton.Flyout\u003E\n\u003C/SplitButton\u003E","csharp":"using Microsoft.UI;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Shapes;\nusing System.Threading.Tasks;\n\nprivate void myColorButton_Click(Microsoft.UI.Xaml.Controls.SplitButton sender, Microsoft.UI.Xaml.Controls.SplitButtonClickEventArgs args)\n {\n var border = (Border)sender.Content;\n var color = ((Microsoft.UI.Xaml.Media.SolidColorBrush)border.Background).Color;\n\n myRichEditBox.Document.Selection.CharacterFormat.ForegroundColor = color;\n currentColor = color;\n }\n\nprivate void GridView_ItemClick(object sender, ItemClickEventArgs e)\n {\n var rect = (Rectangle)e.ClickedItem;\n var color = ((SolidColorBrush)rect.Fill).Color;\n myRichEditBox.Document.Selection.CharacterFormat.ForegroundColor = color;\n CurrentColor.Background = new SolidColorBrush(color);\n\n myRichEditBox.Focus(Microsoft.UI.Xaml.FocusState.Keyboard);\n currentColor = color;\n\n // Delay required to circumvent GridView bug: https://github.com/microsoft/microsoft-ui-xaml/issues/6350\n Task.Delay(10).ContinueWith(_ =\u003E myColorButton.Flyout.Hide(), TaskScheduler.FromCurrentSynchronizationContext());\n }\n\nprivate void MyRichEditBox_TextChanged(object sender, RoutedEventArgs e)\n {\n if (myRichEditBox.Document.Selection.CharacterFormat.ForegroundColor != currentColor)\n {\n myRichEditBox.Document.Selection.CharacterFormat.ForegroundColor = currentColor;\n }\n }\n\npublic SplitButtonPage()\n {\n this.InitializeComponent();\n\n myRichEditBox.Document.Selection.CharacterFormat.ForegroundColor = currentColor;\n myRichEditBox.Document.Selection.SetText(Microsoft.UI.Text.TextSetOptions.None,\n \u0022Lorem ipsum dolor sit amet, consectetur adipiscing elit, \u0022 \u002B\n \u0022sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor commodo ullamcorper a lacus.\u0022);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A two-part button that displays a flyout when its secondary part is clicked.","relatedControls":["Button","DropDownButton","ToggleSplitButton","AppBarButton","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"splitbutton-2","controlId":"splitbutton","controlName":"SplitButton","headerText":"A SplitButton with text","xaml":"\u003CSplitButton x:Name=\u0022myColorButton\u0022\u003E\n Choose color\n \u003CSplitButton.Flyout\u003E\n \u003CFlyout Placement=\u0022Bottom\u0022\u003E\n \u003C!-- flyout content --\u003E\n \u003C/Flyout\u003E\n \u003C/SplitButton.Flyout\u003E\n\u003C/SplitButton\u003E","csharp":"using Microsoft.UI;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Shapes;\nusing System.Threading.Tasks;\n\nprivate void RevealColorButton_Click(object sender, RoutedEventArgs e)\n {\n myColorButtonReveal.Flyout.Hide();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A two-part button that displays a flyout when its secondary part is clicked.","relatedControls":["Button","DropDownButton","ToggleSplitButton","AppBarButton","CommandBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"togglesplitbutton-1","controlId":"togglesplitbutton","controlName":"ToggleSplitButton","headerText":"Using ToggleSplitButton to control bulleted list functionality in RichEditBox","xaml":"\u003CToggleSplitButton x:Name=\u0022myListButton\u0022 VerticalAlignment=\u0022Top\u0022 Click=\u0022myListButton_Click\u0022\u003E\n \u003CSymbolIcon x:Name=\u0022mySymbolIcon\u0022 Symbol=\u0022List\u0022/\u003E\n \u003CToggleSplitButton.Flyout\u003E\n \u003CFlyout Placement=\u0022Bottom\u0022\u003E\n \u003C!-- flyout content --\u003E\n \u003C/Flyout\u003E\n \u003C/ToggleSplitButton.Flyout\u003E\n\u003C/ToggleSplitButton\u003E","csharp":"using Microsoft.UI.Text;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void MyListButton_IsCheckedChanged(Microsoft.UI.Xaml.Controls.ToggleSplitButton sender, Microsoft.UI.Xaml.Controls.ToggleSplitButtonIsCheckedChangedEventArgs args)\n {\n if (sender.IsChecked)\n {\n //add bulleted list\n myRichEditBox.Document.Selection.ParagraphFormat.ListType = _type;\n }\n else\n {\n //remove bulleted list\n myRichEditBox.Document.Selection.ParagraphFormat.ListType = MarkerType.None;\n }\n }\n\nprivate void BulletButton_Click(object sender, RoutedEventArgs e)\n {\n Button clickedBullet = (Button)sender;\n SymbolIcon symbol = (SymbolIcon)clickedBullet.Content;\n\n if (symbol.Symbol == Symbol.List)\n {\n _type = MarkerType.Bullet;\n mySymbolIcon.Symbol = Symbol.List;\n myListButton.SetValue(AutomationProperties.NameProperty, \u0022Bullets\u0022);\n }\n else if (symbol.Symbol == Symbol.Bullets)\n {\n _type = MarkerType.UppercaseRoman;\n mySymbolIcon.Symbol = Symbol.Bullets;\n myListButton.SetValue(AutomationProperties.NameProperty, \u0022Roman Numerals\u0022);\n }\n myRichEditBox.Document.Selection.ParagraphFormat.ListType = _type;\n\n myListButton.IsChecked = true;\n myListButton.Flyout.Hide();\n myRichEditBox.Focus(FocusState.Keyboard);\n }\n\nprivate MarkerType _type = MarkerType.Bullet;","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A version of the SplitButton where the activation target toggles on/off.","relatedControls":["SplitButton","DropDownButton","Button","ToggleButton","ToggleSwitch","CheckBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"checkbox-1","controlId":"checkbox","controlName":"CheckBox","headerText":"A 2-state CheckBox.","xaml":"\u003CCheckBox Content=\u0022Two-state CheckBox\u0022\n Checked=\u0022TwoState_Checked\u0022\n Unchecked=\u0022TwoState_Unchecked\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void TwoState_Checked(object sender, RoutedEventArgs e)\n {\n TwoStateOutput.Text = \u0022You checked the box.\u0022;\n }\n\nprivate void TwoState_Unchecked(object sender, RoutedEventArgs e)\n {\n TwoStateOutput.Text = \u0022You unchecked the box.\u0022;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that a user can select or clear.","relatedControls":["RadioButton","ToggleSwitch","ToggleButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"checkbox-2","controlId":"checkbox","controlName":"CheckBox","headerText":"A 3-state CheckBox.","xaml":"\u003CCheckBox Content=\u0022Three-state CheckBox\u0022\n IsThreeState=\u0022True\u0022\n Checked=\u0022ThreeState_Checked\u0022\n Unchecked=\u0022ThreeState_Unchecked\u0022\n Indeterminate=\u0022ThreeState_Indeterminate\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void ThreeState_Checked(object sender, RoutedEventArgs e)\n {\n ThreeStateOutput.Text = \u0022CheckBox is checked.\u0022;\n }\n\nprivate void ThreeState_Indeterminate(object sender, RoutedEventArgs e)\n {\n ThreeStateOutput.Text = \u0022CheckBox state is indeterminate.\u0022;\n }\n\nprivate void ThreeState_Unchecked(object sender, RoutedEventArgs e)\n {\n ThreeStateOutput.Text = \u0022CheckBox is unchecked.\u0022;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that a user can select or clear.","relatedControls":["RadioButton","ToggleSwitch","ToggleButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"checkbox-3","controlId":"checkbox","controlName":"CheckBox","headerText":"Using a 3-state CheckBox.","xaml":"\u003CStackPanel\u003E\n \u003CCheckBox x:Name=\u0022OptionsAllCheckBox\u0022 Content=\u0022Select all\u0022 IsThreeState=\u0022True\u0022\n Checked=\u0022SelectAll_Checked\u0022 Unchecked=\u0022SelectAll_Unchecked\u0022\n Indeterminate=\u0022SelectAll_Indeterminate\u0022 /\u003E\n \u003CCheckBox x:Name=\u0022Option1CheckBox\u0022 Content=\u0022Option 1\u0022 Margin=\u002224,0,0,0\u0022 Checked=\u0022Option_Checked\u0022 Unchecked=\u0022Option_Unchecked\u0022 /\u003E\n \u003CCheckBox x:Name=\u0022Option2CheckBox\u0022 Content=\u0022Option 2\u0022 Margin=\u002224,0,0,0\u0022 Checked=\u0022Option_Checked\u0022 Unchecked=\u0022Option_Unchecked\u0022 IsChecked=\u0022True\u0022 /\u003E\n \u003CCheckBox x:Name=\u0022Option3CheckBox\u0022 Content=\u0022Option 3\u0022 Margin=\u002224,0,0,0\u0022 Checked=\u0022Option_Checked\u0022 Unchecked=\u0022Option_Unchecked\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void SelectAll_Checked(object sender, RoutedEventArgs e)\n {\n Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = true;\n }\n\nprivate void SelectAll_Indeterminate(object sender, RoutedEventArgs e)\n {\n // If the SelectAll box is checked (all options are selected),\n // clicking the box will change it to its indeterminate state.\n // Instead, we want to uncheck all the boxes,\n // so we do this programatically. The indeterminate state should\n // only be set programatically, not by the user.\n\n if (Option1CheckBox.IsChecked == true \u0026\u0026\n Option2CheckBox.IsChecked == true \u0026\u0026\n Option3CheckBox.IsChecked == true)\n {\n // This will cause SelectAll_Unchecked to be executed, so\n // we don\u0027t need to uncheck the other boxes here.\n OptionsAllCheckBox.IsChecked = false;\n }\n }\n\nprivate void SelectAll_Unchecked(object sender, RoutedEventArgs e)\n {\n Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = false;\n }\n\nprivate void Option_Checked(object sender, RoutedEventArgs e)\n {\n SetCheckedState();\n }\n\nprivate void Option_Unchecked(object sender, RoutedEventArgs e)\n {\n SetCheckedState();\n }\n\nprivate void SetCheckedState()\n {\n // Controls are null the first time this is called, so we just\n // need to perform a null check on any one of the controls.\n if (Option1CheckBox != null)\n {\n if (Option1CheckBox.IsChecked == true \u0026\u0026\n Option2CheckBox.IsChecked == true \u0026\u0026\n Option3CheckBox.IsChecked == true)\n {\n OptionsAllCheckBox.IsChecked = true;\n }\n else if (Option1CheckBox.IsChecked == false \u0026\u0026\n Option2CheckBox.IsChecked == false \u0026\u0026\n Option3CheckBox.IsChecked == false)\n {\n OptionsAllCheckBox.IsChecked = false;\n }\n else\n {\n // Set third state (indeterminate) by setting IsChecked to null.\n OptionsAllCheckBox.IsChecked = null;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that a user can select or clear.","relatedControls":["RadioButton","ToggleSwitch","ToggleButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"colorpicker-1","controlId":"colorpicker","controlName":"ColorPicker","headerText":"ColorPicker Properties.","xaml":"\u003CColorPicker\n ColorSpectrumShape=\u0022...\u0022\n IsMoreButtonVisible=\u0022...\u0022\n IsColorSliderVisible=\u0022...\u0022\n IsColorChannelTextInputVisible=\u0022...\u0022\n IsHexInputVisible=\u0022...\u0022\n IsAlphaEnabled=\u0022...\u0022\n IsAlphaSliderVisible=\u0022...\u0022\n IsAlphaTextInputVisible=\u0022...\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\n\nprivate void ColorSpectrumShapeRadioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n switch (ColorSpectrumShapeRadioButtons.SelectedItem)\n {\n case \u0022Box\u0022:\n colorPicker.ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape.Box;\n break;\n default:\n colorPicker.ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape.Ring;\n break;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays a selectable color spectrum.","relatedControls":["ComboBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"combobox-1","controlId":"combobox","controlName":"ComboBox","headerText":"A ComboBox with items defined inline and its width set.","xaml":"\u003CComboBox SelectionChanged=\u0022ColorComboBox_SelectionChanged\u0022 Header=\u0022Colors\u0022 PlaceholderText=\u0022Pick a color\u0022 Width=\u0022200\u0022\u003E\n \u003Cx:String\u003EBlue\u003C/x:String\u003E\n \u003Cx:String\u003EGreen\u003C/x:String\u003E\n \u003Cx:String\u003ERed\u003C/x:String\u003E\n \u003Cx:String\u003EYellow\u003C/x:String\u003E\n\u003C/ComboBox\u003E","csharp":"using Microsoft.UI;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing System;\nusing System.Collections.Generic;\nusing Windows.Foundation.Metadata;\n\nprivate void ColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n string? colorName = e.AddedItems[0].ToString();\n Windows.UI.Color color;\n switch (colorName)\n {\n case \u0022Yellow\u0022:\n color = Colors.Yellow;\n break;\n case \u0022Green\u0022:\n color = Colors.Green;\n break;\n case \u0022Blue\u0022:\n color = Colors.Blue;\n break;\n case \u0022Red\u0022:\n color = Colors.Red;\n break;\n default:\n throw new Exception($\u0022Invalid argument: {colorName}\u0022);\n }\n Control1Output.Fill = new SolidColorBrush(color);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A drop-down list of items a user can select from.","relatedControls":["ListBox","RadioButton","CheckBox","ListView","AutoSuggestBox","RatingControl"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"combobox-2","controlId":"combobox","controlName":"ComboBox","headerText":"A ComboBox with its ItemsSource set.","xaml":"\u003CComboBox ItemsSource=\u0022{x:Bind Fonts}\u0022 DisplayMemberPath=\u0022Item1\u0022 SelectedValuePath=\u0022Item2\u0022\n Header=\u0022Font\u0022 Width=\u0022200\u0022 Loaded=\u0022Combo2_Loaded\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A drop-down list of items a user can select from.","relatedControls":["ListBox","RadioButton","CheckBox","ListView","AutoSuggestBox","RatingControl"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"combobox-3","controlId":"combobox","controlName":"ComboBox","headerText":"An editable ComboBox.","xaml":"\u003CComboBox IsEditable=\u0022True\u0022 ItemsSource=\u0022{x:Bind FontSizes}\u0022 Width=\u0022200\u0022 TextSubmitted=\u0022Combo3_TextSubmitted\u0022/\u003E","csharp":"using Microsoft.UI;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing System;\nusing System.Collections.Generic;\nusing Windows.Foundation.Metadata;\n\nprivate void Combo3_Loaded(object sender, RoutedEventArgs e)\n {\n Combo3.SelectedIndex = 2;\n\n if ((ApiInformation.IsApiContractPresent(\u0022Windows.Foundation.UniversalApiContract\u0022, 7)))\n {\n Combo3.TextSubmitted \u002B= Combo3_TextSubmitted;\n }\n }\n\npublic List\u003Cdouble\u003E FontSizes { get; } = new List\u003Cdouble\u003E()\n {\n 8,\n 9,\n 10,\n 11,\n 12,\n 14,\n 16,\n 18,\n 20,\n 24,\n 28,\n 36,\n 48,\n 72\n };\n\nprivate void Combo3_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs args)\n {\n bool isDouble = double.TryParse(sender.Text, out double newValue);\n\n // Set the selected item if:\n // - The value successfully parsed to double AND\n // - The value is in the list of sizes OR is a custom value between 8 and 100\n if (isDouble \u0026\u0026 (FontSizes.Contains(newValue) || (newValue \u003C 100 \u0026\u0026 newValue \u003E 8)))\n {\n // Update the SelectedItem to the new value. \n sender.SelectedItem = newValue;\n }\n else\n {\n // If the item is invalid, reject it and revert the text. \n sender.Text = sender.SelectedValue.ToString();\n\n var dialog = new ContentDialog();\n dialog.Content = \u0022The font size must be a number between 8 and 100.\u0022;\n dialog.CloseButtonText = \u0022Close\u0022;\n dialog.DefaultButton = ContentDialogButton.Close;\n dialog.XamlRoot = sender.XamlRoot;\n _ = dialog.ShowAsync();\n }\n\n // Mark the event as handled so the framework doesn\u2019t update the selected item automatically. \n args.Handled = true;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A drop-down list of items a user can select from.","relatedControls":["ListBox","RadioButton","CheckBox","ListView","AutoSuggestBox","RatingControl"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"radiobutton-1","controlId":"radiobutton","controlName":"RadioButton","headerText":"A group of RadioButton controls in a RadioButtons group.","xaml":"\u003CRadioButtons Header=\u0022Options:\u0022\u003E\n \u003CRadioButton Content=\u0022Option 1\u0022 Checked=\u0022RadioButton_Checked\u0022/\u003E\n \u003CRadioButton Content=\u0022Option 2\u0022 Checked=\u0022RadioButton_Checked\u0022/\u003E\n \u003CRadioButton Content=\u0022Option 3\u0022 Checked=\u0022RadioButton_Checked\u0022/\u003E\n\u003C/RadioButtons\u003E","csharp":"using Microsoft.UI;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\n\nprivate void RadioButton_Checked(object sender, RoutedEventArgs e)\n {\n Control1Output.Text = string.Format(\u0022You selected {0}\u0022, (sender as RadioButton)?.Content.ToString());\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that allows a user to select a single option from a group of options.","relatedControls":["CheckBox","ToggleSwitch","ToggleButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"radiobutton-2","controlId":"radiobutton","controlName":"RadioButton","headerText":"Two RadioButtons controls with strings as options.","xaml":"\u003CRadioButtons x:Name=\u0022BackgroundRadioButtons\u0022 SelectedIndex=\u0022...\u0022 MaxColumns=\u00223\u0022 Header=\u0022Background\u0022 SelectionChanged=\u0022BackgroundColor_SelectionChanged\u0022\u003E\n \u003Cx:String\u003EGreen\u003C/x:String\u003E\n \u003Cx:String\u003EYellow\u003C/x:String\u003E\n \u003Cx:String\u003EWhite\u003C/x:String\u003E\n\u003C/RadioButtons\u003E\n\u003CRadioButtons x:Name=\u0022BorderRadioButtons\u0022 SelectedIndex=\u0022...\u0022 MaxColumns=\u00223\u0022 Header=\u0022Border\u0022 SelectionChanged=\u0022BorderBrush_SelectionChanged\u0022\u003E\n \u003Cx:String\u003EGreen\u003C/x:String\u003E\n \u003Cx:String\u003EYellow\u003C/x:String\u003E\n \u003Cx:String\u003EWhite\u003C/x:String\u003E\n\u003C/RadioButtons\u003E\n\n\u003CBorder x:Name=\u0022ControlOutput\u0022 BorderThickness=\u002210\u0022 BorderBrush=\u0022#FFFFD700\u0022 Background=\u0022#FFFFFFFF\u0022","csharp":"using Microsoft.UI;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\n\nprivate void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (ControlOutput != null \u0026\u0026 sender is RadioButtons rb)\n {\n string? colorName = rb.SelectedItem as string;\n switch (colorName)\n {\n case \u0022Yellow\u0022:\n ControlOutput.Background = new SolidColorBrush(Colors.Yellow);\n break;\n case \u0022Green\u0022:\n ControlOutput.Background = new SolidColorBrush(Colors.Green);\n break;\n case \u0022White\u0022:\n ControlOutput.Background = new SolidColorBrush(Colors.White);\n break;\n }\n }\n }\n\nprivate void BorderBrush_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (ControlOutput != null \u0026\u0026 sender is RadioButtons rb)\n {\n string? colorName = rb.SelectedItem as string;\n switch (colorName)\n {\n case \u0022Yellow\u0022:\n ControlOutput.BorderBrush = new SolidColorBrush(Colors.Gold);\n break;\n case \u0022Green\u0022:\n ControlOutput.BorderBrush = new SolidColorBrush(Colors.DarkGreen);\n break;\n case \u0022White\u0022:\n ControlOutput.BorderBrush = new SolidColorBrush(Colors.White);\n break;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that allows a user to select a single option from a group of options.","relatedControls":["CheckBox","ToggleSwitch","ToggleButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"ratingcontrol-1","controlId":"ratingcontrol","controlName":"RatingControl","headerText":"A simple RatingControl","xaml":"\u003CRatingControl AutomationProperties.Name=\u0022Simple RatingControl\u0022 IsClearEnabled=\u0022...\u0022\n IsReadOnly=\u0022...\u0022 Caption=\u0022...\u0022/\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\n\nprivate void RatingControl1_ValueChanged(RatingControl sender, object args)\n {\n RatingControl1.Caption = \u0022Your rating\u0022;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Rate something 1 to 5 stars.","relatedControls":["Slider","ComboBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"ratingcontrol-2","controlId":"ratingcontrol","controlName":"RatingControl","headerText":"PlaceholderValue of RatingControl","xaml":"\u003CRatingControl AutomationProperties.Name=\u0022RatingControl with placeholder\u0022 PlaceholderValue=\u0022...\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Rate something 1 to 5 stars.","relatedControls":["Slider","ComboBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"slider-1","controlId":"slider","controlName":"Slider","headerText":"A simple Slider.","xaml":"\u003CSlider AutomationProperties.Name=\u0022simple slider\u0022 Width=\u0022200\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that lets the user select from a range of values by moving a Thumb control along a track.","relatedControls":["ComboBox","ListBox","RatingControl"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"slider-2","controlId":"slider","controlName":"Slider","headerText":"A Slider with range and steps specified.","xaml":"\u003CSlider Width=\u0022200\u0022 Minimum=\u0022...\u0022 Maximum=\u0022...\u0022 StepFrequency=\u0022...\u0022\n SmallChange=\u0022...\u0022 Value=\u0022...\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that lets the user select from a range of values by moving a Thumb control along a track.","relatedControls":["ComboBox","ListBox","RatingControl"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"slider-3","controlId":"slider","controlName":"Slider","headerText":"A Slider with tick marks.","xaml":"\u003CSlider\n AutomationProperties.Name=\u0022Slider with ticks\u0022\n TickFrequency=\u002220\u0022\n TickPlacement=\u0022Outside\u0022\n SnapsTo=\u0022...\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.Primitives;\n\nprivate void SnapsToRadioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n switch (SnapsToRadioButtons.SelectedItem)\n {\n case \u0022StepValues\u0022:\n Slider3.SnapsTo = SliderSnapsTo.StepValues;\n break;\n default:\n Slider3.SnapsTo = SliderSnapsTo.Ticks;\n break;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that lets the user select from a range of values by moving a Thumb control along a track.","relatedControls":["ComboBox","ListBox","RatingControl"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"slider-4","controlId":"slider","controlName":"Slider","headerText":"A vertical slider with range and tick marks specified.","xaml":"\u003CSlider AutomationProperties.Name=\u0022vertical slider\u0022 Width=\u0022100\u0022 Orientation=\u0022Vertical\u0022\n TickFrequency=\u002210\u0022 TickPlacement=\u0022Outside\u0022 Maximum=\u002250\u0022 Minimum=\u0022-50\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that lets the user select from a range of values by moving a Thumb control along a track.","relatedControls":["ComboBox","ListBox","RatingControl"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"toggleswitch-1","controlId":"toggleswitch","controlName":"ToggleSwitch","headerText":"A simple ToggleSwitch.","xaml":"\u003CToggleSwitch AutomationProperties.Name=\u0022simple ToggleSwitch\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A switch that can be toggled between 2 states.","relatedControls":["ToggleButton","RadioButton","CheckBox","AppBarToggleButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"toggleswitch-2","controlId":"toggleswitch","controlName":"ToggleSwitch","headerText":"A ToggleSwitch with custom header and content.","xaml":"\u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CToggleSwitch Header=\u0022Toggle work\u0022 OffContent=\u0022Do work\u0022 OnContent=\u0022Working\u0022 IsOn=\u0022......\u0022 /\u003E\n \u003CProgressRing IsActive=\u0022{x:Bind ToggleSwitch2.IsOn, Mode=OneWay}\u0022 Width=\u002232\u0022/\u003E\n\u003C/StackPanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A switch that can be toggled between 2 states.","relatedControls":["ToggleButton","RadioButton","CheckBox","AppBarToggleButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"infobadge-1","controlId":"infobadge","controlName":"InfoBadge","headerText":"InfoBadge embedded in NavigationView ","xaml":"\u003CNavigationViewItem x:Name=\u0022InboxPage\u0022 Content=\u0022Inbox\u0022 Icon=\u0022Mail\u0022 AutomationProperties.Name=\u0022Inbox, 5 notifications\u0022\u003E\n \u003CNavigationViewItem.InfoBadge\u003E\n \u003CInfoBadge x:Name=\u0022infoBadge1\u0022 Value=\u00225\u0022 Opacity=\u0022{x:Bind InfoBadgeOpacity, Mode=OneWay}\u0022/\u003E\n \u003C/NavigationViewItem.InfoBadge\u003E\n\u003C/NavigationViewItem\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\npublic double InfoBadgeOpacity\n {\n get { return (double)GetValue(InfoBadgeOpacityProperty); }\n set { SetValue(InfoBadgeOpacityProperty, value); }\n }\n\n public static readonly DependencyProperty InfoBadgeOpacityProperty =\n DependencyProperty.Register(\u0022ShadowOpacity\u0022, typeof(double), typeof(PageHeader), new PropertyMetadata(0.0));\n\npublic void NavigationViewDisplayMode_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n string? paneDisplayMode = e.AddedItems[0].ToString();\n\n switch (paneDisplayMode)\n {\n case \u0022LeftExpanded\u0022:\n nvSample1.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Left;\n nvSample1.IsPaneOpen = true;\n break;\n\n case \u0022LeftCompact\u0022:\n nvSample1.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.LeftCompact;\n nvSample1.IsPaneOpen = false;\n break;\n\n case \u0022Top\u0022:\n nvSample1.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Top;\n nvSample1.IsPaneOpen = true;\n break;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An non-intrusive UI to display notifications or bring focus to an area.","relatedControls":["InfoBar","TeachingTip","BadgeNotificationManager"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"infobadge-2","controlId":"infobadge","controlName":"InfoBadge","headerText":"Different InfoBadge Styles","xaml":"\u003CStackPanel Orientation=\u0022Horizontal\u0022 Spacing=\u002220\u0022 HorizontalAlignment=\u0022Center\u0022/\u003E\n \u003CInfoBadge x:Name=\u0022infoBadge2\u0022 Style=\u0022{StaticResource ...IconInfoBadgeStyle}\u0022 HorizontalAlignment=\u0022Right\u0022/\u003E\n \u003CInfoBadge x:Name=\u0022infoBadge3\u0022 Style=\u0022{StaticResource ...ValueInfoBadgeStyle}\u0022 HorizontalAlignment=\u0022Right\u0022 Value=\u002210\u0022 /\u003E\n \u003CInfoBadge x:Name=\u0022infoBadge4\u0022 Style=\u0022{StaticResource ...DotInfoBadgeStyle}\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n\u003C/StackPanel\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\npublic void InfoBadgeStyleComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n string? infoBadgeStyle = e.AddedItems[0].ToString();\n\n switch (infoBadgeStyle)\n {\n case \u0022Attention\u0022:\n infoBadge2.Style = Application.Current.Resources[\u0022AttentionIconInfoBadgeStyle\u0022] as Style;\n infoBadge3.Style = Application.Current.Resources[\u0022AttentionValueInfoBadgeStyle\u0022] as Style;\n infoBadge4.Style = Application.Current.Resources[\u0022AttentionDotInfoBadgeStyle\u0022] as Style;\n break;\n\n case \u0022Informational\u0022:\n infoBadge2.Style = Application.Current.Resources[\u0022InformationalIconInfoBadgeStyle\u0022] as Style;\n infoBadge3.Style = Application.Current.Resources[\u0022InformationalValueInfoBadgeStyle\u0022] as Style;\n infoBadge4.Style = Application.Current.Resources[\u0022InformationalDotInfoBadgeStyle\u0022] as Style;\n break;\n\n case \u0022Success\u0022:\n infoBadge2.Style = Application.Current.Resources[\u0022SuccessIconInfoBadgeStyle\u0022] as Style;\n infoBadge3.Style = Application.Current.Resources[\u0022SuccessValueInfoBadgeStyle\u0022] as Style;\n infoBadge4.Style = Application.Current.Resources[\u0022SuccessDotInfoBadgeStyle\u0022] as Style;\n break;\n\n case \u0022Critical\u0022:\n infoBadge2.Style = Application.Current.Resources[\u0022CriticalIconInfoBadgeStyle\u0022] as Style;\n infoBadge3.Style = Application.Current.Resources[\u0022CriticalValueInfoBadgeStyle\u0022] as Style;\n infoBadge4.Style = Application.Current.Resources[\u0022CriticalDotInfoBadgeStyle\u0022] as Style;\n break;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An non-intrusive UI to display notifications or bring focus to an area.","relatedControls":["InfoBar","TeachingTip","BadgeNotificationManager"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"infobadge-3","controlId":"infobadge","controlName":"InfoBadge","headerText":"Placing an InfoBadge Inside Another Control","xaml":"\u003CButton Padding=\u00220\u0022 Width=\u0022200\u0022 Height=\u002260\u0022 ToolTipService.ToolTip=\u0022Refresh required\u0022\n HorizontalAlignment=\u0022Center\u0022 HorizontalContentAlignment=\u0022Stretch\u0022 VerticalContentAlignment=\u0022Stretch\u0022\u003E\n \u003CGrid HorizontalAlignment=\u0022Stretch\u0022 VerticalAlignment=\u0022Stretch\u0022 Width=\u0022Auto\u0022 Height=\u0022Auto\u0022\u003E\n \u003CSymbolIcon Symbol=\u0022Sync\u0022 HorizontalAlignment=\u0022Center\u0022/\u003E\n \u003CInfoBadge Background=\u0022#C42B1C\u0022 HorizontalAlignment=\u0022Right\u0022 VerticalAlignment=\u0022Top\u0022\u003E\n \u003CInfoBadge.IconSource\u003E\n \u003CFontIconSource FontFamily=\u0022{StaticResource SymbolThemeFontFamily}\u0022 Glyph=\u0022\u0026#xF13C;\u0022 /\u003E\n \u003C/InfoBadge.IconSource\u003E\n \u003C/InfoBadge\u003E\n \u003C/Grid\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An non-intrusive UI to display notifications or bring focus to an area.","relatedControls":["InfoBar","TeachingTip","BadgeNotificationManager"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"infobadge-4","controlId":"infobadge","controlName":"InfoBadge","headerText":"InfoBadge with Dynamic Value","xaml":"\u003CInfoBadge Value=\u0022{Binding ElementName=ValueNumberBox, Path=Value, Mode=TwoWay}\u0022 /\u003E\n\u003CNumberBox x:Name=\u0022ValueNumberBox\u0022 Header=\u0022InfoBadge Value\u0022 Value=\u00221\u0022 Minimum=\u0022-1\u0022\n SpinButtonPlacementMode=\u0022Inline\u0022 ValueChanged=\u0022ValueNumberBox_ValueChanged\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void ValueNumberBox_ValueChanged(Microsoft.UI.Xaml.Controls.NumberBox sender, Microsoft.UI.Xaml.Controls.NumberBoxValueChangedEventArgs args)\n {\n if ((int)args.NewValue \u003E= -1)\n {\n DynamicInfoBadge.Value = (int)args.NewValue;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An non-intrusive UI to display notifications or bring focus to an area.","relatedControls":["InfoBar","TeachingTip","BadgeNotificationManager"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"infobar-1","controlId":"infobar","controlName":"InfoBar","headerText":"A closable InfoBar with options to change its Severity.","xaml":"\u003CInfoBar \n IsOpen=\u0022True\u0022\n Severity=\u0022Informational\u0022\n Title=\u0022Title\u0022\n Message=\u0022Essential app message for your users to be informed of, acknowledge, or take action on.\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System;\n\nprivate void SeverityComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n string? severityName = e.AddedItems[0].ToString();\n\n switch (severityName)\n {\n case \u0022Error\u0022:\n TestInfoBar1.Severity = InfoBarSeverity.Error;\n break;\n\n case \u0022Warning\u0022:\n TestInfoBar1.Severity = InfoBarSeverity.Warning;\n break;\n\n case \u0022Success\u0022:\n TestInfoBar1.Severity = InfoBarSeverity.Success;\n break;\n\n case \u0022Informational\u0022:\n default:\n TestInfoBar1.Severity = InfoBarSeverity.Informational;\n break;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An inline message to display app-wide status change information.","relatedControls":["TeachingTip","ContentDialog"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"infobar-2","controlId":"infobar","controlName":"InfoBar","headerText":"A closable InfoBar with a long or short message and various buttons","xaml":"\u003CInfoBar \n IsOpen=\u0022True\u0022\n Title=\u0022Title\u0022\n Message=\u0022...\u0022 \u003E\n ...\n\u003C/InfoBar\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System;\n\nprivate void MessageComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (TestInfoBar2 == null) return;\n\n if (MessageComboBox.SelectedIndex == 0) // short\n {\n string shortMessage = \u0022A short essential app message.\u0022;\n TestInfoBar2.Message = shortMessage;\n DisplayMessage.Value = shortMessage;\n }\n else if (MessageComboBox.SelectedIndex == 1) //long\n {\n TestInfoBar2.Message = @\u0022A long essential app message for your users to be informed of, acknowledge, or take action on. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus dolor vitae justo rutrum, ut lobortis nibh mattis. Aenean id elit commodo, semper felis nec.\u0022;\n DisplayMessage.Value = \u0022A long essential app message...\u0022;\n }\n }\n\nprivate void ActionButtonComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (TestInfoBar2 == null) return;\n\n if (ActionButtonComboBox.SelectedIndex == 0) // none\n {\n TestInfoBar2.ActionButton = null;\n DisplayButton.Value = string.Empty;\n }\n else if (ActionButtonComboBox.SelectedIndex == 1) // button\n {\n var button = new Button();\n button.Content = \u0022Action\u0022;\n TestInfoBar2.ActionButton = button;\n DisplayButton.Value = @\u0022\u003CInfoBar.ActionButton\u003E\n \u003CButton Content=\u0022\u0022Action\u0022\u0022 Click=\u0022\u0022InfoBarButton_Click\u0022\u0022 /\u003E\n \u003C/InfoBar.ActionButton\u003E \u0022;\n\n }\n else if (ActionButtonComboBox.SelectedIndex == 2) // hyperlink\n {\n var link = new HyperlinkButton();\n link.NavigateUri = new Uri(\u0022http://www.microsoft.com/\u0022);\n link.Content = \u0022Informational link\u0022;\n TestInfoBar2.ActionButton = link;\n DisplayButton.Value = @\u0022\u003CInfoBar.ActionButton\u003E\n \u003CHyperlinkButton Content=\u0022\u0022Informational link\u0022\u0022 NavigateUri=\u0022\u0022https://www.example.com\u0022\u0022 /\u003E\n \u003C/InfoBar.ActionButton\u003E\u0022;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An inline message to display app-wide status change information.","relatedControls":["TeachingTip","ContentDialog"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"infobar-3","controlId":"infobar","controlName":"InfoBar","headerText":"A closable InfoBar with options to display the close button and icon","xaml":"\u003CInfoBar \n IsOpen=\u0022True\u0022\n IsIconVisible=\u0022...\u0022 \n IsClosable=\u0022...\u0022\n Title=\u0022Title\u0022\n Message=\u0022Essential app message for your users to be informed of, acknowledge, or take action on.\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An inline message to display app-wide status change information.","relatedControls":["TeachingTip","ContentDialog"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"progressbar-1","controlId":"progressbar","controlName":"ProgressBar","headerText":"An indeterminate progress bar.","xaml":"\u003CProgressBar Width=\u0022130\u0022 IsIndeterminate=\u0022True\u0022 ShowPaused=\u0022...\u0022 ShowError=\u0022...\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows the apps progress on a task, or that the app is performing ongoing work that doesn\u0027t block user interaction.","relatedControls":["ProgressRing"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"progressbar-2","controlId":"progressbar","controlName":"ProgressBar","headerText":"A determinate progress bar.","xaml":"\u003CProgressBar Width=\u0022130\u0022 Value=\u0022...\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\n\nprivate void ProgressValue_ValueChanged(Microsoft.UI.Xaml.Controls.NumberBox sender, Microsoft.UI.Xaml.Controls.NumberBoxValueChangedEventArgs args)\n {\n // Value might be NaN, which is not valid as value, thus we need to handle changes ourselves\n\n if (!double.IsNaN(sender.Value))\n {\n ProgressBar2.Value = sender.Value;\n }\n else\n {\n sender.Value = 0;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows the apps progress on a task, or that the app is performing ongoing work that doesn\u0027t block user interaction.","relatedControls":["ProgressRing"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"progressring-1","controlId":"progressring","controlName":"ProgressRing","headerText":"An indeterminate progress ring.","xaml":"\u003CProgressRing IsActive=\u0022...\u0022 .../\u003E","csharp":"using Microsoft.UI;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing System;\n\nprivate void Background_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n var progressRing = (ComboBox)sender == BackgroundComboBox1 ? ProgressRing1 : ProgressRing2;\n var revealBackgroundProperty = (ComboBox)sender == BackgroundComboBox1 ? RevealBackgroundProperty1 : RevealBackgroundProperty2;\n string? colorName = e.AddedItems[0].ToString();\n bool showBackgroundProperty = false;\n switch (colorName)\n {\n case \u0022Transparent\u0022:\n progressRing.Background = new SolidColorBrush(Colors.Transparent);\n break;\n case \u0022LightGray\u0022:\n progressRing.Background = new SolidColorBrush(Colors.LightGray);\n showBackgroundProperty = true;\n break;\n\n default:\n throw new Exception($\u0022Invalid argument: {colorName}\u0022);\n }\n revealBackgroundProperty.IsEnabled = showBackgroundProperty;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows the apps progress on a task, or that the app is performing ongoing work that does block user interaction.","relatedControls":["ProgressBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"progressring-2","controlId":"progressring","controlName":"ProgressRing","headerText":"A determinate progress ring.","xaml":"\u003CProgressRing Width=\u002260\u0022 Height=\u002260\u0022 Value=\u0022...\u0022\n IsIndeterminate=\u0022False\u0022\n .../\u003E","csharp":"using Microsoft.UI;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing System;\n\nprivate void ProgressValue_ValueChanged(Microsoft.UI.Xaml.Controls.NumberBox sender, Microsoft.UI.Xaml.Controls.NumberBoxValueChangedEventArgs args)\n {\n if (!double.IsNaN(sender.Value))\n {\n ProgressRing2.Value = sender.Value;\n }\n else\n {\n sender.Value = 0;\n }\n }\n\nprivate void Background_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n var progressRing = (ComboBox)sender == BackgroundComboBox1 ? ProgressRing1 : ProgressRing2;\n var revealBackgroundProperty = (ComboBox)sender == BackgroundComboBox1 ? RevealBackgroundProperty1 : RevealBackgroundProperty2;\n string? colorName = e.AddedItems[0].ToString();\n bool showBackgroundProperty = false;\n switch (colorName)\n {\n case \u0022Transparent\u0022:\n progressRing.Background = new SolidColorBrush(Colors.Transparent);\n break;\n case \u0022LightGray\u0022:\n progressRing.Background = new SolidColorBrush(Colors.LightGray);\n showBackgroundProperty = true;\n break;\n\n default:\n throw new Exception($\u0022Invalid argument: {colorName}\u0022);\n }\n revealBackgroundProperty.IsEnabled = showBackgroundProperty;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows the apps progress on a task, or that the app is performing ongoing work that does block user interaction.","relatedControls":["ProgressBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"tooltip-1","controlId":"tooltip","controlName":"ToolTip","headerText":"A button with a simple ToolTip.","xaml":"\u003CButton Content=\u0022Button with a simple ToolTip.\u0022 ToolTipService.ToolTip=\u0022Simple ToolTip\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Displays information for an element in a pop-up window.","relatedControls":["TeachingTip","Flyout","ContentDialog"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"tooltip-2","controlId":"tooltip","controlName":"ToolTip","headerText":"A TextBlock with an offset ToolTip.","xaml":"\u003CTextBlock Text=\u0022TextBlock with an offset ToolTip.\u0022\u003E\n \u003CToolTipService.ToolTip\u003E\n \u003CToolTip Content=\u0022Offset ToolTip.\u0022 VerticalOffset=\u0022-80\u0022/\u003E\n \u003C/ToolTipService.ToolTip\u003E\n\u003C/TextBlock\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Displays information for an element in a pop-up window.","relatedControls":["TeachingTip","Flyout","ContentDialog"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"tooltip-3","controlId":"tooltip","controlName":"ToolTip","headerText":"An Image with a ToolTip using PlacementRect.","xaml":"\u003CImage Source=\u0022/Assets/SampleMedia/cliff.jpg\u0022 Width=\u0022400\u0022 Height=\u0022266\u0022\u003E\n \u003CToolTipService.ToolTip\u003E\n \u003CToolTip Content=\u0022Non-occluding ToolTip.\u0022 PlacementRect=\u00220,0,400,266\u0022/\u003E\n \u003C/ToolTipService.ToolTip\u003E\n\u003C/Image\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Displays information for an element in a pop-up window.","relatedControls":["TeachingTip","Flyout","ContentDialog"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"contentdialog-1","controlId":"contentdialog","controlName":"ContentDialog","headerText":"A basic content dialog with content.","xaml":"\u003CPage\n x:Class=\u0022YourApp.YourPage\u0022\n xmlns=\u0022http://schemas.microsoft.com/winfx/2006/xaml/presentation\u0022\n xmlns:x=\u0022http://schemas.microsoft.com/winfx/2006/xaml\u0022\u003E\n\n \u003CStackPanel VerticalAlignment=\u0022Stretch\u0022 HorizontalAlignment=\u0022Stretch\u0022\u003E\n \u003C!-- Content body --\u003E\n \u003CTextBlock Text=\u0022Lorem ipsum dolor sit amet, adipisicing elit.\u0022 TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003CCheckBox Content=\u0022Upload your content to the cloud.\u0022/\u003E\n \u003C/StackPanel\u003E\n\n\u003C/Page\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation.Peers;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing System;\n\nprivate async void ShowDialog_Click(object sender, RoutedEventArgs e)\n {\n ContentDialogExample dialog = new ContentDialogExample();\n\n // XamlRoot must be set in the case of a ContentDialog running in a Desktop app\n dialog.XamlRoot = this.XamlRoot;\n dialog.Style = Application.Current.Resources[\u0022DefaultContentDialogStyle\u0022] as Style;\n dialog.Title = \u0022Save your work?\u0022;\n dialog.PrimaryButtonText = \u0022Save\u0022;\n dialog.SecondaryButtonText = \u0022Don\u0027t Save\u0022;\n dialog.CloseButtonText = \u0022Cancel\u0022;\n dialog.DefaultButton = ContentDialogButton.Primary;\n dialog.Content = new ContentDialogContent();\r\n\r\n if (sender is Button button \u0026\u0026\r\n VisualTreeHelper.GetParent(button) is StackPanel stackPanel)\r\n {\r\n dialog.RequestedTheme = stackPanel.ActualTheme;\r\n }\n\n var result = await dialog.ShowAsync();\n\n if (result == ContentDialogResult.Primary)\n {\n SetDialogResultText(DialogResult, \u0022User saved their work\u0022);\n }\n else if (result == ContentDialogResult.Secondary)\n {\n SetDialogResultText(DialogResult, \u0022User did not save their work\u0022);\n }\n else\n {\n SetDialogResultText(DialogResult, \u0022User cancelled the dialog\u0022);\n }\n }\n\nprivate void SetDialogResultText(TextBlock targetTextBlock, string text)\n {\n targetTextBlock.Text = text;\n var peer = FrameworkElementAutomationPeer.FromElement(targetTextBlock) ?? FrameworkElementAutomationPeer.CreatePeerForElement(targetTextBlock);\n peer?.RaiseAutomationEvent(AutomationEvents.LiveRegionChanged);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A dialog box that can be customized to contain any XAML content.","relatedControls":["Flyout","MenuFlyout","TeachingTip","ToolTip"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"contentdialog-2","controlId":"contentdialog","controlName":"ContentDialog","headerText":"A content dialog without a default button.","xaml":"\u003CPage\n x:Class=\u0022YourApp.YourPage\u0022\n xmlns=\u0022http://schemas.microsoft.com/winfx/2006/xaml/presentation\u0022\n xmlns:x=\u0022http://schemas.microsoft.com/winfx/2006/xaml\u0022\u003E\n\n \u003CStackPanel VerticalAlignment=\u0022Stretch\u0022 HorizontalAlignment=\u0022Stretch\u0022\u003E\n \u003C!-- Content body --\u003E\n \u003CTextBlock Text=\u0022Lorem ipsum dolor sit amet, adipisicing elit.\u0022 TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003CCheckBox Content=\u0022Upload your content to the cloud.\u0022/\u003E\n \u003C/StackPanel\u003E\n\n\u003C/Page\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation.Peers;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing System;\n\nprivate async void ShowDialogNoDefault_Click(object sender, RoutedEventArgs e)\n {\n ContentDialogExample dialog = new ContentDialogExample();\n\n // XamlRoot must be set in the case of a ContentDialog running in a Desktop app\n dialog.XamlRoot = this.XamlRoot;\n dialog.Style = Application.Current.Resources[\u0022DefaultContentDialogStyle\u0022] as Style;\n dialog.Title = \u0022Replace file?\u0022;\n dialog.PrimaryButtonText = \u0022Replace\u0022;\n dialog.SecondaryButtonText = \u0022Keep\u0022;\n dialog.CloseButtonText = \u0022Cancel\u0022;\n dialog.DefaultButton = ContentDialogButton.None;\n dialog.Content = new ContentDialogContent();\n\r\n if (sender is Button button \u0026\u0026\r\n VisualTreeHelper.GetParent(button) is StackPanel stackPanel)\r\n {\r\n dialog.RequestedTheme = stackPanel.ActualTheme;\r\n }\r\n\n var result = await dialog.ShowAsync();\n\n if (result == ContentDialogResult.Primary)\n {\n SetDialogResultText(DialogResultNoDefault, \u0022User replaced the file\u0022);\n }\n else if (result == ContentDialogResult.Secondary)\n {\n SetDialogResultText(DialogResultNoDefault, \u0022User kept the file\u0022);\n }\n else\n {\n SetDialogResultText(DialogResultNoDefault, \u0022User cancelled the dialog\u0022);\n }\n }\n\nprivate void SetDialogResultText(TextBlock targetTextBlock, string text)\n {\n targetTextBlock.Text = text;\n var peer = FrameworkElementAutomationPeer.FromElement(targetTextBlock) ?? FrameworkElementAutomationPeer.CreatePeerForElement(targetTextBlock);\n peer?.RaiseAutomationEvent(AutomationEvents.LiveRegionChanged);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A dialog box that can be customized to contain any XAML content.","relatedControls":["Flyout","MenuFlyout","TeachingTip","ToolTip"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"flyout-1","controlId":"flyout","controlName":"Flyout","headerText":"A button with a flyout","xaml":"\u003CButton Content=\u0022Empty cart\u0022\u003E\n \u003CButton.Flyout\u003E\n \u003CFlyout\u003E\n \u003CStackPanel\u003E\n \u003CTextBlock Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022 Text=\u0022All items will be removed. Do you want to continue?\u0022 Margin=\u00220,0,0,12\u0022 /\u003E\n \u003CButton Click=\u0022DeleteConfirmation_Click\u0022 Content=\u0022Yes, empty my cart\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Flyout\u003E\n \u003C/Button.Flyout\u003E\n\u003C/Button\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void DeleteConfirmation_Click(object sender, RoutedEventArgs e)\n {\n if (this.Control1.Flyout is Flyout f)\n {\n f.Hide();\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows contextual information and enables user interaction.","relatedControls":["TeachingTip","ContentDialog","MenuFlyout","Button","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"popup-1","controlId":"popup","controlName":"Popup","headerText":"Popup with Offset Positioning","xaml":"\u003CGrid x:Name=\u0022Output\u0022 HorizontalAlignment=\u0022Left\u0022 VerticalAlignment=\u0022Top\u0022 \u003E\n \u003CButton Content=\u0022Show Popup (using Offset)\u0022 Click=\u0022ShowPopupOffsetClicked\u0022 /\u003E\n \u003CPopup x:Name=\u0022StandardPopup\u0022 VerticalOffset=\u0022...\u0022 HorizontalOffset=\u0022...\u0022 IsLightDismissEnabled=\u0022...\u0022\u003E\n \u003CBorder Padding=\u002220\u0022 CornerRadius=\u0022{StaticResource OverlayCornerRadius}\u0022 Width=\u0022200\u0022 Height=\u0022160\u0022 BorderThickness=\u00221\u0022 BorderBrush=\u0022{ThemeResource SurfaceStrokeColorDefaultBrush}\u0022\n Background=\u0022{ThemeResource AcrylicBackgroundFillColorDefaultBrush}\u0022\u003E\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022 Spacing=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022Simple Popup\u0022 FontSize=\u002216\u0022 HorizontalAlignment=\u0022Center\u0022 /\u003E\n \u003CButton Content=\u0022Close\u0022 Click=\u0022ClosePopupClicked\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Border\u003E\n \u003C/Popup\u003E\n\u003C/Grid\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void ShowPopupOffsetClicked(object sender, RoutedEventArgs e)\n {\n // open the Popup if it isn\u0027t open already \n if (!StandardPopup.IsOpen) { StandardPopup.IsOpen = true; }\n IsLightDismissEnabledToggleSwitch.IsEnabled = false;\n }\n\nprivate void ClosePopupClicked(object sender, RoutedEventArgs e)\n {\n // if the Popup is open, then close it \n if (StandardPopup.IsOpen) { StandardPopup.IsOpen = false; }\n IsLightDismissEnabledToggleSwitch.IsEnabled = true;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A UI element displaying temporary content over existing interface.","relatedControls":["ContentDialog"],"apiNamespace":"Microsoft.UI.Xaml.Controls.Primitives","docs":[{"title":"Popup - API","uri":"https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.primitives.popup"}]},{"id":"teachingtip-1","controlId":"teachingtip","controlName":"TeachingTip","headerText":"Show a targeted TeachingTip on a button.","xaml":"\u003CButton\n x:Name=\u0022TestButton1\u0022\n Click=\u0022TestButton1Click\u0022\n Content=\u0022Show TeachingTip\u0022 /\u003E\n\u003CTeachingTip\n x:Name=\u0022TestButton1TeachingTip\u0022\n Title=\u0022This is the title\u0022\n Subtitle=\u0022And this is the subtitle\u0022\n Target=\u0022{x:Bind TestButton1}\u0022\u003E\n \u003CTeachingTip.IconSource\u003E\n \u003CSymbolIconSource Symbol=\u0022Refresh\u0022 /\u003E\n \u003C/TeachingTip.IconSource\u003E\n\u003C/TeachingTip\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void TestButton1Click(object sender, RoutedEventArgs e)\n {\n TestButton1TeachingTip.IsOpen = true;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A content-rich flyout for guiding users and enabling teaching moments.","relatedControls":["ContentDialog","Flyout","ToolTip"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"teachingtip-2","controlId":"teachingtip","controlName":"TeachingTip","headerText":"Show a non-targeted TeachingTip with buttons.","xaml":"\u003CButton\n Click=\u0022TestButton2Click\u0022\n Content=\u0022Show TeachingTip\u0022 /\u003E\n\u003CTeachingTip\n x:Name=\u0022TestButton2TeachingTip\u0022\n Title=\u0022This is the title\u0022\n ActionButtonContent=\u0022Action button\u0022\n CloseButtonContent=\u0022Close button\u0022\n IsLightDismissEnabled=\u0022True\u0022\n PlacementMargin=\u002220\u0022\n PreferredPlacement=\u0022Auto\u0022\n Subtitle=\u0022And this is the subtitle\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void TestButton2Click(object sender, RoutedEventArgs e)\n {\n TestButton2TeachingTip.IsOpen = true;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A content-rich flyout for guiding users and enabling teaching moments.","relatedControls":["ContentDialog","Flyout","ToolTip"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"teachingtip-3","controlId":"teachingtip","controlName":"TeachingTip","headerText":"Show a targeted TeachingTip with hero content on a button.","xaml":"\u003CButton\n x:Name=\u0022TestButton3\u0022\n Click=\u0022TestButton3Click\u0022\n Content=\u0022Show TeachingTip\u0022 /\u003E\n\u003CTeachingTip\n x:Name=\u0022TestButton3TeachingTip\u0022\n Title=\u0022This is the title\u0022\n PreferredPlacement=\u0022Bottom\u0022\n Subtitle=\u0022And this is the subtitle\u0022\n Target=\u0022{x:Bind TestButton3}\u0022\u003E\n \u003CTeachingTip.HeroContent\u003E\n \u003CImage\n AutomationProperties.Name=\u0022Sunset\u0022\n Source=\u0022/Assets/SampleMedia/sunset.jpg\u0022 /\u003E\n \u003C/TeachingTip.HeroContent\u003E\n \u003CTeachingTip.Content\u003E\n \u003CTextBlock\n Margin=\u00220,16,0,0\u0022\n Text=\u0022Description can go here\u0022\n TextWrapping=\u0022WrapWholeWords\u0022 /\u003E\n \u003C/TeachingTip.Content\u003E\n\u003C/TeachingTip\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void TestButton3Click(object sender, RoutedEventArgs e)\n {\n TestButton3TeachingTip.IsOpen = true;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A content-rich flyout for guiding users and enabling teaching moments.","relatedControls":["ContentDialog","Flyout","ToolTip"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"annotatedscrollbar-1","controlId":"annotatedscrollbar","controlName":"AnnotatedScrollBar","headerText":"AnnotatedScrollBar linked to a ScrollView.","xaml":"\u003CScrollView x:Name=\u0022scrollView\u0022\n Background=\u0022LightGray\u0022 MaxWidth=\u0022800\u0022 MaxHeight=\u0022500\u0022\n VerticalScrollBarVisibility=\u0022Hidden\u0022\u003E\n \u003C!-- ... --\u003E\n\u003C/ScrollView\u003E\n \n\u003CAnnotatedScrollBar x:Name=\u0022annotatedScrollBar\u0022\n Margin=\u00224,0,48,0\u0022 MaxHeight=\u0022500\u0022\n HorizontalAlignment=\u0022Right\u0022\n DetailLabelRequested=\u0022AnnotatedScrollBar_DetailLabelRequested\u0022/\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.Primitives;\nusing Microsoft.UI.Xaml.Media;\nusing System;\nusing System.Collections.ObjectModel;\n\nprivate void ItemsRepeater_SizeChanged(object sender, Microsoft.UI.Xaml.SizeChangedEventArgs e)\n {\n // When the ItemsRepeater is resized, its items layout may change and thus require an update of\n // the AnnotatedScrollBar label positions.\n PopulateLabelCollection();\n }\n\nprivate void AnnotatedScrollBar_DetailLabelRequested(object sender, AnnotatedScrollBarDetailLabelRequestedEventArgs e)\n {\n // Provide a string as the tooltip content when hovering the mouse over the AnnotatedScrollBar\u0027s vertical rail. The string simply\n // represents the color of the last item in the row computed from AnnotatedScrollBarDetailLabelRequestedEventArgs.ScrollOffset.\n e.Content = GetOffsetLabel(e.ScrollOffset);\n }\n\nprivate void AnnotatedScrollBarMaxHeightSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)\n {\n if (sender is Slider slider \u0026\u0026\n annotatedScrollBar != null)\n {\n // Changing the height of the AnnotatedScrollBar to illustrate how labels\n // are hidden to avoid collisions when the available room shrinks too much.\n annotatedScrollBar.MaxHeight = slider.Value;\n }\n }\n\npublic ObservableCollection\u003CSolidColorBrush\u003E ColorCollection = new ObservableCollection\u003CSolidColorBrush\u003E();\n\npublic AnnotatedScrollBarPage()\n {\n this.InitializeComponent();\n this.DataContext = this;\n this.Loaded \u002B= AnnotatedScrollBarPage_Loaded;\n\n PopulateColorCollection();\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that extends a regular vertical scrollbar\u0027s functionality for an easy navigation through large collections.","relatedControls":["ItemsView","ScrollView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","docs":[{"title":"AnnotatedScrollBar - API","uri":"https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.annotatedscrollbar"}]},{"id":"pipspager-1","controlId":"pipspager","controlName":"PipsPager","headerText":"PipsPager integrated with a FlipView","xaml":"\u003CStackPanel\u003E\n \u003CFlipView x:Name=\u0022Gallery\u0022 MaxWidth=\u0022400\u0022 Height=\u0022270\u0022 ItemsSource=\u0022{x:Bind Pictures}\u0022\u003E\n \u003CFlipView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022x:String\u0022\u003E\n \u003CImage Source=\u0022{x:Bind Mode=OneTime}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/FlipView.ItemTemplate\u003E\n \u003C/FlipView\u003E\n \u003CPipsPager x:Name=\u0022FlipViewPipsPager\u0022\n HorizontalAlignment=\u0022Center\u0022\n Margin=\u00220, 12, 0, 0\u0022\n NumberOfPages=\u0022{x:Bind Pictures.Count}\u0022\n SelectedPageIndex=\u0022{x:Bind Path=Gallery.SelectedIndex, Mode=TwoWay}\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System.Collections.Generic;\n\npublic List\u003Cstring\u003E Pictures = new List\u003Cstring\u003E()\n {\n \u0022ms-appx:///Assets/SampleMedia/LandscapeImage1.jpg\u0022,\n \u0022ms-appx:///Assets/SampleMedia/LandscapeImage2.jpg\u0022,\n \u0022ms-appx:///Assets/SampleMedia/LandscapeImage3.jpg\u0022,\n \u0022ms-appx:///Assets/SampleMedia/LandscapeImage4.jpg\u0022,\n \u0022ms-appx:///Assets/SampleMedia/LandscapeImage5.jpg\u0022,\n \u0022ms-appx:///Assets/SampleMedia/LandscapeImage6.jpg\u0022,\n \u0022ms-appx:///Assets/SampleMedia/LandscapeImage7.jpg\u0022,\n \u0022ms-appx:///Assets/SampleMedia/LandscapeImage8.jpg\u0022,\n };","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control to let the user navigate through a paginated collection when the page numbers do not need to be visually known.","relatedControls":["ScrollViewer","FlipView","ItemsRepeater"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"pipspager-2","controlId":"pipspager","controlName":"PipsPager","headerText":"PipsPager with options to change its orientation and button visibility.","xaml":"\u003CPipsPager\n Orientation=\u0022...\u0022\n PreviousButtonVisibility=\u0022...\u0022\n NextButtonVisibility=\u0022...\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System.Collections.Generic;\n\nprivate void TestPipsPager2_SelectedIndexChanged(PipsPager sender, PipsPagerSelectedIndexChangedEventArgs args)\n {\n int pageNumber = sender.SelectedPageIndex \u002B 1; // Convert 0-based index to 1-based page number\n int totalPages = sender.NumberOfPages;\n string announcement = $\u0022Page {pageNumber} of {totalPages} selected\u0022;\n }\n\nprivate const string PipsPagerPageChangeNotificationId = \u0022PipsPagerPageChangeNotificationId\u0022;\n\nprivate void OrientationComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n string? orientation = e.AddedItems[0].ToString();\n\n switch (orientation)\n {\n case \u0022Vertical\u0022:\n TestPipsPager2.Orientation = Orientation.Vertical;\n break;\n\n case \u0022Horizontal\u0022:\n default:\n TestPipsPager2.Orientation = Orientation.Horizontal;\n break;\n }\n }\n\nprivate void PrevButtonComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n string? prevButtonVisibility = e.AddedItems[0].ToString();\n\n switch (prevButtonVisibility)\n {\n case \u0022Visible\u0022:\n TestPipsPager2.PreviousButtonVisibility = PipsPagerButtonVisibility.Visible;\n break;\n\n case \u0022VisibleOnPointerOver\u0022:\n TestPipsPager2.PreviousButtonVisibility = PipsPagerButtonVisibility.VisibleOnPointerOver;\n break;\n\n case \u0022Collapsed\u0022:\n default:\n TestPipsPager2.PreviousButtonVisibility = PipsPagerButtonVisibility.Collapsed;\n break;\n }\n }\n\nprivate void NextButtonComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n string? nextButtonVisibility = e.AddedItems[0].ToString();\n\n switch (nextButtonVisibility)\n {\n case \u0022Visible\u0022:\n TestPipsPager2.NextButtonVisibility = PipsPagerButtonVisibility.Visible;\n break;\n\n case \u0022VisibleOnPointerOver\u0022:\n TestPipsPager2.NextButtonVisibility = PipsPagerButtonVisibility.VisibleOnPointerOver;\n break;\n\n case \u0022Collapsed\u0022:\n default:\n TestPipsPager2.NextButtonVisibility = PipsPagerButtonVisibility.Collapsed;\n break;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control to let the user navigate through a paginated collection when the page numbers do not need to be visually known.","relatedControls":["ScrollViewer","FlipView","ItemsRepeater"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"scrollview-1","controlId":"scrollview","controlName":"ScrollView","headerText":"Content inside of a ScrollView.","xaml":"\u003CScrollView Height=\u0022266\u0022 Width=\u0022400\u0022 ContentOrientation=\u0022None\u0022\n ZoomMode=\u0022...\u0022 IsTabStop=\u0022True\u0022\n VerticalAlignment=\u0022Top\u0022 HorizontalAlignment=\u0022Left\u0022\n HorizontalScrollMode=\u0022...\u0022 HorizontalScrollBarVisibility=\u0022...\u0022\n VerticalScrollMode=\u0022...\u0022 VerticalScrollBarVisibility=\u0022...\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022cliff\u0022 Stretch=\u0022None\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n\u003C/ScrollView\u003E","csharp":"using Microsoft.UI.Composition;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.Generic;\nusing System.IO;\nusing System.Numerics;\nusing Windows.Globalization.NumberFormatting;\n\nprivate void CmbZoomMode_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (scrollView1 != null)\n {\n if (sender is ComboBox cmb)\n {\n scrollView1.ZoomMode = (ScrollingZoomMode)cmb.SelectedIndex;\n }\n }\n }\n\nprivate void NbZoomFactor_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)\n {\n if (scrollView1 != null)\n {\n scrollView1.ZoomTo((float)e.NewValue, null);\n }\n }\n\nprivate void CmbHorizontalScrollMode_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (scrollView1 != null)\n {\n if (sender is ComboBox cmb)\n {\n scrollView1.HorizontalScrollMode = (ScrollingScrollMode)cmb.SelectedIndex;\n }\n }\n }\n\nprivate void CmbVerticalScrollMode_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (scrollView1 != null)\n {\n if (sender is ComboBox cmb)\n {\n scrollView1.VerticalScrollMode = (ScrollingScrollMode)cmb.SelectedIndex;\n }\n }\n }\n\nprivate void CmbHorizontalScrollBarVisibility_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (scrollView1 != null)\n {\n if (sender is ComboBox cmb)\n {\n scrollView1.HorizontalScrollBarVisibility = (ScrollingScrollBarVisibility)cmb.SelectedIndex;\n }\n }\n }\n\nprivate void CmbVerticalScrollBarVisibility_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (scrollView1 != null)\n {\n if (sender is ComboBox cmb)\n {\n scrollView1.VerticalScrollBarVisibility = (ScrollingScrollBarVisibility)cmb.SelectedIndex;\n }\n }\n }\n\nprivate void ScrollViewPage_Loaded(object sender, RoutedEventArgs e)\n {\n scrollView1.ZoomTo(4.0f, null, new ScrollingZoomOptions(ScrollingAnimationMode.Enabled, ScrollingSnapPointsMode.Ignore));\n\n IncrementNumberRounder rounder = new IncrementNumberRounder\n {\n Increment = 0.1,\n RoundingAlgorithm = RoundingAlgorithm.RoundHalfUp\n };\n\n DecimalFormatter formatter = new DecimalFormatter\n {\n IntegerDigits = 2,\n FractionDigits = 1,\n NumberRounder = rounder\n };\n nbZoomFactor.NumberFormatter = formatter;\n\n this.Loaded -= ScrollViewPage_Loaded;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A container control that lets the user pan and zoom its content.","relatedControls":["Viewbox","Canvas","Grid","StackPanel","RelativePanel","ParallaxView","ItemsView","ScrollViewer"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"scrollview-2","controlId":"scrollview","controlName":"ScrollView","headerText":"Constant velocity scrolling.","xaml":"\u003CScrollView Height=\u0022300\u0022 Width=\u0022400\u0022 IsTabStop=\u0022True\u0022\n VerticalAlignment=\u0022Top\u0022 HorizontalAlignment=\u0022Left\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022grapes\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022rainier\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022sunset\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022treetops\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022valley\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022cliff\u0022/\u003E\n\u003C/ScrollView\u003E","csharp":"using Microsoft.UI.Composition;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.Generic;\nusing System.IO;\nusing System.Numerics;\nusing Windows.Globalization.NumberFormatting;\n\nprivate void NbVerticalVelocity_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)\n {\n if (double.IsNaN(e.OldValue))\n {\n return;\n }\n\n if (scrollView2 != null)\n {\n // Cancel previous constant scroll velocity\n scrollView2.ScrollBy(\n 0, 0,\n new ScrollingScrollOptions(ScrollingAnimationMode.Disabled, ScrollingSnapPointsMode.Ignore));\n\n float verticalConstantVelocity = (float)nbVerticalVelocity.Value;\n\n if (e.NewValue \u003C= 30.0 \u0026\u0026 e.NewValue \u003E= -30)\n {\n // Only value smaller than -30 or greater than 30 trigger a scroll\n if (e.NewValue \u003C e.OldValue)\n {\n if (scrollView2.VerticalOffset == 0)\n {\n verticalConstantVelocity = 30;\n }\n else\n {\n verticalConstantVelocity = -30;\n }\n }\n else\n {\n if (scrollView2.VerticalOffset == scrollView2.ScrollableHeight)\n {\n verticalConstantVelocity = -30;\n }\n else\n {\n verticalConstantVelocity = 30;\n }\n }\n }\n else if (e.NewValue \u003C 30.0 \u0026\u0026 scrollView2.VerticalOffset == 0)\n {\n verticalConstantVelocity = 30;\n }\n else if (e.NewValue \u003E 30.0 \u0026\u0026 scrollView2.VerticalOffset == scrollView2.ScrollableHeight)\n {\n verticalConstantVelocity = -30;\n }\n\n nbVerticalVelocity.Value = verticalConstantVelocity;\n\n scrollView2.AddScrollVelocity(\n new Vector2(0f, verticalConstantVelocity),\n new Vector2() /*empty inertia decay rate for a constant velocity*/);\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A container control that lets the user pan and zoom its content.","relatedControls":["Viewbox","Canvas","Grid","StackPanel","RelativePanel","ParallaxView","ItemsView","ScrollViewer"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"scrollview-3","controlId":"scrollview","controlName":"ScrollView","headerText":"Programmatic scroll with custom animation.","xaml":"\u003CScrollView Height=\u0022300\u0022 Width=\u0022400\u0022 IsTabStop=\u0022True\u0022\n ScrollAnimationStarting=\u0022ScrollView_ScrollAnimationStarting\u0022\n VerticalAlignment=\u0022Top\u0022 HorizontalAlignment=\u0022Left\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022leaves\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022carousel\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022bicycles\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022pond\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022marina\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022beach\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022rampart\u0022/\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 Stretch=\u0022Uniform\u0022 AutomationProperties.Name=\u0022mountain\u0022/\u003E\n\u003C/ScrollView\u003E","csharp":"using Microsoft.UI.Composition;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.Generic;\nusing System.IO;\nusing System.Numerics;\nusing Windows.Globalization.NumberFormatting;\n\nprivate void ScrollView_ScrollAnimationStarting(ScrollView sender, ScrollingScrollAnimationStartingEventArgs e)\n {\n Vector3KeyFrameAnimation? stockKeyFrameAnimation = e.Animation as Vector3KeyFrameAnimation;\n\n if (stockKeyFrameAnimation != null)\n {\n if (cmbVerticalAnimation.SelectedIndex == 0)\n {\n stockKeyFrameAnimation.Duration = TimeSpan.FromMilliseconds(nbAnimationDuration.Value);\n }\n else\n {\n double targetVerticalOffset = GetTargetVerticalOffset();\n float targetVerticalPosition = (float)targetVerticalOffset;\n Vector3KeyFrameAnimation customKeyFrameAnimation = stockKeyFrameAnimation.Compositor.CreateVector3KeyFrameAnimation();\n\n if (cmbVerticalAnimation.SelectedIndex == 1)\n {\n // Accordion case\n float deltaVerticalPosition = 0.1f * (float)(targetVerticalOffset - scrollView3.VerticalOffset);\n\n for (int step = 0; step \u003C 3; step\u002B\u002B)\n {\n customKeyFrameAnimation.InsertKeyFrame(\n 1.0f - (0.4f / (float)Math.Pow(2, step)),\n new Vector3((float)scrollView3.HorizontalOffset, targetVerticalPosition \u002B deltaVerticalPosition, 0.0f));\n deltaVerticalPosition /= -2.0f;\n }\n\n customKeyFrameAnimation.InsertKeyFrame(1.0f, new Vector3((float)scrollView3.HorizontalOffset, targetVerticalPosition, 0.0f));\n }\n else\n {\n // Teleportation case\n float deltaVerticalPosition = (float)(targetVerticalOffset - scrollView3.VerticalOffset);\n\n CubicBezierEasingFunction cubicBezierStart = stockKeyFrameAnimation.Compositor.CreateCubicBezierEasingFunction(\n new Vector2(1.0f, 0.0f),\n new Vector2(1.0f, 0.0f));\n\n StepEasingFunction step = stockKeyFrameAnimation.Compositor.CreateStepEasingFunction(1);\n\n CubicBezierEasingFunction cubicBezierEnd = stockKeyFrameAnimation.Compositor.CreateCubicBezierEasingFunction(\n new Vector2(0.0f, 1.0f),\n new Vector2(0.0f, 1.0f));\n\n customKeyFrameAnimation.InsertKeyFrame(\n 0.499999f,\n new Vector3((float)scrollView3.HorizontalOffset, targetVerticalPosition - 0.9f * deltaVerticalPosition, 0.0f),\n cubicBezierStart);\n}}}}\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A container control that lets the user pan and zoom its content.","relatedControls":["Viewbox","Canvas","Grid","StackPanel","RelativePanel","ParallaxView","ItemsView","ScrollViewer"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"scrollviewer-1","controlId":"scrollviewer","controlName":"ScrollViewer","headerText":"Content inside of a ScrollViewer.","xaml":"\u003CScrollViewer Height=\u0022266\u0022 Width=\u0022400\u0022 ZoomMode=\u0022...\u0022\n IsTabStop=\u0022True\u0022 IsVerticalScrollChainingEnabled=\u0022True\u0022\n HorizontalAlignment=\u0022Left\u0022 VerticalAlignment=\u0022Top\u0022\n ViewChanged=\u0022ScrollViewerControl_ViewChanged\u0022\n HorizontalScrollMode=\u0022...\u0022 HorizontalScrollBarVisibility=\u0022...\u0022\n VerticalScrollMode=\u0022...\u0022 VerticalScrollBarVisibility=\u0022...\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 AutomationProperties.Name=\u0022cliff\u0022 Stretch=\u0022None\u0022\n HorizontalAlignment=\u0022Left\u0022 VerticalAlignment=\u0022Top\u0022/\u003E\n\u003C/ScrollViewer\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.Primitives;\nusing Microsoft.UI.Xaml.Input;\n\nprivate void ScrollViewerControl_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)\n {\n if (!e.IsIntermediate)\n {\n ZoomSlider.Value = ScrollViewerControl.ZoomFactor;\n }\n }\n\nprivate void ZoomModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (ScrollViewerControl != null \u0026\u0026 ZoomSlider != null)\n {\n if (sender is ComboBox cb)\n {\n ScrollViewerControl.ZoomMode = (ZoomMode)cb.SelectedIndex;\n ZoomSlider.IsEnabled = cb.SelectedIndex == 1;\n\n if (!ZoomSlider.IsEnabled)\n {\n ScrollViewerControl.ZoomToFactor(2.0f);\n }\n }\n }\n }\n\nprivate void ZoomSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)\n {\n if (ScrollViewerControl != null)\n {\n ScrollViewerControl.ChangeView(null, null, (float)e.NewValue);\n }\n }\n\nprivate void hsmCombo_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (ScrollViewerControl != null)\n {\n if (sender is ComboBox cb)\n {\n ScrollViewerControl.HorizontalScrollMode = (ScrollMode)cb.SelectedIndex;\n }\n }\n }\n\nprivate void vsmCombo_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (ScrollViewerControl != null)\n {\n if (sender is ComboBox cb)\n {\n ScrollViewerControl.VerticalScrollMode = (ScrollMode)cb.SelectedIndex;\n }\n }\n }\n\nprivate void hsbvCombo_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (ScrollViewerControl != null)\n {\n if (sender is ComboBox cb)\n {\n ScrollViewerControl.HorizontalScrollBarVisibility = (ScrollBarVisibility)cb.SelectedIndex;\n }\n }\n }\n\nprivate void vsbvCombo_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (ScrollViewerControl != null)\n {\n if (sender is ComboBox cb)\n {\n ScrollViewerControl.VerticalScrollBarVisibility = (ScrollBarVisibility)cb.SelectedIndex;\n }\n }\n }\n\npublic ScrollViewerPage()\n {\n this.InitializeComponent();\n ScrollViewerControl.ZoomToFactor(4.0f);\n }\n\nprivate void ScrollViewerControl_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)\n {\n ZoomSlider.Value = ScrollViewerControl.ZoomFactor;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A container control that lets the user pan and zoom its content.","relatedControls":["Viewbox","Canvas","Grid","StackPanel","RelativePanel","ParallaxView","ScrollView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"semanticzoom-1","controlId":"semanticzoom","controlName":"SemanticZoom","headerText":"A simple SemanticZoom","xaml":"\u003CSemanticZoom Height=\u0022500\u0022\u003E\n \u003CSemanticZoom.ZoomedInView\u003E\n \u003CGridView ItemsSource=\u0022{x:Bind cvsGroups.View}\u0022 SelectionMode=\u0022None\u0022\n ItemTemplate=\u0022{StaticResource ZoomedInTemplate}\u0022\u003E\n \u003CGridView.GroupStyle\u003E\n \u003CGroupStyle HeaderTemplate=\u0022{StaticResource ZoomedInGroupHeaderTemplate}\u0022 /\u003E\n \u003C/GridView.GroupStyle\u003E\n \u003C/GridView\u003E\n \u003C/SemanticZoom.ZoomedInView\u003E\n\n \u003CSemanticZoom.ZoomedOutView\u003E\n \u003CListView ItemsSource=\u0022{x:Bind cvsGroups.View.CollectionGroups}\u0022 HorizontalAlignment=\u0022Stretch\u0022\n SelectionMode=\u0022None\u0022 ItemTemplate=\u0022{StaticResource ZoomedOutTemplate}\u0022 /\u003E\n \u003C/SemanticZoom.ZoomedOutView\u003E\n\u003C/SemanticZoom\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing System.Collections.Generic;\n\nprivate void List_GotFocus(object sender, RoutedEventArgs e)\n {\n Control1.StartBringIntoView();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Lets the user zoom between two different views of a collection, making it easier to navigate through large collections of items.","relatedControls":["GridView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"border-1","controlId":"border","controlName":"Border","headerText":"A Border around a TextBlock.","xaml":"\u003CBorder BorderThickness=\u0022...\u0022 BorderBrush=\u0022...\u0022 Background=\u0022...\u0022\u003E\n \u003CTextBlock Text=\u0022Text inside a border\u0022 FontSize=\u002218\u0022 Foreground=\u0022Black\u0022 /\u003E\n\u003C/Border\u003E","csharp":"using Microsoft.UI;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.Primitives;\nusing Microsoft.UI.Xaml.Media;\n\nprivate void ThicknessSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)\n {\n if (Control1 != null) Control1.BorderThickness = new Thickness(e.NewValue);\n }\n\nprivate void BGRadioButton_Checked(object sender, RoutedEventArgs e)\n {\n if (sender is RadioButton rb \u0026\u0026 Control1 != null)\n {\n string? colorName = rb.Content.ToString();\n switch (colorName)\n {\n case \u0022Yellow\u0022:\n Control1.Background = new SolidColorBrush(Colors.Yellow);\n break;\n case \u0022Green\u0022:\n Control1.Background = new SolidColorBrush(Colors.Green);\n break;\n case \u0022Blue\u0022:\n Control1.Background = new SolidColorBrush(Colors.Blue);\n break;\n case \u0022White\u0022:\n Control1.Background = new SolidColorBrush(Colors.White);\n break;\n }\n }\n }\n\nprivate void RadioButton_Checked(object sender, RoutedEventArgs e)\n {\n if (sender is RadioButton rb \u0026\u0026 Control1 != null)\n {\n string? colorName = rb.Content.ToString();\n switch (colorName)\n {\n case \u0022Yellow\u0022:\n Control1.BorderBrush = new SolidColorBrush(Colors.Gold);\n break;\n case \u0022Green\u0022:\n Control1.BorderBrush = new SolidColorBrush(Colors.DarkGreen);\n break;\n case \u0022Blue\u0022:\n Control1.BorderBrush = new SolidColorBrush(Colors.DarkBlue);\n break;\n case \u0022White\u0022:\n Control1.BorderBrush = new SolidColorBrush(Colors.White);\n break;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A container control that draws a boundary line, background, or both, around another object.","relatedControls":["Canvas","Grid","StackPanel","VariableSizedWrapGrid","RelativePanel"],"apiNamespace":"Microsoft.UI.Xaml.Controls","docs":[{"title":"Border - API","uri":"https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.border"}]},{"id":"canvas-1","controlId":"canvas","controlName":"Canvas","headerText":"A Canvas control.","xaml":"\u003CCanvas Width=\u0022120\u0022 Height=\u0022120\u0022 Background=\u0022Gray\u0022\u003E\n \u003CRectangle Fill=\u0022Red\u0022 Canvas.Left=\u0022...\u0022 Canvas.Top=\u0022...\u0022 Canvas.ZIndex=\u0022...\u0022 /\u003E\n \u003CRectangle Fill=\u0022Blue\u0022 Canvas.Left=\u002220\u0022 Canvas.Top=\u002220\u0022 Canvas.ZIndex=\u00221\u0022 /\u003E\n \u003CRectangle Fill=\u0022Green\u0022 Canvas.Left=\u002240\u0022 Canvas.Top=\u002240\u0022 Canvas.ZIndex=\u00222\u0022 /\u003E\n \u003CRectangle Fill=\u0022Yellow\u0022 Canvas.Left=\u002260\u0022 Canvas.Top=\u002260\u0022 Canvas.ZIndex=\u00223\u0022 /\u003E\n\u003C/Canvas\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A layout panel that supports absolute positioning of child elements relative to the top left corner of the canvas.","relatedControls":["Border","Grid","StackPanel","VariableSizedWrapGrid","RelativePanel"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"expander-1","controlId":"expander","controlName":"Expander","headerText":"An Expander with text in the header and content areas","xaml":"\u003CExpander\n IsExpanded=\u0022...\u0022\n ExpandDirection=\u0022...\u0022\n VerticalAlignment=\u0022...\u0022\n Header=\u0022This text is in the header\u0022\n Content=\u0022This is in the content\u0022/\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\n\nprivate void ExpandDirectionComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n string? expandDirection = e.AddedItems[0].ToString();\n\n switch (expandDirection)\n {\n case \u0022Down\u0022:\n default:\n Expander1.ExpandDirection = Microsoft.UI.Xaml.Controls.ExpandDirection.Down;\n Expander1.VerticalAlignment = Microsoft.UI.Xaml.VerticalAlignment.Top;\n break;\n\n case \u0022Up\u0022:\n Expander1.ExpandDirection = Microsoft.UI.Xaml.Controls.ExpandDirection.Up;\n Expander1.VerticalAlignment = Microsoft.UI.Xaml.VerticalAlignment.Bottom;\n break;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A container with a header that can be expanded to show a body with more content.","relatedControls":["Flyout","ItemsRepeater","SplitView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"expander-2","controlId":"expander","controlName":"Expander","headerText":"Modifying Expanders content alignment","xaml":"\u003CExpander Width=\u0022500\u0022 HorizontalContentAlignment=\u0022Left\u0022 Padding=\u00220\u0022\u003E\n \u003CExpander.Header\u003E\n \u003CToggleButton Content=\u0022This ToggleButton is centered\u0022 HorizontalAlignment=\u0022Center\u0022/\u003E\n \u003C/Expander.Header\u003E\n \u003CExpander.Content\u003E\n \u003CButton Margin=\u00224\u0022 Content=\u0022This Button is left aligned\u0022/\u003E\n \u003C/Expander.Content\u003E\n\u003C/Expander\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A container with a header that can be expanded to show a body with more content.","relatedControls":["Flyout","ItemsRepeater","SplitView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"grid-1","controlId":"grid","controlName":"Grid","headerText":"A 3x3 Grid control.","xaml":"\u003CGrid\n Background=\u0022Gray\u0022\n ColumnDefinitions=\u002250, 50, 50\u0022\n RowDefinitions =\u002250, 50, 50\u0022\n ColumnSpacing=\u0022...\u0022\n RowSpacing=\u0022...\u0022\u003E\n \u003CRectangle Fill=\u0022Red\u0022 Grid.Column=\u0022...\u0022 Grid.Row=\u0022...\u0022 /\u003E\n \u003CRectangle Fill=\u0022Blue\u0022 Grid.Row=\u00221\u0022 /\u003E\n \u003CRectangle Fill=\u0022Green\u0022 Grid.Column=\u00221\u0022 /\u003E\n \u003CRectangle Fill=\u0022Yellow\u0022 Grid.Column=\u00221\u0022 Grid.Row=\u00221\u0022 /\u003E\n\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A layout panel that supports arranging child elements in rows and columns. ","relatedControls":["Border","Canvas","StackPanel","VariableSizedWrapGrid","RelativePanel"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"relativepanel-1","controlId":"relativepanel","controlName":"RelativePanel","headerText":"A RelativePanel control.","xaml":"\u003CRelativePanel Width=\u0022300\u0022\u003E\n \u003CRectangle x:Name=\u0022Rectangle1\u0022 Fill=\u0022Red\u0022 Height=\u002250\u0022 Width=\u002250\u0022/\u003E\n \u003CRectangle x:Name=\u0022Rectangle2\u0022 Fill=\u0022Blue\u0022 Height=\u002250\u0022 Width=\u002250\u0022 RelativePanel.RightOf=\u0022Rectangle1\u0022 Margin=\u00228,0,0,0\u0022/\u003E\n \u003CRectangle x:Name=\u0022Rectangle3\u0022 Fill=\u0022Green\u0022 Height=\u002250\u0022 Width=\u002250\u0022 RelativePanel.AlignRightWithPanel=\u0022True\u0022/\u003E\n \u003CRectangle x:Name=\u0022Rectangle4\u0022 Fill=\u0022Yellow\u0022 Height=\u002250\u0022 Width=\u002250\u0022 RelativePanel.Below=\u0022Rectangle3\u0022 RelativePanel.AlignHorizontalCenterWith=\u0022Rectangle3\u0022 Margin=\u00220,8,0,0\u0022/\u003E\n\u003C/RelativePanel\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A panel that uses relationships between elements to define layout.","relatedControls":["Grid","StackPanel","Border","Canvas","Viewbox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"splitview-1","controlId":"splitview","controlName":"SplitView","headerText":"A basic SplitView.","xaml":"\u003CSplitView x:Name=\u0022splitView\u0022 PaneBackground=\u0022...\u0022\n IsPaneOpen=\u0022...\u0022 OpenPaneLength=\u0022...\u0022 CompactPaneLength=\u0022...\u0022 DisplayMode=\u0022...\u0022\u003E\n \u003CSplitView.Pane\u003E\n \u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022/\u003E\n \u003CRowDefinition Height=\u0022*\u0022/\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022/\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CTextBlock Text=\u0022PANE CONTENT\u0022 x:Name=\u0022PaneHeader\u0022 Margin=\u002260,12,0,0\u0022 Style=\u0022{StaticResource BaseTextBlockStyle}\u0022/\u003E\n \u003CListView x:Name=\u0022NavLinksList\u0022 Margin=\u00220,12,0,0\u0022 SelectionMode=\u0022Single\u0022 Grid.Row=\u00221\u0022 VerticalAlignment=\u0022Stretch\u0022\n ItemClick=\u0022NavLinksList_ItemClick\u0022 IsItemClickEnabled=\u0022True\u0022\n ItemsSource=\u0022{x:Bind NavLinks}\u0022 ItemTemplate=\u0022{StaticResource NavLinkItemTemplate}\u0022/\u003E\n \u003C/Grid\u003E\n \u003C/SplitView.Pane\u003E\n \n \u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022/\u003E\n \u003CRowDefinition Height=\u0022*\u0022/\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CTextBlock Text=\u0022SPLITVIEW CONTENT\u0022 Margin=\u002212,12,0,0\u0022 Style=\u0022{StaticResource BaseTextBlockStyle}\u0022/\u003E\n \u003CTextBlock x:Name=\u0022content\u0022 Grid.Row=\u00221\u0022 Margin=\u002212,12,0,0\u0022 Style=\u0022{StaticResource BodyTextBlockStyle}\u0022 /\u003E\n \u003C/Grid\u003E\n\u003C/SplitView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.ObjectModel;\n\nprivate void NavLinksList_ItemClick(object sender, ItemClickEventArgs e)\n {\n if (e.ClickedItem is not NavLink navLink)\n {\n return;\n }\n\n content.Text = navLink.Label \u002B \u0022 Page\u0022;\n }\n\nprivate void togglePaneButton_CheckedChanged(object sender, RoutedEventArgs e)\n {\n UpdateNavLinkItemLayout();\n }\n\nprivate void PanePlacement_Toggled(object sender, RoutedEventArgs e)\n {\n if ((sender as ToggleSwitch)?.IsOn is true)\n {\n splitView.PanePlacement = SplitViewPanePlacement.Right;\n }\n else\n {\n splitView.PanePlacement = SplitViewPanePlacement.Left;\n }\n\n UpdateNavLinkItemLayout();\n }\n\nprivate void displayModeCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if ((e.AddedItems[0] as ComboBoxItem)?.Content.ToString() is not string displayMode)\n {\n return;\n }\n\n splitView.DisplayMode = (SplitViewDisplayMode)Enum.Parse(typeof(SplitViewDisplayMode), displayMode);\n }\n\nprivate void paneBackgroundCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if ((e.AddedItems[0] as ComboBoxItem)?.Content.ToString() is not string colorString)\n {\n return;\n }\n\n VisualStateManager.GoToState(this, colorString, false);\n }\n\npublic ObservableCollection\u003CNavLink\u003E NavLinks\n {\n get { return _navLinks; }\n }\n\n public SplitViewPage()\n {\n this.InitializeComponent();\n this.Loaded \u002B= SplitViewPage_Loaded;\n }\n\n private void SplitViewPage_Loaded(object sender, RoutedEventArgs e)\n {\n UpdateNavLinkItemLayout();\n }\n\n private void NavLinksList_ItemClick(object sender, ItemClickEventArgs e)\n {\n if (e.ClickedItem is not NavLink navLink)\n {\n return;\n }\n\n content.Text = navLink.Label \u002B \u0022 Page\u0022;\n }\n\n private void PanePlacement_Toggled(object sender, RoutedEventArgs e)\n {\n if ((sender as ToggleSwitch)?.IsOn is true)\n {\n splitView.PanePlacement = SplitViewPanePlacement.Right;\n }\n else\n {\n splitView.PanePlacement = SplitViewPanePlacement.Left;\n }\n\n UpdateNavLinkItemLayout();\n }\n\n private void UpdateNavLinkItemLayout()\n {\n if (splitView.PanePlacement == SplitViewPanePlacement.Right)\n {\n VisualStateManager.GoToState(this, \u0022RightIconLayout\u0022, false);\n }\n else\n {\n VisualStateManager.GoToState(this, \u0022LeftIconLayout\u0022, false);\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A container that has 2 content areas, with multiple display options for the pane.","relatedControls":["StackPanel","ListView","GridView","Grid","RelativePanel"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"stackpanel-1","controlId":"stackpanel","controlName":"StackPanel","headerText":"A StackPanel control.","xaml":"\u003CStackPanel\n Orientation=\u0022...\u0022\n Spacing=\u0022...\u0022\u003E\n \u003CRectangle Fill=\u0022Red\u0022/\u003E\n \u003CRectangle Fill=\u0022Blue\u0022/\u003E\n \u003CRectangle Fill=\u0022Green\u0022/\u003E\n \u003CRectangle Fill=\u0022Yellow\u0022/\u003E\n\u003C/StackPanel\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System;\n\nprivate void OrientationGroup_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if ((sender as RadioButtons)?.SelectedItem is not RadioButton selectedItem ||\n Enum.TryParse\u003COrientation\u003E(selectedItem.Tag?.ToString(), out var orientation) is false ||\n Control1 is null)\n {\n return;\n }\n\n Control1.Orientation = orientation;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.","relatedControls":["Border","Canvas","Grid","VariableSizedWrapGrid","RelativePanel"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"variablesizedwrapgrid-1","controlId":"variablesizedwrapgrid","controlName":"VariableSizedWrapGrid","headerText":"A VariableSizedWrapGrid control.","xaml":"\u003CVariableSizedWrapGrid Orientation=\u0022...\u0022 MaximumRowsOrColumns=\u00223\u0022 ItemHeight=\u002244\u0022 ItemWidth=\u002244\u0022\u003E\n \u003CRectangle Fill=\u0022Red\u0022/\u003E\n \u003CRectangle Fill=\u0022Blue\u0022 Height=\u002280\u0022 VariableSizedWrapGrid.RowSpan=\u00222\u0022/\u003E\n \u003CRectangle Fill=\u0022Green\u0022 Width=\u002280\u0022 VariableSizedWrapGrid.ColumnSpan=\u00222\u0022/\u003E\n \u003CRectangle Fill=\u0022Yellow\u0022 Height=\u002280\u0022 Width=\u002280\u0022 VariableSizedWrapGrid.RowSpan=\u00222\u0022 VariableSizedWrapGrid.ColumnSpan=\u00222\u0022/\u003E\n\u003C/VariableSizedWrapGrid\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System;\n\nprivate void OrientationGroup_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if ((sender as RadioButtons)?.SelectedItem is not RadioButton selectedItem ||\n Enum.TryParse\u003COrientation\u003E(selectedItem.Tag?.ToString(), out var orientation) is false ||\n Control1 is null)\n {\n return;\n }\n\n Control1.Orientation = orientation;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns.","relatedControls":["Border","Canvas","Grid","StackPanel","RelativePanel"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"viewbox-1","controlId":"viewbox","controlName":"Viewbox","headerText":"Content inside of a Viewbox.","xaml":"\u003CViewbox Height=\u0022...\u0022 Width=\u0022...\u0022 Stretch=\u0022...\u0022 StretchDirection=\u0022...\u0022\u003E\n \u003CBorder BorderBrush=\u0022Gray\u0022 BorderThickness=\u002215\u0022\u003E\n \u003CStackPanel Background=\u0022DarkGray\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CRectangle Fill=\u0022Blue\u0022 Height=\u002210\u0022 Width=\u002240\u0022/\u003E\n \u003CRectangle Fill=\u0022Green\u0022 Height=\u002210\u0022 Width=\u002240\u0022/\u003E\n \u003CRectangle Fill=\u0022Red\u0022 Height=\u002210\u0022 Width=\u002240\u0022/\u003E\n \u003CRectangle Fill=\u0022Yellow\u0022 Height=\u002210\u0022 Width=\u002240\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022/\u003E\n \u003CTextBlock Text=\u0022This is text.\u0022 HorizontalAlignment=\u0022Center\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/Border\u003E\n\u003C/Viewbox\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing System;\n\nprivate void Stretch_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if ((sender as RadioButtons)?.SelectedItem is not RadioButton selectedItem ||\n Enum.TryParse\u003CStretch\u003E(selectedItem.Tag?.ToString(), out var stretch) is false ||\n Control1 is null)\n {\n return;\n }\n\n Control1.Stretch = stretch;\n }\n\nprivate void StretchDirection_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if ((sender as RadioButtons)?.SelectedItem is not RadioButton selectedItem ||\n Enum.TryParse\u003CStretchDirection\u003E(selectedItem.Tag?.ToString(), out var stretchDirection) is false ||\n Control1 is null)\n {\n return;\n }\n\n Control1.StretchDirection = stretchDirection;\n }\n\nprivate void StretchDirectionButton_Checked(object sender, RoutedEventArgs e)\n {\n if (sender is RadioButton rb \u0026\u0026 Control1 != null)\n {\n string? direction = rb.Tag.ToString();\n switch (direction)\n {\n case \u0022UpOnly\u0022:\n Control1.StretchDirection = StretchDirection.UpOnly;\n break;\n\n case \u0022DownOnly\u0022:\n Control1.StretchDirection = StretchDirection.DownOnly;\n break;\n\n case \u0022Both\u0022:\n Control1.StretchDirection = StretchDirection.Both;\n break;\n }\n }\n }\n\nprivate void StretchButton_Checked(object sender, RoutedEventArgs e)\n {\n if (sender is RadioButton rb \u0026\u0026 Control1 != null)\n {\n string? stretch = rb.Tag.ToString();\n switch (stretch)\n {\n case \u0022None\u0022:\n Control1.Stretch = Stretch.None;\n break;\n\n case \u0022Fill\u0022:\n Control1.Stretch = Stretch.Fill;\n break;\n\n case \u0022Uniform\u0022:\n Control1.Stretch = Stretch.Uniform;\n break;\n\n case \u0022UniformToFill\u0022:\n Control1.Stretch = Stretch.UniformToFill;\n break;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A container control that scales its content to a specified size.","relatedControls":["ScrollViewer","Canvas","Grid","StackPanel","RelativePanel"],"apiNamespace":"Microsoft.UI.Xaml.Controls","docs":[{"title":"Viewbox - API","uri":"https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.Viewbox"}]},{"id":"breadcrumbbar-1","controlId":"breadcrumbbar","controlName":"BreadcrumbBar","headerText":"A BreadcrumbBar control","xaml":"\u003CBreadcrumbBar x:Name=\u0022BreadcrumbBar1\u0022/\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\n\npublic readonly string[] FoldersString = new string[] { \u0022Home\u0022, \u0022Documents\u0022, \u0022Design\u0022, \u0022Northwind\u0022, \u0022Images\u0022, \u0022Folder1\u0022, \u0022Folder2\u0022, \u0022Folder3\u0022 };","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows the trail of navigation taken to the current location.","relatedControls":["NavigationView","Pivot","TabView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"breadcrumbbar-2","controlId":"breadcrumbbar","controlName":"BreadcrumbBar","headerText":"BreadCrumbBar Control with Custom DataTemplate","xaml":"\u003CBreadcrumbBar x:Name=\u0022BreadcrumbBar2\u0022\u003E\n \u003CBreadcrumbBar.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022l:Folder\u0022\u003E\n \u003CBreadcrumbBarItem Content=\u0022{Binding}\u0022 AutomationProperties.Name=\u0022{Binding Name}\u0022\u003E\n \u003CBreadcrumbBarItem.ContentTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CTextBlock Text=\u0022{Binding Name}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/BreadcrumbBarItem.ContentTemplate\u003E\n \u003C/BreadcrumbBarItem\u003E\n \u003C/DataTemplate\u003E\n \u003C/BreadcrumbBar.ItemTemplate\u003E\n\u003C/BreadcrumbBar\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\n\npublic ObservableCollection\u003CFolder\u003E Folders { get; } = new();\n\npublic BreadcrumbBarPage()\n {\n this.InitializeComponent();\n\n BreadcrumbBar2.ItemClicked \u002B= BreadcrumbBar2_ItemClicked;\n Folders.Clear();\n foreach (var folder in _defaultFolders)\n Folders.Add(folder);\n }\n\npublic class Folder\n{\n public string Name { get; set; } = string.Empty;\n}\n\nprivate void BreadcrumbBar2_ItemClicked(BreadcrumbBar sender, BreadcrumbBarItemClickedEventArgs args)\n {\n if (BreadcrumbBar2.ItemsSource is not ObservableCollection\u003CFolder\u003E items)\n {\n return;\n }\n\n for (int i = items.Count - 1; i \u003E= args.Index \u002B 1; i--)\n {\n items.RemoveAt(i);\n }\n }\n\nprivate readonly List\u003CFolder\u003E _defaultFolders = new()\n {\n new Folder { Name = \u0022Home\u0022 },\n new Folder { Name = \u0022Folder1\u0022 },\n new Folder { Name = \u0022Folder2\u0022 },\n new Folder { Name = \u0022Folder3\u0022 },\n };\n\nprivate void ResetSampleButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n {\n // To restore the BreadcrumbBar to its initial state, we compare Folders (the live collection)\n // with _defaultFolders (the original state), and add back any missing items.\n // This ensures reset works even after user navigation modifies the ItemsSource.\n if (BreadcrumbBar2.ItemsSource is not ObservableCollection\u003CFolder\u003E items)\n {\n return;\n }\n\n foreach (var folder in _defaultFolders)\n {\n if (!items.Contains(folder))\n {\n items.Add(folder);\n }\n }\n\n // Announce reset success notifiication.\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Shows the trail of navigation taken to the current location.","relatedControls":["NavigationView","Pivot","TabView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"navigationview-1","controlId":"navigationview","controlName":"NavigationView","headerText":"NavigationView with default PaneDisplayMode","xaml":"\u003CNavigationView x:Name=\u0022nvSample\u0022\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Icon=\u0022Play\u0022 Content=\u0022Menu Item1\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Save\u0022 Content=\u0022Menu Item2\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Refresh\u0022 Content=\u0022Menu Item3\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Download\u0022 Content=\u0022Menu Item4\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003C/NavigationView.MenuItems\u003E\n \u003CFrame x:Name=\u0022contentFrame\u0022/\u003E\n\u003C/NavigationView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.ObjectModel;\nusing System.Diagnostics;\nusing System.Linq;\nusing Windows.System;\n\nprivate void NavigationView_SelectionChanged5(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)\n {\n if (args.IsSettingsSelected)\n {\n contentFrame5.Navigate(typeof(SampleSettingsPage));\n }\n else\n {\n var selectedItem = (Microsoft.UI.Xaml.Controls.NavigationViewItem)args.SelectedItem;\n string selectedItemTag = ((string)selectedItem.Tag);\n sender.Header = \u0022Sample Page \u0022 \u002B selectedItemTag.Substring(selectedItemTag.Length - 1);\n string pageName = \u0022WinUIGallery.SamplePages.\u0022 \u002B selectedItemTag;\n SamplesNavigationPageMappings.PageDictionary.TryGetValue(pageName, out Type? pageType);\n contentFrame5.Navigate(pageType);\n }\n }\n\npublic NavigationViewPage()\n {\n this.InitializeComponent();\n\n nvSample2.SelectedItem = nvSample2.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample5.SelectedItem = nvSample5.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample6.SelectedItem = nvSample6.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample7.SelectedItem = nvSample7.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample8.SelectedItem = nvSample8.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample9.SelectedItem = nvSample9.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n\n Categories = new ObservableCollection\u003CCategoryBase\u003E();\n Category firstCategory = new Category { Name = \u0022Category 1\u0022, Glyph = Symbol.Home, Tooltip = \u0022This is category 1\u0022 };\n Categories.Add(firstCategory);\n Categories.Add(new Category { Name = \u0022Category 2\u0022, Glyph = Symbol.Keyboard, Tooltip = \u0022This is category 2\u0022 });\n Categories.Add(new Category { Name = \u0022Category 3\u0022, Glyph = Symbol.Library, Tooltip = \u0022This is category 3\u0022 });\n Categories.Add(new Category { Name = \u0022Category 4\u0022, Glyph = Symbol.Mail, Tooltip = \u0022This is category 4\u0022 });\n nvSample4.SelectedItem = firstCategory;\n\n setASBSubstitutionString();\n\n // Fixes #218\n nvSample2.UpdateLayout();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Common vertical layout for top-level areas of your app via a collapsible navigation menu.","relatedControls":["SplitView","Pivot"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"navigationview-2","controlId":"navigationview","controlName":"NavigationView","headerText":"NavigationView with PaneDisplayMode set to Top","xaml":"\u003CNavigationView x:Name=\u0022nvSample\u0022 Header=\u0022This is Header Text\u0022 PaneDisplayMode=\u0022Top\u0022\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item1\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item2\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item3\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item4\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003C/NavigationView.MenuItems\u003E\n \u003CFrame x:Name=\u0022contentFrame\u0022/\u003E\n\u003C/NavigationView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.ObjectModel;\nusing System.Diagnostics;\nusing System.Linq;\nusing Windows.System;\n\nprivate void NavigationView_SelectionChanged6(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)\n {\n if (args.IsSettingsSelected)\n {\n contentFrame6.Navigate(typeof(SampleSettingsPage));\n }\n else\n {\n var selectedItem = (Microsoft.UI.Xaml.Controls.NavigationViewItem)args.SelectedItem;\n string pageName = \u0022WinUIGallery.SamplePages.\u0022 \u002B ((string)selectedItem.Tag);\n SamplesNavigationPageMappings.PageDictionary.TryGetValue(pageName, out Type? pageType);\n contentFrame6.Navigate(pageType);\n }\n }\n\npublic NavigationViewPage()\n {\n this.InitializeComponent();\n\n nvSample2.SelectedItem = nvSample2.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample5.SelectedItem = nvSample5.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample6.SelectedItem = nvSample6.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample7.SelectedItem = nvSample7.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample8.SelectedItem = nvSample8.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample9.SelectedItem = nvSample9.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n\n Categories = new ObservableCollection\u003CCategoryBase\u003E();\n Category firstCategory = new Category { Name = \u0022Category 1\u0022, Glyph = Symbol.Home, Tooltip = \u0022This is category 1\u0022 };\n Categories.Add(firstCategory);\n Categories.Add(new Category { Name = \u0022Category 2\u0022, Glyph = Symbol.Keyboard, Tooltip = \u0022This is category 2\u0022 });\n Categories.Add(new Category { Name = \u0022Category 3\u0022, Glyph = Symbol.Library, Tooltip = \u0022This is category 3\u0022 });\n Categories.Add(new Category { Name = \u0022Category 4\u0022, Glyph = Symbol.Mail, Tooltip = \u0022This is category 4\u0022 });\n nvSample4.SelectedItem = firstCategory;\n\n setASBSubstitutionString();\n\n // Fixes #218\n nvSample2.UpdateLayout();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Common vertical layout for top-level areas of your app via a collapsible navigation menu.","relatedControls":["SplitView","Pivot"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"navigationview-3","controlId":"navigationview","controlName":"NavigationView","headerText":"NavigationView that switches pane orientation based on window width","xaml":"\u003C!-- Put the following VisualStateGroup(s) inside the first component of your Page --\u003E\n\u003CVisualStateManager.VisualStateGroups\u003E\n \u003CVisualStateGroup\u003E\n \u003CVisualState\u003E\n \u003CVisualState.StateTriggers\u003E\n \u003CAdaptiveTrigger MinWindowWidth=\u0022{x:Bind nvSample.CompactModeThresholdWidth}\u0022 /\u003E\n \u003C/VisualState.StateTriggers\u003E\n \u003CVisualState.Setters\u003E\n \u003CSetter Target=\u0022nvSample.PaneDisplayMode\u0022 Value=\u0022Top\u0022 /\u003E\n \u003C/VisualState.Setters\u003E\n \u003C/VisualState\u003E\n \u003C/VisualStateGroup\u003E\n\u003C/VisualStateManager.VisualStateGroups \u003E\n\n\u003CNavigationView x:Name=\u0022nvSample\u0022\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item1\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item2\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item3\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item4\u0022 Tag=\u0022YourPage\u0022 /\u003E\n \u003C/NavigationView.MenuItems\u003E\n \u003CFrame x:Name=\u0022contentFrame\u0022/\u003E\n\u003C/NavigationView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.ObjectModel;\nusing System.Diagnostics;\nusing System.Linq;\nusing Windows.System;\n\nprivate void NavigationView_SelectionChanged2(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)\n {\n if (!CameFromGridChange)\n {\n if (args.IsSettingsSelected)\n {\n contentFrame2.Navigate(typeof(SampleSettingsPage));\n }\n else\n {\n var selectedItem = (Microsoft.UI.Xaml.Controls.NavigationViewItem)args.SelectedItem;\n string selectedItemTag = ((string)selectedItem.Tag);\n string pageName = \u0022WinUIGallery.SamplePages.\u0022 \u002B selectedItemTag;\n SamplesNavigationPageMappings.PageDictionary.TryGetValue(pageName, out Type? pageType);\n contentFrame2.Navigate(pageType);\n }\n }\n\n CameFromGridChange = false;\n }\n\npublic static bool CameFromGridChange = false;\n\npublic NavigationViewPage()\n {\n this.InitializeComponent();\n\n nvSample2.SelectedItem = nvSample2.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample5.SelectedItem = nvSample5.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample6.SelectedItem = nvSample6.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample7.SelectedItem = nvSample7.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample8.SelectedItem = nvSample8.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample9.SelectedItem = nvSample9.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n\n Categories = new ObservableCollection\u003CCategoryBase\u003E();\n Category firstCategory = new Category { Name = \u0022Category 1\u0022, Glyph = Symbol.Home, Tooltip = \u0022This is category 1\u0022 };\n Categories.Add(firstCategory);\n Categories.Add(new Category { Name = \u0022Category 2\u0022, Glyph = Symbol.Keyboard, Tooltip = \u0022This is category 2\u0022 });\n Categories.Add(new Category { Name = \u0022Category 3\u0022, Glyph = Symbol.Library, Tooltip = \u0022This is category 3\u0022 });\n Categories.Add(new Category { Name = \u0022Category 4\u0022, Glyph = Symbol.Mail, Tooltip = \u0022This is category 4\u0022 });\n nvSample4.SelectedItem = firstCategory;\n\n setASBSubstitutionString();\n\n // Fixes #218\n nvSample2.UpdateLayout();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Common vertical layout for top-level areas of your app via a collapsible navigation menu.","relatedControls":["SplitView","Pivot"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"navigationview-4","controlId":"navigationview","controlName":"NavigationView","headerText":"Tying selection and focus - Tabs","xaml":"\u003CNavigationView x:Name=\u0022nvSample\u0022 PaneDisplayMode=\u0022Top\u0022 \n SelectionFollowsFocus=\u0022Enabled\u0022 IsBackButtonVisible=\u0022Collapsed\u0022\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Icon=\u0022Play\u0022 Content=\u0022Item1\u0022 x:Name=\u0022YourPageItem\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Save\u0022 Content=\u0022Item2\u0022 x:Name=\u0022YourPageItem\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Refresh\u0022 Content=\u0022Item3\u0022 x:Name=\u0022YourPageItem\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Download\u0022 Content=\u0022Item4\u0022 x:Name=\u0022YourPageItem\u0022 /\u003E\n \u003C/NavigationView.MenuItems\u003E\n \u003CFrame x:Name=\u0022contentFrame\u0022/\u003E\n\u003C/NavigationView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.ObjectModel;\nusing System.Diagnostics;\nusing System.Linq;\nusing Windows.System;\n\nprivate void NavigationView_SelectionChanged7(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)\n {\n if (args.IsSettingsSelected)\n {\n contentFrame7.Navigate(typeof(SampleSettingsPage));\n }\n else\n {\n var selectedItem = (Microsoft.UI.Xaml.Controls.NavigationViewItem)args.SelectedItem;\n string pageName = \u0022WinUIGallery.SamplePages.\u0022 \u002B ((string)selectedItem.Tag);\n SamplesNavigationPageMappings.PageDictionary.TryGetValue(pageName, out Type? pageType);\n\n contentFrame7.Navigate(pageType, null, args.RecommendedNavigationTransitionInfo);\n }\n }\n\npublic NavigationViewPage()\n {\n this.InitializeComponent();\n\n nvSample2.SelectedItem = nvSample2.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample5.SelectedItem = nvSample5.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample6.SelectedItem = nvSample6.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample7.SelectedItem = nvSample7.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample8.SelectedItem = nvSample8.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample9.SelectedItem = nvSample9.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n\n Categories = new ObservableCollection\u003CCategoryBase\u003E();\n Category firstCategory = new Category { Name = \u0022Category 1\u0022, Glyph = Symbol.Home, Tooltip = \u0022This is category 1\u0022 };\n Categories.Add(firstCategory);\n Categories.Add(new Category { Name = \u0022Category 2\u0022, Glyph = Symbol.Keyboard, Tooltip = \u0022This is category 2\u0022 });\n Categories.Add(new Category { Name = \u0022Category 3\u0022, Glyph = Symbol.Library, Tooltip = \u0022This is category 3\u0022 });\n Categories.Add(new Category { Name = \u0022Category 4\u0022, Glyph = Symbol.Mail, Tooltip = \u0022This is category 4\u0022 });\n nvSample4.SelectedItem = firstCategory;\n\n setASBSubstitutionString();\n\n // Fixes #218\n nvSample2.UpdateLayout();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Common vertical layout for top-level areas of your app via a collapsible navigation menu.","relatedControls":["SplitView","Pivot"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"navigationview-5","controlId":"navigationview","controlName":"NavigationView","headerText":"Data binding","xaml":"\u003CNavigationView x:Name=\u0022nvSample\u0022 \n MenuItemTemplateSelector=\u0022{StaticResource selector}\u0022 \n MenuItemsSource=\u0022{x:Bind Categories, Mode=OneWay}\u0022 /\u003E\n \n\u003Clocal:MenuItemTemplateSelector x:Key=\u0022selector\u0022\u003E \n \u003Clocal:MenuItemTemplateSelector.ItemTemplate\u003E \n \u003CDataTemplate x:DataType=\u0022local:Category\u0022 \u003E \n \u003CNavigationViewItem Content=\u0022{x:Bind Name}\u0022 ToolTipService.ToolTip=\u0022{x:Bind Tooltip}\u0022\u003E \n \u003CNavigationViewItem.Icon\u003E \n \u003CSymbolIcon Symbol=\u0022{x:Bind Glyph}\u0022 /\u003E \n \u003C/NavigationViewItem.Icon\u003E \n \u003C/NavigationViewItem\u003E\n \u003C/DataTemplate\u003E \n \u003C/local:MenuItemTemplateSelector.ItemTemplate \u003E \n\u003C/local:MenuItemTemplateSelector\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.ObjectModel;\nusing System.Diagnostics;\nusing System.Linq;\nusing Windows.System;\n\nprivate void NavigationView_SelectionChanged4(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)\n {\n if (args.IsSettingsSelected)\n {\n contentFrame4.Navigate(typeof(SampleSettingsPage));\n }\n else\n {\n Debug.WriteLine(\u0022Before hitting sample page 1\u0022);\n\n var selectedItem = (Category)args.SelectedItem;\n string selectedItemTag = selectedItem.Name;\n sender.Header = \u0022Sample Page \u0022 \u002B selectedItemTag.Substring(selectedItemTag.Length - 1);\n string pageName = \u0022WinUIGallery.SamplePages.\u0022 \u002B \u0022SamplePage1\u0022;\n SamplesNavigationPageMappings.PageDictionary.TryGetValue(pageName, out Type? pageType);\n contentFrame4.Navigate(pageType);\n }\n }\n\npublic NavigationViewPage()\n {\n this.InitializeComponent();\n\n nvSample2.SelectedItem = nvSample2.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample5.SelectedItem = nvSample5.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample6.SelectedItem = nvSample6.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample7.SelectedItem = nvSample7.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample8.SelectedItem = nvSample8.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n nvSample9.SelectedItem = nvSample9.MenuItems.OfType\u003CMicrosoft.UI.Xaml.Controls.NavigationViewItem\u003E().First();\n\n Categories = new ObservableCollection\u003CCategoryBase\u003E();\n Category firstCategory = new Category { Name = \u0022Category 1\u0022, Glyph = Symbol.Home, Tooltip = \u0022This is category 1\u0022 };\n Categories.Add(firstCategory);\n Categories.Add(new Category { Name = \u0022Category 2\u0022, Glyph = Symbol.Keyboard, Tooltip = \u0022This is category 2\u0022 });\n Categories.Add(new Category { Name = \u0022Category 3\u0022, Glyph = Symbol.Library, Tooltip = \u0022This is category 3\u0022 });\n Categories.Add(new Category { Name = \u0022Category 4\u0022, Glyph = Symbol.Mail, Tooltip = \u0022This is category 4\u0022 });\n nvSample4.SelectedItem = firstCategory;\n\n setASBSubstitutionString();\n\n // Fixes #218\n nvSample2.UpdateLayout();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Common vertical layout for top-level areas of your app via a collapsible navigation menu.","relatedControls":["SplitView","Pivot"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"navigationview-6","controlId":"navigationview","controlName":"NavigationView","headerText":"NavigationView with Footer Menu Items","xaml":"\u003CNavigationView x:Name=\u0022nvSample9\u0022 \n Header=\u0022This is Header Text\u0022 \n PaneDisplayMode=\u0022...\u0022 \n SelectionChanged=\u0022NavigationView_SelectionChanged9\u0022\n IsSettingsVisible=\u0022False\u0022\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Browse\u0022 Tag=\u0022YourPage\u0022 Icon=\u0022Library\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Track an Order\u0022 Tag=\u0022YourPage\u0022 Icon=\u0022Map\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Order History\u0022 Tag=\u0022YourPage\u0022 Icon=\u0022Tag\u0022 /\u003E\n \u003C/NavigationView.MenuItems\u003E\n \u003CNavigationView.FooterMenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Account\u0022 Tag=\u0022YourPage\u0022 Icon=\u0022Contact\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Your Cart\u0022 Tag=\u0022YourPage\u0022 Icon=\u0022Shop\u0022 /\u003E\n \u003CNavigationViewItem Content=\u0022Help\u0022 Tag=\u0022YourPage\u0022 Icon=\u0022Help\u0022 /\u003E\n \u003C/NavigationView.FooterMenuItems\u003E\n \u003CFrame x:Name=\u0022contentFrame9\u0022 /\u003E\n\u003C/NavigationView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.ObjectModel;\nusing System.Diagnostics;\nusing System.Linq;\nusing Windows.System;\n\nprivate void panePositionLeft_Checked(object sender, RoutedEventArgs e)\n {\n if ((sender as RadioButton)?.IsChecked == true)\n {\n if ((sender as RadioButton)?.Name == \u0022nvSampleLeft\u0022 \u0026\u0026 nvSample != null)\n {\n nvSample.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Left;\n nvSample.IsPaneOpen = true;\n FooterStackPanel.Orientation = Orientation.Vertical;\n }\n else if ((sender as RadioButton)?.Name == \u0022nvSample8Left\u0022 \u0026\u0026 nvSample8 != null)\n {\n nvSample8.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Left;\n nvSample8.IsPaneOpen = true;\n }\n else if ((sender as RadioButton)?.Name == \u0022nvSample9Left\u0022 \u0026\u0026 nvSample9 != null)\n {\n nvSample9.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Left;\n nvSample9.IsPaneOpen = true;\n }\n }\n }\n\nprivate void panePositionTop_Checked(object sender, RoutedEventArgs e)\n {\n if ((sender as RadioButton)?.IsChecked == true)\n {\n if ((sender as RadioButton)?.Name == \u0022nvSampleTop\u0022 \u0026\u0026 nvSample != null)\n {\n nvSample.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Top;\n nvSample.IsPaneOpen = false;\n FooterStackPanel.Orientation = Orientation.Horizontal;\n }\n else if ((sender as RadioButton)?.Name == \u0022nvSample8Top\u0022 \u0026\u0026 nvSample8 != null)\n {\n nvSample8.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Top;\n nvSample8.IsPaneOpen = false;\n }\n else if ((sender as RadioButton)?.Name == \u0022nvSample9Top\u0022 \u0026\u0026 nvSample9 != null)\n {\n nvSample9.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Top;\n nvSample9.IsPaneOpen = false;\n }\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Common vertical layout for top-level areas of your app via a collapsible navigation menu.","relatedControls":["SplitView","Pivot"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"navigationview-7","controlId":"navigationview","controlName":"NavigationView","headerText":"Hierarchical NavigationView","xaml":"\u003CNavigationView x:Name=\u0022nvSample8\u0022 Grid.Row=\u00221\u0022 Height=\u0022460\u0022\n PaneDisplayMode=\u0022...\u0022 \n IsTabStop=\u0022False\u0022 \n SelectionChanged=\u0022NavigationView_SelectionChanged8\u0022\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Home\u0022 Icon=\u0022Home\u0022 ToolTipService.ToolTip=\u0022Home\u0022 Tag=\u0022YourPage\u0022/\u003E\n \u003CNavigationViewItem Content=\u0022Account\u0022 Icon=\u0022Contact\u0022 ToolTipService.ToolTip=\u0022Account\u0022 Tag=\u0022YourPage\u0022\u003E\n \u003CNavigationViewItem.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Mail\u0022 Icon=\u0022Mail\u0022 ToolTipService.ToolTip=\u0022Mail\u0022 Tag=\u0022YourPage\u0022/\u003E\n \u003CNavigationViewItem Content=\u0022Calendar\u0022 Icon=\u0022Calendar\u0022 ToolTipService.ToolTip=\u0022Calendar\u0022 Tag=\u0022YourPage\u0022/\u003E\n \u003C/NavigationViewItem.MenuItems\u003E\n \u003C/NavigationViewItem\u003E\n \u003CNavigationViewItem Content=\u0022Document options\u0022 Icon=\u0022Page2\u0022 ToolTipService.ToolTip=\u0022Document options\u0022 SelectsOnInvoked=\u0022False\u0022\u003E\n \u003CNavigationViewItem.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Create new\u0022 Icon=\u0022NewFolder\u0022 ToolTipService.ToolTip=\u0022Create new\u0022 Tag=\u0022YourPage\u0022/\u003E\n \u003CNavigationViewItem Content=\u0022Upload file\u0022 Icon=\u0022OpenLocal\u0022 ToolTipService.ToolTip=\u0022Upload file\u0022 Tag=\u0022YourPage\u0022/\u003E\n \u003C/NavigationViewItem.MenuItems\u003E\n \u003C/NavigationViewItem\u003E\n \u003C/NavigationView.MenuItems\u003E\n \u003CFrame x:Name=\u0022contentFrame8\u0022 /\u003E\n\u003C/NavigationView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.ObjectModel;\nusing System.Diagnostics;\nusing System.Linq;\nusing Windows.System;\n\nprivate void panePositionLeft_Checked(object sender, RoutedEventArgs e)\n {\n if ((sender as RadioButton)?.IsChecked == true)\n {\n if ((sender as RadioButton)?.Name == \u0022nvSampleLeft\u0022 \u0026\u0026 nvSample != null)\n {\n nvSample.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Left;\n nvSample.IsPaneOpen = true;\n FooterStackPanel.Orientation = Orientation.Vertical;\n }\n else if ((sender as RadioButton)?.Name == \u0022nvSample8Left\u0022 \u0026\u0026 nvSample8 != null)\n {\n nvSample8.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Left;\n nvSample8.IsPaneOpen = true;\n }\n else if ((sender as RadioButton)?.Name == \u0022nvSample9Left\u0022 \u0026\u0026 nvSample9 != null)\n {\n nvSample9.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Left;\n nvSample9.IsPaneOpen = true;\n }\n }\n }\n\nprivate void panePositionTop_Checked(object sender, RoutedEventArgs e)\n {\n if ((sender as RadioButton)?.IsChecked == true)\n {\n if ((sender as RadioButton)?.Name == \u0022nvSampleTop\u0022 \u0026\u0026 nvSample != null)\n {\n nvSample.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Top;\n nvSample.IsPaneOpen = false;\n FooterStackPanel.Orientation = Orientation.Horizontal;\n }\n else if ((sender as RadioButton)?.Name == \u0022nvSample8Top\u0022 \u0026\u0026 nvSample8 != null)\n {\n nvSample8.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Top;\n nvSample8.IsPaneOpen = false;\n }\n else if ((sender as RadioButton)?.Name == \u0022nvSample9Top\u0022 \u0026\u0026 nvSample9 != null)\n {\n nvSample9.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Top;\n nvSample9.IsPaneOpen = false;\n }\n }\n }\n\nprivate void panePositionLeftCompact_Checked(object sender, RoutedEventArgs e)\n {\n if ((sender as RadioButton)?.IsChecked == true)\n {\n if ((sender as RadioButton)?.Name == \u0022nvSample8LeftCompact\u0022 \u0026\u0026 nvSample8 != null)\n {\n nvSample8.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.LeftCompact;\n nvSample8.IsPaneOpen = false;\n }\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Common vertical layout for top-level areas of your app via a collapsible navigation menu.","relatedControls":["SplitView","Pivot"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"navigationview-8","controlId":"navigationview","controlName":"NavigationView","headerText":"API in action","xaml":"\u003CNavigationView x:Name=\u0022nvSample\u0022\n IsSettingsVisible=\u0022...\u0022\n IsBackButtonVisible=\u0022...\u0022\n IsBackEnabled=\u0022...\u0022\n SelectionChanged=\u0022NavigationView_SelectionChanged\u0022\n Header=\u0022...\u0022\n AlwaysShowHeader=\u0022...\u0022\n PaneTitle=\u0022...\u0022\n PaneDisplayMode=\u0022...\u0022 \n ExpandedModeThresholdWidth=\u0022500\u0022\n SelectionFollowsFocus=\u0022...\u0022\n IsTabStop=\u0022False\u0022\u003E\n \n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item1\u0022 Tag=\u0022YourPage\u0022 x:Name=\u0022YourPageItem\u0022\u003E\n \u003CNavigationViewItem.Icon\u003E\n \u003CSymbolIcon Symbol=\u0022Play\u0022 /\u003E\n \u003C/NavigationViewItem.Icon\u003E\n \u003C/NavigationViewItem\u003E\n \u003CNavigationViewItemHeader Content=\u0022Actions\u0022/\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item2\u0022 Tag=\u0022YourPage\u0022 x:Name=\u0022YourPageItem\u0022 SelectsOnInvoked=\u0022...\u0022\u003E\n \u003CNavigationViewItem.Icon\u003E\n \u003CSymbolIcon Symbol=\u0022Save\u0022 /\u003E\n \u003C/NavigationViewItem.Icon\u003E\n \u003C/NavigationViewItem\u003E\n \u003CNavigationViewItem Content=\u0022Menu Item3\u0022 Tag=\u0022YourPage\u0022 x:Name=\u0022YourPageItem\u0022\u003E\n \u003CNavigationViewItem.Icon\u003E\n \u003CSymbolIcon Symbol=\u0022Refresh\u0022 /\u003E\n \u003C/NavigationViewItem.Icon\u003E\n \u003C/NavigationViewItem\u003E\n \u003C/NavigationView.MenuItems\u003E\n \n \u003CNavigationView.PaneCustomContent\u003E\n \u003CHyperlinkButton x:Name=\u0022PaneHyperlink\u0022 Content=\u0022More info\u0022 Margin=\u002212,0\u0022 Visibility=\u0022...\u0022 /\u003E\n \u003C/NavigationView.PaneCustomContent\u003E\n ...\n \u003CNavigationView.PaneFooter\u003E\n \u003CStackPanel x:Name=\u0022FooterStackPanel\u0022 Orientation=\u0022Vertical\u0022 Visibility=\u0022...\u0022\u003E\n \u003CNavigationViewItem Icon=\u0022Download\u0022 AutomationProperties.Name=\u0022download\u0022 /\u003E\n \u003CNavigationViewItem Icon=\u0022Favorite\u0022 AutomationProperties.Name=\u0022favorite\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/NavigationView.PaneFooter\u003E\n\n \u003CFrame x:Name=\u0022contentFrame\u0022 /\u003E\n\u003C/NavigationView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.ObjectModel;\nusing System.Diagnostics;\nusing System.Linq;\nusing Windows.System;\n\nprivate void settingsCheck_Click(object sender, RoutedEventArgs e)\n {\n nvSample.IsSettingsVisible = (sender as CheckBox)?.IsChecked == true ? true : false;\n }\n\nprivate void visibleCheck_Click(object sender, RoutedEventArgs e)\n {\n if ((sender as CheckBox)?.IsChecked == true)\n {\n nvSample.IsBackButtonVisible = Microsoft.UI.Xaml.Controls.NavigationViewBackButtonVisible.Visible;\n }\n else\n {\n nvSample.IsBackButtonVisible = Microsoft.UI.Xaml.Controls.NavigationViewBackButtonVisible.Collapsed;\n }\n }\n\nprivate void enableCheck_Click(object sender, RoutedEventArgs e)\n {\n nvSample.IsBackEnabled = (sender as CheckBox)?.IsChecked == true ? true : false;\n }\n\nprivate void autoSuggestCheck_Click(object sender, RoutedEventArgs e)\n {\n if ((sender as CheckBox)?.IsChecked == true)\n {\n AutoSuggestBox asb = new AutoSuggestBox() { QueryIcon = new SymbolIcon(Symbol.Find) };\n asb.SetValue(AutomationProperties.NameProperty, \u0022search\u0022);\n nvSample.AutoSuggestBox = asb;\n\n setASBSubstitutionString();\n }\n else\n {\n nvSample.AutoSuggestBox = null;\n navViewASB.Value = null;\n }\n }\n\nprivate void headerCheck_Click(object sender, RoutedEventArgs e)\n {\n nvSample.AlwaysShowHeader = (sender as CheckBox)?.IsChecked == true ? true : false;\n }\n\nprivate void panemc_Check_Click(object sender, RoutedEventArgs e)\n {\n if ((sender as CheckBox)?.IsChecked == true)\n {\n PaneHyperlink.Visibility = Visibility.Visible;\n }\n else\n {\n PaneHyperlink.Visibility = Visibility.Collapsed;\n }\n }\n\nprivate void paneFooterCheck_Click(object sender, RoutedEventArgs e)\n {\n if ((sender as CheckBox)?.IsChecked == true)\n {\n FooterStackPanel.Visibility = Visibility.Visible;\n }\n else\n {\n FooterStackPanel.Visibility = Visibility.Collapsed;\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Common vertical layout for top-level areas of your app via a collapsible navigation menu.","relatedControls":["SplitView","Pivot"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"pivot-1","controlId":"pivot","controlName":"Pivot","headerText":"A basic pivot.","xaml":"\u003CPivot Title=\u0022EMAIL\u0022\u003E\n \u003CPivotItem Header=\u0022All\u0022\u003E\n \u003CTextBlock Text=\u0022all emails go here.\u0022 /\u003E\n \u003C/PivotItem\u003E\n \u003CPivotItem Header=\u0022Unread\u0022\u003E\n \u003CTextBlock Text=\u0022unread emails go here.\u0022 /\u003E\n \u003C/PivotItem\u003E\n \u003CPivotItem Header=\u0022Flagged\u0022\u003E\n \u003CTextBlock Text=\u0022flagged emails go here.\u0022 /\u003E\n \u003C/PivotItem\u003E\n \u003CPivotItem Header=\u0022Urgent\u0022\u003E\n \u003CTextBlock Text=\u0022urgent emails go here.\u0022 /\u003E\n \u003C/PivotItem\u003E\n\u003C/Pivot\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Presents information from different sources in a tabbed view.","relatedControls":["SelectorBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"selectorbar-1","controlId":"selectorbar","controlName":"SelectorBar","headerText":"A Basic SelectorBar","xaml":"\u003CSelectorBar x:Name=\u0022SelectorBar1\u0022\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemRecent\u0022 Text=\u0022Recent\u0022 Icon=\u0022Clock\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemShared\u0022 Text=\u0022Shared\u0022 Icon=\u0022Share\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemFavorites\u0022 Text=\u0022Favorites\u0022 Icon=\u0022Favorite\u0022 /\u003E\n\u003C/SelectorBar\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Presents information from a small set of different sources. The user can pick one of them.","relatedControls":["NavigationView","PipsPager","Pivot"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"selectorbar-2","controlId":"selectorbar","controlName":"SelectorBar","headerText":"SelectorBar with Frame Slide Transitions","xaml":"\u003CSelectorBar x:Name=\u0022SelectorBar2\u0022 SelectionChanged=\u0022SelectorBar2_SelectionChanged\u0022\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPage1\u0022 Text=\u0022Page1\u0022 IsSelected=\u0022True\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPage2\u0022 Text=\u0022Page2\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPage3\u0022 Text=\u0022Page3\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPage4\u0022 Text=\u0022Page4\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPage5\u0022 Text=\u0022Page5\u0022 /\u003E\n\u003C/SelectorBar\u003E\n\n\u003CFrame x:Name=\u0022ContentFrame\u0022 IsNavigationStackEnabled=\u0022False\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Media.Animation;\nusing System.Collections.ObjectModel;\n\nprivate void SelectorBar2_SelectionChanged(SelectorBar sender, SelectorBarSelectionChangedEventArgs args)\n {\n SelectorBarItem selectedItem = sender.SelectedItem;\n int currentSelectedIndex = sender.Items.IndexOf(selectedItem);\n System.Type pageType;\n\n switch (currentSelectedIndex)\n {\n case 0:\n pageType = typeof(SamplePage1);\n break;\n case 1:\n pageType = typeof(SamplePage2);\n break;\n case 2:\n pageType = typeof(SamplePage3);\n break;\n case 3:\n pageType = typeof(SamplePage4);\n break;\n default:\n pageType = typeof(SamplePage5);\n break;\n }\n\n var slideNavigationTransitionEffect = currentSelectedIndex - previousSelectedIndex \u003E 0 ? SlideNavigationTransitionEffect.FromRight : SlideNavigationTransitionEffect.FromLeft;\n\n ContentFrame.Navigate(pageType, null, new SlideNavigationTransitionInfo() { Effect = slideNavigationTransitionEffect });\n\n previousSelectedIndex = currentSelectedIndex;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Presents information from a small set of different sources. The user can pick one of them.","relatedControls":["NavigationView","PipsPager","Pivot"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"selectorbar-3","controlId":"selectorbar","controlName":"SelectorBar","headerText":"SelectorBar Displaying Different Collections Using ItemsView","xaml":"\u003CSelectorBar x:Name=\u0022SelectorBar3\u0022 SelectionChanged=\u0022SelectorBar3_SelectionChanged\u0022 \u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPink\u0022 Text=\u0022Pink\u0022 IsSelected=\u0022True\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPlum\u0022 Text=\u0022Plum\u0022 /\u003E\n \u003CSelectorBarItem x:Name=\u0022SelectorBarItemPowderBlue\u0022 Text=\u0022PowderBlue\u0022 /\u003E\n\u003C/SelectorBar\u003E\n\n\u003CItemsView x:Name=\u0022ItemsView3\u0022 ItemTemplate=\u0022{StaticResource ColorsTemplate}\u0022 /\u003E\n \u003CItemsView.Layout\u003E\n \u003CUniformGridLayout /\u003E\n \u003C/ItemsView.Layout\u003E\n\u003C/ItemsView/\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Media.Animation;\nusing System.Collections.ObjectModel;\n\nprivate void SelectorBar3_SelectionChanged(SelectorBar sender, SelectorBarSelectionChangedEventArgs args)\n {\n if (sender.SelectedItem == SelectorBarItemPink)\n {\n ItemsView3.ItemsSource = PinkColorCollection;\n }\n else if (sender.SelectedItem == SelectorBarItemPlum)\n {\n ItemsView3.ItemsSource = PlumColorCollection;\n }\n else\n {\n ItemsView3.ItemsSource = PowderBlueColorCollection;\n }\n }\n\npublic ObservableCollection\u003CSolidColorBrush\u003E PinkColorCollection = new ObservableCollection\u003CSolidColorBrush\u003E();\n\npublic SelectorBarPage()\n {\n this.InitializeComponent();\n\n PopulateColorCollections();\n }\n\npublic ObservableCollection\u003CSolidColorBrush\u003E PlumColorCollection = new ObservableCollection\u003CSolidColorBrush\u003E();\n\npublic ObservableCollection\u003CSolidColorBrush\u003E PowderBlueColorCollection = new ObservableCollection\u003CSolidColorBrush\u003E();\n\nprivate void PopulateColorCollections()\n {\n SolidColorBrush solidColorBrush = new SolidColorBrush(Microsoft.UI.Colors.Pink);\n\n for (int colorInstance = 0; colorInstance \u003C 5; colorInstance\u002B\u002B)\n {\n this.PinkColorCollection.Add(solidColorBrush);\n }\n\n solidColorBrush = new SolidColorBrush(Microsoft.UI.Colors.Plum);\n\n for (int colorInstance = 0; colorInstance \u003C 7; colorInstance\u002B\u002B)\n {\n this.PlumColorCollection.Add(solidColorBrush);\n }\n\n solidColorBrush = new SolidColorBrush(Microsoft.UI.Colors.PowderBlue);\n\n for (int colorInstance = 0; colorInstance \u003C 4; colorInstance\u002B\u002B)\n {\n this.PowderBlueColorCollection.Add(solidColorBrush);\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Presents information from a small set of different sources. The user can pick one of them.","relatedControls":["NavigationView","PipsPager","Pivot"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"tabview-1","controlId":"tabview","controlName":"TabView","headerText":"A TabView with support for adding, closing, and rearranging tabs","xaml":"\u003CTabView AddTabButtonClick=\u0022TabView_AddButtonClick\u0022 TabCloseRequested=\u0022TabView_TabCloseRequested\u0022 Loaded=\u0022TabView_Loaded\u0022 /\u003E","csharp":"private void TabView_AddButtonClick(TabView sender, object args)\r\n{\r\n sender.TabItems.Add(CreateNewTab(sender.TabItems.Count));\r\n}\r\n\r\nprivate void TabView_TabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)\r\n{\r\n sender.TabItems.Remove(args.Tab);\r\n}\r\n\r\nprivate TabViewItem CreateNewTab(int index)\r\n{\r\n TabViewItem newItem = new TabViewItem();\r\n newItem.Header = $\u0022Document {index}\u0022;\r\n newItem.IconSource = new SymbolIconSource() { Symbol = Symbol.Document };\r\n newItem.IsClosable = true;\r\n\r\n // Content can be any UIElement \u2014 TextBox, Grid, UserControl, etc.\r\n var textBox = new TextBox\r\n {\r\n AcceptsReturn = true,\r\n TextWrapping = TextWrapping.Wrap,\r\n HorizontalAlignment = HorizontalAlignment.Stretch,\r\n VerticalAlignment = VerticalAlignment.Stretch,\r\n BorderThickness = new Thickness(0),\r\n };\r\n newItem.Content = textBox;\r\n\r\n return newItem;\r\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays a collection of tabs that can be used to display several documents.","relatedControls":["Pivot","NavigationView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"tabview-2","controlId":"tabview","controlName":"TabView","headerText":"A TabView with TabViewItems defined in markup","xaml":"\u003CTabView AddTabButtonClick=\u0022TabView_AddButtonClick\u0022 TabCloseRequested=\u0022TabView_TabCloseRequested\u0022\u003E\n \u003CTabView.TabItems\u003E\n \u003CTabViewItem Header=\u0022Document 0\u0022\u003E\n \u003CTabViewItem.IconSource\u003E\n \u003CSymbolIconSource Symbol=\u0022Placeholder\u0022 /\u003E\n \u003C/TabViewItem.IconSource\u003E\n \u003Csamplepages:YourPage /\u003E\n \u003C/TabViewItem\u003E\n \u003CTabViewItem Header=\u0022Document 1\u0022\u003E\n \u003CTabViewItem.IconSource\u003E\n \u003CSymbolIconSource Symbol=\u0022Placeholder\u0022 /\u003E\n \u003C/TabViewItem.IconSource\u003E\n \u003Csamplepages:YourPage /\u003E\n \u003C/TabViewItem\u003E\n \u003CTabViewItem Header=\u0022Document 2\u0022\u003E\n \u003CTabViewItem.IconSource\u003E\n \u003CSymbolIconSource Symbol=\u0022Placeholder\u0022 /\u003E\n \u003C/TabViewItem.IconSource\u003E\n \u003Csamplepages:YourPage /\u003E\n \u003C/TabViewItem\u003E\n \u003C/TabView.TabItems\u003E\n\u003C/TabView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing System.Collections.ObjectModel;\n\nprivate void TabView_AddButtonClick(TabView sender, object args)\n {\n sender.TabItems.Add(CreateNewTab(sender.TabItems.Count));\n }\n\nprivate void TabView_TabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)\n {\n sender.TabItems.Remove(args.Tab);\n }\n\nprivate TabViewItem CreateNewTab(int index)\n {\n TabViewItem newItem = new TabViewItem\n {\n Header = $\u0022Document {index}\u0022,\n IconSource = new Microsoft.UI.Xaml.Controls.SymbolIconSource() { Symbol = Symbol.Document },\n ContextFlyout = TabViewContextMenu\n };\n\n // The content of the tab is often a frame that contains a page, though it could be any UIElement.\n Frame frame = new Frame();\n\n switch (index % 3)\n {\n case 0:\n frame.Navigate(typeof(SamplePage1));\n break;\n case 1:\n frame.Navigate(typeof(SamplePage2));\n break;\n case 2:\n frame.Navigate(typeof(SamplePage3));\n break;\n }\n\n newItem.Content = frame;\n\n return newItem;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays a collection of tabs that can be used to display several documents.","relatedControls":["Pivot","NavigationView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"tabview-3","controlId":"tabview","controlName":"TabView","headerText":"A TabView bound to a collection of MyData objects","xaml":"\u003CTabView TabItemsSource=\u0022{x:Bind myDatas, Mode=OneWay}\u0022 AddTabButtonClick=\u0022TabViewItemsSourceSample_AddTabButtonClick\u0022 TabCloseRequested=\u0022TabViewItemsSourceSample_TabCloseRequested\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing System.Collections.ObjectModel;\n\nprivate void TabViewItemsSourceSample_AddTabButtonClick(TabView sender, object args)\n {\n // Add a new MyData item to the collection. TabView automatically generates a TabViewItem.\n myDatas?.Add(CreateNewMyData(myDatas.Count));\n }\n\nprivate void TabViewItemsSourceSample_TabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)\n {\n if (args.Item is not MyData myData)\n {\n return;\n }\n\n // Remove the requested MyData object from the collection.\n myDatas?.Remove(myData);\n }\n\npublic class MyData\n{\n public string DataHeader { get; set; } = string.Empty;\n public required IconSource DataIconSource { get; set; }\n public required object DataContent { get; set; }\n}\n\nprivate MyData CreateNewMyData(int index)\n {\n Frame frame = new Frame();\n\n switch (index % 3)\n {\n case 0:\n frame.Navigate(typeof(SamplePage1));\n break;\n case 1:\n frame.Navigate(typeof(SamplePage2));\n break;\n case 2:\n frame.Navigate(typeof(SamplePage3));\n break;\n }\n\n var newData = new MyData\n {\n DataHeader = $\u0022MyData Doc {index}\u0022,\n DataIconSource = new Microsoft.UI.Xaml.Controls.SymbolIconSource() { Symbol = Symbol.Placeholder },\n DataContent = frame,\n };\n\n return newData;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays a collection of tabs that can be used to display several documents.","relatedControls":["Pivot","NavigationView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"tabview-4","controlId":"tabview","controlName":"TabView","headerText":"A TabView with keyboarding support","xaml":"\u003CTabView AddTabButtonClick=\u0022TabView_AddButtonClick\u0022 TabCloseRequested=\u0022TabView_TabCloseRequested\u0022 Loaded=\u0022TabView_Loaded\u0022\u003E\n \u003CTabView.KeyboardAccelerators\u003E\n \u003CKeyboardAccelerator Key=\u0022T\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NewTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022W\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022CloseSelectedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number1\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number2\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number3\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number4\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number5\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number6\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number7\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number8\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003CKeyboardAccelerator Key=\u0022Number9\u0022 Modifiers=\u0022Control\u0022 Invoked=\u0022NavigateToNumberedTabKeyboardAccelerator_Invoked\u0022 /\u003E\n \u003C/TabView.KeyboardAccelerators\u003E\n\u003C/TabView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing System.Collections.ObjectModel;\n\nprivate void TabView_AddButtonClick(TabView sender, object args)\n {\n sender.TabItems.Add(CreateNewTab(sender.TabItems.Count));\n }\n\nprivate void TabView_Loaded(object sender, RoutedEventArgs e)\n {\n for (int i = 0; i \u003C 3; i\u002B\u002B)\n {\n (sender as TabView)?.TabItems.Add(CreateNewTab(i));\n }\n }\n\nprivate void TabView_TabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)\n {\n sender.TabItems.Remove(args.Tab);\n }\n\nprivate void NewTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)\n {\n var senderTabView = args.Element as TabView;\n senderTabView?.TabItems.Add(CreateNewTab(senderTabView.TabItems.Count));\n\n args.Handled = true;\n }\n\nprivate void CloseSelectedTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)\n {\n if (args.Element is not TabView invokedTabView)\n {\n return;\n }\n\n // Only close the selected tab if it is closeable\n if ((invokedTabView.SelectedItem as TabViewItem)?.IsClosable is true)\n {\n invokedTabView.TabItems.Remove(invokedTabView.SelectedItem);\n }\n\n args.Handled = true;\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays a collection of tabs that can be used to display several documents.","relatedControls":["Pivot","NavigationView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"tabview-5","controlId":"tabview","controlName":"TabView","headerText":"You can put custom content in TabStripHeader and TabStripFooter","xaml":"\u003CTabView\u003E\n \u003CTabView.TabStripHeader\u003E\n \u003CTextBlock Text=\u0022TabStripHeader Content\u0022 VerticalAlignment=\u0022Center\u0022 Margin=\u00228,6\u0022 Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022 /\u003E\n \u003C/TabView.TabStripHeader\u003E\n \u003CTabView.TabStripFooter\u003E\n \u003CTextBlock Text=\u0022TabStripFooter Content\u0022 VerticalAlignment=\u0022Center\u0022 HorizontalAlignment=\u0022Right\u0022 Margin=\u00226\u0022 Style=\u0022{ThemeResource BaseTextBlockStyle}\u0022 /\u003E\n \u003C/TabView.TabStripFooter\u003E\n\u003C/TabView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing System.Collections.ObjectModel;\n\nprivate void TabView_BringIntoViewRequested(UIElement sender, BringIntoViewRequestedEventArgs args)\n {\n // The TabView control is firing this event when TabWidthMode is set to \u0060SizeToContent\u0060 or \u0060Compact\u0060.\n // This will work around an auto-scroll issue when the page is loaded.\n args.Handled = true;\n }\n\nprivate void TabView_AddButtonClick(TabView sender, object args)\n {\n sender.TabItems.Add(CreateNewTab(sender.TabItems.Count));\n }\n\nprivate void TabView_Loaded(object sender, RoutedEventArgs e)\n {\n for (int i = 0; i \u003C 3; i\u002B\u002B)\n {\n (sender as TabView)?.TabItems.Add(CreateNewTab(i));\n }\n }\n\nprivate void TabView_TabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)\n {\n sender.TabItems.Remove(args.Tab);\n }\n\nprivate TabViewItem CreateNewTab(int index)\n {\n TabViewItem newItem = new TabViewItem\n {\n Header = $\u0022Document {index}\u0022,\n IconSource = new Microsoft.UI.Xaml.Controls.SymbolIconSource() { Symbol = Symbol.Document },\n ContextFlyout = TabViewContextMenu\n };\n\n // The content of the tab is often a frame that contains a page, though it could be any UIElement.\n Frame frame = new Frame();\n\n switch (index % 3)\n {\n case 0:\n frame.Navigate(typeof(SamplePage1));\n break;\n case 1:\n frame.Navigate(typeof(SamplePage2));\n break;\n case 2:\n frame.Navigate(typeof(SamplePage3));\n break;\n }\n\n newItem.Content = frame;\n\n return newItem;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays a collection of tabs that can be used to display several documents.","relatedControls":["Pivot","NavigationView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"tabview-6","controlId":"tabview","controlName":"TabView","headerText":"Tab widths can either be equally sized, sized to the content of the tab, or sized to only show the icon when unselected","xaml":"\u003CTabView TabWidthMode=\u0022...\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing System.Collections.ObjectModel;\n\nprivate void TabView_BringIntoViewRequested(UIElement sender, BringIntoViewRequestedEventArgs args)\n {\n // The TabView control is firing this event when TabWidthMode is set to \u0060SizeToContent\u0060 or \u0060Compact\u0060.\n // This will work around an auto-scroll issue when the page is loaded.\n args.Handled = true;\n }\n\nprivate void TabWidthBehaviorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n string? widthModeString = (e.AddedItems[0] as ComboBoxItem)?.Content.ToString();\n TabViewWidthMode widthMode = TabViewWidthMode.Equal;\n switch (widthModeString)\n {\n case \u0022Equal\u0022:\n widthMode = TabViewWidthMode.Equal;\n break;\n case \u0022SizeToContent\u0022:\n widthMode = TabViewWidthMode.SizeToContent;\n break;\n case \u0022Compact\u0022:\n widthMode = TabViewWidthMode.Compact;\n break;\n }\n TabView3.TabWidthMode = widthMode;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays a collection of tabs that can be used to display several documents.","relatedControls":["Pivot","NavigationView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"tabview-7","controlId":"tabview","controlName":"TabView","headerText":"The close button can be persistent or only visible on hover","xaml":"\u003CTabView CloseButtonOverlayMode=\u0022...\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing System.Collections.ObjectModel;\n\nprivate void TabCloseButtonOverlayModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n string? overlayModeString = (e.AddedItems[0] as ComboBoxItem)?.Content.ToString();\n TabViewCloseButtonOverlayMode overlayMode = TabViewCloseButtonOverlayMode.Auto;\n switch (overlayModeString)\n {\n case \u0022Auto\u0022:\n overlayMode = TabViewCloseButtonOverlayMode.Auto;\n break;\n case \u0022OnHover\u0022:\n overlayMode = TabViewCloseButtonOverlayMode.OnPointerOver;\n break;\n case \u0022Always\u0022:\n overlayMode = TabViewCloseButtonOverlayMode.Always;\n break;\n }\n TabView4.CloseButtonOverlayMode = overlayMode;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays a collection of tabs that can be used to display several documents.","relatedControls":["Pivot","NavigationView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"tabview-8","controlId":"tabview","controlName":"TabView","headerText":"TabView with color tab icons","xaml":"\u003CTabView\u003E\n \u003CTabView.TabItems\u003E\n \u003CTabViewItem Header=\u0022CMD Prompt\u0022\u003E\n \u003CTabViewItem.IconSource\u003E\n \u003CBitmapIconSource UriSource=\u0022/Assets/SampleMedia/cmd.png\u0022 ShowAsMonochrome=\u0022False\u0022 /\u003E\n \u003C/TabViewItem.IconSource\u003E\n \u003C/TabViewItem\u003E\n \u003CTabViewItem Header=\u0022PowerShell\u0022\u003E\n \u003CTabViewItem.IconSource\u003E\n \u003CBitmapIconSource UriSource=\u0022/Assets/SampleMedia/powershell.png\u0022 ShowAsMonochrome=\u0022False\u0022 /\u003E\n \u003C/TabViewItem.IconSource\u003E\n \u003C/TabViewItem\u003E\n \u003CTabViewItem Header=\u0022Windows Subsystem for Linux\u0022\u003E\n \u003CTabViewItem.IconSource\u003E\n \u003CBitmapIconSource UriSource=\u0022/Assets/SampleMedia/linux.png\u0022 ShowAsMonochrome=\u0022False\u0022 /\u003E\n \u003C/TabViewItem.IconSource\u003E\n \u003C/TabViewItem\u003E\n \u003C/TabView.TabItems\u003E\n\u003C/TabView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing System.Collections.ObjectModel;\n\nprivate void TabView_BringIntoViewRequested(UIElement sender, BringIntoViewRequestedEventArgs args)\n {\n // The TabView control is firing this event when TabWidthMode is set to \u0060SizeToContent\u0060 or \u0060Compact\u0060.\n // This will work around an auto-scroll issue when the page is loaded.\n args.Handled = true;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays a collection of tabs that can be used to display several documents.","relatedControls":["Pivot","NavigationView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"tabview-9","controlId":"tabview","controlName":"TabView","headerText":"A TabView with accent colored TabStrip background","xaml":"\u003CTabView\u003E\n \u003CTabView.Resources\u003E\n \u003CResourceDictionary\u003E\n \u003CResourceDictionary.ThemeDictionaries\u003E\n \u003CResourceDictionary x:Key=\u0022Light\u0022\u003E\n \u003CSolidColorBrush x:Key=\u0022TabViewBackground\u0022 Color=\u0022{ThemeResource SystemAccentColorLight2}\u0022/\u003E\n \u003C/ResourceDictionary\u003E\n \u003CResourceDictionary x:Key=\u0022Dark\u0022\u003E\n \u003CSolidColorBrush x:Key=\u0022TabViewBackground\u0022 Color=\u0022{ThemeResource SystemAccentColorDark2}\u0022/\u003E\n \u003C/ResourceDictionary\u003E\n \u003C/ResourceDictionary.ThemeDictionaries\u003E\n \u003C/ResourceDictionary\u003E\n \u003C/TabView.Resources\u003E\n\u003C/TabView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing System.Collections.ObjectModel;\n\nprivate void TabView_AddButtonClick(TabView sender, object args)\n {\n sender.TabItems.Add(CreateNewTab(sender.TabItems.Count));\n }\n\nprivate void TabView_Loaded(object sender, RoutedEventArgs e)\n {\n for (int i = 0; i \u003C 3; i\u002B\u002B)\n {\n (sender as TabView)?.TabItems.Add(CreateNewTab(i));\n }\n }\n\nprivate void TabView_TabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)\n {\n sender.TabItems.Remove(args.Tab);\n }\n\nprivate TabViewItem CreateNewTab(int index)\n {\n TabViewItem newItem = new TabViewItem\n {\n Header = $\u0022Document {index}\u0022,\n IconSource = new Microsoft.UI.Xaml.Controls.SymbolIconSource() { Symbol = Symbol.Document },\n ContextFlyout = TabViewContextMenu\n };\n\n // The content of the tab is often a frame that contains a page, though it could be any UIElement.\n Frame frame = new Frame();\n\n switch (index % 3)\n {\n case 0:\n frame.Navigate(typeof(SamplePage1));\n break;\n case 1:\n frame.Navigate(typeof(SamplePage2));\n break;\n case 2:\n frame.Navigate(typeof(SamplePage3));\n break;\n }\n\n newItem.Content = frame;\n\n return newItem;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays a collection of tabs that can be used to display several documents.","relatedControls":["Pivot","NavigationView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"tabview-10","controlId":"tabview","controlName":"TabView","headerText":"Complete TabView windowing sample","xaml":"Check out the TabViewWindowingSamplePage.xaml and *.cs files to see the complete code.","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing System.Collections.ObjectModel;\n\nprivate void TabViewWindowingButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n {\n var tabViewSample = new TabViewWindowingSamplePage();\n\n var newWindow = WindowHelper.CreateWindow();\n newWindow.ExtendsContentIntoTitleBar = true;\n newWindow.Content = tabViewSample;\n newWindow.AppWindow.SetIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022);\n tabViewSample.LoadDemoData();\n\n newWindow.Activate();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays a collection of tabs that can be used to display several documents.","relatedControls":["Pivot","NavigationView","ListView"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"animatedvisualplayer-1","controlId":"animatedvisualplayer","controlName":"AnimatedVisualPlayer","headerText":"Playback of a Lottie animation.","xaml":"\u003CAnimatedVisualPlayer x:Name=\u0022Player\u0022 AutoPlay=\u0022False\u0022\u003E\n \u003Canimatedvisuals:LottieLogo1/\u003E\n\u003C/AnimatedVisualPlayer\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void PlayButton_Click(object sender, RoutedEventArgs e)\n {\n // Set forward playback rate.\n // NOTE: This property is live, which means it takes effect even if the animation is playing.\n Player.PlaybackRate = 1;\n EnsurePlaying();\n }\n\nprivate void PauseButton_Checked(object sender, RoutedEventArgs e)\n {\n // Pause the animation, if playing.\n // NOTE: Pausing does not cause PlayAsync to complete.\n Player.Pause();\n }\n\nprivate void PauseButton_Unchecked(object sender, RoutedEventArgs e)\n {\n // Resume playing current animation.\n Player.Resume();\n }\n\nprivate void StopButton_Click(object sender, RoutedEventArgs e)\n {\n // Stop the animation, which completes PlayAsync and resets to initial frame. \n Player.Stop();\n PauseButton.IsChecked = false;\n }\n\nprivate void ReverseButton_Click(object sender, RoutedEventArgs e)\n {\n // Set reverse playback rate.\n // NOTE: This property is live, which means it takes effect even if the animation is playing.\n Player.PlaybackRate = -1;\n EnsurePlaying();\n }\n\nprivate void EnsurePlaying()\n {\n if (PauseButton.IsChecked is true)\n {\n // Resume playing the animation, if paused.\n PauseButton.IsChecked = false;\n }\n else\n {\n if (!Player.IsPlaying)\n {\n // Play the animation at the currently specified playback rate.\n _ = Player.PlayAsync(fromProgress: 0, toProgress: 1, looped: false);\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An element to render and control playback of motion graphics.","relatedControls":["AnimatedIcon"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"captureelementpreview-1","controlId":"captureelementpreview","controlName":"Capture Element / Camera Preview","headerText":"A MediaCapture preview displayed via a MediaPlayerElement.","xaml":"\u003CGrid RowDefinitions=\u0022Auto,*\u0022 ColumnDefinitions=\u0022*,100\u0022 MinWidth=\u0022400\u0022 MinHeight=\u0022300\u0022 RowSpacing=\u002210\u0022 ColumnSpacing=\u00224\u0022\u003E\n \u003CTextBlock x:Name=\u0022frameSourceName\u0022 Grid.Row=\u00220\u0022 Grid.Column=\u00220\u0022 VerticalAlignment=\u0022Center\u0022/\u003E\n \u003CMediaPlayerElement x:Name=\u0022captureElement\u0022 Grid.Row=\u00221\u0022 Grid.Column=\u00220\u0022 Stretch=\u0022Uniform\u0022 AutoPlay=\u0022True\u0022 /\u003E\n \u003CTextBlock x:Name=\u0022capturedText\u0022 Visibility=\u0022Collapsed\u0022 Grid.Row=\u00220\u0022 Grid.Column=\u00221\u0022 VerticalAlignment=\u0022Center\u0022 Text=\u0022Captured:\u0022 /\u003E\n \u003CGrid x:Name=\u0022captureContainer\u0022 Grid.Row=\u00221\u0022 Grid.Column=\u00221\u0022\u003E\n \u003CScrollViewer VerticalScrollMode=\u0022Enabled\u0022\u003E\n \u003CStackPanel x:Name=\u0022snapshots\u0022 Spacing=\u00222\u0022/\u003E\n \u003C/ScrollViewer\u003E\n \u003C/Grid\u003E\n\u003C/Grid\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Media.Imaging;\nusing System;\nusing System.ComponentModel;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing Windows.Foundation;\nusing Windows.Media.Capture;\nusing Windows.Media.Capture.Frames;\nusing Windows.Media.MediaProperties;\nusing Windows.Storage.Streams;\nusing Windows.System;\n\nprivate async void CaptureElementPreviewPage_Loaded(object sender, RoutedEventArgs e)\n {\n try\n {\n await StartCaptureElement();\n }\n catch (UnauthorizedAccessException)\n {\n var dialog = new ContentDialog()\n {\n Title = \u0022Camera access denied\u0022,\n Content = \u0022Please enable camera access in the privacy settings.\u0022,\n PrimaryButtonText = \u0022Privacy Settings\u0022,\n CloseButtonText = \u0022Cancel\u0022,\n DefaultButton = ContentDialogButton.Primary,\n XamlRoot = this.XamlRoot,\n };\n\n if (await dialog.ShowAsync() is ContentDialogResult.Primary)\n {\n await Launcher.LaunchUriAsync(new Uri(\u0022ms-settings:privacy-webcam\u0022));\n }\n }\n catch (Exception ex)\n {\n var dialog = new ContentDialog()\n {\n Title = \u0022Error\u0022,\n Content = ex.Message,\n CloseButtonText = \u0022OK\u0022,\n XamlRoot = this.XamlRoot,\n };\n\n await dialog.ShowAsync();\n }\n\n // Move the ScrollViewer from the captureContainer under an ExpandToFillContainer.\n // This will allow the snapshots column to use all available height without\n // influencing the height.\n var expandToFillContainer = new ExpandToFillContainer();\n var sv = captureContainer.Children[0];\n captureContainer.Children.Remove(sv);\n captureContainer.Children.Add(expandToFillContainer);\n expandToFillContainer.Children.Add(sv);\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A sample for doing a camera preview.","relatedControls":["MediaPlayerElement","Image"],"apiNamespace":null,"docs":[{"title":"MediaCapture - API","uri":"https://learn.microsoft.com/uwp/api/windows.media.capture.mediacapture"}]},{"id":"image-1","controlId":"image","controlName":"Image","headerText":"A basic image from a local file.","xaml":"\u003CImage Source=\u0022/Assets/SampleMedia/treetops.jpg\u0022 Height=\u0022100\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control to display image content.","relatedControls":["MediaPlayerElement","PersonPicture"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"image-2","controlId":"image","controlName":"Image","headerText":"An image decoded to the rendering size","xaml":"\u003CImage Height=\u0022100\u0022\u003E\n \u003CImage.Source\u003E\n \u003CBitmapImage UriSource=\u0022/Assets/SampleMedia/treetops.jpg\u0022\n DecodePixelHeight=\u0022100\u0022 /\u003E\n \u003C/Image.Source\u003E\n\u003C/Image\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control to display image content.","relatedControls":["MediaPlayerElement","PersonPicture"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"image-3","controlId":"image","controlName":"Image","headerText":"Image stretching.","xaml":"\u003CImage Stretch=\u0022...\u0022 Height=\u0022100\u0022 Width=\u0022100\u0022 Source=\u0022/Assets/SampleMedia/valley.jpg\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing System;\n\nprivate void ImageStretch_Checked(object sender, RoutedEventArgs e)\n {\n if ((sender as RadioButton)?.Content.ToString() is string strStretch \u0026\u0026\n StretchImage != null)\n {\n var stretch = (Stretch)Enum.Parse(typeof(Stretch), strStretch);\n StretchImage.Stretch = stretch;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control to display image content.","relatedControls":["MediaPlayerElement","PersonPicture"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"image-4","controlId":"image","controlName":"Image","headerText":"Nine grid images.","xaml":"\u003CImage Source=\u0022/Assets/SampleMedia/ninegrid.gif\u0022 Height=\u002282\u0022 /\u003E\n\u003CImage Source=\u0022/Assets/SampleMedia/ninegrid.gif\u0022 NineGrid=\u00223,3,3,3\u0022 Height=\u0022164\u0022 /\u003E\n\u003CImage Source=\u0022/Assets/SampleMedia/ninegrid.gif\u0022 NineGrid=\u002230,20,30,20\u0022 Height=\u0022164\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control to display image content.","relatedControls":["MediaPlayerElement","PersonPicture"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"image-5","controlId":"image","controlName":"Image","headerText":"An SVG image.","xaml":"\u003CImage Source=\u0022/Assets/SampleMedia/MirrorPCConsent.svg\u0022 Height=\u0022100\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control to display image content.","relatedControls":["MediaPlayerElement","PersonPicture"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"mapcontrol-1","controlId":"mapcontrol","controlName":"MapControl","headerText":"Showing a pin on the map","xaml":"\u003CMapControl x:Name=\u0022map1\u0022 MapServiceToken=\u0022MapServiceToken\u0022 Height=\u0022600\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System.Collections.Generic;\nusing Windows.Devices.Geolocation;\n\nprivate void MapToken_KeyDown(object sender, Microsoft.UI.Xaml.Input.KeyRoutedEventArgs e)\n {\n if (e.Key == Windows.System.VirtualKey.Enter)\n {\n map1.MapServiceToken = MapToken.Password;\n }\n }\n\nprivate void Button_Click(object sender, RoutedEventArgs e)\n {\n map1.MapServiceToken = MapToken.Password;\n }\n\nprivate void MapControlPage_Loaded(object sender, RoutedEventArgs e)\n {\n var myLandmarks = new List\u003CMapElement\u003E();\n\n BasicGeoposition centerPosition = new BasicGeoposition { Latitude = 0, Longitude = 0 };\n Geopoint centerPoint = new Geopoint(centerPosition);\n\n map1.Center = centerPoint;\n map1.ZoomLevel = 1;\n\n BasicGeoposition position = new BasicGeoposition { Latitude = -30.034647, Longitude = -51.217659 };\n Geopoint point = new Geopoint(position);\n\n var icon = new MapIcon\n {\n Location = point,\n };\n\n myLandmarks.Add(icon);\n\n var LandmarksLayer = new MapElementsLayer\n {\n MapElements = myLandmarks\n };\n\n map1.Layers.Add(LandmarksLayer);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Displays a symbolic map of the Earth.","relatedControls":[],"apiNamespace":"Microsoft.UI.Xaml.Controls","docs":[{"title":"MapControl - API","uri":"https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.mapcontrol"}]},{"id":"mediaplayerelement-1","controlId":"mediaplayerelement","controlName":"MediaPlayerElement","headerText":"A MediaPlayerElement with transport controls.","xaml":"\u003CMediaPlayerElement Source=\u0022/Assets/SampleMedia/ladybug.wmv\u0022\n AutoPlay=\u0022False\u0022\n AreTransportControlsEnabled=\u0022True\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing Microsoft.Windows.Storage.Pickers;\nusing System;\nusing Windows.Media.Core;\nusing Windows.Storage;\n\nprotected override void OnNavigatedFrom(NavigationEventArgs e)\n {\n base.OnNavigatedFrom(e);\n // Pause media playback since we are no longer visible to the user\n Player1.MediaPlayer.Pause();\n Player2.MediaPlayer.Pause();\n }\n\nprivate async void OpenFileButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n {\n var picker = new FileOpenPicker((sender as Button).XamlRoot.ContentIslandEnvironment.AppWindowId);\n var file = await picker.PickSingleFileAsync();\n if (file == null)\n return;\n\n var mediaSource = MediaSource.CreateFromStorageFile(await StorageFile.GetFileFromPathAsync(file.Path));\n Player1.Source = mediaSource;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control to display video and image content.","relatedControls":["Image","CaptureElementPreview"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"mediaplayerelement-2","controlId":"mediaplayerelement","controlName":"MediaPlayerElement","headerText":"A MediaPlayerElement that autoplays the video.","xaml":"\u003CMediaPlayerElement Source=\u0022Assets/SampleMedia/fishes.wmv\u0022\n AutoPlay=\u0022True\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Navigation;\nusing Microsoft.Windows.Storage.Pickers;\nusing System;\nusing Windows.Media.Core;\nusing Windows.Storage;\n\nprotected override void OnNavigatedTo(NavigationEventArgs e)\n {\n base.OnNavigatedTo(e);\n // Needed if this page is getting cached due to the navigation stack.\n Player2.MediaPlayer.Play();\n }\n\nprotected override void OnNavigatedFrom(NavigationEventArgs e)\n {\n base.OnNavigatedFrom(e);\n // Pause media playback since we are no longer visible to the user\n Player1.MediaPlayer.Pause();\n Player2.MediaPlayer.Pause();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control to display video and image content.","relatedControls":["Image","CaptureElementPreview"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"personpicture-1","controlId":"personpicture","controlName":"PersonPicture","headerText":"Select different looks for the person picture.","xaml":"\u003CPersonPicture ......... /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Imaging;\nusing System;\n\nprivate void RadioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (ProfileImageRadio.IsChecked == true)\n {\n personPicture.ProfilePicture = new BitmapImage(new Uri(\u0022https://learn.microsoft.com/windows/uwp/contacts-and-calendar/images/shoulder-tap-static-payload.png\u0022));\n personPicture.DisplayName = null;\n personPicture.Initials = null;\n }\n else if (DisplayNameRadio.IsChecked == true)\n {\n personPicture.ProfilePicture = null;\n personPicture.DisplayName = \u0022Jane Doe\u0022;\n personPicture.Initials = null;\n }\n else if (InitialsRadio.IsChecked == true)\n {\n personPicture.ProfilePicture = null;\n personPicture.DisplayName = null;\n personPicture.Initials = \u0022SB\u0022;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Displays the picture of a person/contact.","relatedControls":["Image"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"sound-1","controlId":"sound","controlName":"Sound","headerText":"Toggling Sound","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void soundToggle_Toggled(object sender, RoutedEventArgs e)\n {\n if (soundToggle.IsOn == true)\n {\n spatialAudioBox.IsEnabled = true;\n ElementSoundPlayer.State = ElementSoundPlayerState.On;\n }\n else\n {\n spatialAudioBox.IsEnabled = false;\n spatialAudioBox.IsChecked = false;\n\n ElementSoundPlayer.State = ElementSoundPlayerState.Off;\n ElementSoundPlayer.SpatialAudioMode = ElementSpatialAudioMode.Off;\n }\n }\n\npublic SoundPage()\n {\n this.InitializeComponent();\n\n if (ElementSoundPlayer.State == ElementSoundPlayerState.On)\n soundToggle.IsOn = true;\n if (ElementSoundPlayer.SpatialAudioMode == ElementSpatialAudioMode.On \u0026\u0026 soundToggle.IsOn == true)\n spatialAudioBox.IsChecked = true;\n }\n\nprivate void spatialAudioBox_Checked(object sender, RoutedEventArgs e)\n {\n if (soundToggle.IsOn == true)\n {\n ElementSoundPlayer.SpatialAudioMode = ElementSpatialAudioMode.On;\n }\n }\n\nprivate void spatialAudioBox_Unchecked(object sender, RoutedEventArgs e)\n {\n if (soundToggle.IsOn == true)\n {\n ElementSoundPlayer.SpatialAudioMode = ElementSpatialAudioMode.Off;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A code-behind only API that enables 2D and 3D UI sounds on all XAML controls.","relatedControls":[],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"sound-2","controlId":"sound","controlName":"Sound","headerText":"Toggling Spatial Audio","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void spatialAudioBox_Checked(object sender, RoutedEventArgs e)\n {\n if (soundToggle.IsOn == true)\n {\n ElementSoundPlayer.SpatialAudioMode = ElementSpatialAudioMode.On;\n }\n }\n\nprivate void spatialAudioBox_Unchecked(object sender, RoutedEventArgs e)\n {\n if (soundToggle.IsOn == true)\n {\n ElementSoundPlayer.SpatialAudioMode = ElementSpatialAudioMode.Off;\n }\n }\n\npublic SoundPage()\n {\n this.InitializeComponent();\n\n if (ElementSoundPlayer.State == ElementSoundPlayerState.On)\n soundToggle.IsOn = true;\n if (ElementSoundPlayer.SpatialAudioMode == ElementSpatialAudioMode.On \u0026\u0026 soundToggle.IsOn == true)\n spatialAudioBox.IsChecked = true;\n }\n\nprivate void soundToggle_Toggled(object sender, RoutedEventArgs e)\n {\n if (soundToggle.IsOn == true)\n {\n spatialAudioBox.IsEnabled = true;\n ElementSoundPlayer.State = ElementSoundPlayerState.On;\n }\n else\n {\n spatialAudioBox.IsEnabled = false;\n spatialAudioBox.IsChecked = false;\n\n ElementSoundPlayer.State = ElementSoundPlayerState.Off;\n ElementSoundPlayer.SpatialAudioMode = ElementSpatialAudioMode.Off;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A code-behind only API that enables 2D and 3D UI sounds on all XAML controls.","relatedControls":[],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"sound-3","controlId":"sound","controlName":"Sound","headerText":"Play Specific System Sound","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void Button_Click(object sender, RoutedEventArgs e)\n {\n if ((sender as Button)?.Tag is not string tag)\n {\n return;\n }\n\n var tagInt = int.Parse(tag);\n ElementSoundPlayer.Play((ElementSoundKind)tagInt);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A code-behind only API that enables 2D and 3D UI sounds on all XAML controls.","relatedControls":[],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"webview2-1","controlId":"webview2","controlName":"WebView2","headerText":"A simple WebView2 ","xaml":"\u003CWebView2 x:Name=\u0022MyWebView2\u0022 Source=\u0022https://learn.microsoft.com/windows/apps/winui/winui3/\u0022 HorizontalAlignment=\u0022Stretch\u0022 VerticalAlignment=\u0022Stretch\u0022 Grid.Row=\u00221\u0022 MinHeight=\u0022200\u0022 MinWidth=\u0022200\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A Microsoft Edge (Chromium) based control that hosts HTML content in an app.","relatedControls":[],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"acrylic-1","controlId":"acrylic","controlName":"AcrylicBrush","headerText":"Default in-app acrylic brush.","xaml":"\u003CRectangle Fill=\u0022{ThemeResource AcrylicInAppFillColorDefaultBrush}\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A translucent material recommended for panel backgrounds.","relatedControls":["SystemBackdrops","RadialGradientBrush","ThemeShadow"],"apiNamespace":"Microsoft.UI.Xaml.Media","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"}]},{"id":"acrylic-2","controlId":"acrylic","controlName":"AcrylicBrush","headerText":"Custom acrylic in-app brush.","xaml":"\u003CRectangle Fill=\u0022{ThemeResource CustomAcrylicInAppBrush}\u0022 /\u003E\n\n\u003CResourceDictionary x:Key=\u0022Default\u0022\u003E\n \u003Cmedia:AcrylicBrush x:Key=\u0022CustomAcrylicBrush\u0022 \n TintOpacity=\u0022...\u0022 TintColor=\u0022...\u0022 FallbackColor=\u0022...\u0022 /\u003E\n\u003C/ResourceDictionary\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.Primitives;\nusing Microsoft.UI.Xaml.Documents;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Shapes;\nusing System.Linq;\n\nprivate void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)\n {\n Rectangle shape = CustomAcrylicShapeInApp;\n if ((Slider)sender == OpacitySliderLumin)\n shape = CustomAcrylicShapeLumin;\n\n ((AcrylicBrush)shape.Fill).TintOpacity = e.NewValue;\n }\n\nprivate void ColorSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n Rectangle shape = CustomAcrylicShapeInApp;\n ((AcrylicBrush)shape.Fill).TintColor = ((SolidColorBrush)e.AddedItems.First()).Color;\n }\n\nprivate void FallbackColorSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n Rectangle shape = CustomAcrylicShapeInApp;\n ((AcrylicBrush)shape.Fill).FallbackColor = ((SolidColorBrush)e.AddedItems.First()).Color;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A translucent material recommended for panel backgrounds.","relatedControls":["SystemBackdrops","RadialGradientBrush","ThemeShadow"],"apiNamespace":"Microsoft.UI.Xaml.Media","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"}]},{"id":"acrylic-3","controlId":"acrylic","controlName":"AcrylicBrush","headerText":"Luminosity with in-app Acrylic.","xaml":"\u003CRectangle Fill=\u0022{ThemeResource CustomAcrylicInAppLuminosity}\u0022 /\u003E\n\n\u003CResourceDictionary x:Key=\u0022Default\u0022\u003E\n \u003Cmedia:AcrylicBrush x:Key=\u0022CustomAcrylicInAppLuminosity\u0022 \n TintOpacity=\u0022...\u0022 TintLuminosityOpacity=\u0022...\u0022 TintColor=\u0022SkyBlue\u0022 FallbackColor=\u0022SkyBlue\u0022 /\u003E\n\u003C/ResourceDictionary\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.Primitives;\nusing Microsoft.UI.Xaml.Documents;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Shapes;\nusing System.Linq;\n\nprivate void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)\n {\n Rectangle shape = CustomAcrylicShapeInApp;\n if ((Slider)sender == OpacitySliderLumin)\n shape = CustomAcrylicShapeLumin;\n\n ((AcrylicBrush)shape.Fill).TintOpacity = e.NewValue;\n }\n\nprivate void LuminositySlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)\n {\n Rectangle shape = CustomAcrylicShapeLumin;\n ((AcrylicBrush)shape.Fill).TintLuminosityOpacity = e.NewValue;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A translucent material recommended for panel backgrounds.","relatedControls":["SystemBackdrops","RadialGradientBrush","ThemeShadow"],"apiNamespace":"Microsoft.UI.Xaml.Media","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"}]},{"id":"animatedicon-1","controlId":"animatedicon","controlName":"AnimatedIcon","headerText":"Adding AnimatedIcon to a button","xaml":"\u003CButton PointerEntered=\u0022Button_PointerEntered\u0022 PointerExited=\u0022Button_PointerExited\u0022 Width=\u002275\u0022\u003E\n \u003CAnimatedIcon x:Name=\u0022SearchAnimatedIcon\u0022\u003E\n \u003CAnimatedIcon.Source\u003E\n \u003Canimatedvisuals:.../\u003E\n \u003C/AnimatedIcon.Source\u003E\n \u003CAnimatedIcon.FallbackIconSource\u003E\n \u003CSymbolIconSource Symbol=\u0022Find\u0022/\u003E\n \u003C/AnimatedIcon.FallbackIconSource\u003E\n \u003C/AnimatedIcon\u003E\n\u003C/Button\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.AnimatedVisuals;\nusing Microsoft.UI.Xaml.Input;\nusing System;\n\nprivate void Button_PointerEntered(object sender, PointerRoutedEventArgs e)\n {\n AnimatedIcon.SetState(this.SearchAnimatedIcon, \u0022PointerOver\u0022);\n }\n\nprivate void Button_PointerExited(object sender, PointerRoutedEventArgs e)\n {\n AnimatedIcon.SetState(this.SearchAnimatedIcon, \u0022Normal\u0022);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An element that displays and controls an icon that animates when the user interacts with the control.","relatedControls":["AnimatedVisualPlayer","IconElement"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"animatedicon-2","controlId":"animatedicon","controlName":"AnimatedIcon","headerText":"Adding AnimatedIcon to a NavigationView","xaml":"\u003CNavigationView\u003E\n \u003CNavigationView.MenuItems\u003E\n \u003CNavigationViewItem Content = \u0022Game Settings\u0022\u003E\n \u003CNavigationViewItem.Icon\u003E\n \u003CAnimatedIcon x:Name=\u0027AnimatedIcon\u0027\u003E\n \u003CAnimatedIcon.Source\u003E\n \u003Canimatedvisuals:AnimatedSettingsVisualSource/\u003E\n \u003C/AnimatedIcon.Source\u003E\n \u003CAnimatedIcon.FallbackIconSource\u003E\n \u003CFontIconSource Glyph=\u0022\u0026#xE713;\u0022/\u003E\n \u003C/AnimatedIcon.FallbackIconSource\u003E\n \u003C/AnimatedIcon\u003E\n \u003C/NavigationViewItem.Icon\u003E\n \u003C/NavigationViewItem\u003E\n \u003C/NavigationView.MenuItems\u003E\n\u003C/NavigationView\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An element that displays and controls an icon that animates when the user interacts with the control.","relatedControls":["AnimatedVisualPlayer","IconElement"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"compactsizing-1","controlId":"compactsizing","controlName":"Compact Sizing","headerText":"Compact Sizing for controls","xaml":"\u003CPage.Resources\u003E\n \u003CResourceDictionary Source=\u0022ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml\u0022 /\u003E\n\u003C/Page.Resources\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Animation;\n\nprivate void Example1_Loaded(object sender, RoutedEventArgs e)\n {\n ContentFrame.Navigate(typeof(SampleStandardSizingPage), null, new SuppressNavigationTransitionInfo());\n }\n\nprivate void Standard_Checked(object sender, RoutedEventArgs e)\n {\n var oldPage = ContentFrame.Content as SampleCompactSizingPage;\n\n ContentFrame.Navigate(typeof(SampleStandardSizingPage), null, new SuppressNavigationTransitionInfo());\n\n if (oldPage != null \u0026\u0026\n ContentFrame.Content is SampleStandardSizingPage page)\n {\n page.CopyState(oldPage);\n }\n }\n\nprivate void Compact_Checked(object sender, RoutedEventArgs e)\n {\n var oldPage = ContentFrame.Content as SampleStandardSizingPage;\n\n ContentFrame.Navigate(typeof(SampleCompactSizingPage), null, new SuppressNavigationTransitionInfo());\n\n if (oldPage != null \u0026\u0026\n ContentFrame.Content is SampleCompactSizingPage page)\n {\n page.CopyState(oldPage);\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"How to use a Resource Dictionary to enable compact sizing.","relatedControls":[],"apiNamespace":null,"docs":[{"title":"Spacing","uri":"https://learn.microsoft.com/windows/apps/design/style/spacing"}]},{"id":"iconelement-1","controlId":"iconelement","controlName":"IconElement","headerText":"A BitmapIcon with a multicolor bitmap image","xaml":"\u003CBitmapIcon x:Name=\u0022SlicesIcon\u0022 UriSource=\u0022ms-appx:///Assets/YourImage.png\u0022 Width=\u002250\u0022 ShowAsMonochrome=\u0022...\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\n\nprivate void MonochromeButton_CheckedChanged(object sender, RoutedEventArgs e)\n {\n SlicesIcon.ShowAsMonochrome = MonochromeButton.IsChecked is true;\n SlicesIcon.UriSource = new Uri(\u0022ms-appx:///Assets/SampleMedia/Slices.png\u0022);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Represents icon controls that use different image types as its content.","relatedControls":["AnimatedIcon","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"iconelement-2","controlId":"iconelement","controlName":"IconElement","headerText":"A FontIcon using a glyph from a specific font family in a button","xaml":"\u003CButton Name=\u0022ExampleButton1\u0022\u003E\n \u003CFontIcon FontFamily=\u0022Segoe MDL2 Assets\u0022 Glyph=\u0022\u0026#xE790;\u0022/\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Represents icon controls that use different image types as its content.","relatedControls":["AnimatedIcon","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"iconelement-3","controlId":"iconelement","controlName":"IconElement","headerText":"A ImageIcon using a bitmap image in a button","xaml":"\u003CButton Name=\u0022ImageExample1\u0022 Width=\u0022100\u0022\u003E\n \u003CImageIcon Source=\u0022/Assets/SampleMedia/slices.png\u0022/\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Represents icon controls that use different image types as its content.","relatedControls":["AnimatedIcon","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"iconelement-4","controlId":"iconelement","controlName":"IconElement","headerText":"A ImageIcon using a SVG image in a button","xaml":"\u003CButton Name=\u0022ImageExample2\u0022\u003E\n \u003CImageIcon Source=\u0022https://raw.githubusercontent.com/DiemenDesign/LibreICONS/master/svg-color/libre-camera-panorama.svg\u0022 Width=\u002250\u0022/\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Represents icon controls that use different image types as its content.","relatedControls":["AnimatedIcon","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"iconelement-5","controlId":"iconelement","controlName":"IconElement","headerText":"A PathIcon in a button","xaml":"\u003CButton Name=\u0022Example1Button\u0022\u003E\n \u003CPathIcon Data=\u0022F1 M 16,12 20,2L 20,16 1,16\u0022 HorizontalAlignment=\u0022Center\u0022/\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Represents icon controls that use different image types as its content.","relatedControls":["AnimatedIcon","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"iconelement-6","controlId":"iconelement","controlName":"IconElement","headerText":"A SymbolIcon in a button","xaml":"\u003CButton Name=\u0022AcceptButton\u0022\u003E\n \u003CStackPanel\u003E\n \u003CSymbolIcon Symbol=\u0022Accept\u0022/\u003E\n \u003CTextBlock Text=\u0022Accept\u0022/\u003E\n \u003C/StackPanel\u003E\n\u003C/Button\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Represents icon controls that use different image types as its content.","relatedControls":["AnimatedIcon","AppBarButton"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"line-1","controlId":"line","controlName":"Line","headerText":"Line","xaml":"\u003CLine Stroke=\u0022SteelBlue\u0022\n X1=\u0022...\u0022 Y1=\u0022...\u0022\n X2=\u0022...\u0022 Y2=\u0022...\u0022\n StrokeThickness=\u0022...\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Draws a straight line between two points.","relatedControls":["Shape"],"apiNamespace":"Microsoft.UI.Xaml.Shapes","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)"}]},{"id":"line-2","controlId":"line","controlName":"Line","headerText":"Polyline","xaml":"\u003CPolyline Stroke=\u0022Black\u0022 StrokeThickness=\u0022...\u0022\n Points=\u002210,100 60,40 200,40 250,100\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Draws a straight line between two points.","relatedControls":["Shape"],"apiNamespace":"Microsoft.UI.Xaml.Shapes","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)"}]},{"id":"line-3","controlId":"line","controlName":"Line","headerText":"Path","xaml":"\u003C!-- The first segment is a cubic Bezier curve that begins at Point #1 and ends at Point #4, which is drawn by using Point #2 and 3 as the two control points. This segment is indicated by the \u0022C\u0022 command in the Data attribute string. --\u003E\n\u003C!-- The second segment begins with an absolute horizontal line command \u0022H\u0022, which specifies a line drawn from the preceding subpath endpoint (Point #4) to a new endpoint (Point #5). Because it\u0027s a horizontal line command, the value specified is an x-coordinate. --\u003E\n \n\u003CPath Stroke=\u0022DarkGoldenRod\u0022 StrokeThickness=\u0022...\u0022\n Data=\u0022M 10,100 C 100,25 300,250 400,75 H 200\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Draws a straight line between two points.","relatedControls":["Shape"],"apiNamespace":"Microsoft.UI.Xaml.Shapes","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)"}]},{"id":"line-4","controlId":"line","controlName":"Line","headerText":"GeometryGroup","xaml":"\u003CPath Stroke=\u0022Black\u0022 StrokeThickness=\u00224\u0022 Fill=\u0022#CCCCFF\u0022\u003E\n \u003CPath.Data\u003E\n \n \u003C!-- Creates a composite shape from three geometries. --\u003E\n \u003CGeometryGroup FillRule=\u0022EvenOdd\u0022\u003E\n \u003CLineGeometry StartPoint=\u002210,10\u0022 EndPoint=\u002250,30\u0022 /\u003E\n \u003CEllipseGeometry Center=\u002240,70\u0022 RadiusX=\u0022...\u0022 RadiusY=\u0022...\u0022 /\u003E\n \u003CRectangleGeometry Rect=\u002230,55 100 30\u0022 /\u003E\n \u003C/GeometryGroup\u003E\n \u003C/Path.Data\u003E\n\u003C/Path\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Draws a straight line between two points.","relatedControls":["Shape"],"apiNamespace":"Microsoft.UI.Xaml.Shapes","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)"}]},{"id":"shape-1","controlId":"shape","controlName":"Shape","headerText":"Ellipse","xaml":"\u003CEllipse Fill=\u0022SteelBlue\u0022 Height=\u0022...\u0022 Width=\u0022...\u0022 StrokeThickness=\u0022...\u0022 Stroke=\u0022Black\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"How to draw shapes, such as ellipses, rectangles, and polygons.","relatedControls":["Line"],"apiNamespace":"Microsoft.UI.Xaml.Shapes","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)"}]},{"id":"shape-2","controlId":"shape","controlName":"Shape","headerText":"Rectangle","xaml":"\u003CRectangle Fill=\u0022SteelBlue\u0022 Height=\u0022...\u0022 Width=\u0022...\u0022\n Stroke=\u0022Black\u0022 StrokeThickness=\u0022...\u0022\n RadiusY=\u0022...\u0022 RadiusX=\u0022...\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"How to draw shapes, such as ellipses, rectangles, and polygons.","relatedControls":["Line"],"apiNamespace":"Microsoft.UI.Xaml.Shapes","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)"}]},{"id":"shape-3","controlId":"shape","controlName":"Shape","headerText":"Polygon","xaml":"\u003CPolygon Fill=\u0022SteelBlue\u0022 Points=\u002210,100 60,40 200,40 250,100\u0022\n StrokeThickness=\u0022...\u0022 Stroke=\u0022Black\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"How to draw shapes, such as ellipses, rectangles, and polygons.","relatedControls":["Line"],"apiNamespace":"Microsoft.UI.Xaml.Shapes","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)"}]},{"id":"radialgradientbrush-1","controlId":"radialgradientbrush","controlName":"RadialGradientBrush","headerText":"RadialGradientBrush Sample","xaml":"\u003CRectangle Width=\u0022200\u0022 Height=\u0022200\u0022\u003E\n \u003CRectangle.Fill\u003E\n \u003Cmedia:RadialGradientBrush\n MappingMode=\u0022...\u0022\n Center=\u0022...,...\u0022\n RadiusX=\u0022...\u0022\n RadiusY=\u0022...\u0022\n GradientOrigin=\u0022...,...\u0022\n SpreadMethod=\u0022...\u0022\u003E\n \u003CGradientStop Color=\u0022Yellow\u0022 Offset=\u00220.0\u0022 /\u003E\n \u003CGradientStop Color=\u0022Blue\u0022 Offset=\u00221\u0022 /\u003E\n \u003C/media:RadialGradientBrush\u003E\n \u003C/Rectangle.Fill\u003E\n\u003C/Rectangle\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing System;\nusing System.Numerics;\nusing Windows.Foundation;\n\nprivate void OnPageLoaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n {\n MappingModeComboBox.SelectionChanged \u002B= OnMappingModeChanged;\n SpreadMethodComboBox.SelectionChanged \u002B= OnSpreadMethodChanged;\n InitializeSliders();\n }\n\nprivate void OnSpreadMethodChanged(object sender, SelectionChangedEventArgs e)\n {\n if (SpreadMethodComboBox.SelectedValue.ToString() is not string methodString)\n {\n return;\n }\n\n RadialGradientBrushExample.SpreadMethod = Enum.Parse\u003CGradientSpreadMethod\u003E(methodString);\n }\n\nprivate void OnMappingModeChanged(object sender, SelectionChangedEventArgs e)\n {\n if (MappingModeComboBox.SelectedValue.ToString() is not string modeString)\n {\n return;\n }\n\n RadialGradientBrushExample.MappingMode = Enum.Parse\u003CBrushMappingMode\u003E(modeString);\n InitializeSliders();\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A brush to show radial gradients.","relatedControls":["Acrylic"],"apiNamespace":"Microsoft.UI.Xaml.Media","docs":[{"title":"RadialGradientBrush - API","uri":"https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.RadialGradientBrush"}]},{"id":"systembackdrops-1","controlId":"systembackdrops","controlName":"System Backdrops (Mica/Acrylic)","headerText":"Backdrop types","xaml":"\u003C!-- Mica --\u003E\n\u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop/\u003E\n\u003C/Window.SystemBackdrop\u003E\n \n\u003C!-- Mica Alt --\u003E\n\u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop Kind=\u0022BaseAlt\u0022/\u003E\n\u003C/Window.SystemBackdrop\u003E\n\n\u003C!-- Acrylic --\u003E\n\u003CWindow.SystemBackdrop\u003E\n \u003CDesktopAcrylicBackdrop/\u003E\n\u003CWindow.SystemBackdrop\u003E\u003C/Window.SystemBackdrop\u003E\u003C/Window.SystemBackdrop\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void createBuiltInWindow_Click(object sender, RoutedEventArgs e)\n {\n var buildInBackdropsWindow = new SampleBuiltInSystemBackdropsWindow();\n buildInBackdropsWindow.SetBackdrop(SampleBuiltInSystemBackdropsWindow.BackdropType.Mica);\n buildInBackdropsWindow.Activate();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"System backdrops, like Mica and Acrylic, for app windows.","relatedControls":["Acrylic"],"apiNamespace":"Microsoft.UI.Composition.SystemBackdrops","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"}]},{"id":"systembackdrops-2","controlId":"systembackdrops","controlName":"System Backdrops (Mica/Acrylic)","headerText":"MicaController","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void createCustomMicaWindow_Click(object sender, RoutedEventArgs e)\n {\n var micaWindow = new SampleSystemBackdropsWindow\n {\n AllowedBackdrops = [\n SampleSystemBackdropsWindow.BackdropType.Mica,\n SampleSystemBackdropsWindow.BackdropType.MicaAlt,\n SampleSystemBackdropsWindow.BackdropType.None\n ]\n };\n micaWindow.Activate();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"System backdrops, like Mica and Acrylic, for app windows.","relatedControls":["Acrylic"],"apiNamespace":"Microsoft.UI.Composition.SystemBackdrops","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"}]},{"id":"systembackdrops-3","controlId":"systembackdrops","controlName":"System Backdrops (Mica/Acrylic)","headerText":"DesktopAcrylicController","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void createCustomDesktopAcrylicWindow_Click(object sender, RoutedEventArgs e)\n {\n var acrylicWindow = new SampleSystemBackdropsWindow\n {\n AllowedBackdrops = [\n SampleSystemBackdropsWindow.BackdropType.Acrylic,\n SampleSystemBackdropsWindow.BackdropType.AcrylicThin,\n SampleSystemBackdropsWindow.BackdropType.None\n ]\n };\n acrylicWindow.Activate();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"System backdrops, like Mica and Acrylic, for app windows.","relatedControls":["Acrylic"],"apiNamespace":"Microsoft.UI.Composition.SystemBackdrops","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"}]},{"id":"systembackdropelement-1","controlId":"systembackdropelement","controlName":"SystemBackdropElement","headerText":"SystemBackdropElement Sample","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Controls.Primitives;\nusing Microsoft.UI.Composition.SystemBackdrops;\n\nprivate void BackdropTypeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (DynamicBackdropHost == null || BackdropTypeComboBox == null)\n return;\n\n var selectedItem = BackdropTypeComboBox.SelectedItem as ComboBoxItem;\n if (selectedItem == null)\n return;\n\n string backdropType = selectedItem.Tag?.ToString() ?? \u0022Acrylic\u0022;\n\n // Update the SystemBackdrop based on selection\n if (backdropType == \u0022Acrylic\u0022)\n {\n DynamicBackdropHost.SystemBackdrop = new DesktopAcrylicBackdrop();\n if (Example1 != null)\n {\n Example1.XamlSource = \u0022SystemBackdropElement/SystemBackdropElementAcrylic_xaml.txt\u0022;\n }\n }\n else if (backdropType == \u0022Mica\u0022)\n {\n DynamicBackdropHost.SystemBackdrop = new MicaBackdrop { Kind = MicaKind.Base };\n if (Example1 != null)\n {\n Example1.XamlSource = \u0022SystemBackdropElement/SystemBackdropElementMica_xaml.txt\u0022;\n }\n }\n else if (backdropType == \u0022MicaAlt\u0022)\n {\n DynamicBackdropHost.SystemBackdrop = new MicaBackdrop { Kind = MicaKind.BaseAlt };\n if (Example1 != null)\n {\n Example1.XamlSource = \u0022SystemBackdropElement/SystemBackdropElementMicaAlt_xaml.txt\u0022;\n }\n }\n }\n\nprivate void CornerRadiusSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)\n {\n if (DynamicBackdropHost != null)\n {\n DynamicBackdropHost.CornerRadius = new CornerRadius(e.NewValue);\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An element to host system backdrop materials.","relatedControls":[],"apiNamespace":"Microsoft.UI.Xaml.Controls","docs":[{"title":"SystemBackdropElement - API","uri":"https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.systembackdropelement"}]},{"id":"themeshadow-1","controlId":"themeshadow","controlName":"ThemeShadow","headerText":"ThemeShadow applied to a Border","xaml":"\u003CGrid\u003E\n \u003CGrid x:Name=\u0022ShadowCastGrid\u0022/\u003E\n \u003CBorder x:Name=\u0022ShadowRect\u0022 Translation=\u00220,0,...\u0022 Loaded=\u0022ShadowRect_Loaded\u0022 Width=\u0022200\u0022 Height=\u0022200\u0022 CornerRadius=\u0022{ThemeResource OverlayCornerRadius}\u0022 Background=\u0022{ThemeResource CardBackgroundFillColorDefaultBrush}\u0022/\u003E\n \u003CBorder.Shadow\u003E\n \u003CThemeShadow x:Name=\u0022shadow\u0022/\u003E\n \u003C/Border.Shadow\u003E\n \u003C/Border\u003E \n\u003C/Grid\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.Primitives;\nusing System.Numerics;\n\nprivate void ShadowRect_Loaded(object sender, RoutedEventArgs e)\n {\n shadow.Receivers.Add(ShadowCastGrid);\n }\n\nprivate void TranslationSliderInApp_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)\n {\n ShadowRect.Translation = new Vector3(0,0, (float)e.NewValue);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Adds a depth-aware shadow to UI elements using system lighting.","relatedControls":["Acrylic"],"apiNamespace":"Microsoft.UI.Xaml.Media","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"}]},{"id":"autosuggestbox-1","controlId":"autosuggestbox","controlName":"AutoSuggestBox","headerText":"A basic autosuggest box.","xaml":"\u003CAutoSuggestBox TextChanged=\u0022AutoSuggestBox_TextChanged\u0022\n SuggestionChosen=\u0022AutoSuggestBox_SuggestionChosen\u0022","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Imaging;\nusing System;\nusing System.Collections.Generic;\nusing System.Linq;\n\nprivate void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)\n {\n SuggestionOutput.Text = args.SelectedItem.ToString();\n }\n\nprivate void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)\n {\n // Since selecting an item will also change the text,\n // only listen to changes caused by user entering text.\n if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)\n {\n var suitableItems = new List\u003Cstring\u003E();\n var splitText = sender.Text.ToLower().Split(\u0022 \u0022);\n foreach (var cat in Cats)\n {\n var found = splitText.All((key) =\u003E\n {\n return cat.ToLower().Contains(key);\n });\n if (found)\n {\n suitableItems.Add(cat);\n }\n }\n if (suitableItems.Count == 0)\n {\n suitableItems.Add(\u0022No results found\u0022);\n }\n sender.ItemsSource = suitableItems;\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control to provide suggestions as a user is typing.","relatedControls":["ListBox","ComboBox","TextBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"autosuggestbox-2","controlId":"autosuggestbox","controlName":"AutoSuggestBox","headerText":"An AutoSuggestBox that provides a SearchBox experience","xaml":"\u003CAutoSuggestBox PlaceholderText=\u0022Type a control name\u0022\n TextChanged=\u0022Control2_TextChanged\u0022\n QueryIcon=\u0022Find\u0022\n QuerySubmitted=\u0022Control2_QuerySubmitted\u0022\n SuggestionChosen=\u0022Control2_SuggestionChosen\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Imaging;\nusing System;\nusing System.Collections.Generic;\nusing System.Linq;\n\nprivate void Control2_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)\n {\n if (args.ChosenSuggestion is ControlInfoDataItem chosenSuggestion)\n {\n //User selected an item, take an action\n SelectControl(chosenSuggestion);\n }\n else if (!string.IsNullOrEmpty(args.QueryText))\n {\n //Do a fuzzy search based on the text\n var suggestions = SearchControls(sender.Text);\n if (suggestions.FirstOrDefault() is ControlInfoDataItem firstItem)\n {\n SelectControl(firstItem);\n }\n }\n }\n\nprivate void Control2_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)\n {\n //Don\u0027t autocomplete the TextBox when we are showing \u0022no results\u0022\n if (args.SelectedItem is ControlInfoDataItem control)\n {\n sender.Text = control.Title;\n }\n }\n\nprivate void Control2_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)\n {\n //We only want to get results when it was a user typing,\n //otherwise we assume the value got filled in by TextMemberPath\n //or the handler for SuggestionChosen\n if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)\n {\n var suggestions = SearchControls(sender.Text);\n\n if (suggestions.Count \u003E 0)\n sender.ItemsSource = suggestions;\n else\n sender.ItemsSource = new string[] { \u0022No results found\u0022 };\n }\n }\n\nprivate void SelectControl(ControlInfoDataItem control)\n {\n if (control != null)\n {\n ControlDetails.Visibility = Visibility.Visible;\n\n BitmapImage? image = control.ImagePath == null ? null : new BitmapImage(new Uri(control.ImagePath));\n ControlImage.Source = image;\n\n ControlTitle.Text = control.Title;\n ControlSubtitle.Text = control.Subtitle;\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control to provide suggestions as a user is typing.","relatedControls":["ListBox","ComboBox","TextBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"numberbox-1","controlId":"numberbox","controlName":"NumberBox","headerText":"A NumberBox that evaluates expressions.","xaml":"\u003CNumberBox Header=\u0022Enter an expression:\u0022 Value=\u0022NaN\u0022 PlaceholderText=\u00221 \u002B 2^2\u0022 AcceptsExpression=\u0022True\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A text control used for numeric input and evaluation of algebraic equations.","relatedControls":["TextBox","TextBlock","RichTextBlock","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"numberbox-2","controlId":"numberbox","controlName":"NumberBox","headerText":"A NumberBox with a spin button.","xaml":"\u003CNumberBox\n x:Name=\u0022NumberBoxSpinButtonPlacementExample\u0022\n Header=\u0022Enter an integer:\u0022 \n Value=\u00221\u0022 \n SpinButtonPlacementMode=\u0022...\u0022\n SmallChange=\u002210\u0022\n LargeChange=\u0022100\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Windows.Globalization.NumberFormatting;\n\nprivate void SpinButtonPlacementGroup_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (sender is RadioButtons radioButtons)\n {\n switch (radioButtons.SelectedIndex)\n {\n case 0:\n NumberBoxSpinButtonPlacementExample.SpinButtonPlacementMode = NumberBoxSpinButtonPlacementMode.Inline;\n break;\n case 1:\n NumberBoxSpinButtonPlacementExample.SpinButtonPlacementMode = NumberBoxSpinButtonPlacementMode.Compact;\n break;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A text control used for numeric input and evaluation of algebraic equations.","relatedControls":["TextBox","TextBlock","RichTextBlock","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"numberbox-3","controlId":"numberbox","controlName":"NumberBox","headerText":"A formatted NumberBox that rounds to the nearest 0.25.","xaml":"\u003CNumberBox x:Name=\u0022FormattedNumberBox\u0022 Header=\u0022Enter an dollar amount:\u0022 PlaceholderText=\u00220.00\u0022 /\u003E","csharp":"using Microsoft.UI.Xaml.Controls;\nusing Windows.Globalization.NumberFormatting;\n\nprivate void SetNumberBoxNumberFormatter()\n {\n IncrementNumberRounder rounder = new IncrementNumberRounder\n {\n Increment = 0.25,\n RoundingAlgorithm = RoundingAlgorithm.RoundHalfUp\n };\n\n DecimalFormatter formatter = new DecimalFormatter\n {\n IntegerDigits = 1,\n FractionDigits = 2,\n NumberRounder = rounder\n };\n FormattedNumberBox.NumberFormatter = formatter;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A text control used for numeric input and evaluation of algebraic equations.","relatedControls":["TextBox","TextBlock","RichTextBlock","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"passwordbox-1","controlId":"passwordbox","controlName":"PasswordBox","headerText":"A simple PasswordBox.","xaml":"\u003CPasswordBox Width=\u0022300\u0022 AutomationProperties.Name=\u0022Simple PasswordBox\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void PasswordBox_PasswordChanged(object sender, RoutedEventArgs e)\n {\n if (sender is PasswordBox pb)\n {\n if (string.IsNullOrEmpty(pb.Password) || pb.Password == \u0022Password\u0022)\n {\n Control1Output.Visibility = Visibility.Visible;\n Control1Output.Text = \u0022\u0027Password\u0027 is not allowed.\u0022;\n pb.Password = string.Empty;\n }\n else\n {\n Control1Output.Text = string.Empty;\n Control1Output.Visibility = Visibility.Collapsed;\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control for entering passwords.","relatedControls":["TextBox","TextBlock","RichTextBlock","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"passwordbox-2","controlId":"passwordbox","controlName":"PasswordBox","headerText":"A PasswordBox with header, placeholder text and custom character.","xaml":"\u003CPasswordBox Width=\u0022300\u0022 Header=\u0022Password\u0022 PlaceholderText=\u0022Enter your password\u0022 PasswordChar=\u0022#\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control for entering passwords.","relatedControls":["TextBox","TextBlock","RichTextBlock","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"passwordbox-3","controlId":"passwordbox","controlName":"PasswordBox","headerText":"A PasswordBox with reveal mode.","xaml":"\u003CPasswordBox Name=\u0022passworBoxWithRevealmode\u0022 Width=\u0022250\u0022 Margin=\u00220,0,8,0\u0022\n PasswordRevealMode=\u0022Hidden\u0022 AutomationProperties.Name=\u0022Sample password box\u0022/\u003E\n\u003CCheckBox Name=\u0022revealModeCheckBox\u0022 Content=\u0022Show password\u0022 IsChecked=\u0022False\u0022\n Checked=\u0022RevealModeCheckbox_Changed\u0022 Unchecked=\u0022RevealModeCheckbox_Changed\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void RevealModeCheckbox_Changed(object sender, RoutedEventArgs e)\n {\n if (revealModeCheckBox.IsChecked == true)\n {\n passworBoxWithRevealmode.PasswordRevealMode = PasswordRevealMode.Visible;\n }\n else\n {\n passworBoxWithRevealmode.PasswordRevealMode = PasswordRevealMode.Hidden;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control for entering passwords.","relatedControls":["TextBox","TextBlock","RichTextBlock","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"richeditbox-1","controlId":"richeditbox","controlName":"RichEditBox","headerText":"A simple text editor using RichEditBox.","xaml":"\u003CRichEditBox x:Name=\u0022editor\u0022 AutomationProperties.Name=\u0022simple text editor\u0022/\u003E","csharp":"using Microsoft.UI.Text;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.Windows.Storage.Pickers;\nusing System;\nusing System.Collections.Generic;\nusing System.Diagnostics;\nusing System.Xml.Linq;\nusing Windows.Foundation.Metadata;\nusing Windows.Storage;\nusing Windows.Storage.Provider;\nusing Windows.Storage.Streams;\n\nprivate async void OpenButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is Button button)\n {\n // Create the picker using the AppWindowId from the element\n var picker = new FileOpenPicker(button.XamlRoot.ContentIslandEnvironment.AppWindowId)\n {\n SuggestedStartLocation = PickerLocationId.DocumentsLibrary\n };\n\n // Add file type filters\n picker.FileTypeFilter.Add(\u0022.rtf\u0022);\n\n // Show picker\n PickFileResult result = await picker.PickSingleFileAsync();\n\n if (result != null)\n {\n // Open with StorageFile (needed for RichEditBox)\n StorageFile file = await StorageFile.GetFileFromPathAsync(result.Path);\n\n using IRandomAccessStream randAccStream =\n await file.OpenAsync(FileAccessMode.Read);\n\n // Load file into the RichEditBox\n editor.Document.LoadFromStream(TextSetOptions.FormatRtf, randAccStream);\n }\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A rich text editing control that supports formatted text, hyperlinks, and other rich content.","relatedControls":["NumberBox","TextBox","RichTextBlock","TextBlock"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"richeditbox-2","controlId":"richeditbox","controlName":"RichEditBox","headerText":"Customizing RichEditBox\u0027s CommandBarFlyout - Adding \u0027Share\u0027","xaml":null,"csharp":"using Microsoft.UI.Text;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.Windows.Storage.Pickers;\nusing System;\nusing System.Collections.Generic;\nusing System.Diagnostics;\nusing System.Xml.Linq;\nusing Windows.Foundation.Metadata;\nusing Windows.Storage;\nusing Windows.Storage.Provider;\nusing Windows.Storage.Streams;\n\nprivate void REBCustom_Loaded(object sender, RoutedEventArgs e)\n {\n // Prior to UniversalApiContract 7, RichEditBox did not have a default ContextFlyout set.\n if (ApiInformation.IsApiContractPresent(\u0022Windows.Foundation.UniversalApiContract\u0022, 7))\n {\n // customize the menu that opens on text selection\n REBCustom.SelectionFlyout.Opening \u002B= Menu_Opening;\n\n // also customize the context menu to match selection menu\n REBCustom.ContextFlyout.Opening \u002B= Menu_Opening;\n }\n }\n\nprivate void REBCustom_Unloaded(object sender, RoutedEventArgs e)\n {\n // Prior to UniversalApiContract 7, RichEditBox did not have a default ContextFlyout set.\n if (ApiInformation.IsApiContractPresent(\u0022Windows.Foundation.UniversalApiContract\u0022, 7))\n {\n REBCustom.SelectionFlyout.Opening -= Menu_Opening;\n REBCustom.ContextFlyout.Opening -= Menu_Opening;\n }\n }\n\nprivate void Menu_Opening(object? sender, object e)\n {\n CommandBarFlyout? myFlyout = sender as CommandBarFlyout;\n if (myFlyout != null \u0026\u0026 myFlyout.Target == REBCustom)\n {\n AppBarButton myButton = new AppBarButton\n {\n Command = new StandardUICommand(StandardUICommandKind.Share)\n };\n myFlyout.PrimaryCommands.Add(myButton);\n }\n else\n {\n CommandBarFlyout? muxFlyout = sender as CommandBarFlyout;\n if (muxFlyout != null \u0026\u0026 muxFlyout.Target == REBCustom)\n {\n AppBarButton myButton = new AppBarButton\n {\n Command = new StandardUICommand(StandardUICommandKind.Share)\n };\n muxFlyout.PrimaryCommands.Add(myButton);\n }\n }\n\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A rich text editing control that supports formatted text, hyperlinks, and other rich content.","relatedControls":["NumberBox","TextBox","RichTextBlock","TextBlock"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"richeditbox-3","controlId":"richeditbox","controlName":"RichEditBox","headerText":"A custom editor with RichEditBox.","xaml":null,"csharp":"using Microsoft.UI.Text;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.Windows.Storage.Pickers;\nusing System;\nusing System.Collections.Generic;\nusing System.Diagnostics;\nusing System.Xml.Linq;\nusing Windows.Foundation.Metadata;\nusing Windows.Storage;\nusing Windows.Storage.Provider;\nusing Windows.Storage.Streams;\n\nprivate async void OpenButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is Button button)\n {\n // Create the picker using the AppWindowId from the element\n var picker = new FileOpenPicker(button.XamlRoot.ContentIslandEnvironment.AppWindowId)\n {\n SuggestedStartLocation = PickerLocationId.DocumentsLibrary\n };\n\n // Add file type filters\n picker.FileTypeFilter.Add(\u0022.rtf\u0022);\n\n // Show picker\n PickFileResult result = await picker.PickSingleFileAsync();\n\n if (result != null)\n {\n // Open with StorageFile (needed for RichEditBox)\n StorageFile file = await StorageFile.GetFileFromPathAsync(result.Path);\n\n using IRandomAccessStream randAccStream =\n await file.OpenAsync(FileAccessMode.Read);\n\n // Load file into the RichEditBox\n editor.Document.LoadFromStream(TextSetOptions.FormatRtf, randAccStream);\n }\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A rich text editing control that supports formatted text, hyperlinks, and other rich content.","relatedControls":["NumberBox","TextBox","RichTextBlock","TextBlock"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"richeditbox-4","controlId":"richeditbox","controlName":"RichEditBox","headerText":"Rich edit box in math mode","xaml":"\u003CRichEditBox x:Name=\u0022mathEditor\u0022 FontSize=\u002216\u0022 /\u003E","csharp":"using Microsoft.UI.Text;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.Windows.Storage.Pickers;\nusing System;\nusing System.Collections.Generic;\nusing System.Diagnostics;\nusing System.Xml.Linq;\nusing Windows.Foundation.Metadata;\nusing Windows.Storage;\nusing Windows.Storage.Provider;\nusing Windows.Storage.Streams;\n\npublic RichEditBoxPage()\n {\n this.InitializeComponent();\n\n MathEditor.TextDocument.SetMathMode(RichEditMathMode.MathOnly);\n mathEditor2.TextDocument.SetMathMode(RichEditMathMode.MathOnly);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A rich text editing control that supports formatted text, hyperlinks, and other rich content.","relatedControls":["NumberBox","TextBox","RichTextBlock","TextBlock"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"richeditbox-5","controlId":"richeditbox","controlName":"RichEditBox","headerText":"Working with MathML in RichEditBox","xaml":"\u003CRichEditBox x:Name=\u0022mathEditor2\u0022 FontSize=\u002216\u0022 /\u003E","csharp":"using Microsoft.UI.Text;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.Windows.Storage.Pickers;\nusing System;\nusing System.Collections.Generic;\nusing System.Diagnostics;\nusing System.Xml.Linq;\nusing Windows.Foundation.Metadata;\nusing Windows.Storage;\nusing Windows.Storage.Provider;\nusing Windows.Storage.Streams;\n\nprivate void mathEditor2_TextChanged(object sender, RoutedEventArgs e)\n {\n string extractedMathML;\n mathEditor2.Document.GetMathML(out extractedMathML);\n if (!string.IsNullOrEmpty(extractedMathML))\n {\n MathmlPresenter.Code = FormatMathML(extractedMathML);\n }\n else\n {\n MathmlPresenter.Code = \u0022\u003C!-- No MathML content --\u003E\u0022;\n }\n }\n\nprivate static string FormatMathML(string mathML)\n {\n try\n {\n XDocument doc = XDocument.Parse(mathML);\n return doc.ToString(); // This automatically formats with proper indentation\n }\n catch (Exception ex)\n {\n Debug.WriteLine($\u0022Error formatting MathML: {ex.Message}\u0022);\n return mathML; // Return the original in case of an error\n }\n }\n\npublic RichEditBoxPage()\n {\n this.InitializeComponent();\n\n MathEditor.TextDocument.SetMathMode(RichEditMathMode.MathOnly);\n mathEditor2.TextDocument.SetMathMode(RichEditMathMode.MathOnly);\n }\n\nprivate void SetMathmlFormulaBtn_Click(object sender, RoutedEventArgs e)\n {\n string formulaMathML =\n \u0022\u003Cmml:math xmlns:mml=\\\u0022http://www.w3.org/1998/Math/MathML\\\u0022 display=\\\u0022block\\\u0022\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mi mathcolor=\\\u0022#000000\\\u0022\u003Ex\u003C/mml:mi\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mo mathcolor=\\\u0022#000000\\\u0022\u003E\\u2208\u003C/mml:mo\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mi mathcolor=\\\u0022#000000\\\u0022\u003EP\u003C/mml:mi\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mfenced\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mrow\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mi mathcolor=\\\u0022#000000\\\u0022\u003EA\u003C/mml:mi\u003E\\r\\n\u0022 \u002B\n \u0022 \u003C/mml:mrow\u003E\\r\\n\u0022 \u002B\n \u0022 \u003C/mml:mfenced\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mo mathcolor=\\\u0022#000000\\\u0022\u003E\\u2194\u003C/mml:mo\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mi mathcolor=\\\u0022#000000\\\u0022\u003Ex\u003C/mml:mi\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mo mathcolor=\\\u0022#000000\\\u0022\u003E\\u2286\u003C/mml:mo\u003E\\r\\n\u0022 \u002B\n \u0022 \u003Cmml:mi mathcolor=\\\u0022#000000\\\u0022\u003EA\u003C/mml:mi\u003E\\r\\n\u0022 \u002B\n \u0022\u003C/mml:math\u003E\u0022;\n\n if (mathEditor2.ActualTheme == ElementTheme.Dark)\n {\n mathEditor2.Document.SetMathML(formulaMathML.Replace(\u0022mathcolor=\\\u0022#000000\\\u0022\u0022, \u0022mathcolor=\\\u0022#FFFFFF\\\u0022\u0022));\n }\n else\n {\n mathEditor2.Document.SetMathML(formulaMathML.Replace(\u0022mathcolor=\\\u0022#FFFFFF\\\u0022\u0022, \u0022mathcolor=\\\u0022#000000\\\u0022\u0022));\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A rich text editing control that supports formatted text, hyperlinks, and other rich content.","relatedControls":["NumberBox","TextBox","RichTextBlock","TextBlock"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"richtextblock-1","controlId":"richtextblock","controlName":"RichTextBlock","headerText":"A simple RichTextBlock.","xaml":"\u003CRichTextBlock\u003E\n \u003CParagraph\u003EI am a RichTextBlock.\u003C/Paragraph\u003E\n\u003C/RichTextBlock\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays formatted text, hyperlinks, inline images, and other rich content.","relatedControls":["NumberBox","TextBlock","TextBox","PasswordBox","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"richtextblock-2","controlId":"richtextblock","controlName":"RichTextBlock","headerText":"A RichTextBlock with a custom selection highlight color.","xaml":"\u003CRichTextBlock SelectionHighlightColor=\u0022Green\u0022\u003E\n \u003CParagraph\u003ERichTextBlock provides a rich text display container that supports\n \u003CRun FontStyle=\u0022Italic\u0022 FontWeight=\u0022Bold\u0022\u003Eformatted text\u003C/Run\u003E,\n \u003CHyperlink NavigateUri=\u0022https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Documents.Hyperlink\u0022\u003Ehyperlinks\u003C/Hyperlink\u003E, inline images, and other rich content.\u003C/Paragraph\u003E\n \u003CParagraph\u003ERichTextBlock also supports a built-in overflow model.\u003C/Paragraph\u003E\n\u003C/RichTextBlock\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays formatted text, hyperlinks, inline images, and other rich content.","relatedControls":["NumberBox","TextBlock","TextBox","PasswordBox","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"richtextblock-3","controlId":"richtextblock","controlName":"RichTextBlock","headerText":"A RichTextBlock with overflow.","xaml":"\u003CGrid\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition/\u003E\n \u003CColumnDefinition/\u003E\n \u003CColumnDefinition/\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CRichTextBlock Grid.Column=\u00220\u0022 OverflowContentTarget=\u0022{x:Bind firstOverflowContainer}\u0022 TextAlignment=\u0022Justify\u0022 Margin=\u002212,0\u0022\u003E\n \u003CParagraph\u003E\n Linked text containers allow text which does not fit in one element to overflow into a different element on the page.\n Creative use of linked text containers enables basic multicolumn support and other advanced page layouts.\n \u003C/Paragraph\u003E\n \u003C!-- Additional content not shown. --\u003E\n \u003C/RichTextBlock\u003E\n \u003CRichTextBlockOverflow x:Name=\u0022firstOverflowContainer\u0022 OverflowContentTarget=\u0022{x:Bind secondOverflowContainer}\u0022 Grid.Column=\u00221\u0022 Margin=\u002212,0\u0022/\u003E\n \u003CRichTextBlockOverflow x:Name=\u0022secondOverflowContainer\u0022 Grid.Column=\u00222\u0022 Margin=\u002212,0\u0022/\u003E\n\u003C/Grid\u003E\u003C/Grid.ColumnDefinitions\u003E\u003C/Grid.ColumnDefinitions\u003E\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays formatted text, hyperlinks, inline images, and other rich content.","relatedControls":["NumberBox","TextBlock","TextBox","PasswordBox","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"richtextblock-4","controlId":"richtextblock","controlName":"RichTextBlock","headerText":"RichTextBlock with custom TextHighlighting","xaml":"\u003CRichTextBlock x:Name=\u0022TextHighlightingRichTextBlock\u0022\u003E\n \u003CParagraph\u003E\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua\n \u003C/Paragraph\u003E\n\u003C/RichTextBlock\u003E","csharp":"using Microsoft.UI;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Documents;\nusing Microsoft.UI.Xaml.Media;\n\nprivate void HighlightColorCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n // Get color to use\n var selectedItem = (sender as ComboBox)?.SelectedItem as ComboBoxItem;\n var color = Colors.Yellow;\n switch (selectedItem?.Content as string)\n {\n case \u0022Yellow\u0022:\n color = Colors.Yellow;\n break;\n case \u0022Red\u0022:\n color = Colors.Red;\n break;\n case \u0022Blue\u0022:\n color = Colors.Blue;\n break;\n }\n\n // Get text range and highlighter\n TextRange textRange = new TextRange()\n {\n StartIndex = 28,\n Length = 11\n };\n TextHighlighter highlighter = new TextHighlighter()\n {\n Background = new SolidColorBrush(color),\n Ranges = { textRange }\n };\n\n // Switch texthighlighter\n TextHighlightingRichTextBlock.TextHighlighters.Clear();\n TextHighlightingRichTextBlock.TextHighlighters.Add(highlighter);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A control that displays formatted text, hyperlinks, inline images, and other rich content.","relatedControls":["NumberBox","TextBlock","TextBox","PasswordBox","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"textblock-1","controlId":"textblock","controlName":"TextBlock","headerText":"A simple TextBlock.","xaml":"\u003CTextBlock Text=\u0022I am a TextBlock\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A lightweight control for displaying small amounts of text.","relatedControls":["NumberBox","TextBox","RichTextBlock","PasswordBox","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"textblock-2","controlId":"textblock","controlName":"TextBlock","headerText":"A TextBlock with a style applied.","xaml":"\u003CPage.Resources\u003E\n \u003CStyle TargetType=\u0022TextBlock\u0022 x:Key=\u0022CustomTextBlockStyle\u0022\u003E\n \u003CSetter Property=\u0022FontFamily\u0022 Value=\u0022Comic Sans MS\u0022/\u003E\n \u003CSetter Property=\u0022FontStyle\u0022 Value=\u0022Italic\u0022/\u003E\n \u003C/Style\u003E\n\u003CPage.Resources\u003E\n\n\u003CTextBlock Text=\u0022I am a styled TextBlock\u0022 Style=\u0022{StaticResource CustomTextBlockStyle}\u0022/\u003E\u003C/Page.Resources\u003E\u003C/Page.Resources\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A lightweight control for displaying small amounts of text.","relatedControls":["NumberBox","TextBox","RichTextBlock","PasswordBox","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"textblock-3","controlId":"textblock","controlName":"TextBlock","headerText":"A TextBlock with various properties set.","xaml":"\u003CTextBlock Text=\u0022I am super excited to be here!\u0022 FontFamily=\u0022Arial\u0022\n FontSize=\u002224\u0022 FontStyle=\u0022Italic\u0022 TextWrapping=\u0022WrapWholeWords\u0022\n CharacterSpacing=\u0022200\u0022 Foreground=\u0022CornflowerBlue\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A lightweight control for displaying small amounts of text.","relatedControls":["NumberBox","TextBox","RichTextBlock","PasswordBox","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"textblock-4","controlId":"textblock","controlName":"TextBlock","headerText":"A TextBlock with inline text elements.","xaml":"\u003CTextBlock\u003E\n \u003CRun FontFamily=\u0022Times New Roman\u0022 Foreground=\u0022DarkGray\u0022\u003EText in a TextBlock doesn\u0027t have to be a simple string.\u003C/Run\u003E\n \u003CLineBreak /\u003E\n \u003CSpan\u003E\n Text can be \u003CBold\u003Ebold\u003C/Bold\u003E, \u003CItalic\u003Eitalic\u003C/Italic\u003E, or \u003CUnderline\u003Eunderlined\u003C/Underline\u003E.\n \u003C/Span\u003E\n\u003C/TextBlock\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A lightweight control for displaying small amounts of text.","relatedControls":["NumberBox","TextBox","RichTextBlock","PasswordBox","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"textblock-5","controlId":"textblock","controlName":"TextBlock","headerText":"A selectable TextBlock","xaml":"\u003CTextBlock IsTextSelectionEnabled=\u0022...\u0022\n Text=\u0022I am a selectable TextBlock with custom SelectionHighlightColor.\u0022\n SelectionHighlightColor=\u0022DarkOrange\u0022\u003E\u003C/TextBlock\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A lightweight control for displaying small amounts of text.","relatedControls":["NumberBox","TextBox","RichTextBlock","PasswordBox","RichEditBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"textbox-1","controlId":"textbox","controlName":"TextBox","headerText":"A simple TextBox.","xaml":"\u003CTextBox AutomationProperties.Name=\u0022simple TextBox\u0022/\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A single-line or multi-line plain text field.","relatedControls":["NumberBox","TextBlock","RichTextBlock","PasswordBox","RichEditBox","AutoSuggestBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"textbox-2","controlId":"textbox","controlName":"TextBox","headerText":"A TextBox with a header and placeholder text.","xaml":"\u003CTextBox Header=\u0022Enter your name:\u0022 PlaceholderText=\u0022Name\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A single-line or multi-line plain text field.","relatedControls":["NumberBox","TextBlock","RichTextBlock","PasswordBox","RichEditBox","AutoSuggestBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"textbox-3","controlId":"textbox","controlName":"TextBox","headerText":"A read-only TextBox with various properties set.","xaml":"\u003CTextBox Text=\u0022I am super excited to be here!\u0022\n AutomationProperties.Name=\u0022customized TextBox\u0022 IsReadOnly=\u0022True\u0022\n FontFamily=\u0022Arial\u0022 FontSize=\u002224\u0022 FontStyle=\u0022Italic\u0022\n CharacterSpacing=\u0022200\u0022 Foreground=\u0022#5178BE\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A single-line or multi-line plain text field.","relatedControls":["NumberBox","TextBlock","RichTextBlock","PasswordBox","RichEditBox","AutoSuggestBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"textbox-4","controlId":"textbox","controlName":"TextBox","headerText":"A multi-line TextBox with spell checking and custom selection highlight color.","xaml":"\u003CTextBox AutomationProperties.Name=\u0022multi-line TextBox\u0022\n TextWrapping=\u0022Wrap\u0022 AcceptsReturn=\u0022True\u0022 IsSpellCheckEnabled=\u0022True\u0022\n SelectionHighlightColor=\u0022Green\u0022 MinWidth=\u0022400\u0022 /\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A single-line or multi-line plain text field.","relatedControls":["NumberBox","TextBlock","RichTextBlock","PasswordBox","RichEditBox","AutoSuggestBox"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"xamlcompinterop-1","controlId":"xamlcompinterop","controlName":"Animation interop","headerText":"Use a natural motion composition animation on a UIElement","xaml":null,"csharp":"using Microsoft.UI.Composition;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.Primitives;\nusing Microsoft.UI.Xaml.Input;\nusing System;\nusing System.Globalization;\nusing System.Numerics;\n\nprivate void NaturalMotionExample_Loaded(object sender, RoutedEventArgs e)\n {\n UpdateSpringAnimation(1.0f);\n }\n\nprivate void element_PointerEntered(object sender, PointerRoutedEventArgs e)\n {\n if (sender is not UIElement uiElement || _springAnimation is null)\n {\n return;\n }\n\n UpdateSpringAnimation(1.5f);\n\n StartAnimationIfAPIPresent(uiElement, _springAnimation);\n }\n\nprivate void element_PointerExited(object sender, PointerRoutedEventArgs e)\n {\n if (sender is not UIElement uiElement || _springAnimation is null)\n {\n return;\n }\n\n UpdateSpringAnimation(1f);\n\n StartAnimationIfAPIPresent(uiElement, _springAnimation);\n }\n\nprivate void UpdateSpringAnimation(float finalValue)\n {\n if (_springAnimation == null)\n {\n _springAnimation = _compositor.CreateSpringVector3Animation();\n _springAnimation.Target = \u0022Scale\u0022;\n }\n\n _springAnimation.FinalValue = new Vector3(finalValue);\n _springAnimation.DampingRatio = GetDampingRatio();\n _springAnimation.Period = GetPeriod();\n }\n\nprivate void StartAnimationIfAPIPresent(UIElement sender, Microsoft.UI.Composition.CompositionAnimation animation)\n {\n (sender as UIElement).StartAnimation(animation);\n }\n\nprivate SpringVector3NaturalMotionAnimation? _springAnimation;","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"XAML and Composition interop allows you to animate elements using expressions, natural animations, and more.","relatedControls":["EasingFunction"],"apiNamespace":null,"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"}]},{"id":"xamlcompinterop-2","controlId":"xamlcompinterop","controlName":"Animation interop","headerText":"ExpressionAnimation on an Ellipse element","xaml":"\u003CStackPanel Height=\u0022200\u0022\u003E\n \u003CGrid VerticalAlignment=\u0022Top\u0022\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022*\u0022 /\u003E\n \u003CColumnDefinition Width=\u0022*\u0022 /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003CRectangle x:Name=\u0022rectangle\u0022 Width=\u002250\u0022 Height=\u002250\u0022 Fill=\u0022{ThemeResource SystemAccentColor}\u0022 PointerEntered=\u0022element_PointerEntered\u0022 PointerExited=\u0022element_PointerExited\u0022 /\u003E\n \u003CEllipse x:Name=\u0022ellipse\u0022 Grid.Column=\u00221\u0022 Width=\u002250\u0022 Height=\u002250\u0022 Margin=\u002255,0\u0022 Fill=\u0022{ThemeResource SystemAccentColor}\u0022/\u003E\n \u003C/Grid\u003E\n\u003C/StackPanel\u003E","csharp":"using Microsoft.UI.Composition;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.Primitives;\nusing Microsoft.UI.Xaml.Input;\nusing System;\nusing System.Globalization;\nusing System.Numerics;\n\nprivate void ExpressionSample_Loaded(object sender, RoutedEventArgs e)\n {\n var anim = _compositor.CreateExpressionAnimation();\n anim.Expression = \u0022Vector3(1/scaleElement.Scale.X, 1/scaleElement.Scale.Y, 1)\u0022;\n anim.Target = \u0022Scale\u0022;\n\n anim.SetExpressionReferenceParameter(\u0022scaleElement\u0022, rectangle);\n\n StartAnimationIfAPIPresent(ellipse, anim);\n }\n\nprivate void element_PointerEntered(object sender, PointerRoutedEventArgs e)\n {\n if (sender is not UIElement uiElement || _springAnimation is null)\n {\n return;\n }\n\n UpdateSpringAnimation(1.5f);\n\n StartAnimationIfAPIPresent(uiElement, _springAnimation);\n }\n\nprivate void element_PointerExited(object sender, PointerRoutedEventArgs e)\n {\n if (sender is not UIElement uiElement || _springAnimation is null)\n {\n return;\n }\n\n UpdateSpringAnimation(1f);\n\n StartAnimationIfAPIPresent(uiElement, _springAnimation);\n }\n\nprivate void StartAnimationIfAPIPresent(UIElement sender, Microsoft.UI.Composition.CompositionAnimation animation)\n {\n (sender as UIElement).StartAnimation(animation);\n }\n\nprivate void UpdateSpringAnimation(float finalValue)\n {\n if (_springAnimation == null)\n {\n _springAnimation = _compositor.CreateSpringVector3Animation();\n _springAnimation.Target = \u0022Scale\u0022;\n }\n\n _springAnimation.FinalValue = new Vector3(finalValue);\n _springAnimation.DampingRatio = GetDampingRatio();\n _springAnimation.Period = GetPeriod();\n }\n\nprivate SpringVector3NaturalMotionAnimation? _springAnimation;","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"XAML and Composition interop allows you to animate elements using expressions, natural animations, and more.","relatedControls":["EasingFunction"],"apiNamespace":null,"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"}]},{"id":"xamlcompinterop-3","controlId":"xamlcompinterop","controlName":"Animation interop","headerText":"Driving several related animations together using ExpressionAnimation","xaml":null,"csharp":"using Microsoft.UI.Composition;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.Primitives;\nusing Microsoft.UI.Xaml.Input;\nusing System;\nusing System.Globalization;\nusing System.Numerics;\n\nprivate void StackedButtonsExample_Loaded(object sender, RoutedEventArgs e)\n {\n var anim = _compositor.CreateExpressionAnimation();\n anim.Expression = \u0022(above.Scale.Y - 1) * 50 \u002B above.Translation.Y % (50 * index)\u0022;\n anim.Target = \u0022Translation.Y\u0022;\n\n anim.SetExpressionReferenceParameter(\u0022above\u0022, ExpressionButton1);\n anim.SetScalarParameter(\u0022index\u0022, 1);\n ExpressionButton2.StartAnimation(anim);\n\n anim.SetExpressionReferenceParameter(\u0022above\u0022, ExpressionButton2);\n anim.SetScalarParameter(\u0022index\u0022, 2);\n ExpressionButton3.StartAnimation(anim);\n\n anim.SetExpressionReferenceParameter(\u0022above\u0022, ExpressionButton3);\n anim.SetScalarParameter(\u0022index\u0022, 3);\n ExpressionButton4.StartAnimation(anim);\n }\n\nprivate void element_PointerEntered(object sender, PointerRoutedEventArgs e)\n {\n if (sender is not UIElement uiElement || _springAnimation is null)\n {\n return;\n }\n\n UpdateSpringAnimation(1.5f);\n\n StartAnimationIfAPIPresent(uiElement, _springAnimation);\n }\n\nprivate void element_PointerExited(object sender, PointerRoutedEventArgs e)\n {\n if (sender is not UIElement uiElement || _springAnimation is null)\n {\n return;\n }\n\n UpdateSpringAnimation(1f);\n\n StartAnimationIfAPIPresent(uiElement, _springAnimation);\n }\n\nprivate void UpdateSpringAnimation(float finalValue)\n {\n if (_springAnimation == null)\n {\n _springAnimation = _compositor.CreateSpringVector3Animation();\n _springAnimation.Target = \u0022Scale\u0022;\n }\n\n _springAnimation.FinalValue = new Vector3(finalValue);\n _springAnimation.DampingRatio = GetDampingRatio();\n _springAnimation.Period = GetPeriod();\n }\n\nprivate void StartAnimationIfAPIPresent(UIElement sender, Microsoft.UI.Composition.CompositionAnimation animation)\n {\n (sender as UIElement).StartAnimation(animation);\n }\n\nprivate SpringVector3NaturalMotionAnimation? _springAnimation;","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"XAML and Composition interop allows you to animate elements using expressions, natural animations, and more.","relatedControls":["EasingFunction"],"apiNamespace":null,"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"}]},{"id":"xamlcompinterop-4","controlId":"xamlcompinterop","controlName":"Animation interop","headerText":"Reference ActualSize in ExpressionAnimations to make novel layouts based on size","xaml":null,"csharp":"using Microsoft.UI.Composition;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.Primitives;\nusing Microsoft.UI.Xaml.Input;\nusing System;\nusing System.Globalization;\nusing System.Numerics;\n\nprivate void ActualSizeExample_Loaded(object sender, RoutedEventArgs e)\n {\n // We will lay out some buttons in a circle.\n // The formulas we will use are:\n // X = radius * cos(theta) \u002B xOffset\n // Y = radius * sin(theta) \u002B yOffset\n // radius = 1/2 the width and height of the parent container\n // theta = the angle for each element. The starting value of theta depends on both the number of elements and the relative index of each element.\n // xOffset = The starting horizontal offset for the element. \n // yOffset = The starting vertical offset for the element.\n\n String radius = \u0022(source.ActualSize.X / 2)\u0022; // Since the layout is a circle, width and height are equivalent meaning we could use X or Y. We\u0027ll use X.\n String theta = \u0022.02 * \u0022 \u002B radius \u002B \u0022 \u002B ((2 * Pi)/total)*index\u0022; // The first value is the rate of angular change based on radius. The last value spaces the buttons equally.\n String xOffset = radius; // We offset x by radius because the buttons naturally layout along the left edge. We need to move them to center of the circle first.\n String yOffset = \u00220\u0022; // We don\u0027t need to offset y because the buttons naturally layout vertically centered.\n\n // We combine X, Y, and Z subchannels into a single animation because we can only start a single animation on Translation.\n String expression = string.Format(\u0022Vector3({0}*cos({1})\u002B{2}, {0}*sin({1})\u002B{3},0)\u0022, radius, theta, xOffset, yOffset);\n\n int totalElements = 8;\n for (int i = 0; i \u003C totalElements; i\u002B\u002B)\n {\n Button element = new Button() { Content = \u0022Button\u0022 };\n AutomationProperties.SetName(element, \u0022Button \u0022 \u002B i);\n\n LayoutPanel.Children.Add(element);\n\n var anim = _compositor.CreateExpressionAnimation();\n\n anim.Expression = expression;\n anim.SetScalarParameter(\u0022index\u0022, i \u002B 1);\n anim.SetScalarParameter(\u0022total\u0022, totalElements);\n anim.Target = \u0022Translation\u0022;\n anim.SetExpressionReferenceParameter(\u0022source\u0022, LayoutPanel);\n\n element.StartAnimation(anim);\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"XAML and Composition interop allows you to animate elements using expressions, natural animations, and more.","relatedControls":["EasingFunction"],"apiNamespace":null,"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"}]},{"id":"xamlcompinterop-5","controlId":"xamlcompinterop","controlName":"Animation interop","headerText":"Reference ActualOffset and ActualSize in ExpressionAnimations to position elements relative to each other","xaml":"\u003CGrid HorizontalAlignment=\u0022Left\u0022 Margin=\u00220,12,0,0\u0022\u003E\n \u003CTextBlock x:Name=\u0022PopupTarget\u0022 \n TextWrapping=\u0022WrapWholeWords\u0022 \n Margin=\u0022{x:Bind MarginSlider.Value, Converter={StaticResource doubleToThicknessConverter}, Mode=OneWay}\u0022 \n FontSize=\u0022{x:Bind FontSizeSlider.Value, Mode=OneWay}\u0022 \n Text=\u0022... lorem ipsum ...\u0022 /\u003E\n\n \u003C!-- Notice that the popup is a sibling to the target, not an ancestor. --\u003E\n \u003CPopup x:Name=\u0022Popup\u0022 Margin=\u00225\u0022\u003E\n \u003CGrid MinWidth=\u002250\u0022 MaxWidth=\u0022200\u0022 MinHeight=\u002250\u0022 BorderBrush=\u0022LightGray\u0022 BorderThickness=\u00222\u0022 Background=\u0022{ThemeResource FlyoutBackgroundThemeBrush}\u0022\u003E\n \u003CTextBlock Text=\u0022I am always right aligned center to the target.\u0022 TextWrapping=\u0022WrapWholeWords\u0022 Margin=\u00226\u0022 FontSize=\u002212\u0022 VerticalAlignment=\u0022Center\u0022 /\u003E\n \u003C/Grid\u003E\n \u003C/Popup\u003E\n\u003C/Grid\u003E","csharp":"using Microsoft.UI.Composition;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Automation;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Controls.Primitives;\nusing Microsoft.UI.Xaml.Input;\nusing System;\nusing System.Globalization;\nusing System.Numerics;\n\nprivate void ActualOffsetExample_Loaded(object sender, RoutedEventArgs e)\n {\n // This sample positions a popup relative to a block of text that has variable layout size based on font size.\n var anim = _compositor.CreateExpressionAnimation();\n\n anim.Expression = \u0022Vector3(source.ActualOffset.X \u002B source.ActualSize.X, source.ActualOffset.Y \u002B source.ActualSize.Y / 2 - 25, 0)\u0022;\n anim.Target = \u0022Translation\u0022;\n anim.SetExpressionReferenceParameter(\u0022source\u0022, PopupTarget);\n\n Popup.StartAnimation(anim);\n\n Popup.IsOpen = true;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"XAML and Composition interop allows you to animate elements using expressions, natural animations, and more.","relatedControls":["EasingFunction"],"apiNamespace":null,"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"}]},{"id":"connectedanimation-1","controlId":"connectedanimation","controlName":"Connected Animation","headerText":"A connected animation between a list page and a detail page","xaml":"\u003C!-- COLLECTION PAGE BELOW--\u003E\n\u003CListView x:Name=\u0022collection\u0022\n IsItemClickEnabled=\u0022True\u0022\n SelectionMode=\u0022None\u0022\n ItemClick=\u0022collection_ItemClick\u0022\n Grid.Row=\u00222\u0022 \u003E\n \u003CListView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CGrid Margin=\u00220,12,0,12\u0022 AutomationProperties.Name=\u0022{x:Bind Title}\u0022\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 MinWidth=\u0022150\u0022/\u003E\n \u003CColumnDefinition Width=\u0022*\u0022 /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n\n \u003C!-- The image to connect between pages. --\u003E\n \u003CImage x:Name=\u0022connectedElement\u0022 Source=\u0022{x:Bind ImageLocation}\u0022 MaxHeight=\u0022100\u0022 Stretch=\u0022Fill\u0022/\u003E\n\n \u003CStackPanel Margin=\u002212,0,0,0\u0022 Grid.Column=\u00221\u0022 \u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022 Style=\u0022{ThemeResource SubtitleTextBlockStyle}\u0022 HorizontalAlignment=\u0022Left\u0022 Margin=\u00220,0,0,6\u0022/\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022Views: \u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 FontWeight=\u0022Bold\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Views}\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Margin=\u00225,0,0,0\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022Likes: \u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 FontWeight=\u0022Bold\u0022/\u003E\n \u003CTextBlock Text=\u0022{x:Bind Likes}\u0022 Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Margin=\u00225,0,0,0\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Description}\u0022 Style=\u0022{ThemeResource BodyTextBlockStyle}\u0022 FontStyle=\u0022Italic\u0022 Margin=\u00220,12,0,0\u0022 TextTrimming=\u0022CharacterEllipsis\u0022 MaxWidth=\u0022500\u0022 MaxLines=\u00221\u0022/\u003E\n \u003C/StackPanel\u003E\n\n \u003C/StackPanel\u003E\n \u003C/Grid\u003E\n \u003C/DataTemplate\u003E\u003C/ListView.ItemTemplate\u003E\u003C/ListView\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Animation;\nusing System;\nusing System.Collections.Generic;\n\npublic ConnectedAnimationPage()\n {\n this.InitializeComponent();\n\n // For 1st sample\n CollectionContentFrame.Navigate(typeof(CollectionPage));\n\n // For 2nd sample\n CardFrame.Navigate(typeof(CardPage));\n\n // For 3rd sample\n ContentFrame.Navigate(typeof(SamplePage1));\n\n // For 4th sample (ItemsRepeater)\n ItemsRepeaterFrame.Navigate(typeof(ItemsRepeaterCollectionPage));\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Connected animations continue elements during page navigation and help the user maintain their context between views.","relatedControls":["PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml.Media.Animation","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"}]},{"id":"connectedanimation-2","controlId":"connectedanimation","controlName":"Connected Animation","headerText":"A connected animation between elements on the same page","xaml":"\u003CGridView x:Name=\u0022collection\u0022 IsItemClickEnabled=\u0022True\u0022 ItemClick=\u0022TipsGrid_ItemClick\u0022\n HorizontalAlignment=\u0022Center\u0022 MaxWidth=\u00221400\u0022\u003E\n \u003CGridView.ItemContainerStyle\u003E\n \u003CStyle BasedOn=\u0022{StaticResource GridViewItemRevealStyle}\u0022 TargetType=\u0022GridViewItem\u0022\u003E\n \u003CStyle.Setters\u003E\n \u003CSetter Property=\u0022Margin\u0022 Value=\u00224\u0022 /\u003E\n \u003C/Style.Setters\u003E\n \u003C/Style\u003E\n \u003C/GridView.ItemContainerStyle\u003E\n \u003CGridView.ItemTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CGrid x:Name=\u0022connectedElement\u0022 Width=\u0022150\u0022 Height=\u0022110\u0022\n AutomationProperties.Name=\u0022{Binding Title}\u0022 CornerRadius=\u00224\u0022\u003E\n \u003CImage Source=\u0022{Binding ImageLocation}\u0022 Stretch=\u0022UniformToFill\u0022 /\u003E\n \u003CBorder Padding=\u00228,4\u0022 VerticalAlignment=\u0022Bottom\u0022\n Background=\u0022{ThemeResource AcrylicBackgroundFillColorBaseBrush}\u0022\u003E\n \u003CTextBlock Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 Text=\u0022{Binding Title}\u0022 /\u003E\n \u003C/Border\u003E\n \u003C/Grid\u003E\n \u003C/DataTemplate\u003E\n \u003C/GridView.ItemTemplate\u003E\n\u003C/GridView\u003E\n\n\u003CGrid x:Name=\u0022SmokeGrid\u0022 HorizontalAlignment=\u0022Stretch\u0022 VerticalAlignment=\u0022Stretch\u0022\n Background=\u0022{ThemeResource SmokeFillColorDefaultBrush}\u0022 Visibility=\u0022Collapsed\u0022\u003E\n \u003CGrid x:Name=\u0022destinationElement\u0022 Width=\u0022400\u0022 Height=\u0022320\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022\n BorderBrush=\u0022{ThemeResource CardStrokeColorDefaultBrush}\u0022 BorderThickness=\u00221\u0022\n CornerRadius=\u00228\u0022\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022*\u0022 /\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CImage x:Name=\u0022detailImage\u0022 Grid.Row=\u00220\u0022 Stretch=\u0022UniformToFill\u0022 /\u003E\n \u003CButton Width=\u002236\u0022 Height=\u002236\u0022 Margin=\u00228\u0022\n HorizontalAlignment=\u0022Right\u0022 VerticalAlignment=\u0022Top\u0022\n AutomationProperties.Name=\u0022Close\u0022 Click=\u0022BackButton_Click\u0022\n ToolTipService.ToolTip=\u0022Close\u0022\u003E\n \u003CButton.Content\u003E\u003C/Button.Content\u003E\u003C/Button\u003E\u003C/Grid\u003E\u003C/Grid\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Animation;\nusing System;\nusing System.Collections.Generic;\n\npublic ConnectedAnimationPage()\n {\n this.InitializeComponent();\n\n // For 1st sample\n CollectionContentFrame.Navigate(typeof(CollectionPage));\n\n // For 2nd sample\n CardFrame.Navigate(typeof(CardPage));\n\n // For 3rd sample\n ContentFrame.Navigate(typeof(SamplePage1));\n\n // For 4th sample (ItemsRepeater)\n ItemsRepeaterFrame.Navigate(typeof(ItemsRepeaterCollectionPage));\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Connected animations continue elements during page navigation and help the user maintain their context between views.","relatedControls":["PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml.Media.Animation","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"}]},{"id":"connectedanimation-3","controlId":"connectedanimation","controlName":"Connected Animation","headerText":"A simple connected animation","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Animation;\nusing System;\nusing System.Collections.Generic;\n\nprivate void NavigateButton_Click(object sender, RoutedEventArgs e)\n {\n var currentContent = ContentFrame.Content;\n\n if (currentContent is SamplePage1 samplePage1)\n {\n samplePage1.PrepareConnectedAnimation(GetConfiguration());\n ContentFrame.Navigate(typeof(SamplePage2), null, new SuppressNavigationTransitionInfo());\n }\n else if (currentContent is SamplePage2 samplePage2)\n {\n samplePage2.PrepareConnectedAnimation(GetConfiguration());\n ContentFrame.Navigate(typeof(SamplePage1), null, new SuppressNavigationTransitionInfo());\n }\n }\n\nprivate ConnectedAnimationConfiguration? GetConfiguration()\n {\n if (this.ConfigurationPanel == null)\n {\n return null;\n }\n\n string? selectedName = (ConfigurationPanel.SelectedItem as RadioButton)?.Content.ToString();\n switch (selectedName)\n {\n case \u0022Gravity\u0022:\n return new GravityConnectedAnimationConfiguration();\n case \u0022Direct\u0022:\n return new DirectConnectedAnimationConfiguration();\n case \u0022Basic\u0022:\n return new BasicConnectedAnimationConfiguration();\n default:\n return null;\n }\n }\n\npublic ConnectedAnimationPage()\n {\n this.InitializeComponent();\n\n // For 1st sample\n CollectionContentFrame.Navigate(typeof(CollectionPage));\n\n // For 2nd sample\n CardFrame.Navigate(typeof(CardPage));\n\n // For 3rd sample\n ContentFrame.Navigate(typeof(SamplePage1));\n\n // For 4th sample (ItemsRepeater)\n ItemsRepeaterFrame.Navigate(typeof(ItemsRepeaterCollectionPage));\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Connected animations continue elements during page navigation and help the user maintain their context between views.","relatedControls":["PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml.Media.Animation","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"}]},{"id":"connectedanimation-4","controlId":"connectedanimation","controlName":"Connected Animation","headerText":"Connected animation with ItemsRepeater","xaml":"\u003C!-- Unlike ListView/GridView, ItemsRepeater does not have built-in\n ConnectedAnimation methods. Use ConnectedAnimationService directly. --\u003E\n\n\u003CScrollViewer x:Name=\u0022scrollViewer\u0022\u003E\n \u003CItemsRepeater\n x:Name=\u0022repeater\u0022\n ItemsSource=\u0022{x:Bind Items}\u0022\u003E\n \u003CItemsRepeater.Layout\u003E\n \u003CUniformGridLayout\n MinColumnSpacing=\u00228\u0022\n MinItemHeight=\u0022120\u0022\n MinItemWidth=\u0022150\u0022\n MinRowSpacing=\u00228\u0022 /\u003E\n \u003C/ItemsRepeater.Layout\u003E\n \u003CItemsRepeater.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:CustomDataObject\u0022\u003E\n \u003CGrid CornerRadius=\u00224\u0022\u003E\n \u003C!-- The element named \u0022connectedElement\u0022 will be animated --\u003E\n \u003CImage x:Name=\u0022connectedElement\u0022\n Source=\u0022{x:Bind ImageLocation}\u0022\n Stretch=\u0022UniformToFill\u0022 /\u003E\n \u003CBorder VerticalAlignment=\u0022Bottom\u0022\n Background=\u0022{ThemeResource AcrylicBackgroundFillColorBaseBrush}\u0022\n Padding=\u00228,4\u0022\u003E\n \u003CTextBlock Text=\u0022{x:Bind Title}\u0022\n Style=\u0022{ThemeResource CaptionTextBlockStyle}\u0022 /\u003E\n \u003C/Border\u003E\n \u003C/Grid\u003E\n \u003C/DataTemplate\u003E\n \u003C/ItemsRepeater.ItemTemplate\u003E\n \u003C/ItemsRepeater\u003E\n\u003C/ScrollViewer\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Animation;\nusing System;\nusing System.Collections.Generic;\n\npublic ConnectedAnimationPage()\n {\n this.InitializeComponent();\n\n // For 1st sample\n CollectionContentFrame.Navigate(typeof(CollectionPage));\n\n // For 2nd sample\n CardFrame.Navigate(typeof(CardPage));\n\n // For 3rd sample\n ContentFrame.Navigate(typeof(SamplePage1));\n\n // For 4th sample (ItemsRepeater)\n ItemsRepeaterFrame.Navigate(typeof(ItemsRepeaterCollectionPage));\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Connected animations continue elements during page navigation and help the user maintain their context between views.","relatedControls":["PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml.Media.Animation","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"}]},{"id":"easingfunction-1","controlId":"easingfunction","controlName":"Easing Functions","headerText":"Standard Easing Function","xaml":"\u003CStoryboard x:Name=\u0022Storyboard1\u0022\u003E\n \u003CDoubleAnimation Storyboard.TargetName=\u0022Translation\u0022 Storyboard.TargetProperty=\u0022X\u0022 From=\u00220\u0022 To=\u0022200\u0022 \u003E\n \u003CDoubleAnimation.EasingFunction\u003E\n \u003CCircleEase EasingMode=\u0022EaseInOut\u0022 /\u003E\n \u003C/DoubleAnimation.EasingFunction\u003E\n \u003C/DoubleAnimation\u003E\n\u003C/Storyboard\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Animation;\nusing System.Collections.Generic;\n\nprivate void Button1_Click(object sender, RoutedEventArgs e)\n {\n Storyboard1.Children[0].SetValue(DoubleAnimation.FromProperty, Translation1.X);\n Storyboard1.Children[0].SetValue(DoubleAnimation.ToProperty, Translation1.X \u003E 0 ? 0 : 200);\n Storyboard1.Begin();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Easing is a way to manipulate the velocity of an object as it animates.","relatedControls":["ConnectedAnimation","PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml.Media.Animation","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"}]},{"id":"easingfunction-2","controlId":"easingfunction","controlName":"Easing Functions","headerText":"Accelerate Easing Function","xaml":"\u003CStoryboard x:Name=\u0022Storyboard2\u0022\u003E\n \u003CDoubleAnimation Storyboard.TargetName=\u0022Translation\u0022 Storyboard.TargetProperty=\u0022X\u0022 From=\u00220\u0022 To=\u0022200\u0022 \u003E\n \u003CDoubleAnimation.EasingFunction\u003E\n \u003CExponentialEase Exponent=\u0022...\u0022 EasingMode=\u0022EaseIn\u0022 /\u003E\n \u003C/DoubleAnimation.EasingFunction\u003E\n \u003C/DoubleAnimation\u003E\n\u003C/Storyboard\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Animation;\nusing System.Collections.Generic;\n\nprivate void Button2_Click(object sender, RoutedEventArgs e)\n {\n Storyboard2.Children[0].SetValue(DoubleAnimation.FromProperty, Translation2.X);\n Storyboard2.Children[0].SetValue(DoubleAnimation.ToProperty, Translation2.X \u003E 0 ? 0 : 200);\n Storyboard2.Begin();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Easing is a way to manipulate the velocity of an object as it animates.","relatedControls":["ConnectedAnimation","PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml.Media.Animation","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"}]},{"id":"easingfunction-3","controlId":"easingfunction","controlName":"Easing Functions","headerText":"Decelerate Easing Function","xaml":"\u003CStoryboard x:Name=\u0022Storyboard3\u0022\u003E\n \u003CDoubleAnimation Storyboard.TargetName=\u0022Translation\u0022 Storyboard.TargetProperty=\u0022X\u0022 From=\u00220\u0022 To=\u0022200\u0022 \u003E\n \u003CDoubleAnimation.EasingFunction\u003E\n \u003CExponentialEase Exponent=\u0022...\u0022 EasingMode=\u0022EaseOut\u0022 /\u003E\n \u003C/DoubleAnimation.EasingFunction\u003E\n \u003C/DoubleAnimation\u003E\n\u003C/Storyboard\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Animation;\nusing System.Collections.Generic;\n\nprivate void Button3_Click(object sender, RoutedEventArgs e)\n {\n Storyboard3.Children[0].SetValue(DoubleAnimation.FromProperty, Translation3.X);\n Storyboard3.Children[0].SetValue(DoubleAnimation.ToProperty, Translation3.X \u003E 0 ? 0 : 200);\n Storyboard3.Begin();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Easing is a way to manipulate the velocity of an object as it animates.","relatedControls":["ConnectedAnimation","PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml.Media.Animation","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"}]},{"id":"easingfunction-4","controlId":"easingfunction","controlName":"Easing Functions","headerText":"Other XAML Easing Functions","xaml":"\u003CStoryboard x:Name=\u0022Storyboard3\u0022\u003E\n \u003CDoubleAnimation Storyboard.TargetName=\u0022Translation\u0022 Storyboard.TargetProperty=\u0022X\u0022 From=\u00220\u0022 To=\u0022200\u0022 \u003E\n \u003CDoubleAnimation.EasingFunction\u003E\n \u003C.../\u003E\n \u003C/DoubleAnimation.EasingFunction\u003E\n \u003C/DoubleAnimation\u003E\n\u003C/Storyboard\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Animation;\nusing System.Collections.Generic;\n\nprivate void Button4_Click(object sender, RoutedEventArgs e)\n {\n if (EasingComboBox.SelectedItem is not NamedEasingFunction selectedItem)\n {\n return;\n }\n\n var easingFunction = selectedItem.EasingFunctionBase;\n easingFunction.EasingMode = GetEaseValue();\n\n if (Storyboard4.Children[0] is DoubleAnimation doubleAnimation)\n {\n doubleAnimation.EasingFunction = easingFunction;\n }\n\n Storyboard4.Children[0].SetValue(DoubleAnimation.FromProperty, Translation4.X);\n Storyboard4.Children[0].SetValue(DoubleAnimation.ToProperty, Translation4.X \u003E 0 ? 0 : 200);\n Storyboard4.Begin();\n }\n\nprivate List\u003CNamedEasingFunction\u003E EasingFunctions { get; } = new List\u003CNamedEasingFunction\u003E()\n {\n new NamedEasingFunction(\u0022BackEase\u0022, new BackEase()),\n new NamedEasingFunction(\u0022BounceEase\u0022, new BounceEase()),\n new NamedEasingFunction(\u0022CircleEase\u0022, new CircleEase()),\n new NamedEasingFunction(\u0022CubicEase\u0022, new CubicEase()),\n new NamedEasingFunction(\u0022ElasticEase\u0022, new ElasticEase()),\n new NamedEasingFunction(\u0022ExponentialEase\u0022, new ExponentialEase()),\n new NamedEasingFunction(\u0022PowerEase\u0022, new PowerEase()),\n new NamedEasingFunction(\u0022QuadraticEase\u0022, new QuadraticEase()),\n new NamedEasingFunction(\u0022QuarticEase\u0022, new QuarticEase()),\n new NamedEasingFunction(\u0022QuinticEase\u0022, new QuinticEase()),\n new NamedEasingFunction(\u0022SineEase\u0022, new SineEase())\n };\n\npublic partial class NamedEasingFunction\n{\n public string Name { get; private set; }\n public EasingFunctionBase EasingFunctionBase { get; private set; }\n public NamedEasingFunction(string name, EasingFunctionBase easingFunctionBase)\n {\n this.Name = name;\n this.EasingFunctionBase = easingFunctionBase;\n }\n}\n\nprivate void Button3_Click(object sender, RoutedEventArgs e)\n {\n Storyboard3.Children[0].SetValue(DoubleAnimation.FromProperty, Translation3.X);\n Storyboard3.Children[0].SetValue(DoubleAnimation.ToProperty, Translation3.X \u003E 0 ? 0 : 200);\n Storyboard3.Begin();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Easing is a way to manipulate the velocity of an object as it animates.","relatedControls":["ConnectedAnimation","PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml.Media.Animation","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"}]},{"id":"implicittransition-1","controlId":"implicittransition","controlName":"Implicit Transitions","headerText":"Automatically animate changes to Opacity","xaml":"\u003C!-- Automatically animate changes to Opacity --\u003E\n\u003CRectangle x:Name=\u0022rectangle\u0022 Width=\u002250\u0022 Height=\u002250\u0022 Opacity=\u00220.5\u0022\u003E\n \u003CRectangle.OpacityTransition\u003E\n \u003CScalarTransition /\u003E\n \u003C/Rectangle.OpacityTransition\u003E\n\u003C/Rectangle\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing Microsoft.UI.Xaml.Media;\nusing System;\nusing System.Numerics;\nusing Windows.Foundation.Metadata;\n\nprivate void NumberBox_KeyDown(object sender, KeyRoutedEventArgs e)\n {\n if ((sender as NumberBox)?.Header is not string header)\n {\n return;\n }\n\n if (e.Key == Windows.System.VirtualKey.Enter)\n {\n if (header == \u0022Opacity (0.0 to 1.0)\u0022)\n {\n ApplyOpacity(EnsureValueIsNumber(OpacityNumberBox));\n }\n if (header == \u0022Rotation (0.0 to 360.0)\u0022)\n {\n ApplyRotation(EnsureValueIsNumber(RotationNumberBox));\n }\n if (header == \u0022Scale (0.0 to 5.0)\u0022)\n {\n ApplyScale(EnsureValueIsNumber(ScaleNumberBox));\n }\n if (header == \u0022Translation (0.0 to 200.0)\u0022)\n {\n ApplyTranslation(EnsureValueIsNumber(TranslationNumberBox));\n }\n }\n }\n\nprivate void OpacityButton_Click(object sender, RoutedEventArgs e)\n {\n float opacity = EnsureValueIsNumber(OpacityNumberBox);\n ApplyOpacity(opacity);\n }\n\nprivate void ApplyOpacity(float opacity)\n {\n // If the implicit animation API is not present, simply no-op. \n if (!(ApiInformation.IsApiContractPresent(\u0022Windows.Foundation.UniversalApiContract\u0022, 7))) return;\n\n OpacityRectangle.Opacity = opacity;\n OpacityValue.Value = opacity;\n // announce visual change to automation\n }\n\nprivate float EnsureValueIsNumber(NumberBox numberBox)\n {\n if (double.IsNaN(numberBox.Value))\n {\n numberBox.Value = 0;\n }\n return (float)numberBox.Value;\n }\n\nprivate void ApplyRotation(float rotation)\n {\n RotationRectangle.CenterPoint = new System.Numerics.Vector3((float)RotationRectangle.ActualWidth / 2, (float)RotationRectangle.ActualHeight / 2, 0f);\n\n RotationRectangle.Rotation = rotation;\n // announce visual change to automation\n }\n\nprivate void ApplyScale(float scale)\n {\n var _scaleTransition = ScaleRectangle.ScaleTransition;\n\n _scaleTransition.Components = ((ScaleX.IsChecked == true) ? Vector3TransitionComponents.X : 0) |\n ((ScaleY.IsChecked == true) ? Vector3TransitionComponents.Y : 0) |\n ((ScaleZ.IsChecked == true) ? Vector3TransitionComponents.Z : 0);\n\n ScaleRectangle.Scale = new Vector3(scale);\n ScaleValue.Value = scale;\n // announce visual change to automation\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Use Implicit Transitions to automatically animate changes to properties.","relatedControls":["PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"implicittransition-2","controlId":"implicittransition","controlName":"Implicit Transitions","headerText":"Automatically animate changes to Rotation","xaml":"\u003C!-- Automatically animate changes to Rotation --\u003E\n\u003CRectangle x:Name=\u0022rectangle\u0022 Width=\u002250\u0022 Height=\u002250\u0022 Rotation=\u00220\u0022 \u003E\n \u003CRectangle.RotationTransition\u003E\n \u003CScalarTransition /\u003E\n \u003C/Rectangle.RotationTransition\u003E\n\u003C/Rectangle\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing Microsoft.UI.Xaml.Media;\nusing System;\nusing System.Numerics;\nusing Windows.Foundation.Metadata;\n\nprivate void NumberBox_KeyDown(object sender, KeyRoutedEventArgs e)\n {\n if ((sender as NumberBox)?.Header is not string header)\n {\n return;\n }\n\n if (e.Key == Windows.System.VirtualKey.Enter)\n {\n if (header == \u0022Opacity (0.0 to 1.0)\u0022)\n {\n ApplyOpacity(EnsureValueIsNumber(OpacityNumberBox));\n }\n if (header == \u0022Rotation (0.0 to 360.0)\u0022)\n {\n ApplyRotation(EnsureValueIsNumber(RotationNumberBox));\n }\n if (header == \u0022Scale (0.0 to 5.0)\u0022)\n {\n ApplyScale(EnsureValueIsNumber(ScaleNumberBox));\n }\n if (header == \u0022Translation (0.0 to 200.0)\u0022)\n {\n ApplyTranslation(EnsureValueIsNumber(TranslationNumberBox));\n }\n }\n }\n\nprivate void RotationButton_Click(object sender, RoutedEventArgs e)\n {\n float rotation = EnsureValueIsNumber(RotationNumberBox);\n ApplyRotation(rotation);\n }\n\nprivate void ApplyOpacity(float opacity)\n {\n // If the implicit animation API is not present, simply no-op. \n if (!(ApiInformation.IsApiContractPresent(\u0022Windows.Foundation.UniversalApiContract\u0022, 7))) return;\n\n OpacityRectangle.Opacity = opacity;\n OpacityValue.Value = opacity;\n // announce visual change to automation\n }\n\nprivate float EnsureValueIsNumber(NumberBox numberBox)\n {\n if (double.IsNaN(numberBox.Value))\n {\n numberBox.Value = 0;\n }\n return (float)numberBox.Value;\n }\n\nprivate void ApplyRotation(float rotation)\n {\n RotationRectangle.CenterPoint = new System.Numerics.Vector3((float)RotationRectangle.ActualWidth / 2, (float)RotationRectangle.ActualHeight / 2, 0f);\n\n RotationRectangle.Rotation = rotation;\n // announce visual change to automation\n }\n\nprivate void ApplyScale(float scale)\n {\n var _scaleTransition = ScaleRectangle.ScaleTransition;\n\n _scaleTransition.Components = ((ScaleX.IsChecked == true) ? Vector3TransitionComponents.X : 0) |\n ((ScaleY.IsChecked == true) ? Vector3TransitionComponents.Y : 0) |\n ((ScaleZ.IsChecked == true) ? Vector3TransitionComponents.Z : 0);\n\n ScaleRectangle.Scale = new Vector3(scale);\n ScaleValue.Value = scale;\n // announce visual change to automation\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Use Implicit Transitions to automatically animate changes to properties.","relatedControls":["PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"implicittransition-3","controlId":"implicittransition","controlName":"Implicit Transitions","headerText":"Automatically animate changes to Scale","xaml":"\u003C!-- Automatically animate changes to Scale --\u003E\n\u003CRectangle x:Name=\u0022rectangle\u0022 Width=\u002250\u0022 Height=\u002250\u0022 Scale=\u00221,1,1\u0022 \u003E\n \u003CRectangle.ScaleTransition\u003E\n \u003CVector3Transition /\u003E\n \u003C/Rectangle.ScaleTransition\u003E\n\u003C/Rectangle\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing Microsoft.UI.Xaml.Media;\nusing System;\nusing System.Numerics;\nusing Windows.Foundation.Metadata;\n\nprivate void ScaleButton_Click(object sender, RoutedEventArgs e)\n {\n float scale;\n if ((sender as Button)?.Tag is { } tag)\n {\n scale = (float)Convert.ToDouble(tag);\n }\n else\n {\n scale = EnsureValueIsNumber(ScaleNumberBox);\n }\n ApplyScale(scale);\n }\n\nprivate void NumberBox_KeyDown(object sender, KeyRoutedEventArgs e)\n {\n if ((sender as NumberBox)?.Header is not string header)\n {\n return;\n }\n\n if (e.Key == Windows.System.VirtualKey.Enter)\n {\n if (header == \u0022Opacity (0.0 to 1.0)\u0022)\n {\n ApplyOpacity(EnsureValueIsNumber(OpacityNumberBox));\n }\n if (header == \u0022Rotation (0.0 to 360.0)\u0022)\n {\n ApplyRotation(EnsureValueIsNumber(RotationNumberBox));\n }\n if (header == \u0022Scale (0.0 to 5.0)\u0022)\n {\n ApplyScale(EnsureValueIsNumber(ScaleNumberBox));\n }\n if (header == \u0022Translation (0.0 to 200.0)\u0022)\n {\n ApplyTranslation(EnsureValueIsNumber(TranslationNumberBox));\n }\n }\n }\n\nprivate float EnsureValueIsNumber(NumberBox numberBox)\n {\n if (double.IsNaN(numberBox.Value))\n {\n numberBox.Value = 0;\n }\n return (float)numberBox.Value;\n }\n\nprivate void ApplyScale(float scale)\n {\n var _scaleTransition = ScaleRectangle.ScaleTransition;\n\n _scaleTransition.Components = ((ScaleX.IsChecked == true) ? Vector3TransitionComponents.X : 0) |\n ((ScaleY.IsChecked == true) ? Vector3TransitionComponents.Y : 0) |\n ((ScaleZ.IsChecked == true) ? Vector3TransitionComponents.Z : 0);\n\n ScaleRectangle.Scale = new Vector3(scale);\n ScaleValue.Value = scale;\n // announce visual change to automation\n }\n\nprivate void ApplyOpacity(float opacity)\n {\n // If the implicit animation API is not present, simply no-op. \n if (!(ApiInformation.IsApiContractPresent(\u0022Windows.Foundation.UniversalApiContract\u0022, 7))) return;\n\n OpacityRectangle.Opacity = opacity;\n OpacityValue.Value = opacity;\n // announce visual change to automation\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Use Implicit Transitions to automatically animate changes to properties.","relatedControls":["PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"implicittransition-4","controlId":"implicittransition","controlName":"Implicit Transitions","headerText":"Automatically animate changes to Translation","xaml":"\u003C!-- Automatically animate changes to Translation --\u003E\n\u003CRectangle x:Name=\u0022rectangle\u0022 Width=\u002250\u0022 Height=\u002250\u0022 Translation=\u00220,0,0\u0022 \u003E\n \u003CRectangle.TranslationTransition\u003E\n \u003CVector3Transition /\u003E\n \u003C/Rectangle.TranslationTransition\u003E\n\u003C/Rectangle\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing Microsoft.UI.Xaml.Media;\nusing System;\nusing System.Numerics;\nusing Windows.Foundation.Metadata;\n\nprivate void TranslateButton_Click(object sender, RoutedEventArgs e)\n {\n float translation;\n if ((sender as Button)?.Tag is { } tag)\n {\n translation = (float)Convert.ToDouble(tag);\n }\n else\n {\n translation = EnsureValueIsNumber(TranslationNumberBox);\n }\n ApplyTranslation(translation);\n }\n\nprivate void NumberBox_KeyDown(object sender, KeyRoutedEventArgs e)\n {\n if ((sender as NumberBox)?.Header is not string header)\n {\n return;\n }\n\n if (e.Key == Windows.System.VirtualKey.Enter)\n {\n if (header == \u0022Opacity (0.0 to 1.0)\u0022)\n {\n ApplyOpacity(EnsureValueIsNumber(OpacityNumberBox));\n }\n if (header == \u0022Rotation (0.0 to 360.0)\u0022)\n {\n ApplyRotation(EnsureValueIsNumber(RotationNumberBox));\n }\n if (header == \u0022Scale (0.0 to 5.0)\u0022)\n {\n ApplyScale(EnsureValueIsNumber(ScaleNumberBox));\n }\n if (header == \u0022Translation (0.0 to 200.0)\u0022)\n {\n ApplyTranslation(EnsureValueIsNumber(TranslationNumberBox));\n }\n }\n }\n\nprivate float EnsureValueIsNumber(NumberBox numberBox)\n {\n if (double.IsNaN(numberBox.Value))\n {\n numberBox.Value = 0;\n }\n return (float)numberBox.Value;\n }\n\nprivate void ApplyTranslation(float translation)\n {\n var _translationTransition = TranslateRectangle.TranslationTransition;\n\n _translationTransition.Components = ((TranslateX.IsChecked == true) ? Vector3TransitionComponents.X : 0) |\n ((TranslateY.IsChecked == true) ? Vector3TransitionComponents.Y : 0) |\n ((TranslateZ.IsChecked == true) ? Vector3TransitionComponents.Z : 0);\n\n TranslateRectangle.Translation = new Vector3(translation);\n TranslationValue.Value = translation;\n // announce visual change to automation\n }\n\nprivate void ApplyOpacity(float opacity)\n {\n // If the implicit animation API is not present, simply no-op. \n if (!(ApiInformation.IsApiContractPresent(\u0022Windows.Foundation.UniversalApiContract\u0022, 7))) return;\n\n OpacityRectangle.Opacity = opacity;\n OpacityValue.Value = opacity;\n // announce visual change to automation\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Use Implicit Transitions to automatically animate changes to properties.","relatedControls":["PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"implicittransition-5","controlId":"implicittransition","controlName":"Implicit Transitions","headerText":"Implicitly animate when the Background changes","xaml":"\u003CContentPresenter x:Name=\u0022BrushPresenter\u0022 Background=\u0022Blue\u0022 Width=\u002250\u0022 Height=\u002250\u0022\u003E\n \u003CContentPresenter.BackgroundTransition\u003E\n \u003CBrushTransition /\u003E\n \u003C/ContentPresenter.BackgroundTransition\u003E\n\u003C/ContentPresenter\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing Microsoft.UI.Xaml.Media;\nusing System;\nusing System.Numerics;\nusing Windows.Foundation.Metadata;\n\nprivate void BackgroundButton_Click(object sender, RoutedEventArgs e)\n {\n\n if ((BrushPresenter.Background as SolidColorBrush)?.Color == Microsoft.UI.Colors.Blue)\n {\n BrushPresenter.Background = new SolidColorBrush(Microsoft.UI.Colors.Yellow);\n // announce visual change to automation\n }\n else\n {\n BrushPresenter.Background = new SolidColorBrush(Microsoft.UI.Colors.Blue);\n // announce visual change to automation\n }\n\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Use Implicit Transitions to automatically animate changes to properties.","relatedControls":["PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"implicittransition-6","controlId":"implicittransition","controlName":"Implicit Transitions","headerText":"Implicitly animate when the Grid\u0027s theme changes","xaml":"\u003CGrid x:Name=\u0022ThemeExampleGrid\u0022 Background=\u0022{ThemeResource SolidBackgroundFillColorBaseBrush}\u0022 \u003E\n \u003CGrid.BackgroundTransition\u003E\n \u003CBrushTransition /\u003E\n \u003C/Grid.BackgroundTransition\u003E\n \u003CStackPanel Margin=\u002212\u0022 Spacing=\u00226\u0022\u003E\n \u003CTextBlock Text=\u0022Lorem Ipsum\u0022 Style=\u0022{ThemeResource SubtitleTextBlockStyle}\u0022 /\u003E\n \u003CTextBlock Text=\u0022The background of this grid animates when the theme changes.\u0022 TextWrapping=\u0022WrapWholeWords\u0022 /\u003E\n \u003CButton Content=\u0022Button\u0022 /\u003E\n \u003CCheckBox Content=\u0022CheckBox\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Grid\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing Microsoft.UI.Xaml.Media;\nusing System;\nusing System.Numerics;\nusing Windows.Foundation.Metadata;\n\nprivate void ThemeButton_Click(object sender, RoutedEventArgs e)\n {\n ThemeExampleGrid.RequestedTheme = ThemeExampleGrid.RequestedTheme == ElementTheme.Dark ? ElementTheme.Light : ElementTheme.Dark;\n // announce visual change to automation\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Use Implicit Transitions to automatically animate changes to properties.","relatedControls":["PageTransition","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"pagetransition-1","controlId":"pagetransition","controlName":"Page Transitions","headerText":"Page transitions","xaml":"\u003CFrame x:Name=\u0022ContentFrame\u0022\u003E\n \u003CFrame.ContentTransitions\u003E\n \u003CTransitionCollection\u003E\n \u003CNavigationThemeTransition /\u003E\n \u003C/TransitionCollection\u003E\n \u003C/Frame.ContentTransitions\u003E\n\u003C/Frame\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Animation;\n\nprivate void TransitionRadioButton_Checked(object sender, RoutedEventArgs e)\n {\n var pageTransitionString = \u0022\u0022;\n\n var senderTransitionString = (sender as RadioButton)?.Content.ToString();\n if (senderTransitionString != \u0022Default\u0022)\n {\n pageTransitionString = \u0022, new \u0022 \u002B senderTransitionString \u002B \u0022NavigationTransitionInfo()\u0022;\n\n if (senderTransitionString == \u0022Entrance\u0022)\n {\n _transitionInfo = new EntranceNavigationTransitionInfo();\n }\n else if (senderTransitionString == \u0022DrillIn\u0022)\n {\n _transitionInfo = new DrillInNavigationTransitionInfo();\n }\n else if (senderTransitionString == \u0022Suppress\u0022)\n {\n _transitionInfo = new SuppressNavigationTransitionInfo();\n }\n else if (senderTransitionString == \u0022Slide from Right\u0022)\n {\n _transitionInfo = new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromRight };\n pageTransitionString = \u0022, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromRight }\u0022;\n }\n else if (senderTransitionString == \u0022Slide from Left\u0022)\n {\n _transitionInfo = new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromLeft };\n pageTransitionString = \u0022, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromLeft }\u0022;\n }\n else if (senderTransitionString == \u0022Common\u0022)\n {\n _transitionInfo = new CommonNavigationTransitionInfo();\n }\n else if(senderTransitionString == \u0022Continuum\u0022)\n {\n _transitionInfo = new ContinuumNavigationTransitionInfo();\n }\n }\n else\n {\n _transitionInfo = null;\n }\n\n if (TransitionValue != null)\n {\n TransitionValue.Value = pageTransitionString;\n }\n }\n\nprivate void ForwardButton1_Click(object sender, RoutedEventArgs e)\n {\n\n var pageToNavigateTo = ContentFrame.BackStackDepth % 2 == 1 ? typeof(SamplePages.SamplePage1) : typeof(SamplePages.SamplePage2);\n\n if (_transitionInfo == null)\n {\n // Default behavior, no transition set or used.\n ContentFrame.Navigate(pageToNavigateTo, null);\n }\n else\n {\n // Explicit transition info used.\n ContentFrame.Navigate(pageToNavigateTo, null, _transitionInfo);\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Page transitions provide visual feedback about the relationship between pages.","relatedControls":["ConnectedAnimation","ThemeTransition"],"apiNamespace":"Microsoft.UI.Xaml.Media.Animation","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"}]},{"id":"themetransition-1","controlId":"themetransition","controlName":"Theme Transitions","headerText":"Use the EntranceThemeTransition when adding items to your page.","xaml":"\u003CStackPanel x:Name=\u0022EntranceStackPanel\u0022 Orientation=\u0022Horizontal\u0022\u003E\n \u003CStackPanel.ChildrenTransitions\u003E\n \u003CTransitionCollection\u003E\n \u003CEntranceThemeTransition IsStaggeringEnabled=\u0022True\u0022 /\u003E\n \u003C/TransitionCollection\u003E\n \u003C/StackPanel.ChildrenTransitions\u003E\n \u003CRectangle Width=\u002250\u0022 Height=\u002250\u0022 Margin=\u00225\u0022 Fill=\u0022LightBlue\u0022 /\u003E\n \u003CRectangle Width=\u002250\u0022 Height=\u002250\u0022 Margin=\u00225\u0022 Fill=\u0022LightBlue\u0022 /\u003E\n \u003CRectangle Width=\u002250\u0022 Height=\u002250\u0022 Margin=\u00225\u0022 Fill=\u0022LightBlue\u0022 /\u003E\n \u003CRectangle Width=\u002250\u0022 Height=\u002250\u0022 Margin=\u00225\u0022 Fill=\u0022LightBlue\u0022 /\u003E\n \u003CRectangle Width=\u002250\u0022 Height=\u002250\u0022 Margin=\u00225\u0022 Fill=\u0022LightBlue\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Shapes;\nusing System;\nusing System.Collections.Generic;\n\nprivate void EntranceAddButton_Click(object sender, RoutedEventArgs e)\n {\n int value = Convert.ToInt32((sender as Button)?.Tag);\n\n for (int i = 0; i \u003C value; i\u002B\u002B)\n {\n Thickness thickness = new Thickness(5.0);\n EntranceStackPanel.Children.Add(new Rectangle() { Width = 50, Height = 50, Margin = thickness, Fill = new SolidColorBrush(Microsoft.UI.Colors.LightBlue) });\n }\n\n string announcement = value == 1 ? \u0022Added 1 rectangle.\u0022 : $\u0022Added {value} rectangles.\u0022;\n }\n\nprivate void EntranceClearButton_Click(object sender, RoutedEventArgs e)\n {\n EntranceStackPanel.Children.Clear();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Theme transitions are pre-packaged, easy-to-apply animations.","relatedControls":["ImplicitTransition","PageTransition"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"themetransition-2","controlId":"themetransition","controlName":"Theme Transitions","headerText":"Use the RepositionThemeTransition to react to layout changes.","xaml":"\u003CRectangle x:Name=\u0022RightRectangle\u0022 Fill=\u0022Blue\u0022 \u003E\n \u003CRectangle.Transitions\u003E\n \u003CTransitionCollection\u003E\n \u003CRepositionThemeTransition /\u003E\n \u003C/TransitionCollection\u003E\n \u003C/Rectangle.Transitions\u003E\n\u003C/Rectangle\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Shapes;\nusing System;\nusing System.Collections.Generic;\n\nprivate void RepositionButton_Click(object sender, RoutedEventArgs e)\n {\n MiddleElement.Visibility = MiddleElement.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;\n string announcement = MiddleElement.Visibility == Visibility.Visible ? \u0022Element restored.\u0022 : \u0022Element repositioned.\u0022;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Theme transitions are pre-packaged, easy-to-apply animations.","relatedControls":["ImplicitTransition","PageTransition"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"themetransition-3","controlId":"themetransition","controlName":"Theme Transitions","headerText":"Use ContentThemeTransition to animate content refreshes.","xaml":"\u003CListView\u003E\n \u003CListView.ItemContainerTransitions\u003E\n \u003CTransitionCollection\u003E\n \u003CContentThemeTransition /\u003E\n \u003C/TransitionCollection\u003E\n \u003C/ListView.ItemContainerTransitions\u003E\n\u003C/ListView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Shapes;\nusing System;\nusing System.Collections.Generic;\n\nprivate void ContentRefreshButton_Click(object sender, RoutedEventArgs e)\n {\n AddItemsToContentListView(true);\n }\n\nprivate void AddItemsToContentListView(bool ShowDifferentContent = false)\n {\n var items = new List\u003Cstring\u003E();\n for (int i = 0; i \u003C 5; i\u002B\u002B)\n {\n items.Add(ShowDifferentContent ? \u0022Updated content \u0022 \u002B i : \u0022Item \u0022 \u002B i);\n }\n\n ContentList.ItemsSource = items;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Theme transitions are pre-packaged, easy-to-apply animations.","relatedControls":["ImplicitTransition","PageTransition"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"themetransition-4","controlId":"themetransition","controlName":"Theme Transitions","headerText":"Use AddDeleteThemeTransition to animate adding and removing items from a collection.","xaml":"\u003CListView\u003E\n \u003CListView.ItemContainerTransitions\u003E\n \u003CTransitionCollection\u003E\n \u003CAddDeleteThemeTransition /\u003E\n \u003C/TransitionCollection\u003E\n \u003C/ListView.ItemContainerTransitions\u003E\n\u003C/ListView\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Shapes;\nusing System;\nusing System.Collections.Generic;\n\nprivate void AddButton_Click(object sender, RoutedEventArgs e)\n {\n AddRemoveListView.Items.Add(new ListViewItem() { Content = \u0022New Item \u0022 \u002B _itemCount.ToString() });\n _itemCount\u002B\u002B;\n }\n\nprivate void DeleteButton_Click(object sender, RoutedEventArgs e)\n {\n if (AddRemoveListView.Items.Count \u003E 0)\n {\n AddRemoveListView.Items.RemoveAt(0);\n }\n }\n\nprivate void AddDeleteButton_Click(object sender, RoutedEventArgs e)\n {\n AddButton_Click(sender, e);\n DeleteButton_Click(sender, e);\n }\n\nprivate int _itemCount = 10;\n\npublic ThemeTransitionPage()\n {\n this.InitializeComponent();\n\n for (int i = 0; i \u003C _itemCount; i\u002B\u002B)\n {\n AddRemoveListView.Items.Add(new ListViewItem() { Content = \u0022Item \u0022 \u002B i });\n }\n\n AddItemsToContentListView();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Theme transitions are pre-packaged, easy-to-apply animations.","relatedControls":["ImplicitTransition","PageTransition"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"themetransition-5","controlId":"themetransition","controlName":"Theme Transitions","headerText":"Use PopupThemeTransition to animate opening and closing a popup.","xaml":"\u003CPopup x:Name=\u0022ExamplePopup\u0022\u003E\n \u003CPopup.ChildTransitions\u003E\n \u003CTransitionCollection\u003E\n \u003CPopupThemeTransition /\u003E\n \u003C/TransitionCollection\u003E\n \u003C/Popup.ChildTransitions\u003E\n \u003CBorder Background=\u0022{ThemeResource FlyoutBackgroundThemeBrush}\u0022 BorderThickness=\u00222\u0022 BorderBrush=\u0022{ThemeResource SystemControlForegroundChromeGrayBrush}\u0022\u003E\n \u003CStackPanel Margin=\u002210\u0022\u003E\n \u003CTextBlock Text=\u0022This is a popup using PopupThemeTransition\u0022 /\u003E\n \u003CButton Content=\u0022Close Popup\u0022 Click=\u0022ClosePopupButton_Click\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Border\u003E\n\u003C/Popup\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing Microsoft.UI.Xaml.Shapes;\nusing System;\nusing System.Collections.Generic;\n\nprivate void ShowPopupButton_Click(object sender, RoutedEventArgs e)\n {\n ExamplePopup.IsOpen = true;\n ClosePopupButton.Focus(FocusState.Programmatic);\n }\n\nprivate void ClosePopupButton_Click(object sender, RoutedEventArgs e)\n {\n ExamplePopup.IsOpen = false;\n ShowPopupButton.Focus(FocusState.Programmatic);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Theme transitions are pre-packaged, easy-to-apply animations.","relatedControls":["ImplicitTransition","PageTransition"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"parallaxview-1","controlId":"parallaxview","controlName":"ParallaxView","headerText":"Parallax on a ListView","xaml":"\u003CGrid\u003E\n \u003CParallaxView Source=\u0022{Binding ElementName=listView}\u0022 VerticalShift=\u0022500\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022 /\u003E\n \u003C/ParallaxView\u003E\n \u003CListView x:Name=\u0022listView\u0022 ItemsSource=\u0022{x:Bind Items}\u0022\u003E\n \u003CListView.Header\u003E\n \u003CTextBlock Text=\u0022Scroll the list to see parallaxing of image\u0022 /\u003E\n \u003C/ListView.Header\u003E\n \u003C/ListView\u003E\n\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A container control that provides the parallax effect when scrolling.","relatedControls":["ScrollView","ScrollViewer"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"parallaxview-2","controlId":"parallaxview","controlName":"ParallaxView","headerText":"Parallax with a ScrollView","xaml":"\u003CGrid\u003E\n \u003CParallaxView Source=\u0022{Binding ElementName=scrollView}\u0022 VerticalShift=\u0022500\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/YourImage.png\u0022/\u003E\n \u003C/ParallaxView\u003E\n \u003CTextBlock Text=\u0022Scroll the rectangles to see parallaxing of image\u0022 MaxWidth=\u0022280\u0022\n HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Top\u0022 Foreground=\u0022White\u0022\n FontSize=\u002228\u0022 TextWrapping=\u0022WrapWholeWords\u0022/\u003E\n \u003CScrollView x:Name=\u0022scrollView\u0022 Width=\u0022150\u0022 HorizontalAlignment=\u0022Left\u0022\u003E\n \u003CStackPanel\u003E\n \u003CRectangle Fill=\u0022AliceBlue\u0022 Height=\u0022150\u0022/\u003E\n \u003C!-- ... --\u003E\n \u003CRectangle Fill=\u0022Cyan\u0022 Height=\u0022150\u0022/\u003E\n \u003C/StackPanel\u003E\n \u003C/ScrollView\u003E\n\u003C/Grid\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A container control that provides the parallax effect when scrolling.","relatedControls":["ScrollView","ScrollViewer"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"appwindow-1","controlId":"appwindow","controlName":"AppWindow","headerText":"Creating and customizing an AppWindow from a Window instance","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022\n VerticalAlignment=\u0022Center\u0022\n Spacing=\u00228\u0022\u003E\n \u003CButton x:Name=\u0022Hide\u0022\n Content=\u0022Hide\u0022\n Click=\u0022Hide_Click\u0022\n \u003CToolTipService.ToolTip\u003E\n \u003CTextBlock Text=\u0022Hides the window from all UX representations in the system but keeps the object alive.\u0022\n TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003C/ToolTipService.ToolTip\u003E\n \u003C/Button\u003E\n \u003CButton x:Name=\u0022Show\u0022\n Click=\u0022Show_Click\u0022\n \u003CToolTipService.ToolTip\u003E\n \u003CTextBlock Text=\u0022Hides and then shows the window and activates it after 3 seconds.\u0022\n TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003C/ToolTipService.ToolTip\u003E\n \u003CTextBlock Text=\u0022Hide and show the window after 3 seconds\u0022 TextWrapping=\u0022WrapWholeWords\u0022 TextAlignment=\u0022Center\u0022/\u003E\n \u003C/Button\u003E\n \u003CButton x:Name=\u0022Close\u0022\n Click=\u0022Close_Click\u0022\n Margin=\u00220,16,0,0\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022 VerticalAlignment=\u0022Center\u0022\u003E\n \u003CSymbolIcon Symbol=\u0022Cancel\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022\n Margin=\u00220,0,4,0\u0022 /\u003E\n \u003CTextBlock Text=\u0022Close\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003CToolTipService.ToolTip\u003E\n \u003CTextBlock Text=\u0022Closes the window and releases all resources.\u0022\n TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003C/ToolTipService.ToolTip\u003E\n \u003C/Button\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A flexible, customizable window management system for app development.","relatedControls":["AppWindowTitleBar","TitleBar","CreateMultipleWindows"],"apiNamespace":"Microsoft.UI.Windowing","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"}]},{"id":"appwindow-2","controlId":"appwindow","controlName":"AppWindow","headerText":"Centering AppWindow on the screen using the available display area","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022 Spacing=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022This is a centred sample window\u0022 Style=\u0022{ThemeResource TitleTextBlockStyle}\u0022 TextAlignment=\u0022Center\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":"using Microsoft.UI.Windowing;\nusing Microsoft.UI.Xaml;\nusing Windows.Graphics;\n\nnamespace YourNamesapace;\n\npublic sealed partial class SampleWindow2 : Window\n{\n public SampleWindow2()\n {\n this.InitializeComponent();\n AppWindow.SetIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022);\n AppWindow.TitleBar.PreferredTheme = TitleBarTheme.UseDefaultAppMode;\n\n // Center the window on the screen.\n CenterWindow();\n }\n\n // Centers the given AppWindow on the screen based on the available display area.\n private void CenterWindow()\n {\n var area = DisplayArea.GetFromWindowId(AppWindow.Id, DisplayAreaFallback.Nearest)?.WorkArea;\n if (area == null) return;\n AppWindow.Move(new PointInt32((area.Value.Width - AppWindow.Size.Width) / 2, (area.Value.Height - AppWindow.Size.Height) / 2));\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A flexible, customizable window management system for app development.","relatedControls":["AppWindowTitleBar","TitleBar","CreateMultipleWindows"],"apiNamespace":"Microsoft.UI.Windowing","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"}]},{"id":"appwindow-3","controlId":"appwindow","controlName":"AppWindow","headerText":"AppWindow with OverlapedPresenter","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022\n VerticalAlignment=\u0022Center\u0022\n Spacing=\u002210\u0022\u003E\n \u003CButton x:Name=\u0022MaximizeBtn\u0022\n Content=\u0022Maximize\u0022\n Click=\u0022MaximizeBtn_Click\u0022\n \u003CButton x:Name=\u0022MinimizeBtn\u0022\n Content=\u0022Minimize\u0022\n Click=\u0022MinimizeBtn_Click\u0022\n \u003CButton x:Name=\u0022RestoreBtn\u0022\n Click=\u0022RestoreBtn_Click\u0022\n \u003CTextBlock Text=\u0022Minimize and restore the window after 3 seconds\u0022 TextWrapping=\u0022WrapWholeWords\u0022 TextAlignment=\u0022Center\u0022/\u003E\n \u003C/Button\u003E\n \u003CButton x:Name=\u0022CloseBtn\u0022\n Click=\u0022CloseBtn_Click\u0022\n Margin=\u00220,16,0,0\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\n VerticalAlignment=\u0022Center\u0022\u003E\n \u003CSymbolIcon Symbol=\u0022Cancel\u0022\n Margin=\u00220,0,4,0\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022 /\u003E\n \u003CTextBlock Text=\u0022Close\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Button\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A flexible, customizable window management system for app development.","relatedControls":["AppWindowTitleBar","TitleBar","CreateMultipleWindows"],"apiNamespace":"Microsoft.UI.Windowing","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"}]},{"id":"appwindow-4","controlId":"appwindow","controlName":"AppWindow","headerText":"Setting the minimum and maximum width / height on an AppWindow using OverlappedPresenter","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022\n VerticalAlignment=\u0022Center\u0022\n Spacing=\u002210\u0022\u003E\n \u003CButton x:Name=\u0022MaximizeBtn\u0022\n Content=\u0022Maximize\u0022\n Click=\u0022MaximizeBtn_Click\u0022\n \u003CButton x:Name=\u0022MinimizeBtn\u0022\n Content=\u0022Minimize\u0022\n Click=\u0022MinimizeBtn_Click\u0022\n \u003CButton x:Name=\u0022RestoreBtn\u0022\n Click=\u0022RestoreBtn_Click\u0022\n \u003CTextBlock Text=\u0022Minimize and restore the window after 3 seconds\u0022 TextWrapping=\u0022WrapWholeWords\u0022 TextAlignment=\u0022Center\u0022/\u003E\n \u003C/Button\u003E\n \u003CButton x:Name=\u0022CloseBtn\u0022\n Click=\u0022CloseBtn_Click\u0022\n Margin=\u00220,16,0,0\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\n VerticalAlignment=\u0022Center\u0022\u003E\n \u003CSymbolIcon Symbol=\u0022Cancel\u0022\n Margin=\u00220,0,4,0\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022 /\u003E\n \u003CTextBlock Text=\u0022Close\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Button\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":"using Microsoft.UI.Windowing;\r\nusing Microsoft.UI.Xaml;\r\nusing System.Threading.Tasks;\r\n\r\nnamespace YourApp;\r\n\r\npublic sealed partial class SampleWindow4 : Window\r\n{\r\n public SampleWindow4(int MinWidth, int MinHeight, int MaxWidth, int MaxHeight)\r\n {\r\n this.InitializeComponent();\r\n\r\n AppWindow.Resize(new Windows.Graphics.SizeInt32(800, 500));\r\n AppWindow.SetIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022);\r\n AppWindow.TitleBar.PreferredTheme = TitleBarTheme.UseDefaultAppMode;\r\n\r\n OverlappedPresenter presenter = OverlappedPresenter.Create();\r\n presenter.PreferredMinimumWidth = MinWidth;\r\n presenter.PreferredMinimumHeight = MinHeight;\r\n presenter.PreferredMaximumWidth = MaxWidth;\r\n presenter.PreferredMaximumHeight = MaxHeight;\r\n presenter.IsMaximizable = false;\r\n\r\n AppWindow.SetPresenter(presenter);\r\n }\r\n\r\n private void MinimizeBtn_Click(object sender, RoutedEventArgs e)\r\n {\r\n OverlappedPresenter presenter = (OverlappedPresenter)AppWindow.Presenter;\r\n presenter.Minimize();\r\n }\r\n\r\n private void RestoreBtn_Click(object sender, RoutedEventArgs e)\r\n {\r\n OverlappedPresenter presenter = (OverlappedPresenter)AppWindow.Presenter;\r\n presenter.Minimize();\r\n Task.Delay(3000).ContinueWith(t =\u003E presenter.Restore());\r\n }\r\n\r\n private void CloseBtn_Click(object sender, RoutedEventArgs e)\r\n {\r\n this.Close();\r\n }\r\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A flexible, customizable window management system for app development.","relatedControls":["AppWindowTitleBar","TitleBar","CreateMultipleWindows"],"apiNamespace":"Microsoft.UI.Windowing","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"}]},{"id":"appwindow-5","controlId":"appwindow","controlName":"AppWindow","headerText":"Modal window with OverlappedPresenter using AppWindow","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022 Spacing=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022Modal Window\u0022 Style=\u0022{ThemeResource TitleTextBlockStyle}\u0022 TextAlignment=\u0022Center\u0022 /\u003E\n\n \u003CTextBlock Text=\u0022This is a modal window created using AppWindow with OverlappedPresenter.\u0022 Style=\u0022{ThemeResource BodyTextBlockStyle}\u0022 TextAlignment=\u0022Center\u0022 TextWrapping=\u0022Wrap\u0022 /\u003E\n\n \u003CStackPanel Orientation=\u0022Horizontal\u0022 HorizontalAlignment=\u0022Center\u0022 Spacing=\u00228\u0022\u003E\n \u003CButton Content=\u0022OK\u0022 Width=\u002280\u0022 Click=\u0022OKButton_Click\u0022 /\u003E\n \u003CButton Content=\u0022Cancel\u0022 Width=\u002280\u0022 Click=\u0022CancelButton_Click\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":"using Microsoft.UI;\nusing Microsoft.UI.Windowing;\nusing Microsoft.UI.Xaml;\nusing System;\nusing System.Runtime.InteropServices;\nusing WinRT.Interop;\n\nnamespace YourNamespace;\n\npublic sealed partial class ModalWindow : Window\n{\n public ModalWindow()\n {\n this.InitializeComponent();\n\n var dpi = Windows.Win32.PInvoke.GetDpiForWindow(new Windows.Win32.Foundation.HWND(WinRT.Interop.WindowNative.GetWindowHandle(this)));\n var scalingFactor = (float)dpi / 96;\n\n AppWindow.Resize(new Windows.Graphics.SizeInt32((int)(400.0f * scalingFactor), (int)(300.0f * scalingFactor)));\n AppWindow.SetIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022);\n AppWindow.TitleBar.PreferredTheme = TitleBarTheme.UseDefaultAppMode;\n\n OverlappedPresenter presenter = OverlappedPresenter.CreateForDialog();\n\n // Set this modal window\u0027s owner (the main application window).\n // The main window can be retrieved from App.xaml.cs if it\u0027s set as a static property.\n SetWindowOwner(owner: App.StartupWindow);\n\n // Make the window modal (blocks interaction with the owner window until closed).\n presenter.IsModal = true;\n\n // Apply the presenter settings to the AppWindow.\n AppWindow.SetPresenter(presenter);\n\n // Show the modal window.\n AppWindow.Show();\n\n Closed \u002B= ModalWindow_Closed;\n }\n\n // Sets the owner window of the modal window.\n private void SetWindowOwner(Window owner)\n {\n // Get the HWND (window handle) of the owner window (main window).\n IntPtr ownerHwnd = WindowNative.GetWindowHandle(owner);\n\n // Get the HWND of the AppWindow (modal window).\n IntPtr ownedHwnd = Win32Interop.GetWindowFromWindowId(AppWindow.Id);\n\n // Set the owner window using SetWindowLongPtr for 64-bit systems\n // or SetWindowLong for 32-bit systems.\n if (IntPtr.Size == 8) // Check if the system is 64-bit\n {\n SetWindowLongPtr(ownedHwnd, -8, ownerHwnd); // -8 = GWLP_HWNDPARENT\n }\n else // 32-bit system\n {\n SetWindowLong(ownedHwnd, -8, ownerHwnd); // -8 = GWL_HWNDPARENT\n }\n }\n\n // Import the Windows API function SetWindowLongPtr for modifying window properties on 64-bit systems.\n [DllImport(\u0022User32.dll\u0022, CharSet = CharSet.Auto, EntryPoint = \u0022SetWindowLongPtr\u0022)]\n public static extern IntPtr SetWindowLongPtr(IntPtr hWnd, int nIndex, IntPtr dwNewLong);\n}\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A flexible, customizable window management system for app development.","relatedControls":["AppWindowTitleBar","TitleBar","CreateMultipleWindows"],"apiNamespace":"Microsoft.UI.Windowing","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"}]},{"id":"appwindow-6","controlId":"appwindow","controlName":"AppWindow","headerText":"AppWindow with FullScreenPresenter","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022\n VerticalAlignment=\u0022Center\u0022\n Spacing=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022This window is running in Fullscreen mode\u0022\n Style=\u0022{ThemeResource TitleTextBlockStyle}\u0022\n TextAlignment=\u0022Center\u0022 /\u003E\n \u003CButton x:Name=\u0022Close\u0022\n Click=\u0022Close_Click\u0022\n HorizontalAlignment=\u0022Center\u0022\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\n VerticalAlignment=\u0022Center\u0022\u003E\n \u003CSymbolIcon Symbol=\u0022Cancel\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022\n Margin=\u00220,0,4,0\u0022 /\u003E\n \u003CTextBlock Text=\u0022Close\u0022\n Foreground=\u0022{ThemeResource SystemFillColorCriticalBrush}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Button\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":"using Microsoft.UI.Windowing;\nusing Microsoft.UI.Xaml;\n\nnamespace YourNamespace;\n\npublic sealed partial class SampleWindow6 : Window\n{\n public SampleWindow6()\n {\n this.InitializeComponent();\n AppWindow.SetIcon(\u0022Assets/Tiles/GalleryIcon.ico\u0022);\n AppWindow.TitleBar.PreferredTheme = TitleBarTheme.UseDefaultAppMode;\n\n // Set the window to Full-Screen mode\n AppWindow.SetPresenter(AppWindowPresenterKind.FullScreen);\n }\n\n private void Close_Click(object sender, RoutedEventArgs e)\n {\n this.Close();\n }\n}","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A flexible, customizable window management system for app development.","relatedControls":["AppWindowTitleBar","TitleBar","CreateMultipleWindows"],"apiNamespace":"Microsoft.UI.Windowing","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"}]},{"id":"appwindow-7","controlId":"appwindow","controlName":"AppWindow","headerText":"AppWindow with CompactOverlayPresenter","xaml":"\u003CWindow ...\u003E\n \u003CWindow.SystemBackdrop\u003E\n \u003CMicaBackdrop /\u003E\n \u003C/Window.SystemBackdrop\u003E\n\n \u003CStackPanel HorizontalAlignment=\u0022Center\u0022 VerticalAlignment=\u0022Center\u0022 Spacing=\u00228\u0022\u003E\n \u003CTextBlock Text=\u0022This window is set to CompactOverlay (Picture-in-Picture) mode.\u0022 TextAlignment=\u0022Center\u0022 TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003C/StackPanel\u003E\n\u003C/Window\u003E","csharp":null,"source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"A flexible, customizable window management system for app development.","relatedControls":["AppWindowTitleBar","TitleBar","CreateMultipleWindows"],"apiNamespace":"Microsoft.UI.Windowing","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"}]},{"id":"appwindowtitlebar-1","controlId":"appwindowtitlebar","controlName":"AppWindowTitleBar","headerText":"AppWindowTitleBar color customization","xaml":null,"csharp":"using Microsoft.UI.Windowing;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.Generic;\nusing Windows.UI;\n\nprivate void ShowWindowButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n {\n ShowWindowButton.IsEnabled = false;\n window = new AppWindowTitleBarWindow(\n Background.Color,\n Foreground.Color,\n ButtonBackground.Color,\n ButtonForeground.Color,\n ButtonHoverBackground.Color,\n ButtonHoverForeground.Color,\n ButtonInactiveBackground.Color,\n ButtonInactiveForeground.Color,\n InactiveBackground.Color,\n InactiveForeground.Color,\n ButtonPressedBackground.Color,\n ButtonPressedForeground.Color);\n window.Activate();\n window.Closed \u002B= Window_Closed;\n }\n\nprivate void Window_Closed(object sender, Microsoft.UI.Xaml.WindowEventArgs args)\n {\n ShowWindowButton.IsEnabled = true;\n if (window != null)\n window.Closed -= Window_Closed;\n window = null;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Provides control over the app window title bar.","relatedControls":["AppWindow","TitleBar"],"apiNamespace":"Microsoft.UI.Windowing","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"}]},{"id":"appwindowtitlebar-2","controlId":"appwindowtitlebar","controlName":"AppWindowTitleBar","headerText":"Extending content into the AppWindowTitleBar area","xaml":null,"csharp":"using Microsoft.UI.Windowing;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.Generic;\nusing Windows.UI;\n\nprivate void ShowExtendButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n {\n ShowExtendButton.IsEnabled = false;\n extendWindow = new AppWindowTitleBarExtendWindow(\n ExtendContentCheckBox.IsChecked ?? false,\n (TitleBarHeightOption)HeightComboBox.SelectedItem);\n extendWindow.Activate();\n extendWindow.Closed \u002B= ExtendWindow_Closed;\n }\n\nprivate void ExtendWindow_Closed(object sender, Microsoft.UI.Xaml.WindowEventArgs args)\n {\n ShowExtendButton.IsEnabled = true;\n if (extendWindow != null)\n extendWindow.Closed -= ExtendWindow_Closed;\n extendWindow = null;\n }\n\nprivate string BoolToLowerString(bool? value) =\u003E (value ?? false).ToString().ToLower();\n\n private void ShowExtendButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n {\n ShowExtendButton.IsEnabled = false;\n extendWindow = new AppWindowTitleBarExtendWindow(\n ExtendContentCheckBox.IsChecked ?? false,\n (TitleBarHeightOption)HeightComboBox.SelectedItem);\n extendWindow.Activate();\n extendWindow.Closed \u002B= ExtendWindow_Closed;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Provides control over the app window title bar.","relatedControls":["AppWindow","TitleBar"],"apiNamespace":"Microsoft.UI.Windowing","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"}]},{"id":"appwindowtitlebar-3","controlId":"appwindowtitlebar","controlName":"AppWindowTitleBar","headerText":"AppWindowTitleBar preferred theme and height options","xaml":null,"csharp":"using Microsoft.UI.Windowing;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing System.Collections.Generic;\nusing Windows.UI;\n\nprivate void ShowThemeButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n {\n ShowThemeHeightButton.IsEnabled = false;\n themeHeightWindow = new AppWindowTitleBarThemeWindow((TitleBarTheme)ThemeComboBox.SelectedItem);\n themeHeightWindow.Activate();\n themeHeightWindow.Closed \u002B= ThemeHeightWindow_Closed;\n }\n\nprivate void ThemeHeightWindow_Closed(object sender, Microsoft.UI.Xaml.WindowEventArgs args)\n {\n ShowThemeHeightButton.IsEnabled = true;\n if (themeHeightWindow != null)\n themeHeightWindow.Closed -= ThemeHeightWindow_Closed;\n themeHeightWindow = null;\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Provides control over the app window title bar.","relatedControls":["AppWindow","TitleBar"],"apiNamespace":"Microsoft.UI.Windowing","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"}]},{"id":"createmultiplewindows-1","controlId":"createmultiplewindows","controlName":"Multiple windows","headerText":"Create single threaded Multiple Top level Windows(MTW).","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media;\nusing Windows.Graphics;\n\nprivate void CreateNewWindow_Click(object sender, RoutedEventArgs e)\n {\n var childWindow = new Window()\n {\n ExtendsContentIntoTitleBar = true,\n SystemBackdrop = new MicaBackdrop(),\n Content = new Page()\n {\n Content = new TextBlock()\n {\n Text = \u0022New child window!\u0022,\n HorizontalAlignment = HorizontalAlignment.Center,\n VerticalAlignment = VerticalAlignment.Center,\n },\n // Get the theme from the parent.\n RequestedTheme = this.ActualTheme,\n }\n };\n\n // We need to track the new window so it can be closed when the app is closing,\n // otherwise it will crash the app.\n // This is also used to change the theme for all windows when the app theme changes.\n WindowHelper.TrackWindow(childWindow);\n childWindow.AppWindow.ResizeClient(new SizeInt32(500, 500));\n childWindow.Activate();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An example showing the creation of single-threaded top level Xaml windows.","relatedControls":["AppWindow","AppWindowTitleBar","TitleBar"],"apiNamespace":"Microsoft.UI.Xaml","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"}]},{"id":"titlebar-1","controlId":"titlebar","controlName":"TitleBar","headerText":"TitleBar configuration","xaml":"\u003CTitleBar\n Title=\u0022...\u0022\n Subtitle=\u0022...\u0022\n IsBackButtonVisible=\u0022...\u0022\n IsPaneToggleButtonVisible=\u0022...\u0022\u003E\n \u003CTitleBar.IconSource\u003E\n \u003CImageIconSource ImageSource=\u0022/Assets/Tiles/GalleryIcon.ico\u0022 /\u003E\n \u003C/TitleBar.IconSource\u003E\n \u003CTitleBar.Content\u003E\n \u003CAutoSuggestBox\n VerticalAlignment=\u0022Center\u0022\n PlaceholderText=\u0022Search..\u0022\n QueryIcon=\u0022Find\u0022 /\u003E\n \u003C/TitleBar.Content\u003E\n \u003CTitleBar.RightHeader\u003E\n \u003CPersonPicture\n Initials=\u0022JD\u0022 /\u003E\n \u003C/TitleBar.RightHeader\u003E\n\u003C/TitleBar\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\n\nprivate void TitleBar_LayoutUpdated(object sender, object e)\n {\n TitleBarHelper.ApplySystemThemeToCaptionButtons(App.MainWindow, this.ActualTheme);\r\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An example showing how to use the default TitleBar control.","relatedControls":["AppWindow","AppWindowTitleBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"titlebar-2","controlId":"titlebar","controlName":"TitleBar","headerText":"End to end TitleBar sample","xaml":"\u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003C!-- TitleBar --\u003E\n \u003CRowDefinition Height=\u0022*\u0022 /\u003E\n \u003C!-- NavigationView --\u003E\n \u003C/Grid.RowDefinitions\u003E\n\n \u003CTitleBar\n x:Name=\u0022titleBar\u0022\n BackRequested=\u0022TitleBar_BackRequested\u0022\n IsBackButtonVisible=\u0022{x:Bind navFrame.CanGoBack, Mode=OneWay}\u0022\n IsPaneToggleButtonVisible=\u0022True\u0022\n PaneToggleRequested=\u0022TitleBar_PaneToggleRequested\u0022 /\u003E\n\n \u003CNavigationView\n x:Name=\u0022navView\u0022\n Grid.Row=\u00221\u0022\n IsBackButtonVisible=\u0022Collapsed\u0022\n IsPaneToggleButtonVisible=\u0022False\u0022\u003E\n \u003CNavigationView.MenuItems... /\u003E\n \u003CFrame x:Name=\u0022navFrame\u0022 /\u003E\n \u003C/NavigationView\u003E\n\u003C/Grid\u003E","csharp":"this.ExtendsContentIntoTitleBar = true; // Extend the content into the title bar and hide the default titlebar\n this.SetTitleBar(titleBar); // Set the custom title bar","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"An example showing how to use the default TitleBar control.","relatedControls":["AppWindow","AppWindowTitleBar"],"apiNamespace":"Microsoft.UI.Xaml.Controls","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"}]},{"id":"clipboard-1","controlId":"clipboard","controlName":"Clipboard","headerText":"Copy text to the Clipboard","xaml":"\u003CButton Content=\u0022Copy Text to the Clipboard\u0022 Click=\u0022CopyText_Click\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Imaging;\nusing System;\nusing System.Collections.Generic;\nusing System.Text;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\nusing Microsoft.Windows.Storage.Pickers;\nusing Windows.Storage.Streams;\n\nprivate void CopyText_Click(object sender, RoutedEventArgs args)\n {\n if (sender is not Button button)\n {\n return;\n }\n\n richEditBox.Document.GetText(Microsoft.UI.Text.TextGetOptions.None, out textToCopy);\n var package = new DataPackage();\n package.SetText(textToCopy);\n Clipboard.SetContent(package);\n\n VisualStateManager.GoToState(this, \u0022ConfirmationClipboardVisible\u0022, false);\n Microsoft.UI.Dispatching.DispatcherQueue dispatcherQueue = Microsoft.UI.Dispatching.DispatcherQueue.GetForCurrentThread();\n\n // Automatically hide the confirmation text after 2 seconds\n if (dispatcherQueue != null)\n {\n dispatcherQueue.TryEnqueue(async () =\u003E\n {\n await Task.Delay(2000);\n VisualStateManager.GoToState(this, \u0022ConfirmationClipboardCollapsed\u0022, false);\n });\n }\n\n }\n\npublic ClipboardPage()\n {\n this.InitializeComponent();\n richEditBox.Document.SetText(Microsoft.UI.Text.TextSetOptions.None, \u0022This text will be copied to the clipboard.\u0022);\n UpdateHistoryRoamingStatus();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Copy and paste text, images, and files to and from the system Clipboard.","relatedControls":["StoragePickers"],"apiNamespace":"Windows.ApplicationModel.DataTransfer","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"}]},{"id":"clipboard-2","controlId":"clipboard","controlName":"Clipboard","headerText":"Paste text from the Clipboard","xaml":"\u003CButton Content=\u0022Paste Text from the Clipboard\u0022 Click=\u0022PasteText_Click\u0022/\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Imaging;\nusing System;\nusing System.Collections.Generic;\nusing System.Text;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\nusing Microsoft.Windows.Storage.Pickers;\nusing Windows.Storage.Streams;\n\nprivate async void PasteText_Click(object sender, RoutedEventArgs args)\n {\n if (sender is not Button button)\n {\n return;\n }\n\n var package = Clipboard.GetContent();\n if (package.Contains(StandardDataFormats.Text))\n {\n var text = await package.GetTextAsync();\n PasteClipboard2.Text = text;\n }\n\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Copy and paste text, images, and files to and from the system Clipboard.","relatedControls":["StoragePickers"],"apiNamespace":"Windows.ApplicationModel.DataTransfer","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"}]},{"id":"clipboard-3","controlId":"clipboard","controlName":"Clipboard","headerText":"Copy and paste an image","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Imaging;\nusing System;\nusing System.Collections.Generic;\nusing System.Text;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\nusing Microsoft.Windows.Storage.Pickers;\nusing Windows.Storage.Streams;\n\nprivate void CopyImage_Click(object sender, RoutedEventArgs args)\n {\n if (sender is not Button button)\n {\n return;\n }\n\n var package = new DataPackage();\n var imageUri = new Uri(\u0022ms-appx:///Assets/SampleMedia/rainier.jpg\u0022);\n package.SetBitmap(RandomAccessStreamReference.CreateFromUri(imageUri));\n\n if (Clipboard.SetContentWithOptions(package, null))\n {\n ImageStatusText.Text = \u0022Image copied to clipboard.\u0022;\n ImageStatusText.Visibility = Visibility.Visible;\n }\n else\n {\n ImageStatusText.Text = \u0022Error copying image to clipboard.\u0022;\n ImageStatusText.Visibility = Visibility.Visible;\n }\n }\n\nprivate async void PasteImage_Click(object sender, RoutedEventArgs args)\n {\n if (sender is not Button button)\n {\n return;\n }\n\n var package = Clipboard.GetContent();\n if (package.Contains(StandardDataFormats.Bitmap))\n {\n try\n {\n IRandomAccessStreamReference imageReference = await package.GetBitmapAsync();\n using (IRandomAccessStreamWithContentType imageStream = await imageReference.OpenReadAsync())\n {\n var bitmapImage = new BitmapImage();\n bitmapImage.SetSource(imageStream);\n PastedImage.Source = bitmapImage;\n PastedImage.Visibility = Visibility.Visible;\n ImageStatusText.Text = \u0022Image pasted from clipboard.\u0022;\n ImageStatusText.Visibility = Visibility.Visible;\n }\n }\n catch (Exception ex)\n {\n ImageStatusText.Text = \u0022Error pasting image: \u0022 \u002B ex.Message;\n ImageStatusText.Visibility = Visibility.Visible;\n }\n }\n else\n {\n ImageStatusText.Text = \u0022Bitmap format is not available in the clipboard.\u0022;\n ImageStatusText.Visibility = Visibility.Visible;\n PastedImage.Visibility = Visibility.Collapsed;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Copy and paste text, images, and files to and from the system Clipboard.","relatedControls":["StoragePickers"],"apiNamespace":"Windows.ApplicationModel.DataTransfer","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"}]},{"id":"clipboard-4","controlId":"clipboard","controlName":"Clipboard","headerText":"Copy and paste files","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Imaging;\nusing System;\nusing System.Collections.Generic;\nusing System.Text;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\nusing Microsoft.Windows.Storage.Pickers;\nusing Windows.Storage.Streams;\n\nprivate async void CopyFiles_Click(object sender, RoutedEventArgs args)\n {\n if (sender is not Button button)\n {\n return;\n }\n\n var filePicker = new FileOpenPicker(button.XamlRoot.ContentIslandEnvironment.AppWindowId);\n filePicker.FileTypeFilter.Add(\u0022*\u0022);\n\n var pickedFiles = await filePicker.PickMultipleFilesAsync();\n if (pickedFiles.Count \u003E 0)\n {\n List\u003CWindows.Storage.IStorageItem\u003E storageItems = new();\n foreach (var file in pickedFiles)\n {\n storageItems.Add(await Windows.Storage.StorageFile.GetFileFromPathAsync(file.Path));\n }\n\n var package = new DataPackage();\n package.SetStorageItems(storageItems);\n package.RequestedOperation = DataPackageOperation.Copy;\n\n if (Clipboard.SetContentWithOptions(package, null))\n {\n FilesStatusText.Text = $\u0022{pickedFiles.Count} file(s) copied to clipboard.\u0022;\n }\n else\n {\n FilesStatusText.Text = \u0022Error copying files to clipboard.\u0022;\n }\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Copy and paste text, images, and files to and from the system Clipboard.","relatedControls":["StoragePickers"],"apiNamespace":"Windows.ApplicationModel.DataTransfer","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"}]},{"id":"clipboard-5","controlId":"clipboard","controlName":"Clipboard","headerText":"Clipboard history and roaming options","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Imaging;\nusing System;\nusing System.Collections.Generic;\nusing System.Text;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\nusing Microsoft.Windows.Storage.Pickers;\nusing Windows.Storage.Streams;\n\nprivate void CopyWithOptions_Click(object sender, RoutedEventArgs args)\n {\n if (sender is not Button button)\n {\n return;\n }\n\n string text = HistoryRoamingTextBox.Text;\n if (string.IsNullOrEmpty(text))\n {\n HistoryRoamingStatusText.Text = \u0022Please enter text to copy.\u0022;\n return;\n }\n\n var package = new DataPackage();\n package.SetText(text);\n\n var options = new ClipboardContentOptions\n {\n IsAllowedInHistory = AllowHistoryToggle.IsOn,\n IsRoamable = AllowRoamingToggle.IsOn\n };\n\n if (Clipboard.SetContentWithOptions(package, options))\n {\n var status = new StringBuilder(\u0022Text copied to clipboard.\u0022);\n status.Append($\u0022 History: {(options.IsAllowedInHistory ? \u0022allowed\u0022 : \u0022excluded\u0022)}.\u0022);\n status.Append($\u0022 Roaming: {(options.IsRoamable ? \u0022allowed\u0022 : \u0022excluded\u0022)}.\u0022);\n HistoryRoamingStatusText.Text = status.ToString();\n }\n else\n {\n HistoryRoamingStatusText.Text = \u0022Error copying content to clipboard.\u0022;\n }\n }\n\nprivate void UpdateHistoryRoamingStatus()\n {\n try\n {\n bool historyEnabled = Clipboard.IsHistoryEnabled();\n bool roamingEnabled = Clipboard.IsRoamingEnabled();\n HistoryEnabledText.Text = $\u0022Clipboard history: {(historyEnabled ? \u0022enabled\u0022 : \u0022disabled\u0022)}\u0022;\n RoamingEnabledText.Text = $\u0022Clipboard roaming: {(roamingEnabled ? \u0022enabled\u0022 : \u0022disabled\u0022)}\u0022;\n }\n catch\n {\n // IsHistoryEnabled/IsRoamingEnabled may not be available on all systems\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Copy and paste text, images, and files to and from the system Clipboard.","relatedControls":["StoragePickers"],"apiNamespace":"Windows.ApplicationModel.DataTransfer","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"}]},{"id":"clipboard-6","controlId":"clipboard","controlName":"Clipboard","headerText":"Other clipboard operations","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Media.Imaging;\nusing System;\nusing System.Collections.Generic;\nusing System.Text;\nusing System.Threading.Tasks;\nusing Windows.ApplicationModel.DataTransfer;\nusing Microsoft.Windows.Storage.Pickers;\nusing Windows.Storage.Streams;\n\nprivate void ShowFormats_Click(object sender, RoutedEventArgs args)\n {\n DataPackageView package = Clipboard.GetContent();\n var output = new StringBuilder();\n\n if (package != null \u0026\u0026 package.AvailableFormats.Count \u003E 0)\n {\n output.AppendLine(\u0022Available formats on the clipboard:\u0022);\n foreach (string format in package.AvailableFormats)\n {\n output.AppendLine($\u0022 \u2022 {format}\u0022);\n }\n }\n else\n {\n output.AppendLine(\u0022The clipboard is empty.\u0022);\n }\n\n OtherOperationsStatusText.Text = output.ToString();\n }\n\nprivate void ClearClipboard_Click(object sender, RoutedEventArgs args)\n {\n try\n {\n Clipboard.Clear();\n OtherOperationsStatusText.Text = \u0022Clipboard has been cleared.\u0022;\n }\n catch (Exception ex)\n {\n OtherOperationsStatusText.Text = \u0022Error clearing clipboard: \u0022 \u002B ex.Message;\n }\n }\n\nprivate void ContentChangedToggle_Toggled(object sender, RoutedEventArgs args)\n {\n if (ContentChangedToggle.IsOn)\n {\n Clipboard.ContentChanged \u002B= OnClipboardContentChanged;\n OtherOperationsStatusText.Text = \u0022Monitoring clipboard changes...\u0022;\n }\n else\n {\n Clipboard.ContentChanged -= OnClipboardContentChanged;\n OtherOperationsStatusText.Text = \u0022Stopped monitoring clipboard changes.\u0022;\n }\n }\n\nprivate void OnClipboardContentChanged(object? sender, object e)\n {\n DispatcherQueue.TryEnqueue(() =\u003E\n {\n DataPackageView package = Clipboard.GetContent();\n var output = new StringBuilder(\u0022Clipboard content changed!\\n\u0022);\n\n if (package != null \u0026\u0026 package.AvailableFormats.Count \u003E 0)\n {\n output.AppendLine(\u0022New formats:\u0022);\n foreach (string format in package.AvailableFormats)\n {\n output.AppendLine($\u0022 \u2022 {format}\u0022);\n }\n }\n else\n {\n output.AppendLine(\u0022Clipboard is now empty.\u0022);\n }\n\n OtherOperationsStatusText.Text = output.ToString();\n });\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Copy and paste text, images, and files to and from the system Clipboard.","relatedControls":["StoragePickers"],"apiNamespace":"Windows.ApplicationModel.DataTransfer","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"}]},{"id":"contentisland-1","controlId":"contentisland","controlName":"ContentIsland","headerText":"A basic content island with content.","xaml":null,"csharp":"using Microsoft.UI.Composition;\nusing Microsoft.UI.Content;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Hosting;\nusing Microsoft.UI.Xaml.Shapes;\nusing System;\nusing System.Collections.Generic;\nusing System.Numerics;\nusing System.Threading.Tasks;\n\nprivate async void LoadModel_Click(object sender, RoutedEventArgs e)\n {\n _rectanglePanel.Visibility = Visibility.Visible;\n await LoadModel();\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Create ContentIslands to host other frameworks in your app.","relatedControls":[],"apiNamespace":"Microsoft.UI.Content","docs":[{"title":"ContentIsland - API","uri":"https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.content.contentisland"}]},{"id":"storagepickers-1","controlId":"storagepickers","controlName":"Storage pickers","headerText":"Pick single file","xaml":"\u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CButton x:Name=\u0022PickSingleFileButton\u0022 Content=\u0022Pick a single file\u0022 Click=\u0022PickSingleFileButton_Click\u0022/\u003E\n \u003CTextBlock x:Name=\u0022PickedSingleFileTextBlock\u0022 Text=\u0022No file picked\u0022/\u003E\n\u003C/StackPanel\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.Windows.Storage.Pickers;\nusing System;\nusing System.Collections.Generic;\nusing System.IO;\n\nprivate async void PickSingleFileButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is Button button)\n {\n //disable the button to avoid double-clicking\n button.IsEnabled = false;\n\n var picker = new FileOpenPicker(button.XamlRoot.ContentIslandEnvironment.AppWindowId);\n\n // Define allowed file types\n if (FileTypeComboBox1.SelectedItem is ComboBoxItem selectedItem)\n {\n string? tag = selectedItem.Tag?.ToString();\n\n switch (tag)\n {\n case \u0022.txt\u0022:\n picker.FileTypeFilter.Add(\u0022.txt\u0022);\n break;\n\n case \u0022images\u0022:\n picker.FileTypeFilter.Add(\u0022.jpg\u0022);\n picker.FileTypeFilter.Add(\u0022.png\u0022);\n break;\n }\n }\n\n picker.CommitButtonText = CommitButtonTextTextBox.Text;\n\n picker.SuggestedStartLocation = (PickerLocationId)PickerLocationComboBox1.SelectedItem;\n\n picker.ViewMode = (PickerViewMode)PickerViewModeComboBox1.SelectedItem;\n\n // Show the picker dialog window\n var file = await picker.PickSingleFileAsync();\n PickedSingleFileTextBlock.Text = file != null\n ? \u0022Picked: \u0022 \u002B file.Path\n : \u0022No file selected.\u0022;\n\n //re-enable the button\n button.IsEnabled = true;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Select files and folders with modern system pickers.","relatedControls":["Clipboard"],"apiNamespace":"Microsoft.Windows.Storage.Pickers","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"}]},{"id":"storagepickers-2","controlId":"storagepickers","controlName":"Storage pickers","headerText":"Pick multiple files","xaml":"\u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CButton x:Name=\u0022PickMultipleFilesButton\u0022 Content=\u0022Pick multiple files\u0022 Click=\u0022PickMultipleFilesButton_Click\u0022/\u003E\n \u003CTextBlock x:Name=\u0022PickedMultipleFilesTextBlock\u0022 Text=\u0022No files picked\u0022/\u003E\n\u003C/StackPanel\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.Windows.Storage.Pickers;\nusing System;\nusing System.Collections.Generic;\nusing System.IO;\n\nprivate async void PickMultipleFilesButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is Button button)\n {\n // Disable the button to avoid double-clicking\n button.IsEnabled = false;\n\n var picker = new FileOpenPicker(button.XamlRoot.ContentIslandEnvironment.AppWindowId);\n\n // Define allowed file types\n if (FileTypeComboBox2.SelectedItem is ComboBoxItem selectedItem)\n {\n string? tag = selectedItem.Tag?.ToString();\n switch (tag)\n {\n case \u0022.txt\u0022:\n picker.FileTypeFilter.Add(\u0022.txt\u0022);\n break;\n\n case \u0022images\u0022:\n picker.FileTypeFilter.Add(\u0022.jpg\u0022);\n picker.FileTypeFilter.Add(\u0022.png\u0022);\n break;\n\n case \u0022*\u0022:\n picker.FileTypeFilter.Add(\u0022*\u0022);\n break;\n }\n }\n\n picker.CommitButtonText = CommitButtonTextTextBox2.Text;\n picker.SuggestedStartLocation = (PickerLocationId)PickerLocationComboBox2.SelectedItem;\n picker.ViewMode = (PickerViewMode)PickerViewModeComboBox2.SelectedItem;\n\n // Show the picker dialog\n var files = await picker.PickMultipleFilesAsync();\n\n if (files.Count \u003E 0)\n {\n PickedMultipleFilesTextBlock.Text = \u0022\u0022;\n foreach (var file in files)\n {\n PickedMultipleFilesTextBlock.Text \u002B= \u0022- Picked: \u0022 \u002B file.Path \u002B Environment.NewLine;\n }\n }\n else\n {\n PickedMultipleFilesTextBlock.Text = \u0022No files selected.\u0022;\n }\n\n // Re-enable the button\n button.IsEnabled = true;\n\n // Announce result for accessibility (if you\uFFFDre using the helper)\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Select files and folders with modern system pickers.","relatedControls":["Clipboard"],"apiNamespace":"Microsoft.Windows.Storage.Pickers","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"}]},{"id":"storagepickers-3","controlId":"storagepickers","controlName":"Storage pickers","headerText":"Save file","xaml":"\u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CTextBox x:Name=\u0022FileContentTextBox\u0022 Header=\u0022File content\u0022 TextWrapping=\u0022Wrap\u0022 AcceptsReturn=\u0022True\u0022\n \u003CButton x:Name=\u0022SaveFileButton\u0022 Content=\u0022Save a file\u0022 Click=\u0022SaveFileButton_Click\u0022 /\u003E\n \u003CTextBlock x:Name=\u0022SavedFileTextBlock\u0022 Grid.Column=\u00221\u0022 Text=\u0022No file saved\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.Windows.Storage.Pickers;\nusing System;\nusing System.Collections.Generic;\nusing System.IO;\n\nprivate async void SaveFileButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is Button button)\n {\n button.IsEnabled = false;\n\n var picker = new FileSavePicker(button.XamlRoot.ContentIslandEnvironment.AppWindowId);\n\n if (TxtCheckBox.IsChecked == true)\n picker.FileTypeChoices.Add(\u0022Text Files\u0022, new List\u003Cstring\u003E() { \u0022.txt\u0022 });\n\n if (JsonCheckBox.IsChecked == true)\n picker.FileTypeChoices.Add(\u0022JSON Files\u0022, new List\u003Cstring\u003E() { \u0022.json\u0022 });\n\n if (XmlCheckBox.IsChecked == true)\n picker.FileTypeChoices.Add(\u0022XML Files\u0022, new List\u003Cstring\u003E() { \u0022.xml\u0022 });\n\n picker.DefaultFileExtension = DefaultExtensionComboBox.SelectedItem.ToString();\n\n picker.SuggestedFileName = SuggestedFileNameTextBox.Text;\n\n picker.CommitButtonText = CommitButtonTextTextBox3.Text;\n\n picker.SuggestedStartLocation = (PickerLocationId)PickerLocationComboBox3.SelectedItem;\n\n picker.SuggestedFolder = SuggestedFolderTextBox.Text;\n\n var result = await picker.PickSaveFileAsync();\n\n if (result != null)\n {\n string savePath = result.Path;\n await File.WriteAllTextAsync(savePath, FileContentTextBox.Text);\n SavedFileTextBlock.Text = \u0022File saved to: \u0022 \u002B savePath;\n }\n else\n {\n SavedFileTextBlock.Text = \u0022File save canceled.\u0022;\n }\n\n button.IsEnabled = true;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Select files and folders with modern system pickers.","relatedControls":["Clipboard"],"apiNamespace":"Microsoft.Windows.Storage.Pickers","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"}]},{"id":"storagepickers-4","controlId":"storagepickers","controlName":"Storage pickers","headerText":"Pick folder","xaml":"\u003CStackPanel Spacing=\u00228\u0022\u003E\n \u003CButton x:Name=\u0022PickFolderButton\u0022 Content=\u0022Pick a folder\u0022 Click=\u0022PickFolderButton_Click\u0022 /\u003E\n \u003CTextBlock x:Name=\u0022PickedFolderTextBlock\u0022 Text=\u0022No folder picked\u0022 /\u003E\n\u003C/StackPanel\u003E","csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.Windows.Storage.Pickers;\nusing System;\nusing System.Collections.Generic;\nusing System.IO;\n\nprivate async void PickFolderButton_Click(object sender, RoutedEventArgs e)\n {\n if (sender is Button button)\n {\n // disable the button to avoid double-clicking\n button.IsEnabled = false;\n\n var picker = new FolderPicker(button.XamlRoot.ContentIslandEnvironment.AppWindowId);\n\n picker.CommitButtonText = CommitButtonTextTextBox4.Text;\n picker.SuggestedStartLocation = (PickerLocationId)PickerLocationComboBox4.SelectedItem;\n picker.ViewMode = (PickerViewMode)PickerViewModeComboBox3.SelectedItem;\n\n // Show the picker dialog\n var folder = await picker.PickSingleFolderAsync();\n PickedFolderTextBlock.Text = folder != null\n ? \u0022Picked: \u0022 \u002B folder.Path\n : \u0022No folder selected.\u0022;\n\n // re-enable the button\n button.IsEnabled = true;\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Select files and folders with modern system pickers.","relatedControls":["Clipboard"],"apiNamespace":"Microsoft.Windows.Storage.Pickers","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"}]},{"id":"appnotification-1","controlId":"appnotification","controlName":"App notifications","headerText":"Basic notification","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.Windows.AppNotifications;\nusing Microsoft.Windows.AppNotifications.Builder;\nusing System;\nusing System.Collections.Generic;\n\nprivate void ShowNotificationButton_Click(object sender, RoutedEventArgs e)\n {\n AppNotification notification = new AppNotificationBuilder()\n .AddText(\u0022Welcome to WinUI 3 Gallery\u0022)\n .AddText(\u0022Explore interactive samples and discover the power of modern Windows UI.\u0022)\n .BuildNotification();\n\n AppNotificationManager.Default.Show(notification);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Send notifications that appear in the Action Center and as toast popups.","relatedControls":["BadgeNotificationManager"],"apiNamespace":"Microsoft.Windows.Notifications","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"}]},{"id":"appnotification-2","controlId":"appnotification","controlName":"App notifications","headerText":"Informational notification with logo and custom audio","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.Windows.AppNotifications;\nusing Microsoft.Windows.AppNotifications.Builder;\nusing System;\nusing System.Collections.Generic;\n\nprivate void ShowInformationalNotificationWithLogoButton_Click(object sender, RoutedEventArgs e)\n {\n AppNotification notification = new AppNotificationBuilder()\n .AddText(\u0022Control Highlight: PersonPicture\u0022)\n .AddText(\u0022Use the PersonPicture control to display user avatars with initials or images.\u0022)\n .SetAppLogoOverride(new Uri(\u0022ms-appx:///Assets/ControlImages/PersonPicture.png\u0022), AppNotificationImageCrop.Circle)\n .SetAudioEvent(selectedAppNotificationSoundEvent)\n .SetTimeStamp(DateTime.Now)\n .BuildNotification();\n\n AppNotificationManager.Default.Show(notification);\n }\n\nprivate IReadOnlyList\u003CAppNotificationSoundEvent\u003E appNotificationSoundEvents = new List\u003CAppNotificationSoundEvent\u003E\n {\n AppNotificationSoundEvent.Default,\n AppNotificationSoundEvent.IM,\n AppNotificationSoundEvent.Reminder,\n AppNotificationSoundEvent.SMS,\n AppNotificationSoundEvent.Alarm,\n AppNotificationSoundEvent.Call\n };\n\nprivate AppNotificationSoundEvent selectedAppNotificationSoundEvent = AppNotificationSoundEvent.Default;","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Send notifications that appear in the Action Center and as toast popups.","relatedControls":["BadgeNotificationManager"],"apiNamespace":"Microsoft.Windows.Notifications","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"}]},{"id":"appnotification-3","controlId":"appnotification","controlName":"App notifications","headerText":"Visual notification with hero image and attribution","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.Windows.AppNotifications;\nusing Microsoft.Windows.AppNotifications.Builder;\nusing System;\nusing System.Collections.Generic;\n\nprivate void ShowVisualNotificationWithHeroImageButton_Click(object sender, RoutedEventArgs e)\n {\n AppNotification notification = new AppNotificationBuilder()\n .AddText(\u0022Harbor Scene with Boats\u0022)\n .AddText(\u0022A quiet harbor with boats gently anchored in view.\u0022)\n .SetHeroImage(new Uri(\u0022ms-appx:///Assets/SampleMedia/LandscapeImage5.jpg\u0022))\n .SetAttributionText(\u0022WinUI gallery assets\u0022)\n .BuildNotification();\n\n AppNotificationManager.Default.Show(notification);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Send notifications that appear in the Action Center and as toast popups.","relatedControls":["BadgeNotificationManager"],"apiNamespace":"Microsoft.Windows.Notifications","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"}]},{"id":"appnotification-4","controlId":"appnotification","controlName":"App notifications","headerText":"Notification with AppNotification controls","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.Windows.AppNotifications;\nusing Microsoft.Windows.AppNotifications.Builder;\nusing System;\nusing System.Collections.Generic;\n\nprivate void ShowNotificationWithControlsButton_Click(object sender, RoutedEventArgs e)\n {\n AppNotification notification = new AppNotificationBuilder()\n .AddText(\u0022Survey\u0022)\n .AddText(\u0022Please select your satisfaction level and leave a comment.\u0022)\n .AddComboBox(new AppNotificationComboBox(\u0022satisfaction\u0022)\n .AddItem(\u00221\u0022, \u0022Very Bad\u0022)\n .AddItem(\u00222\u0022, \u0022Bad\u0022)\n .AddItem(\u00223\u0022, \u0022Neutral\u0022)\n .AddItem(\u00224\u0022, \u0022Good\u0022)\n .AddItem(\u00225\u0022, \u0022Excellent\u0022)\n .SetSelectedItem(\u00223\u0022))\n .AddTextBox(\u0022comment\u0022, \u0022Leave a comment here...\u0022, \u0022\u0022)\n .AddButton(new AppNotificationButton(\u0022Submit\u0022)\n .AddArgument(\u0022action\u0022, \u0022submit_survey\u0022))\n .BuildNotification();\n\n AppNotificationManager.Default.Show(notification);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Send notifications that appear in the Action Center and as toast popups.","relatedControls":["BadgeNotificationManager"],"apiNamespace":"Microsoft.Windows.Notifications","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"}]},{"id":"appnotification-5","controlId":"appnotification","controlName":"App notifications","headerText":"Notification with ProgressBar","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.Windows.AppNotifications;\nusing Microsoft.Windows.AppNotifications.Builder;\nusing System;\nusing System.Collections.Generic;\n\nprivate void ShowNotificationWithProgressBarButton_Click(object sender, RoutedEventArgs e)\n {\n AppNotification notification = new AppNotificationBuilder()\n .AddText(\u0022Progress Bar Example\u0022)\n .AddText(\u0022This is a sample notification showing how to use a progress bar.\u0022)\n .AddProgressBar(new AppNotificationProgressBar()\n {\n Title = \u0022Demo Progress\u0022,\n Value = 0.6, // 60%\n ValueStringOverride = \u002260%\u0022,\n Status = \u0022In progress...\u0022\n })\n .BuildNotification();\n\n AppNotificationManager.Default.Show(notification);\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Send notifications that appear in the Action Center and as toast popups.","relatedControls":["BadgeNotificationManager"],"apiNamespace":"Microsoft.Windows.Notifications","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"}]},{"id":"badgenotificationmanager-1","controlId":"badgenotificationmanager","controlName":"Badge notifications","headerText":"Setting badge notifications with count","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.Windows.BadgeNotifications;\nusing System;\nusing System.Collections.Generic;\n\nprivate void SetBadgeCountButton_Click(object sender, RoutedEventArgs e)\n {\n if (NativeMethods.IsAppPackaged)\n {\n BadgeNotificationManager.Current.SetBadgeAsCount((uint)BadgeCountBox.Value);\n isBadgeSetted = true;\n }\n }\n\nprivate void ClearBadgeButton_Click(object sender, RoutedEventArgs e)\n {\n if (NativeMethods.IsAppPackaged)\n {\n BadgeNotificationManager.Current.ClearBadge();\n }\n }\n\nprivate void BadgeCountBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs args)\n {\n if (NativeMethods.IsAppPackaged)\n {\n if (isBadgeSetted)\n {\n BadgeNotificationManager.Current.SetBadgeAsCount((uint)BadgeCountBox.Value);\n }\n }\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Show numeric or icon badges on your app\u2019s taskbar icon.","relatedControls":["AppNotification","InfoBadge"],"apiNamespace":"Microsoft.Windows.BadgeNotifications","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"}]},{"id":"badgenotificationmanager-2","controlId":"badgenotificationmanager","controlName":"Badge notifications","headerText":"Setting badge notifications with Glyph","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.Windows.BadgeNotifications;\nusing System;\nusing System.Collections.Generic;\n\nprivate void SetBadgeGlyphButton_Click(object sender, RoutedEventArgs e)\n {\n if (NativeMethods.IsAppPackaged)\n {\n BadgeNotificationManager.Current.SetBadgeAsGlyph(selectedGlyph);\n isBadgeSetted = true;\n }\n }\n\nprivate void ClearBadgeButton_Click(object sender, RoutedEventArgs e)\n {\n if (NativeMethods.IsAppPackaged)\n {\n BadgeNotificationManager.Current.ClearBadge();\n }\n }\n\nprivate void BadgeNotificationGlyphsCombo_SelectionChanged(object sender, SelectionChangedEventArgs e)\n {\n if (NativeMethods.IsAppPackaged)\n {\n if (isBadgeSetted)\n {\n BadgeNotificationManager.Current.SetBadgeAsGlyph(selectedGlyph);\n }\n }\n }\n\nprivate IReadOnlyList\u003CBadgeNotificationGlyph\u003E badgeNotificationGlyphs = new List\u003CBadgeNotificationGlyph\u003E(Enum.GetValues\u003CBadgeNotificationGlyph\u003E());\n\nprivate BadgeNotificationGlyph selectedGlyph = BadgeNotificationGlyph.Activity;","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Show numeric or icon badges on your app\u2019s taskbar icon.","relatedControls":["AppNotification","InfoBadge"],"apiNamespace":"Microsoft.Windows.BadgeNotifications","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"}]},{"id":"jumplist-1","controlId":"jumplist","controlName":"JumpList","headerText":"Adding tasks to the jump list","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing Windows.UI.StartScreen;\n\nprivate async void AddTasksButton_Click(object sender, RoutedEventArgs e)\n {\n if (!NativeMethods.IsAppPackaged)\n {\n return;\n }\n\n JumpList jumpList = await JumpList.LoadCurrentAsync();\n\n JumpListItem composeTask = JumpListItem.CreateWithArguments(\u0022/compose\u0022, \u0022New Message\u0022);\n composeTask.Description = \u0022Compose a new message\u0022;\n composeTask.Logo = new Uri(\u0022ms-appx:///Assets/Tiles/AppList.targetsize-48.png\u0022);\n\n JumpListItem searchTask = JumpListItem.CreateWithArguments(\u0022/search\u0022, \u0022Search\u0022);\n searchTask.Description = \u0022Search for items\u0022;\n searchTask.Logo = new Uri(\u0022ms-appx:///Assets/Tiles/AppList.targetsize-48.png\u0022);\n\n jumpList.Items.Add(composeTask);\n jumpList.Items.Add(searchTask);\n\n await jumpList.SaveAsync();\n }\n\nprivate async void ClearTasksButton_Click(object sender, RoutedEventArgs e)\n {\n if (!NativeMethods.IsAppPackaged)\n {\n return;\n }\n\n JumpList jumpList = await JumpList.LoadCurrentAsync();\n jumpList.Items.Clear();\n await jumpList.SaveAsync();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Add custom tasks and groups to the app\u0027s taskbar jump list.","relatedControls":[],"apiNamespace":"Windows.UI.StartScreen","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"}]},{"id":"jumplist-2","controlId":"jumplist","controlName":"JumpList","headerText":"Adding items to a custom group","xaml":null,"csharp":"using Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing System;\nusing Windows.UI.StartScreen;\n\nprivate async void AddCustomGroupButton_Click(object sender, RoutedEventArgs e)\n {\n if (!NativeMethods.IsAppPackaged)\n {\n return;\n }\n\n JumpList jumpList = await JumpList.LoadCurrentAsync();\n\n JumpListItem item1 = JumpListItem.CreateWithArguments(\u0022/project-alpha\u0022, \u0022Project Alpha\u0022);\n item1.GroupName = \u0022Projects\u0022;\n item1.Description = \u0022Open Project Alpha\u0022;\n item1.Logo = new Uri(\u0022ms-appx:///Assets/Tiles/AppList.targetsize-48.png\u0022);\n\n JumpListItem item2 = JumpListItem.CreateWithArguments(\u0022/project-beta\u0022, \u0022Project Beta\u0022);\n item2.GroupName = \u0022Projects\u0022;\n item2.Description = \u0022Open Project Beta\u0022;\n item2.Logo = new Uri(\u0022ms-appx:///Assets/Tiles/AppList.targetsize-48.png\u0022);\n\n jumpList.Items.Add(item1);\n jumpList.Items.Add(item2);\n\n await jumpList.SaveAsync();\n }","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":null,"controlDescription":"Add custom tasks and groups to the app\u0027s taskbar jump list.","relatedControls":[],"apiNamespace":"Windows.UI.StartScreen","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"}]},{"id":"itemsrepeater-7","controlId":"itemsrepeater","controlName":"ItemsRepeater","headerText":"Photo gallery: image grid (UniformGridLayout)","xaml":"\u003C!--\r\n ItemsRepeater is a layout primitive: it has NO selection and NO scrolling.\r\n Wrap it in a ScrollView (or ScrollViewer) for scrolling.\r\n UniformGridLayout sizes every cell uniformly \u2014 set MinItemWidth/Height\r\n and the layout fills available width with as many columns as fit.\r\n--\u003E\r\n\u003CScrollView\u003E\r\n \u003CItemsRepeater ItemsSource=\u0022{x:Bind ViewModel.Items, Mode=OneWay}\u0022\u003E\r\n \u003CItemsRepeater.Layout\u003E\r\n \u003CUniformGridLayout MinItemWidth=\u0022200\u0022\r\n MinItemHeight=\u0022200\u0022\r\n MinRowSpacing=\u00228\u0022\r\n MinColumnSpacing=\u00228\u0022/\u003E\r\n \u003C/ItemsRepeater.Layout\u003E\r\n \u003CItemsRepeater.ItemTemplate\u003E\r\n \u003CDataTemplate x:DataType=\u0022local:PhotoItem\u0022\u003E\r\n \u003CGrid Width=\u0022200\u0022 Height=\u0022200\u0022\r\n Background=\u0022{ThemeResource LayerFillColorDefaultBrush}\u0022\r\n CornerRadius=\u00224\u0022\u003E\r\n \u003CImage Source=\u0022{x:Bind Thumbnail}\u0022 Stretch=\u0022UniformToFill\u0022/\u003E\r\n \u003C/Grid\u003E\r\n \u003C/DataTemplate\u003E\r\n \u003C/ItemsRepeater.ItemTemplate\u003E\r\n \u003C/ItemsRepeater\u003E\r\n\u003C/ScrollView\u003E","csharp":"public sealed partial class PhotoItem\r\n{\r\n public string Thumbnail { get; set; } = \u0022\u0022;\r\n}\r\n\r\n// ItemsSource:\r\n// public ObservableCollection\u003CPhotoItem\u003E Items { get; } = new();","source":"gallery","nugetPackage":null,"xmlnsImports":[],"description":"Canonical pattern for displaying a grid of images/thumbnails: ItemsRepeater \u002B UniformGridLayout, wrapped in a ScrollView for scrolling. Use this instead of GridView\u002BItemsWrapGrid when you want the modern WinUI 3 collection layout.","controlDescription":null,"relatedControls":[],"apiNamespace":null,"docs":[]}] \ No newline at end of file diff --git a/src/tools/winui-search/Data/gallery-tags.json b/src/tools/winui-search/Data/gallery-tags.json index 2b74608..c87c6a9 100644 --- a/src/tools/winui-search/Data/gallery-tags.json +++ b/src/tools/winui-search/Data/gallery-tags.json @@ -1 +1 @@ -{"xamlresources":["xamlresources","reusable","definitions","shared","ensure","consistency","maintainability"],"xamlstyles":["xamlstyles","style","reusable","settings","define","consistent","design"],"binding":["binding","connecting","data","automatic","synchronization","updates"],"templates":["templates","customize","visuals","layouts","data","presentation"],"customusercontrols":["customusercontrols","reusable","components","functionality","appearance"],"scratchpad":["scratchpad","scratch","pad","testing","simple","markup"],"color":["color","balanced","design","creates","clarity","aesthetic","harmony"],"geometry":["geometry","clear","geometric","design","ensures","visual","coherence","structure"],"iconography":["iconography","icons","visual","design","language","communicate","information","quickly","effectively"],"spacing":["spacing","thoughtful","design","enhances","readability","flow"],"typography":["typography","design","guides","attention","intuitive","fonts","hierarchy"],"accessibilitycolorcontrast":["accessibilitycolorcontrast","high","contrast","design","ensures","accessibility","users"],"accessibilitykeyboard":["accessibilitykeyboard","keyboard-friendly","design","enables","seamless","interactions"],"accessibilityscreenreader":["accessibilityscreenreader","inclusive","design","ensures","meaningful","assistive","technologies"],"appbarbutton":["appbarbutton","button","styled","commandbar"],"appbarseparator":["appbarseparator","separator","divider","toolbar","vertical","line","visually","separate","groups","commands","bar"],"appbartogglebutton":["appbartogglebutton","appbar","toggle","toolbar","button","off","indeterminate","checkbox","styled","bar","other","specialized"],"commandbar":["commandbar","command","toolbar","appbar","action bar","displaying","application-specific","commands","handles","layout","resizing","contents","button","buttons","actions","menu"],"commandbarflyout":["commandbarflyout","commandbar","flyout","context","toolbar","mini-toolbar","displaying","proactive","commands","optional","menu"],"menubar":["menubar","menu","bar","file menu","edit menu","classic","allowing","menuitems","containing","menuflyoutitems"],"menuflyout":["menuflyout","context menu","right-click","flyout","menu","contextual","list","simple","commands","options"],"swipecontrol":["swipecontrol","swipe","gesture","reveal","action","delete","touch","quick","menu","actions"],"standarduicommand":["standarduicommand","command","standard","delete","copy","paste","built-in","xamluicommand","commonly","save"],"xamluicommand":["xamluicommand","command","keyboard","accelerator","define","feel","given"],"flipview":["flipview","flip","carousel","slideshow","image","swipe","collection","through","one","time"],"gridview":["gridview","grid","gallery","tile","image gallery","wrap","collection","rows","columns"],"itemsrepeater":["itemsrepeater","repeater","custom layout","virtualized","flexible","grid","gallery","image","uniformgridlayout","layout","primitive","data-driven","layouts"],"itemsview":["itemsview","modern","layout","collection","various","layouts"],"listbox":["listbox","list","select","simple","inline"],"listview":["listview","list","scroll","select","virtualized","data","collection","vertical","table","columns","column","sort","sorting","editable","datagrid","rows","details"],"pulltorefresh":["pulltorefresh","pull","refresh","swipe down","reload","provides","ability","collection","list","grid","contents"],"treeview":["treeview","tree","hierarchy","folder","node","expand","collapse","navigation","sidebar","lazy","hierarchical","list","pattern","expanding","collapsing","nodes","contain","nested"],"calendardatepicker":["calendardatepicker","calendar","date","picker","popup","users","pick"],"calendarview":["calendarview","calendar","date","month","schedule","choose"],"datepicker":["datepicker","date","picker","day","month","year","pick"],"timepicker":["timepicker","time","picker","hour","minute","clock","configurable","pick"],"button":["button","click","action","press","responds","input","raises","event"],"dropdownbutton":["dropdownbutton","dropdown","button","menu","split","flyout","choices","clicked"],"hyperlinkbutton":["hyperlinkbutton","hyperlink","link","url","navigate","button","appears","text","uri","handle","click","event"],"repeatbutton":["repeatbutton","repeat","hold","increment","button","raises","click","event","repeatedly","time","pressed","until","released"],"togglebutton":["togglebutton","toggle","button","off","switched","two","states","checkbox"],"splitbutton":["splitbutton","split","button","dropdown","default action","two-part","flyout","secondary","part","clicked"],"togglesplitbutton":["togglesplitbutton","toggle","split","button","version","splitbutton","activation","target","toggles","off"],"checkbox":["checkbox","check","toggle","boolean","option","select","clear"],"colorpicker":["colorpicker","color","picker","palette","hex","rgb","selectable","spectrum"],"combobox":["combobox","combo","dropdown","select","picker","list","drop-down"],"radiobutton":["radiobutton","radio","option","select one","group","select","single","options"],"ratingcontrol":["ratingcontrol","rating","stars","score","review","rate","something"],"slider":["slider","range","drag","track","select","moving","thumb","along"],"toggleswitch":["toggleswitch","toggle","switch","off","toggled","states"],"infobadge":["infobadge","badge","count","notification","dot","non-intrusive","notifications","bring","focus","area"],"infobar":["infobar","info","warning","error","success","notification","banner","alert","inline","message","app-wide","status","change","information"],"progressbar":["progressbar","progress","loading","bar","determinate","indeterminate","apps","task","performing","ongoing","work","doesn","block","interaction"],"progressring":["progressring","progress","loading","spinner","ring","circular","apps","task","performing","ongoing","work","block","interaction"],"tooltip":["tooltip","tip","hover","help","information","pop-up","window"],"contentdialog":["contentdialog","dialog","modal","popup","confirm","alert","save","discard","box","customized","contain"],"flyout":["flyout","popup","lightweight","dismiss","tooltip","contextual","information","enables","interaction"],"popup":["popup","overlay","floating","layer","displaying","temporary","existing"],"teachingtip":["teachingtip","teaching","tip","tutorial","onboarding","hint","callout","content-rich","flyout","guiding","users","enabling","moments"],"annotatedscrollbar":["annotatedscrollbar","scrollbar","annotated","labels","markers","extends","regular","vertical","functionality","easy","navigation","through","large","collections"],"pipspager":["pipspager","pager","dots","pagination","indicator","navigate","through","paginated","collection","page","numbers","need","visually","known"],"scrollview":["scrollview","scroll","pan","zoom","modern","container"],"scrollviewer":["scrollviewer","scroll","pan","zoom","classic","container"],"semanticzoom":["semanticzoom","zoom","groups","jump","alphabet","two","different","views","collection","making","easier","navigate","through","large","collections"],"border":["border","frame","outline","container","draws","boundary","line","background","both","around","another"],"canvas":["canvas","absolute","position","layout","overlay","panel","supports","positioning","child","relative","top","left","corner"],"expander":["expander","expand","collapse","accordion","section","details","container","header","expanded","body"],"grid":["grid","layout","rows","columns","table","panel","supports","arranging","child"],"relativepanel":["relativepanel","relative","layout","adaptive","responsive","panel","uses","relationships","define"],"splitview":["splitview","split","pane","panel","sidebar","container","areas","multiple","options"],"stackpanel":["stackpanel","stack","vertical","horizontal","layout","panel","arranges","child","single","line","oriented","horizontally","vertically"],"variablesizedwrapgrid":["variablesizedwrapgrid","wrap","grid","variable","tile","layout","panel","supports","arranging","child","rows","columns","span","multiple"],"viewbox":["viewbox","scale","stretch","fit","resize","container","scales","specified","size"],"breadcrumbbar":["breadcrumbbar","breadcrumb","path","trail","navigation","folder","taken","current","location"],"navigationview":["navigationview","navigation","nav","sidebar","hamburger","menu","pane","common","vertical","layout","top-level","areas","via","collapsible"],"pivot":["pivot","tabs","swipe","header","information","different","sources","tabbed","view"],"selectorbar":["selectorbar","selector","segment","segmented","tab","information","small","different","sources","pick","one"],"tabview":["tabview","tab","tabs","document","closable","add tab","browser","collection","several","documents"],"animatedvisualplayer":["animatedvisualplayer","animation","lottie","player","render","playback","motion","graphics"],"captureelementpreview":["captureelementpreview","camera","capture","preview","webcam","doing"],"image":["image","picture","photo","bitmap"],"mapcontrol":["mapcontrol","map","location","geography","bing","symbolic","earth"],"mediaplayerelement":["mediaplayerelement","media","video","player","playback","image"],"personpicture":["personpicture","avatar","profile","picture","initials","person","contact"],"sound":["sound","audio","spatial","feedback","code-behind","api","enables","sounds"],"webview2":["webview2","webview","web","html","browser","edge","chromium","javascript","microsoft","hosts"],"acrylic":["acrylic","blur","transparent","material","background","mica","translucent","recommended","panel","backgrounds"],"animatedicon":["animatedicon","animated","icon","lottie","motion","animates","interacts"],"compactsizing":["compactsizing","compact","dense","spacing","small","resource","dictionary","enable","sizing"],"iconelement":["iconelement","icon","symbol","glyph","font icon","different","image","types"],"line":["line","draw","stroke","shape","draws","straight","two","points"],"shape":["shape","rectangle","ellipse","line","polygon","drawing","draw","shapes","ellipses","rectangles","polygons"],"radialgradientbrush":["radialgradientbrush","gradient","radial","brush","background","gradients"],"systembackdrops":["systembackdrops","mica","acrylic","backdrop","material","transparent","system","backdrops","windows"],"themeshadow":["themeshadow","shadow","elevation","depth","drop shadow","adds","depth-aware","system","lighting"],"autosuggestbox":["autosuggestbox","autosuggest","autocomplete","search","filter","suggestion","suggestions","typing"],"numberbox":["numberbox","number","numeric","spin","increment","decimal","integer","text","input","evaluation","algebraic","equations"],"passwordbox":["passwordbox","password","secret","login","credential","entering","passwords"],"richeditbox":["richeditbox","rich text","editor","formatting","bold","italic","rtf","rich","text","editing","supports","formatted","hyperlinks","other"],"richtextblock":["richtextblock","rich text","formatted","paragraph","text","hyperlinks","inline","images","other","rich"],"textblock":["textblock","text","label","typography","lightweight","displaying","small","amounts"],"textbox":["textbox","text","input","field","edit","placeholder","single-line","multi-line","plain"],"xamlcompinterop":["xamlcompinterop","composition","interop","visual","layer","animate","expressions","natural","animations"],"connectedanimation":["connectedanimation","connected","animation","transition","shared element","animations","continue","during","page","navigation","help","maintain","context","views"],"easingfunction":["easingfunction","easing","animation","curve","timing","way","manipulate","velocity","animates"],"implicittransition":["implicittransition","implicit","animation","transition","automatic","transitions","automatically","animate","changes"],"pagetransition":["pagetransition","page","transition","navigation","animation","transitions","visual","feedback","relationship","pages"],"themetransition":["themetransition","theme","transition","animation","entrance","transitions","pre-packaged","easy-to-apply","animations"],"parallaxview":["parallaxview","parallax","scroll","depth","effect","container","provides","scrolling"],"appwindow":["appwindow","window","size","position","presenter","fullscreen","compact","flexible","customizable","management","system","development"],"appwindowtitlebar":["appwindowtitlebar","provides","window","title","bar"],"createmultiplewindows":["multiwindow","multiple windows","new window","spawn","showing","creation","single-threaded","top","level","windows"],"titlebar":["titlebar","title bar","drag region","caption","chromeless","showing"],"clipboard":["clipboard","copy","paste","cut","data","text","images","files","system"],"contentisland":["contentisland","island","interop","hosting","hwnd","contentislands","host","other","frameworks"],"storagepickers":["storagepickers","file","picker","open","save","folder","select","files","folders","modern","system","pickers"],"appnotification":["appnotification","notification","toast","push","alert","send","notifications","appear","action","center","popups"],"badgenotificationmanager":["badgenotificationmanager","badge","notification","tile","count","numeric","icon","badges","taskbar"],"jumplist":["jumplist","add","tasks","groups","taskbar","jump","list"],"appbarbuttonpage":["appbarbutton","appbar","button","toolbar","icon"],"jumplist-gallery":["jumplist","taskbar","recent","pin","start"]} \ No newline at end of file +{"xamlresources":["xamlresources","reusable","definitions","shared","ensure","consistency","maintainability"],"xamlstyles":["xamlstyles","style","reusable","settings","define","consistent","design"],"binding":["binding","connecting","data","automatic","synchronization","updates"],"templates":["templates","customize","visuals","layouts","data","presentation"],"customusercontrols":["customusercontrols","reusable","components","appearance"],"customxamlconditionals":["customxamlconditionals","conditions","define","evaluated","parse","time","ixaml","condition","conditionally","include","markup","application"],"scratchpad":["scratchpad","scratch","pad","testing","markup"],"color":["color","balanced","design","creates","clarity","aesthetic","harmony"],"geometry":["geometry","clear","geometric","design","ensures","visual","coherence","structure"],"iconography":["iconography","icons","visual","design","language","communicate","information","quickly","effectively"],"spacing":["spacing","thoughtful","design","enhances","readability","flow"],"typography":["typography","design","guides","attention","intuitive","fonts","hierarchy"],"accessibilitycolorcontrast":["accessibilitycolorcontrast","high","contrast","design","ensures","accessibility","users"],"accessibilitykeyboard":["accessibilitykeyboard","keyboard-friendly","design","enables","seamless","interactions"],"accessibilityscreenreader":["accessibilityscreenreader","inclusive","design","ensures","meaningful","assistive","technologies"],"appbarbutton":["appbarbutton","button","styled","commandbar","toolbar"],"appbarseparator":["appbarseparator","separator","divider","toolbar","vertical","line","visually","separate","groups","commands","bar"],"appbartogglebutton":["appbartogglebutton","appbar","toggle","toolbar","button","off","indeterminate","checkbox","styled","bar","other","specialized"],"commandbar":["commandbar","command","toolbar","appbar","action bar","application-specific","commands","handles","resizing","contents","button","buttons","actions","menu"],"commandbarflyout":["commandbarflyout","commandbar","flyout","context","toolbar","mini-toolbar","proactive","commands","optional","menu"],"menubar":["menubar","menu","bar","file menu","edit menu","classic","allowing","menuitems","menuflyoutitems"],"menuflyout":["menuflyout","context menu","right-click","flyout","menu","contextual","list","commands","dropdown"],"swipecontrol":["swipecontrol","swipe","gesture","reveal","action","delete","touch","quick","menu","actions"],"standarduicommand":["standarduicommand","command","standard","delete","copy","paste","built-in","xamluicommand","commonly","save"],"xamluicommand":["xamluicommand","command","keyboard","accelerator","define","feel","given"],"flipview":["flipview","flip","carousel","slideshow","image","swipe","collection","one","time"],"gridview":["gridview","grid","gallery","tile","image gallery","wrap","collection","rows","columns","virtualized"],"itemsrepeater":["itemsrepeater","repeater","custom layout","virtualized","flexible","grid","gallery","image","uniformgridlayout","primitive","data-driven","layouts"],"itemsview":["itemsview","collection","layouts","uniformgridlayout","stacklayout","linedflowlayout","swappable","grid","gallery","image","virtualized","flexible","selection","invocation"],"listbox":["listbox","list","select","inline"],"listview":["listview","list","scroll","select","virtualized","data","collection","vertical","table","columns","column","sort","sorting","editable","datagrid","rows","details"],"pulltorefresh":["pulltorefresh","pull","refresh","swipe down","reload","provides","ability","collection","list","grid","contents"],"treeview":["treeview","tree","hierarchy","folder","node","expand","collapse","navigation","sidebar","lazy","hierarchical","drag","drop","drag and drop","reorder","nodes","nested"],"calendardatepicker":["calendardatepicker","calendar","date","picker","popup","users","datepicker"],"calendarview":["calendarview","calendar","date","month","schedule","choose"],"datepicker":["datepicker","date","picker","day","month","year"],"timepicker":["timepicker","time","picker","hour","minute","clock","configurable"],"button":["button","click","action","press","responds","raises","event"],"dropdownbutton":["dropdownbutton","dropdown","button","menu","split","flyout","choices","clicked"],"hyperlinkbutton":["hyperlinkbutton","hyperlink","link","url","navigate","button","appears","uri","handle","click","event"],"repeatbutton":["repeatbutton","repeat","hold","increment","button","raises","click","event","repeatedly","time","pressed","until","released"],"togglebutton":["togglebutton","toggle","button","off","switched","two","states","checkbox"],"splitbutton":["splitbutton","split","button","dropdown","default action","two-part","flyout","secondary","part","clicked"],"togglesplitbutton":["togglesplitbutton","toggle","split","button","version","splitbutton","activation","target","toggles","off"],"checkbox":["checkbox","check","toggle","boolean","option","select","clear","group","multiple","multiselect"],"colorpicker":["colorpicker","color","picker","palette","hex","rgb","selectable","spectrum"],"combobox":["combobox","combo","dropdown","select","picker","list","drop-down"],"radiobutton":["radiobutton","radio","option","select one","group","select","single"],"ratingcontrol":["ratingcontrol","rating","stars","score","review","rate","something"],"slider":["slider","range","drag","track","select","moving","thumb","along"],"toggleswitch":["toggleswitch","toggle","switch","off","toggled","states"],"infobadge":["infobadge","badge","count","notification","dot","non-intrusive","notifications","bring","focus","area"],"infobar":["infobar","info","warning","error","success","notification","banner","alert","inline","message","app-wide","status","change","information","snackbar","toast"],"progressbar":["progressbar","progress","loading","bar","determinate","indeterminate","apps","task","performing","ongoing","work","doesn","block","interaction"],"progressring":["progressring","progress","loading","spinner","ring","circular","apps","task","performing","ongoing","work","block","interaction"],"tooltip":["tooltip","tip","hover","help","information","pop-up","window"],"contentdialog":["contentdialog","dialog","modal","popup","confirm","alert","save","discard","box","customized"],"flyout":["flyout","popup","lightweight","dismiss","tooltip","contextual","information","enables","interaction"],"popup":["popup","overlay","floating","layer","temporary","existing"],"teachingtip":["teachingtip","teaching","tip","tutorial","onboarding","hint","callout","content-rich","flyout","guiding","users","enabling","moments","popup","snackbar"],"annotatedscrollbar":["annotatedscrollbar","scrollbar","annotated","labels","markers","extends","regular","vertical","navigation","large","collections"],"pipspager":["pipspager","pager","dots","pagination","indicator","navigate","paginated","collection","page","numbers","need","visually","known"],"scrollview":["scrollview","scroll","pan","zoom","container"],"scrollviewer":["scrollviewer","scroll","pan","zoom","classic","container"],"semanticzoom":["semanticzoom","zoom","groups","jump","alphabet","two","different","views","collection","making","easier","navigate","large","collections"],"border":["border","frame","outline","container","draws","boundary","line","background","both","around","card"],"canvas":["canvas","absolute","position","overlay","panel","supports","positioning","child","relative","top","left","corner"],"expander":["expander","expand","collapse","accordion","section","details","container","expanded","body","collapsible","card"],"grid":["grid","rows","columns","table","panel","supports","arranging","child","container"],"relativepanel":["relativepanel","relative","adaptive","responsive","panel","uses","relationships","define"],"splitview":["splitview","split","pane","panel","sidebar","container","areas","multiple","drawer","side panel","hamburger","splitter"],"stackpanel":["stackpanel","stack","vertical","horizontal","panel","arranges","child","single","line","oriented","horizontally","vertically","container"],"variablesizedwrapgrid":["variablesizedwrapgrid","wrap","grid","variable","tile","panel","supports","arranging","child","rows","columns","span","multiple"],"viewbox":["viewbox","scale","stretch","fit","resize","container","scales","specified","size"],"breadcrumbbar":["breadcrumbbar","breadcrumb","path","trail","navigation","folder","taken","current","location"],"navigationview":["navigationview","navigation","nav","sidebar","hamburger","menu","pane","common","vertical","top-level","areas","via","collapsible","drawer"],"pivot":["pivot","tabs","swipe","information","different","sources","tabbed","view"],"selectorbar":["selectorbar","selector","segment","segmented","tab","information","small","different","sources","one","tabs"],"tabview":["tabview","tab","tabs","tabbed","document","documents","closable","add tab","browser","collection","reorderable","draggable"],"animatedvisualplayer":["animatedvisualplayer","animation","lottie","player","render","playback","motion","graphics"],"captureelementpreview":["captureelementpreview","camera","capture","preview","webcam","doing"],"image":["image","picture","photo","bitmap"],"mapcontrol":["mapcontrol","map","location","geography","bing","symbolic","earth"],"mediaplayerelement":["mediaplayerelement","media","video","player","playback","image"],"personpicture":["personpicture","avatar","profile","picture","initials","person","contact"],"sound":["sound","audio","spatial","feedback","code-behind","api","enables","sounds"],"webview2":["webview2","webview","web","html","browser","edge","chromium","javascript","microsoft","hosts"],"acrylic":["acrylic","blur","transparent","material","background","mica","translucent","recommended","panel","backgrounds"],"animatedicon":["animatedicon","animated","icon","lottie","motion","animates","interacts"],"compactsizing":["compactsizing","compact","dense","spacing","small","resource","dictionary","enable","sizing"],"iconelement":["iconelement","icon","symbol","glyph","font icon","different","image"],"line":["line","draw","stroke","shape","draws","straight","two","points"],"shape":["shape","rectangle","ellipse","line","polygon","drawing","draw","shapes","ellipses","rectangles","polygons"],"radialgradientbrush":["radialgradientbrush","gradient","radial","brush","background","gradients"],"systembackdrops":["systembackdrops","mica","acrylic","backdrop","material","transparent","system","backdrops","windows"],"systembackdropelement":["systembackdropelement","system","backdrop","host","materials","applies","mica","acrylic","specific","areas","inside","tree"],"themeshadow":["themeshadow","shadow","elevation","depth","drop shadow","adds","depth-aware","system","lighting"],"autosuggestbox":["autosuggestbox","autosuggest","autocomplete","search","filter","suggestion","suggestions","typing"],"numberbox":["numberbox","number","numeric","spin","increment","decimal","integer","evaluation","algebraic","equations"],"passwordbox":["passwordbox","password","secret","login","credential","entering","passwords"],"richeditbox":["richeditbox","rich text","editor","formatting","bold","italic","rtf","rich","editing","supports","formatted","hyperlinks","other"],"richtextblock":["richtextblock","rich text","formatted","paragraph","hyperlinks","inline","images","other","rich"],"textblock":["textblock","label","typography","lightweight","small","amounts"],"textbox":["textbox","field","edit","placeholder","single-line","multi-line","plain","search","editor"],"xamlcompinterop":["xamlcompinterop","composition","interop","visual","layer","animate","expressions","natural","animations"],"connectedanimation":["connectedanimation","connected","animation","transition","shared element","animations","continue","during","page","navigation","help","context","views"],"easingfunction":["easingfunction","easing","animation","curve","timing","way","manipulate","velocity","animates"],"implicittransition":["implicittransition","implicit","animation","transition","automatic","transitions","automatically","animate"],"pagetransition":["pagetransition","page","transition","navigation","animation","transitions","visual","feedback","relationship","pages"],"themetransition":["themetransition","theme","transition","animation","entrance","transitions","pre-packaged","easy-to-apply","animations"],"parallaxview":["parallaxview","parallax","scroll","depth","container","provides","scrolling"],"appwindow":["appwindow","window","size","position","presenter","fullscreen","compact","flexible","customizable","management","system","development"],"appwindowtitlebar":["appwindowtitlebar","provides","window","title","bar"],"createmultiplewindows":["multiwindow","multiple windows","new window","spawn","showing","creation","single-threaded","top","level","windows"],"titlebar":["titlebar","title bar","drag region","caption","chromeless","showing"],"clipboard":["clipboard","copy","paste","cut","data","images","files","system"],"contentisland":["contentisland","island","interop","hosting","hwnd","contentislands","host","other","frameworks"],"storagepickers":["storagepickers","file","picker","open","save","folder","select","files","folders","system","pickers"],"appnotification":["appnotification","notification","toast","push","alert","send","notifications","appear","action","center","popups"],"badgenotificationmanager":["badgenotificationmanager","badge","notification","tile","count","numeric","icon","badges","taskbar"],"jumplist":["jumplist","add","tasks","groups","taskbar","jump","list"],"wrappanel":["wrappanel","wrap","panel","positions","child","left","right","top","bottom","wrapping","next"],"appbarbuttonpage":["appbarbutton","appbar","button","toolbar","icon"],"jumplist-gallery":["jumplist","taskbar","recent","pin","start"]} \ No newline at end of file diff --git a/src/tools/winui-search/Data/toolkit-keywords.json b/src/tools/winui-search/Data/toolkit-keywords.json new file mode 100644 index 0000000..d3ac712 --- /dev/null +++ b/src/tools/winui-search/Data/toolkit-keywords.json @@ -0,0 +1 @@ +{"advancedcollectionview":["advancedcollectionview","collectionviewsource","data","sorting","filtering","collections"],"incrementalloadingcollection":["incrementalloadingcollection","data","incremental","loading","collections"],"colorpicker":["colorpicker"],"headeredcontentcontrol":["headeredcontentcontrol","headered"],"headereditemscontrol":["headereditemscontrol"],"headeredtreeview":["headeredtreeview","treeview"],"imagecropper":["imagecropper"],"metadatacontrol":["metadatacontrol","metadata"],"constrainedbox":["viewbox","content decorator","constrainedbox"],"dockpanel":["dockpanel"],"staggeredlayout":["staggeredpanel","staggeredlayout"],"staggeredpanel":["staggeredpanel","staggeredlayout"],"switchpresenter":["switch","logic","switchpresenter","contentpresenter","visibility","triggers","converters"],"uniformgrid":["uniformgrid","grid","responsive"],"wraplayout":["wraplayout"],"wrappanel":["wrappanel"],"radialgauge":["radialgauge"],"rangeselector":["rangeselector","double slider","slider rangeslider"],"richsuggestbox":["richsuggestbox"],"segmented":["segmentedcontrol","segmented"],"settingscard":["settingscard","settings"],"settingsexpander":["settingscard","settingsexpander","expander","settings"],"contentsizer":["contentsizer","sizerbase","expander","splitter"],"gridsplitter":["contentsizer","sizerbase","expander"],"propertysizer":["propertysizer","sizerbase","navigationview","splitter"],"tabbedcommandbar":["tabbedcommandbar","commandbar","ribbon"],"tokenizingtextbox":["tokenizingtextbox","tokens"],"colorpickerbutton":["colorpicker"]} \ No newline at end of file diff --git a/src/tools/winui-search/Data/toolkit-scenarios.json b/src/tools/winui-search/Data/toolkit-scenarios.json index 4ff3aee..6946515 100644 --- a/src/tools/winui-search/Data/toolkit-scenarios.json +++ b/src/tools/winui-search/Data/toolkit-scenarios.json @@ -1 +1 @@ -[{"id":"advancedcollectionview-basic-usage","controlId":"advancedcollectionview","controlName":"AdvancedCollectionView","headerText":"Basic usage","xaml":"\u003CGrid ColumnSpacing=\u002212\u0022\n RowSpacing=\u00228\u0022\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition /\u003E\n \u003CColumnDefinition /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition /\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CStackPanel Grid.Column=\u00220\u0022\n Grid.ColumnSpan=\u00222\u0022\n Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBox\n PlaceholderText=\u0022Add new item\u0022 /\u003E\n \u003CButton\n VerticalAlignment=\u0022Bottom\u0022\n Click=\u0022Add_Click\u0022\n Content=\u0022Add\u0022\n Style=\u0022{StaticResource AccentButtonStyle}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003CTextBlock Grid.Row=\u00221\u0022\n Text=\u0022Original list\u0022 /\u003E\n \u003CGrid Grid.Row=\u00222\u0022\u003E\n \u003CListView\n ItemTemplate=\u0022{StaticResource EmployeeDataTemplate}\u0022\n ItemsSource=\u0022{x:Bind EmployeeCollection}\u0022 /\u003E\n \u003C/Grid\u003E\n \u003CTextBlock Grid.Row=\u00221\u0022\n Grid.Column=\u00221\u0022\n Text=\u0022Sorted and filtered list (bound via AdvancedCollectionView)\u0022 /\u003E\n \u003CGrid Grid.Row=\u00222\u0022\n Grid.Column=\u00221\u0022\u003E\n \u003CListView\n ItemTemplate=\u0022{StaticResource EmployeeDataTemplate}\u0022\n ItemsSource=\u0022{x:Bind CollectionView}\u0022 /\u003E\n \u003C/Grid\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Collections;\nusing System.Diagnostics.CodeAnalysis;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public ObservableCollection\u003CEmployee\u003E EmployeeCollection { get; private set; }\n\n public AdvancedCollectionView CollectionView { get; private set; }\n\n public YourPage()\n {\n this.InitializeComponent();\n Setup();\n }\n\n [MemberNotNull(nameof(EmployeeCollection))]\n [MemberNotNull(nameof(CollectionView))]\n private void Setup()\n {\n // left list\n EmployeeCollection = new()\n {\n new() { Name = \u0022Staff\u0022 },\n new() { Name = \u002242\u0022 },\n new() { Name = \u0022Swan\u0022 },\n new() { Name = \u0022Orchid\u0022 },\n new() { Name = \u002215\u0022 },\n new() { Name = \u0022Flame\u0022 },\n new() { Name = \u002216\u0022 },\n new() { Name = \u0022Arrow\u0022 },\n new() { Name = \u0022Tempest\u0022 },\n new() { Name = \u002223\u0022 },\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Collections","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"incrementalloadingcollection-basic-usage","controlId":"incrementalloadingcollection","controlName":"IncrementalLoadingCollection","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022*\u0022 /\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CStackPanel\u003E\n \u003CButton\n Click=\u0022{x:Bind PeopleSource.RefreshAsync}\u0022\n Content=\u0022Refresh collection\u0022\n Style=\u0022{StaticResource AccentButtonStyle}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003CGrid Grid.Row=\u00222\u0022\u003E\n \u003CListView\n ItemsSource=\u0022{x:Bind PeopleSource, Mode=OneWay}\u0022\u003E\n \u003CListView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:Person\u0022\u003E\n \u003CGrid\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 /\u003E\n \u003CColumnDefinition /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003CImage\n Source=\u0022ms-appx:///Assets/AppIcon.png\u0022 /\u003E\n \u003CTextBlock Grid.Column=\u00221\u0022\n Text=\u0022{x:Bind Name}\u0022 /\u003E\n \u003C/Grid\u003E\n \u003C/DataTemplate\u003E\n \u003C/ListView.ItemTemplate\u003E\n \u003C/ListView\u003E\n \u003C/Grid\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Collections;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n // IncrementalLoadingCollection can be bound to a GridView or a ListView. In this case it is a ListView called PeopleListView.\n public IncrementalLoadingCollection\u003CPeopleSource, Person\u003E PeopleSource { get; set; } = new(new PeopleSource());\n\n public YourPage()\n {\n this.InitializeComponent();\n }\n}\n\n/// \u003Csummary\u003E\n/// A sample implementation of the \u003Csee cref=\u0022IIncrementalSource{TSource}\u0022/\u003E interface.\n/// \u003C/summary\u003E\n/// \u003Cseealso cref=\u0022IIncrementalSource{TSource}\u0022/\u003E\npublic partial class PeopleSource : IIncrementalSource\u003CPerson\u003E\n{\n private readonly List\u003CPerson\u003E _people;\n\n /// \u003Csummary\u003E\n /// Initializes a new instance of the \u003Csee cref=\u0022PeopleSource\u0022/\u003E class.\n /// \u003C/summary\u003E\n public PeopleSource()\n {\n // Creates an example collection.\n _people = new List\u003CPerson\u003E();\n\n for (int i = 1; i \u003C= 200; i\u002B\u002B)\n {\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Collections","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"colorpickerbutton-basic-usage","controlId":"colorpickerbutton","controlName":"ColorPickerButton","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003Ccontrols:ColorPickerButton\n SelectedColor=\u0022LightBlue\u0022 /\u003E\n \u003C/Grid\u003E","csharp":"using ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.ColorPicker","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"colorpicker-basic-usage","controlId":"colorpicker","controlName":"ColorPicker","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003Ccontrols:ColorPicker\n ColorSpectrumShape=\u0022{x:Bind local:ColorPickerSample.ConvertStringToColorSpectrumShape(SpectrumShape), Mode=OneWay}\u0022\n IsAlphaEnabled=\u0022{x:Bind AlphaEnabled, Mode=OneWay}\u0022\n IsAlphaSliderVisible=\u0022{x:Bind AlphaSlider, Mode=OneWay}\u0022\n IsColorChannelTextInputVisible=\u0022{x:Bind ColorChannel, Mode=OneWay}\u0022\n IsColorPaletteVisible=\u0022{x:Bind ColorPalette, Mode=OneWay}\u0022\n IsColorSliderVisible=\u0022{x:Bind ColorSlider, Mode=OneWay}\u0022\n IsColorSpectrumVisible=\u0022{x:Bind SpectrumVisible, Mode=OneWay}\u0022\n ShowAccentColors=\u0022{x:Bind AccentColors, Mode=OneWay}\u0022\n Color=\u0022LightBlue\u0022 /\u003E\n \u003C/Grid\u003E","csharp":"using ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n\n // TODO: See https://github.com/CommunityToolkit/Labs-Windows/issues/149\n public static ColorSpectrumShape ConvertStringToColorSpectrumShape(string shape) =\u003E shape switch\n {\n \u0022Ring\u0022 =\u003E ColorSpectrumShape.Ring,\n \u0022Box\u0022 =\u003E ColorSpectrumShape.Box,\n _ =\u003E throw new System.NotImplementedException(),\n };\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.ColorPicker","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"headeredcontentcontrol-complex","controlId":"headeredcontentcontrol","controlName":"HeaderedContentControl","headerText":"Complex","xaml":"\u003Ccontrols:HeaderedContentControl\n Header=\u0022Complex content\u0022\u003E\n \u003CRelativePanel\u003E\n \u003CImage\n Source=\u0022ms-appx:///Assets/Sunny.png\u0022 /\u003E\n \u003CStackPanel\n RelativePanel.RightOf=\u0022Icon\u0022\u003E\n \u003CTextBlock Text=\u002265\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003CTextBlock FontSize=\u002212\u0022\n Foreground=\u0022{ThemeResource TextFillColorSecondaryBrush}\u0022\n RelativePanel.AlignLeftWith=\u0022Temp\u0022\n RelativePanel.Below=\u0022Temp\u0022\n Text=\u0022Rainy\u0022 /\u003E\n \u003C/RelativePanel\u003E\n \u003C/controls:HeaderedContentControl\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.HeaderedControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"headeredcontentcontrol-image","controlId":"headeredcontentcontrol","controlName":"HeaderedContentControl","headerText":"Image","xaml":"\u003Ccontrols:HeaderedContentControl Grid.Row=\u00221\u0022\n Grid.Column=\u00220\u0022\n Header=\u0022Image content\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/BisonBadlandsChillin.jpg\u0022 /\u003E\n \u003C/controls:HeaderedContentControl\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.HeaderedControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"headeredcontentcontrol-basic-usage","controlId":"headeredcontentcontrol","controlName":"HeaderedContentControl","headerText":"Basic usage","xaml":"\u003Ccontrols:HeaderedContentControl\n HorizontalContentAlignment=\u0022Stretch\u0022\n VerticalContentAlignment=\u0022Stretch\u0022\n Header=\u0022Rectangle content\u0022\u003E\n \u003CRectangle\n Fill=\u0022{ThemeResource AccentFillColorDefaultBrush}\u0022 /\u003E\n \u003C/controls:HeaderedContentControl\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.HeaderedControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"headeredcontentcontrol-text","controlId":"headeredcontentcontrol","controlName":"HeaderedContentControl","headerText":"Text","xaml":"\u003Ccontrols:HeaderedContentControl\n Header=\u0022TextBlock content header\u0022\u003E\n \u003CTextBlock FontSize=\u002212\u0022\n Foreground=\u0022{ThemeResource TextFillColorSecondaryBrush}\u0022\n Text=\u0022Some more text about this content\u0022\n TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003C/controls:HeaderedContentControl\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.HeaderedControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"headereditemscontrol-basic-usage","controlId":"headereditemscontrol","controlName":"HeaderedItemsControl","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition /\u003E\n \u003CColumnDefinition /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003Ccontrols:HeaderedItemsControl Footer=\u0022Footer 1\u0022\n Header=\u0022Header 1\u0022\n ItemsSource=\u0022{x:Bind Items, Mode=OneWay}\u0022 /\u003E\n \u003Ccontrols:HeaderedItemsControl Grid.Column=\u00221\u0022\n Footer=\u0022Footer 2\u0022\n Header=\u0022Header 2\u0022\n ItemsSource=\u0022{x:Bind Items, Mode=OneWay}\u0022\u003E\n \u003Ccontrols:HeaderedItemsControl.HeaderTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CTextBlock FontWeight=\u0022SemiBold\u0022\n Text=\u0022{Binding}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/controls:HeaderedItemsControl.HeaderTemplate\u003E\n \u003Ccontrols:HeaderedItemsControl.FooterTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CTextBlock FontWeight=\u0022SemiBold\u0022\n Text=\u0022{Binding}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/controls:HeaderedItemsControl.FooterTemplate\u003E\n \u003CItemsControl.ItemTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CTextBlock Foreground=\u0022{ThemeResource TextFillColorSecondaryBrush}\u0022\n Text=\u0022{Binding}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/ItemsControl.ItemTemplate\u003E\n \u003C/controls:HeaderedItemsControl\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n Items = \u0022The quick brown fox jumped over the lazy river\u0022.Split(\u0027 \u0027);\n }\n public IEnumerable\u003Cstring\u003E Items { get; }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.HeaderedControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"headeredtreeview-basic-usage","controlId":"headeredtreeview","controlName":"HeaderedTreeView","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003Ccontrols:HeaderedTreeView Footer=\u0022Footer\u0022\n Header=\u0022Header\u0022\n ItemsSource=\u0022{x:Bind Items, Mode=OneWay}\u0022\u003E\n \u003Ccontrols:HeaderedTreeView.HeaderTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CTextBlock FontWeight=\u0022SemiBold\u0022\n Text=\u0022{Binding}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/controls:HeaderedTreeView.HeaderTemplate\u003E\n \u003Ccontrols:HeaderedTreeView.FooterTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CTextBlock FontWeight=\u0022SemiBold\u0022\n Text=\u0022{Binding}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/controls:HeaderedTreeView.FooterTemplate\u003E\n \u003Ccontrols:HeaderedTreeView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:ExplorerItem\u0022\u003E\n \u003Cmuxc:TreeViewItem Content=\u0022{x:Bind Name}\u0022\n IsExpanded=\u0022True\u0022\n ItemsSource=\u0022{x:Bind Children}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/controls:HeaderedTreeView.ItemTemplate\u003E\n \u003C/controls:HeaderedTreeView\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n Items = GetData();\n }\n public ObservableCollection\u003CExplorerItem\u003E Items { get; }\n\n private ObservableCollection\u003CExplorerItem\u003E GetData()\n {\n var list = new ObservableCollection\u003CExplorerItem\u003E();\n ExplorerItem folder1 = new ExplorerItem()\n {\n Name = \u0022Work Documents\u0022,\n Children =\n {\n new ExplorerItem()\n {\n Name = \u0022Functional Specifications\u0022,\n Children =\n {\n new ExplorerItem()\n {\n Name = \u0022TreeView spec\u0022,\n }\n }\n },\n new ExplorerItem()\n {\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.HeaderedControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"imagecropper-overlay","controlId":"imagecropper","controlName":"ImageCropper","headerText":"Overlay","xaml":"\u003CGrid\u003E\n \u003Ccontrols:ImageCropper\n AspectRatio=\u0022{x:Bind local:ImageCropperSample.ConvertStringToAspectRatio(AspectRatioSetting), Mode=OneWay}\u0022\n CropShape=\u0022{x:Bind local:ImageCropperSample.ConvertStringToCropShape(CropShapeSetting), Mode=OneWay}\u0022\n ThumbPlacement=\u0022{x:Bind local:ImageCropperSample.ConvertStringToThumbPlacement(ThumbPlacementSetting), Mode=OneWay}\u0022\u003E\n \u003Ccontrols:ImageCropper.Overlay\u003E\n \u003Cmedia:RadialGradientBrush\u003E\n \u003CGradientStop Offset=\u00220.75\u0022 Color=\u0022Transparent\u0022 /\u003E\n \u003CGradientStop Offset=\u00221\u0022 Color=\u0022DimGray\u0022 /\u003E\n \u003C/media:RadialGradientBrush\u003E\n \u003C/controls:ImageCropper.Overlay\u003E\n \u003C/controls:ImageCropper\u003E\n \u003C/Grid\u003E","csharp":"using Windows.Storage;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n\n _ = Load();\n }\n\n private async Task Load()\n {\n var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri(\u0022ms-appx:///Assets/Owl.jpg\u0022));\n await ImageCropper.LoadImageFromFile(file);\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.ImageCropper","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"imagecropper-basic-usage","controlId":"imagecropper","controlName":"ImageCropper","headerText":"Basic usage","xaml":"\u003CGrid RowSpacing=\u002224\u0022\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003Ccontrols:ImageCropper\n AspectRatio=\u0022{x:Bind local:ImageCropperSample.ConvertStringToAspectRatio(AspectRatioSetting), Mode=OneWay}\u0022\n CropShape=\u0022{x:Bind local:ImageCropperSample.ConvertStringToCropShape(CropShapeSetting), Mode=OneWay}\u0022\n ThumbPlacement=\u0022{x:Bind local:ImageCropperSample.ConvertStringToThumbPlacement(ThumbPlacementSetting), Mode=OneWay}\u0022 /\u003E\n \u003CStackPanel Grid.Row=\u00221\u0022\n Orientation=\u0022Horizontal\u0022\u003E\n \u003CButton Click=\u0022PickButton_Click\u0022\n Content=\u0022Pick image\u0022\n Style=\u0022{StaticResource AccentButtonStyle}\u0022 /\u003E\n \u003CButton Click=\u0022SaveButton_Click\u0022\n Content=\u0022Save\u0022\n Style=\u0022{StaticResource AccentButtonStyle}\u0022 /\u003E\n \u003CButton Click=\u0022ResetButton_Click\u0022\n Content=\u0022Reset\u0022\n Style=\u0022{StaticResource AccentButtonStyle}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\nusing Windows.Storage;\nusing Windows.Storage.Pickers;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n _ = Load();\n }\n\n private async Task Load()\n {\n var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri(\u0022ms-appx:///Assets/Owl.jpg\u0022));\n await imageCropper.LoadImageFromFile(file);\n }\n\n private async Task PickImage()\n {\n var filePicker = new FileOpenPicker\n {\n ViewMode = PickerViewMode.Thumbnail,\n SuggestedStartLocation = PickerLocationId.PicturesLibrary,\n FileTypeFilter =\n {\n \u0022.png\u0022, \u0022.jpg\u0022, \u0022.jpeg\u0022\n }\n };\n var file = await filePicker.PickSingleFileAsync();\n if (file != null \u0026\u0026 imageCropper != null)\n {\n await imageCropper.LoadImageFromFile(file);\n }\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.ImageCropper","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"metadatacontrol-basic-usage","controlId":"metadatacontrol","controlName":"MetadataControl","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022*\u0022 /\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003Ccontrols:MetadataControl\n AccessibleSeparator=\u0022{x:Bind AccessibleSeparator, Mode=OneWay}\u0022\n Separator=\u0022{x:Bind Separator, Mode=OneWay}\u0022 /\u003E\n \u003CTextBlock\n Grid.Row=\u00221\u0022\n FontWeight=\u0022SemiBold\u0022 /\u003E\n \u003CStackPanel Grid.Row=\u00222\u0022\n Orientation=\u0022Horizontal\u0022\u003E\n \u003CButton Click=\u0022AddLabel_Click\u0022\n Content=\u0022Add label\u0022 /\u003E\n \u003CButton Click=\u0022AddCommand_Click\u0022\n Content=\u0022Add command\u0022 /\u003E\n \u003CButton Click=\u0022Clear_Click\u0022\n Content=\u0022Clear\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\nusing System.Windows.Input;\n\nnamespace YourApp;\n\n/// \u003Csummary\u003E\n/// An example sample page of a custom control inheriting from Panel.\n/// \u003C/summary\u003E\npublic sealed partial class YourPage : Page\n{\n private static readonly string[] Labels = \u0022Lorem ipsum dolor sit amet consectetur adipiscing elit\u0022.Split(\u0027 \u0027);\n\n private readonly Random _random;\n private readonly ObservableCollection\u003CMetadataItem\u003E _units;\n private readonly DelegateCommand\u003Cobject\u003E _command;\n\n public YourPage()\n {\n this.InitializeComponent();\n _random = new Random();\n _units = new ObservableCollection\u003CMetadataItem\u003E\n {\n new MetadataItem { Label = GetRandomLabel() },\n new MetadataItem { Label = GetRandomLabel() }\n };\n _command = new DelegateCommand\u003Cobject\u003E(OnExecuteCommand);\n metadataControl.Items = _units;\n }\n\n private string GetRandomLabel() =\u003E Labels[_random!.Next(Labels.Length)];\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.MetadataControl","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"dockpanel-basic-usage","controlId":"dockpanel","controlName":"DockPanel","headerText":"Basic usage","xaml":"\u003Ccontrols:DockPanel\n Grid.Column=\u00221\u0022\n HorizontalSpacing=\u00225\u0022\n LastChildFill=\u0022False\u0022\n VerticalSpacing=\u00225\u0022\u003E\n \u003CStackPanel\n controls:DockPanel.Dock=\u0022Top\u0022\n Background=\u0022Black\u0022 /\u003E\n \u003CStackPanel\n controls:DockPanel.Dock=\u0022Left\u0022\n Background=\u0022Red\u0022 /\u003E\n \u003CStackPanel\n controls:DockPanel.Dock=\u0022Bottom\u0022\n Background=\u0022Green\u0022 /\u003E\n \u003CStackPanel\n controls:DockPanel.Dock=\u0022Right\u0022\n Background=\u0022Blue\u0022 /\u003E\n \u003C/controls:DockPanel\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\nusing Windows.UI;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n private static readonly Random Rand = new Random();\n\n public YourPage()\n {\n this.InitializeComponent();\n }\n\n private void ClearAllDock(object sender, RoutedEventArgs e)\n {\n SampleDockPanel.Children.Clear();\n SampleDockPanel.LastChildFill = false;\n }\n\n private void AddStretchDock(object sender, RoutedEventArgs e)\n {\n AddChild(Dock.Bottom, false, false);\n SampleDockPanel.LastChildFill = true;\n }\n\n private void AddBottomDock(object sender, RoutedEventArgs e)\n {\n AddChild(Dock.Bottom, false, true);\n }\n\n private void AddTopDock(object sender, RoutedEventArgs e)\n {\n AddChild(Dock.Top, false, true);\n }\n\n private void AddLeftDock(object sender, RoutedEventArgs e)\n {\n AddChild(Dock.Left, true, false);\n }\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Primitives","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"staggeredlayout-basic-usage","controlId":"staggeredlayout","controlName":"StaggeredLayout","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CScrollViewer\u003E\n \u003Cmuxc:ItemsRepeater\n ItemTemplate=\u0022{StaticResource StaggeredTemplate}\u0022\n ItemsSource=\u0022{x:Bind ColorsCollection, Mode=OneWay}\u0022\u003E\n \u003Cmuxc:ItemsRepeater.Layout\u003E\n \u003Ccontrols:StaggeredLayout ColumnSpacing=\u0022{x:Bind ColumnSpacing, Mode=OneWay}\u0022\n DesiredColumnWidth=\u0022{x:Bind DesiredColumnWidth, Mode=OneWay}\u0022\n ItemsStretch=\u0022{x:Bind local:StaggeredLayoutSample.ConvertStringToStaggeredLayoutItemsStretch(ItemsStretchProperty), Mode=OneWay}\u0022\n RowSpacing=\u0022{x:Bind RowSpacing, Mode=OneWay}\u0022 /\u003E\n \u003C/muxc:ItemsRepeater.Layout\u003E\n \u003C/muxc:ItemsRepeater\u003E\n \u003C/ScrollViewer\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\nusing Windows.UI;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public ObservableCollection\u003CColorItem\u003E ColorsCollection = new();\n public Random random;\n\n public YourPage()\n {\n this.InitializeComponent();\n\n random = new Random(DateTime.Now.Millisecond);\n for (int i = 0; i \u003C random.Next(100, 200); i\u002B\u002B)\n {\n var item = new ColorItem { Index = i, Height = random.Next(50, 250), Color = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)) };\n ColorsCollection.Add(item);\n }\n }\n\n public static StaggeredLayoutItemsStretch ConvertStringToStaggeredLayoutItemsStretch(string itemStretch) =\u003E itemStretch switch\n {\n \u0022None\u0022 =\u003E StaggeredLayoutItemsStretch.None,\n \u0022Fill\u0022 =\u003E StaggeredLayoutItemsStretch.Fill,\n _ =\u003E throw new System.NotImplementedException(),\n };\n}\n\npublic class ColorItem\n{\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Primitives","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"staggeredpanel-basic-usage","controlId":"staggeredpanel","controlName":"StaggeredPanel","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CGridView Name=\u0022GridView\u0022\n ItemTemplate=\u0022{StaticResource StaggeredTemplate}\u0022\n ItemsSource=\u0022{x:Bind ColorsCollection, Mode=OneWay}\u0022\u003E\n \u003CGridView.ItemsPanel\u003E\n \u003CItemsPanelTemplate\u003E\n \u003Ccontrols:StaggeredPanel ColumnSpacing=\u0022{Binding ColumnSpacing, ElementName=ThisSamplePage, Mode=OneWay}\u0022\n DesiredColumnWidth=\u0022{Binding DesiredColumnWidth, ElementName=ThisSamplePage, Mode=OneWay}\u0022\n RowSpacing=\u0022{Binding RowSpacing, ElementName=ThisSamplePage, Mode=OneWay}\u0022 /\u003E\n \u003C/ItemsPanelTemplate\u003E\n \u003C/GridView.ItemsPanel\u003E\n \u003C/GridView\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\nusing Windows.UI;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public ObservableCollection\u003CColorItem\u003E ColorsCollection = new();\n public Random random;\n\n public YourPage()\n {\n this.InitializeComponent();\n random = new Random(DateTime.Now.Millisecond);\n for (int i = 0; i \u003C random.Next(100, 200); i\u002B\u002B)\n {\n var item = new ColorItem { Index = i, Width = random.Next(50, 250), Height = random.Next(50, 250), Color = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)) };\n ColorsCollection.Add(item);\n }\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Primitives","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"uniformgrid-basic-usage","controlId":"uniformgrid","controlName":"UniformGrid","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003Ccontrols:UniformGrid Columns=\u0022{x:Bind (x:Int32)Columns, Mode=OneWay}\u0022\n FirstColumn=\u0022{x:Bind (x:Int32)FirstColumn, Mode=OneWay}\u0022\n Orientation=\u0022{x:Bind local:UniformGridSample.ConvertStringToOrientation(OrientationProperty), Mode=OneWay}\u0022\n Rows=\u0022{x:Bind (x:Int32)Rows, Mode=OneWay}\u0022\u003E\n \u003CBorder Grid.Row=\u00221\u0022\n Grid.RowSpan=\u0022{x:Bind (x:Int32)Item1RowSpan, Mode=OneWay}\u0022\n Grid.Column=\u00221\u0022\n Grid.ColumnSpan=\u0022{x:Bind (x:Int32)Item1ColumnSpan, Mode=OneWay}\u0022\n Background=\u0022AliceBlue\u0022\u003E\n \u003CTextBlock Text=\u00221\u0022 /\u003E\n \u003C/Border\u003E\n \u003CBorder Background=\u0022Cornsilk\u0022\u003E\n \u003CTextBlock Text=\u00222\u0022 /\u003E\n \u003C/Border\u003E\n \u003CBorder Background=\u0022DarkSalmon\u0022\u003E\n \u003CTextBlock Text=\u00223\u0022 /\u003E\n \u003C/Border\u003E\n \u003CBorder Background=\u0022Gainsboro\u0022\u003E\n \u003CTextBlock Text=\u00224\u0022 /\u003E\n \u003C/Border\u003E\n \u003CBorder Background=\u0022LightBlue\u0022\u003E\n \u003CTextBlock Text=\u00225\u0022 /\u003E\n \u003C/Border\u003E\n \u003CBorder Background=\u0022MediumAquamarine\u0022\u003E\n \u003CTextBlock Text=\u00226\u0022 /\u003E\n \u003C/Border\u003E\n \u003CBorder Background=\u0022MistyRose\u0022\u003E\n \u003CTextBlock Text=\u00227\u0022 /\u003E\n \u003C/Border\u003E\n \u003CBorder Background=\u0022LightCyan\u0022\u003E\n \u003CTextBlock Text=\u00228\u0022 /\u003E\n \u003C/Border\u003E\u003C/controls:UniformGrid\u003E\u003C/Grid\u003E\n\u003C!-- NOTE: XAML truncated \u2014 additional sibling elements omitted --\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n\n public static Orientation ConvertStringToOrientation(string orientation) =\u003E orientation switch\n {\n \u0022Horizontal\u0022 =\u003E Orientation.Horizontal,\n \u0022Vertical\u0022 =\u003E Orientation.Vertical,\n _ =\u003E throw new System.NotImplementedException(),\n };\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Primitives","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"wraplayout-basic-usage","controlId":"wraplayout","controlName":"WrapLayout","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CScrollViewer\u003E\n \u003Cmuxc:ItemsRepeater\n ItemTemplate=\u0022{StaticResource WrapTemplate}\u0022\n ItemsSource=\u0022{x:Bind ColorsCollection, Mode=OneWay}\u0022\u003E\n \u003Cmuxc:ItemsRepeater.Layout\u003E\n \u003Ccontrols:WrapLayout\n HorizontalSpacing=\u0022{x:Bind HorizontalSpacing, Mode=OneWay}\u0022\n VerticalSpacing=\u0022{x:Bind VerticalSpacing, Mode=OneWay}\u0022 /\u003E\n \u003C/muxc:ItemsRepeater.Layout\u003E\n \u003C/muxc:ItemsRepeater\u003E\n \u003C/ScrollViewer\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\nusing Windows.UI;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public ObservableCollection\u003CColorItem\u003E ColorsCollection = new();\n public Random random;\n\n public YourPage()\n {\n this.InitializeComponent();\n\n random = new Random(DateTime.Now.Millisecond);\n for (int i = 0; i \u003C random.Next(1000, 5000); i\u002B\u002B)\n {\n var item = new ColorItem { Index = i, Width = random.Next(50, 250), Height = random.Next(50, 250), Color = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)) };\n ColorsCollection.Add(item);\n }\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Primitives","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"wrappanel-basic-usage","controlId":"wrappanel","controlName":"WrapPanel","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022*\u0022 /\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CButton Click=\u0022AddButton_Click\u0022\n Content=\u0022Add random sized image\u0022 /\u003E\n \u003CButton Click=\u0022AddFixedBtn_Click\u0022\n Content=\u0022Add fixed sized image\u0022 /\u003E\n \u003CButton Click=\u0022SwitchBtn_Click\u0022\n Content=\u0022Switch Orientation\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003CListView Name=\u0022WrapPanelContainer\u0022\n Grid.Row=\u00221\u0022\n IsItemClickEnabled=\u0022True\u0022\n ItemClick=\u0022ItemControl_ItemClick\u0022\n ItemTemplate=\u0022{StaticResource PhotoTemplate}\u0022\n ItemsSource=\u0022{x:Bind WrapPanelCollection, Mode=OneWay}\u0022\u003E\n \u003CItemsControl.ItemsPanel\u003E\n \u003CItemsPanelTemplate\u003E\n \u003Ccontrols:WrapPanel\n HorizontalSpacing=\u0022{Binding HorizontalSpacing, ElementName=ThisSamplePage, Mode=OneWay}\u0022\n VerticalSpacing=\u0022{Binding VerticalSpacing, ElementName=ThisSamplePage, Mode=OneWay}\u0022 /\u003E\n \u003C/ItemsPanelTemplate\u003E\n \u003C/ItemsControl.ItemsPanel\u003E\n \u003C/ListView\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI;\n\n// TODO: Discuss with Uno folks about their own internal WrapPanel implementation.\nusing WrapPanel = CommunityToolkit.WinUI.Controls.WrapPanel;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n private static readonly Random Rand = new Random();\n private ObservableCollection\u003CPhotoDataItemWithDimension\u003E WrapPanelCollection = new();\n\n public YourPage()\n {\n this.InitializeComponent();\n }\n\n private void ItemControl_ItemClick(object sender, ItemClickEventArgs e)\n {\n var item = e.ClickedItem as PhotoDataItemWithDimension;\n if (item == null)\n {\n return;\n }\n\n WrapPanelCollection.Remove(item);\n }\n\n private void AddButton_Click(object sender, RoutedEventArgs e)\n {\n WrapPanelCollection.Add(new PhotoDataItemWithDimension\n {\n Category = \u0022Remove\u0022,\n Thumbnail = \u0022ms-appx:///Assets/BigFourSummerHeat.jpg\u0022,\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Primitives","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"radialgauge-basic-usage","controlId":"radialgauge","controlName":"RadialGauge","headerText":"Basic usage","xaml":"\u003CStackPanel\n Orientation=\u0022Horizontal\u0022\u003E\n \u003Ccontrols:RadialGauge\n IsInteractive=\u0022{x:Bind IsInteractive, Mode=OneWay}\u0022\n MaxAngle=\u0022{x:Bind (x:Int32)MaxAngle, Mode=OneWay}\u0022\n Maximum=\u0022240\u0022\n MinAngle=\u0022{x:Bind (x:Int32)MinAngle, Mode=OneWay}\u0022\n Minimum=\u00220\u0022\n NeedleLength=\u0022{x:Bind NeedleLength, Mode=OneWay}\u0022\n NeedleWidth=\u0022{x:Bind NeedleWidth, Mode=OneWay}\u0022\n ScalePadding=\u0022{x:Bind ScalePadding, Mode=OneWay}\u0022\n ScaleTickWidth=\u0022{x:Bind ScaleTickWidth, Mode=OneWay}\u0022\n ScaleWidth=\u0022{x:Bind ScaleWidth, Mode=OneWay}\u0022\n StepSize=\u0022{x:Bind StepSize, Mode=OneWay}\u0022\n TickLength=\u0022{x:Bind TickLength, Mode=OneWay}\u0022\n TickPadding=\u0022{x:Bind TickPadding, Mode=OneWay}\u0022\n TickSpacing=\u0022{x:Bind (x:Int32)TickSpacing, Mode=OneWay}\u0022\n TickWidth=\u0022{x:Bind TickWidth, Mode=OneWay}\u0022\n ValueStringFormat=\u0022N0\u0022\n Value=\u0022{x:Bind Value, Mode=OneWay}\u0022 /\u003E\n \u003C/StackPanel\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\n/// \u003Csummary\u003E\n/// An example sample page of a custom control inheriting from Panel.\n/// \u003C/summary\u003E\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.RadialGauge","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"rangeselector-basic-usage","controlId":"rangeselector","controlName":"RangeSelector","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003Ccontrols:RangeSelector\n Maximum=\u0022{x:Bind Maximum, Mode=OneWay}\u0022\n Minimum=\u0022{x:Bind Minimum, Mode=OneWay}\u0022\n Orientation=\u0022{x:Bind OrientationMode, Mode=OneWay}\u0022\n RangeEnd=\u0022100\u0022\n RangeStart=\u00220\u0022\n StepFrequency=\u0022{x:Bind StepFrequency, Mode=OneWay}\u0022 /\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.RangeSelector","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"richsuggestbox-multiple-prefixes","controlId":"richsuggestbox","controlName":"RichSuggestBox","headerText":"Multiple Prefixes","xaml":"\u003CStackPanel\u003E\n \u003Ccontrols:RichSuggestBox\n Header=\u0022RichSuggestBox that supports multiple prefixes (@ and #)\u0022\n ItemTemplateSelector=\u0022{StaticResource SuggestionTemplateSelector}\u0022\n Prefixes=\u0022@#\u0022\n SuggestionChosen=\u0022SuggestingBox_SuggestionChosen\u0022\n SuggestionRequested=\u0022SuggestingBox_SuggestionRequested\u0022 /\u003E\n \u003CListView\n ItemTemplate=\u0022{StaticResource TokenTemplate}\u0022 /\u003E\n \u003C/StackPanel\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\n#if WINAPPSDK\nusing Microsoft.UI;\nusing Microsoft.UI.Text;\n#else\nusing Windows.UI;\nusing Windows.UI.Text;\n#endif\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n private readonly List\u003CSampleEmailDataType\u003E _emailSamples = new List\u003CSampleEmailDataType\u003E()\n {\n new SampleEmailDataType() { FirstName = \u0022Marcus\u0022, FamilyName = \u0022Perryman\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Michael\u0022, FamilyName = \u0022Hawker\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Matt\u0022, FamilyName = \u0022Lacey\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Alexandre\u0022, FamilyName = \u0022Chohfi\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Filip\u0022, FamilyName = \u0022Wallberg\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Shane\u0022, FamilyName = \u0022Weaver\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Vincent\u0022, FamilyName = \u0022Gromfeld\u0022 },\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.RichSuggestBox","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"richsuggestbox-plain-text","controlId":"richsuggestbox","controlName":"RichSuggestBox","headerText":"Plain Text","xaml":"\u003CStackPanel\u003E\n \u003Ccontrols:RichSuggestBox\n ClipboardCopyFormat=\u0022PlainText\u0022\n ClipboardPasteFormat=\u0022PlainText\u0022\n DisabledFormattingAccelerators=\u0022All\u0022\n FlyoutBase.AttachedFlyout=\u0022{StaticResource TokenSelectedFlyout}\u0022\n Header=\u0022Plain text RichSuggestBox with on token pointer over flyout\u0022\n ItemTemplate=\u0022{StaticResource EmailTemplate}\u0022\n Prefixes=\u0022@\u0022\n SuggestionChosen=\u0022SuggestingBox_SuggestionChosen\u0022\n SuggestionRequested=\u0022SuggestingBox_SuggestionRequested\u0022\n TokenPointerOver=\u0022SuggestingBox_TokenPointerOver\u0022 /\u003E\n \u003CListView\n ItemTemplate=\u0022{StaticResource TokenTemplate}\u0022 /\u003E\n \u003C/StackPanel\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\n#if WINAPPSDK\nusing Microsoft.UI;\nusing Microsoft.UI.Dispatching;\nusing Microsoft.UI.Text;\n#else\nusing Windows.UI;\nusing Windows.System;\nusing Windows.UI.Text;\n#endif\n\nnamespace YourApp;\n\npublic sealed partial class RichSuggestBoxPlainTextSample : Page\n{\n private DispatcherQueue _dispatcherQueue;\n private readonly List\u003CSampleEmailDataType\u003E _emailSamples = new List\u003CSampleEmailDataType\u003E()\n {\n new SampleEmailDataType() { FirstName = \u0022Marcus\u0022, FamilyName = \u0022Perryman\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Michael\u0022, FamilyName = \u0022Hawker\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Matt\u0022, FamilyName = \u0022Lacey\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Alexandre\u0022, FamilyName = \u0022Chohfi\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Filip\u0022, FamilyName = \u0022Wallberg\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Shane\u0022, FamilyName = \u0022Weaver\u0022 },\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.RichSuggestBox","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"segmented-example-1","controlId":"segmented","controlName":"Segmented","headerText":"Example 1","xaml":"\u003Ccontrols:Segmented HorizontalAlignment=\u0022{x:Bind local:SegmentedBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}\u0022\n Orientation=\u0022{x:Bind local:SegmentedBasicSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}\u0022\n SelectionMode=\u0022{x:Bind local:SegmentedBasicSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}\u0022\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Item 1\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xEA3A;}\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Item 2\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xEA3A;}\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Item 3 with a long label\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xEA3A;}\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Item 4\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xEA3A;}\u0022 /\u003E\n \u003C/controls:Segmented\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Segmented","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"segmented-example-2","controlId":"segmented","controlName":"Segmented","headerText":"Example 2","xaml":"\u003Ccontrols:Segmented HorizontalAlignment=\u0022{x:Bind local:SegmentedBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}\u0022\n Orientation=\u0022{x:Bind local:SegmentedBasicSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}\u0022\n SelectionMode=\u0022{x:Bind local:SegmentedBasicSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}\u0022\u003E\n \u003Ccontrols:SegmentedItem Icon=\u0022{ui:FontIcon Glyph=\u0026#xE8BF;}\u0022\n ToolTipService.ToolTip=\u0022Day view\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Icon=\u0022{ui:FontIcon Glyph=\u0026#xE8C0;}\u0022\n ToolTipService.ToolTip=\u0022Week view\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Icon=\u0022{ui:FontIcon Glyph=\u0026#xE787;}\u0022\n ToolTipService.ToolTip=\u0022Month view\u0022 /\u003E\n \u003C/controls:Segmented\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Segmented","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"segmented-example-1-2","controlId":"segmented","controlName":"Segmented","headerText":"Example 1","xaml":"\u003Ccontrols:Segmented Orientation=\u0022{x:Bind local:SegmentedStylesSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}\u0022\n SelectionMode=\u0022{x:Bind local:SegmentedStylesSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}\u0022\n Style=\u0022{StaticResource PivotSegmentedStyle}\u0022\u003E\n \u003Ccontrols:SegmentedItem\u003EItem 1\u003C/controls:SegmentedItem\u003E\n \u003Ccontrols:SegmentedItem\u003EItem 2\u003C/controls:SegmentedItem\u003E\n \u003Ccontrols:SegmentedItem\u003EItem with long label\u003C/controls:SegmentedItem\u003E\n \u003Ccontrols:SegmentedItem\u003EItem 4\u003C/controls:SegmentedItem\u003E\n \u003C/controls:Segmented\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Segmented","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"segmented-example-2-2","controlId":"segmented","controlName":"Segmented","headerText":"Example 2","xaml":"\u003Ccontrols:Segmented Orientation=\u0022{x:Bind local:SegmentedStylesSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}\u0022\n SelectionMode=\u0022{x:Bind local:SegmentedStylesSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}\u0022\n Style=\u0022{StaticResource ButtonSegmentedStyle}\u0022\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Day\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xE8BF;}\u0022\n ToolTipService.ToolTip=\u0022Day view\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Week\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xE8C0;}\u0022\n ToolTipService.ToolTip=\u0022Week view\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Month\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xE787;}\u0022\n ToolTipService.ToolTip=\u0022Month view\u0022 /\u003E\n \u003C/controls:Segmented\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Segmented","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"segmented-switch-presenter","controlId":"segmented","controlName":"Segmented","headerText":"Switch Presenter","xaml":"\u003Ccontrols:Segmented\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Square\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xE739;}\u0022\n Tag=\u0022square\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Circle\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xEA3A;}\u0022\n Tag=\u0022circle\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Rectangle\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xE7FB;}\u0022\n Tag=\u0022rect\u0022 /\u003E\n \u003C/controls:Segmented\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\n/// \u003Csummary\u003E\n/// An example sample page of a Segmented control.\n/// \u003C/summary\u003E\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Segmented","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"settingscard-a-clickable-settingscard","controlId":"settingscard","controlName":"SettingsCard","headerText":"A clickable SettingsCard \u2014 A SettingsCard can be made clickable and you can leverage the Command property or Click event.","xaml":"\u003Ccontrols:SettingsCard\n Click=\u0022OnCardClicked\u0022\n Description=\u0022A SettingsCard can be made clickable and you can leverage the Command property or Click event.\u0022\n Header=\u0022A clickable SettingsCard\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE799;}\u0022\n IsClickEnabled=\u0022True\u0022\u003E\n \u003CTextBlock Foreground=\u0022{ThemeResource TextFillColorSecondaryBrush}\u0022\n Text=\u0022This is content\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"settingscard-customizing-the-actionicon","controlId":"settingscard","controlName":"SettingsCard","headerText":"Customizing the ActionIcon \u2014 You can customize the ActionIcon and ActionIconToolTip.","xaml":"\u003Ccontrols:SettingsCard ActionIcon=\u0022{ui:FontIcon Glyph=\u0026#xE8A7;}\u0022\n ActionIconToolTip=\u0022Open in new window\u0022\n Click=\u0022OnCardClicked\u0022\n Description=\u0022You can customize the ActionIcon and ActionIconToolTip.\u0022\n Header=\u0022Customizing the ActionIcon\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE774;}\u0022\n IsClickEnabled=\u0022True\u0022 /\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"settingscard-hiding-the-actionicon","controlId":"settingscard","controlName":"SettingsCard","headerText":"Hiding the ActionIcon","xaml":"\u003Ccontrols:SettingsCard Click=\u0022OnCardClicked\u0022\n Header=\u0022Hiding the ActionIcon\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE72E;}\u0022\n IsActionIconVisible=\u0022False\u0022\n IsClickEnabled=\u0022True\u0022 /\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"settingscard-this-is-a-default-card-with","controlId":"settingscard","controlName":"SettingsCard","headerText":"This is a default card, with the Header, HeaderIcon, Description and Content set.","xaml":"\u003Ccontrols:SettingsCard\n Description=\u0022This is a default card, with the Header, HeaderIcon, Description and Content set.\u0022\n Header=\u0022This is the Header\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE799;}\u0022\u003E\n \u003CComboBox\u003E\n \u003CComboBoxItem\u003EOption 1\u003C/ComboBoxItem\u003E\n \u003CComboBoxItem\u003EOption 2\u003C/ComboBoxItem\u003E\n \u003CComboBoxItem\u003EOption 3\u003C/ComboBoxItem\u003E\n \u003C/ComboBox\u003E\n \u003C/controls:SettingsCard\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"settingscard-icon-options","controlId":"settingscard","controlName":"SettingsCard","headerText":"Icon options \u2014 You can use a FontIcon, SymbolIcon or BitmapIcon to set the cards HeaderIcon.","xaml":"\u003Ccontrols:SettingsCard Description=\u0022You can use a FontIcon, SymbolIcon or BitmapIcon to set the cards HeaderIcon.\u0022\n Header=\u0022Icon options\u0022\n HeaderIcon=\u0022{ui:BitmapIcon Source=ms-appx:///Assets/AppTitleBar.scale-200.png}\u0022\u003E\n \u003CToggleSwitch /\u003E\n \u003C/controls:SettingsCard\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"settingscard-a-card-with-custom-objects-as","controlId":"settingscard","controlName":"SettingsCard","headerText":"A card with custom objects as its Description","xaml":"\u003Ccontrols:SettingsCard Header=\u0022A card with custom objects as its Description\u0022\u003E\n \u003Ccontrols:SettingsCard.Description\u003E\n \u003CHyperlinkButton Content=\u0022Learn more about Phone Link\u0022 /\u003E\n \u003C/controls:SettingsCard.Description\u003E\n \u003CButton Content=\u0022Open Phone Link\u0022\n Style=\u0022{StaticResource AccentButtonStyle}\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"settingscard-adaptive-layouts","controlId":"settingscard","controlName":"SettingsCard","headerText":"Adaptive layouts \u2014 When resizing a SettingsCard, the Content will wrap vertically.","xaml":"\u003Ccontrols:SettingsCard Description=\u0022When resizing a SettingsCard, the Content will wrap vertically. You can override this breakpoint by setting the SettingsCardWrapThreshold resource. For edge cases, you can also hide the icon by setting SettingsCardWrapNoIconThreshold.\u0022\n Header=\u0022Adaptive layouts\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE745;}\u0022\u003E\n \u003Ccontrols:SettingsCard.Resources\u003E\n \u003Cx:Double x:Key=\u0022SettingsCardWrapThreshold\u0022\u003E800\u003C/x:Double\u003E\n \u003Cx:Double x:Key=\u0022SettingsCardWrapNoIconThreshold\u0022\u003E600\u003C/x:Double\u003E\n \u003C/controls:SettingsCard.Resources\u003E\n \u003CButton Content=\u0022This control will wrap vertically!\u0022\n Style=\u0022{StaticResource AccentButtonStyle}\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"settingscard-example-5","controlId":"settingscard","controlName":"SettingsCard","headerText":"Example 5","xaml":"\u003Ccontrols:SettingsCard Header=\u0022This is a card with a Header only\u0022 /\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"settingsexpander-drag-handle","controlId":"settingsexpander","controlName":"SettingsExpander","headerText":"Drag Handle","xaml":"\u003Ccontrols:SettingsExpander Grid.Column=\u00221\u0022\n Description=\u0022{x:Bind Info}\u0022\n Header=\u0022{x:Bind Name}\u0022\n IsExpanded=\u0022{x:Bind IsExpanded, Mode=TwoWay}\u0022\u003E\n \u003CToggleSwitch IsOn=\u0022{x:Bind IsExpanded, Mode=TwoWay}\u0022\n OffContent=\u0022Off\u0022\n OnContent=\u0022On\u0022 /\u003E\n \u003Ccontrols:SettingsExpander.Items\u003E\n \u003Ccontrols:SettingsCard Header=\u0022{x:Bind LinkDescription}\u0022\u003E\n \u003CHyperlinkButton Content=\u0022{x:Bind Url}\u0022\n NavigateUri=\u0022{x:Bind Url}\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\n \u003C/controls:SettingsExpander.Items\u003E\n \u003C/controls:SettingsExpander\u003E","csharp":"using CommunityToolkit.Mvvm.ComponentModel;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n\n public ObservableCollection\u003CExpandedCardInfo\u003E MyDataSet = new() {\n new()\n {\n Name = \u0022First Item\u0022,\n Info = \u0022More about first item.\u0022,\n LinkDescription = \u0022Click the link for more on first item.\u0022,\n Url = \u0022https://microsoft.com/\u0022,\n },\n new()\n {\n Name = \u0022Second Item\u0022,\n Info = \u0022More about second item.\u0022,\n LinkDescription = \u0022Click the link for more on second item.\u0022,\n Url = \u0022https://xbox.com/\u0022,\n },\n new()\n {\n Name = \u0022Third Item\u0022,\n Info = \u0022More about third item.\u0022,\n LinkDescription = \u0022Click the link for more on third item.\u0022,\n Url = \u0022https://toolkitlabs.dev/\u0022,\n },\n };\n\n public YourPage()\n {\n this.InitializeComponent();\n }\n}\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"settingsexpander-settings-expander-with-itemssource","controlId":"settingsexpander","controlName":"SettingsExpander","headerText":"Settings Expander with ItemsSource \u2014 The SettingsExpander can use ItemsSource to define its Items.","xaml":"\u003Ccontrols:SettingsExpander Description=\u0022The SettingsExpander can use ItemsSource to define its Items.\u0022\n Header=\u0022Settings Expander with ItemsSource\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xEA37;}\u0022\n ItemsSource=\u0022{x:Bind MyDataSet}\u0022\u003E\n \u003Ccontrols:SettingsExpander.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:MyDataModel\u0022\u003E\n \u003Ccontrols:SettingsCard Description=\u0022{x:Bind Info}\u0022\n Header=\u0022{x:Bind Name}\u0022\u003E\n \u003CHyperlinkButton Content=\u0022{x:Bind LinkDescription}\u0022\n NavigateUri=\u0022{x:Bind Url}\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\n \u003C/DataTemplate\u003E\n \u003C/controls:SettingsExpander.ItemTemplate\u003E\n \u003Ccontrols:SettingsExpander.ItemsHeader\u003E\n \u003Cmuxc:InfoBar Title=\u0022This is the ItemsHeader\u0022\n IsIconVisible=\u0022False\u0022\n IsOpen=\u0022True\u0022\n Severity=\u0022Success\u0022\u003E\n \u003Cmuxc:InfoBar.ActionButton\u003E\n \u003CHyperlinkButton Content=\u0022It can host custom content\u0022 /\u003E\n \u003C/muxc:InfoBar.ActionButton\u003E\n \u003C/muxc:InfoBar\u003E\n \u003C/controls:SettingsExpander.ItemsHeader\u003E\n \u003Ccontrols:SettingsExpander.ItemsFooter\u003E\n \u003Ccontrols:SettingsCard Header=\u0022This is the ItemsFooter\u0022\n Style=\u0022{StaticResource DefaultSettingsExpanderItemStyle}\u0022\u003E\n \u003CButton Content=\u0022Add a device\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\n \u003C/controls:SettingsExpander.ItemsFooter\u003E\n \u003C/controls:SettingsExpander\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"settingsexpander-settings-expander-with-a-custom-itemtemplate","controlId":"settingsexpander","controlName":"SettingsExpander","headerText":"Settings Expander with a custom ItemTemplate \u2014 SettingsExpander can use a DataTemplate, DataTemplateSelector, or IElementFactory for its ItemTemplate.","xaml":"\u003Ccontrols:SettingsExpander Description=\u0022SettingsExpander can use a DataTemplate, DataTemplateSelector, or IElementFactory for its ItemTemplate.\u0022\n Header=\u0022Settings Expander with a custom ItemTemplate\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE8FD;}\u0022\n ItemsSource=\u0022{x:Bind MyDataSet}\u0022\u003E\n \u003Ccontrols:SettingsExpander.ItemTemplate\u003E\n \u003Clocal:MyDataModelTemplateSelector\u003E\n \u003Clocal:MyDataModelTemplateSelector.ButtonTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:MyDataModel\u0022\u003E\n \u003Ccontrols:SettingsCard Description=\u0022{x:Bind ItemType}\u0022\n Header=\u0022{x:Bind Name}\u0022\u003E\n \u003CButton Click=\u0022Button_Click\u0022\n Content=\u0022{x:Bind LinkDescription}\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\n \u003C/DataTemplate\u003E\n \u003C/local:MyDataModelTemplateSelector.ButtonTemplate\u003E\n \u003Clocal:MyDataModelTemplateSelector.LinkButtonTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:MyDataModel\u0022\u003E\n \u003Ccontrols:SettingsCard Description=\u0022{x:Bind ItemType}\u0022\n Header=\u0022{x:Bind Name}\u0022\u003E\n \u003CHyperlinkButton Content=\u0022{x:Bind LinkDescription}\u0022\n NavigateUri=\u0022{x:Bind Url}\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\n \u003C/DataTemplate\u003E\n \u003C/local:MyDataModelTemplateSelector.LinkButtonTemplate\u003E\n \u003Clocal:MyDataModelTemplateSelector.NoButtonTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:MyDataModel\u0022\u003E\n \u003Ccontrols:SettingsCard Description=\u0022{x:Bind ItemType}\u0022\n Header=\u0022{x:Bind Name}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/local:MyDataModelTemplateSelector.NoButtonTemplate\u003E\n \u003C/local:MyDataModelTemplateSelector\u003E\n \u003C/controls:SettingsExpander.ItemTemplate\u003E\n \u003C/controls:SettingsExpander\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"settingsexpander-basic-usage","controlId":"settingsexpander","controlName":"SettingsExpander","headerText":"Basic usage","xaml":"\u003Ccontrols:SettingsExpander\n Description=\u0022The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection.\u0022\n Header=\u0022SettingsExpander\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE91B;}\u0022\u003E\n \u003CComboBox\u003E\n \u003CComboBoxItem\u003EOption 1\u003C/ComboBoxItem\u003E\n \u003CComboBoxItem\u003EOption 2\u003C/ComboBoxItem\u003E\n \u003CComboBoxItem\u003EOption 3\u003C/ComboBoxItem\u003E\n \u003C/ComboBox\u003E\n \u003Ccontrols:SettingsExpander.Items\u003E\n \u003Ccontrols:SettingsCard Header=\u0022A basic SettingsCard within an SettingsExpander\u0022\u003E\n \u003CButton Content=\u0022Button\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\n \u003Ccontrols:SettingsCard Description=\u0022SettingsCard within an Expander can be made clickable too!\u0022\n Header=\u0022This item can be clicked\u0022\n IsClickEnabled=\u0022True\u0022 /\u003E\n \u003Ccontrols:SettingsCard ContentAlignment=\u0022Left\u0022\u003E\n \u003CCheckBox Content=\u0022Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons.\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\u003C/controls:SettingsExpander.Items\u003E\u003C/controls:SettingsExpander\u003E\n\u003C!-- NOTE: XAML truncated \u2014 additional sibling elements omitted --\u003E","csharp":"namespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"settingscard-settings-page-example","controlId":"settingscard","controlName":"SettingsCard","headerText":"Settings Page Example","xaml":"\u003Ccontrols:SettingsCard Description=\u0022This is a default card, with the Header, HeaderIcon, Description and Content set\u0022\n Header=\u0022This is the Header\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE716;}\u0022\u003E\n \u003CToggleSwitch IsOn=\u0022True\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\r\n\r\n\u003Ccontrols:SettingsCard Header=\u0022A basic SettingsCard within an SettingsExpander\u0022\u003E\n \u003CButton Content=\u0022Button\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\r\n\r\n\u003Ccontrols:SettingsCard Description=\u0022SettingsCard within an Expander can be made clickable too!\u0022\n Header=\u0022This item can be clicked\u0022\n IsClickEnabled=\u0022True\u0022 /\u003E\r\n\r\n\u003Ccontrols:SettingsCard ContentAlignment=\u0022Left\u0022\u003E\n \u003CCheckBox Content=\u0022Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\r\n\r\n\u003Ccontrols:SettingsCard Description=\u0022Another card to show grouping of cards\u0022\n Header=\u0022Another SettingsCard\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE799;}\u0022\u003E\n \u003CComboBox\u003E\n \u003CComboBoxItem\u003EOption 1\u003C/ComboBoxItem\u003E\n \u003CComboBoxItem\u003EOption 2\u003C/ComboBoxItem\u003E\n \u003CComboBoxItem\u003EOption 3\u003C/ComboBoxItem\u003E\u003C/ComboBox\u003E\u003C/controls:SettingsCard\u003E\n\u003C!-- NOTE: XAML truncated \u2014 additional sibling elements omitted --\u003E","csharp":"namespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"contentsizer-left-shelf","controlId":"contentsizer","controlName":"ContentSizer","headerText":"Left Shelf","xaml":"\u003CGrid\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 /\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 /\u003E\n \u003CColumnDefinition /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003CBorder\u003E\n \u003CTextBlock\n Foreground=\u0022{ThemeResource TextOnAccentFillColorPrimaryBrush}\u0022\n Style=\u0022{ThemeResource BodyStrongTextBlockStyle}\u0022\n Text=\u0022Side Content\u0022 /\u003E\n \u003C/Border\u003E\n \u003Ccontrols:ContentSizer Grid.Column=\u00221\u0022\n TargetControl=\u0022{x:Bind SideContent}\u0022 /\u003E\n \u003C/Grid\u003E","csharp":"namespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Sizers","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"contentsizer-top-shelf","controlId":"contentsizer","controlName":"ContentSizer","headerText":"Top Shelf","xaml":"\u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022*\u0022 /\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003Cmuxc:Expander\n HorizontalContentAlignment=\u0022Stretch\u0022\n ExpandDirection=\u0022Up\u0022\n Header=\u0022This is some Shelf\u0022\n IsExpanded=\u0022True\u0022\u003E\n \u003CGrid\u003E\n \u003CTextBlock\n Text=\u0022This is the expanded content\u0022\n TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003C/Grid\u003E\n \u003C/muxc:Expander\u003E\n \u003Ccontrols:ContentSizer Grid.Row=\u00221\u0022\n Orientation=\u0022Horizontal\u0022\n TargetControl=\u0022{x:Bind ExpandContent}\u0022\n Visibility=\u0022{x:Bind TopExpander.IsExpanded, Mode=OneWay}\u0022 /\u003E\n \u003C/Grid\u003E","csharp":"namespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Sizers","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"gridsplitter-basic-usage","controlId":"gridsplitter","controlName":"GridSplitter","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition /\u003E\n \u003CRowDefinition /\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition /\u003E\n \u003CColumnDefinition /\u003E\n \u003CColumnDefinition /\u003E\n \u003CColumnDefinition /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003Ccontrols:GridSplitter Grid.Column=\u00221\u0022\n ResizeBehavior=\u0022BasedOnAlignment\u0022\n ResizeDirection=\u0022Auto\u0022\u003E\n \u003Ccontrols:GridSplitter.RenderTransform\u003E\n \u003CTranslateTransform X=\u0022-7\u0022 /\u003E\n \u003C/controls:GridSplitter.RenderTransform\u003E\n \u003C/controls:GridSplitter\u003E\n \u003Ccontrols:GridSplitter Grid.Row=\u00221\u0022\n Grid.ColumnSpan=\u00224\u0022\u003E\n \u003Ccontrols:GridSplitter.RenderTransform\u003E\n \u003CTranslateTransform Y=\u0022-7\u0022 /\u003E\n \u003C/controls:GridSplitter.RenderTransform\u003E\n \u003C/controls:GridSplitter\u003E\n \u003Ccontrols:GridSplitter Grid.Row=\u00220\u0022\n Grid.RowSpan=\u00222\u0022\n Grid.Column=\u00223\u0022\n ResizeBehavior=\u0022BasedOnAlignment\u0022\n ResizeDirection=\u0022Auto\u0022\u003E\n \u003Ccontrols:GridSplitter.RenderTransform\u003E\n \u003CTranslateTransform X=\u0022-7\u0022 /\u003E\n \u003C/controls:GridSplitter.RenderTransform\u003E\n \u003C/controls:GridSplitter\u003E\n \u003C/Grid\u003E","csharp":"namespace YourApp;\n\n/// \u003Csummary\u003E\n/// An empty page that can be used on its own or navigated to within a Frame.\n/// \u003C/summary\u003E\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Sizers","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"propertysizer-navigation-view","controlId":"propertysizer","controlName":"PropertySizer","headerText":"Navigation View","xaml":"\u003Ccontrols:PropertySizer\n Binding=\u0022{x:Bind ViewPanel.OpenPaneLength, Mode=TwoWay}\u0022\n Maximum=\u0022440\u0022\n Minimum=\u002252\u0022\n Visibility=\u0022{x:Bind ViewPanel.IsPaneOpen, Mode=OneWay}\u0022 /\u003E","csharp":"namespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Sizers","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"contentsizer-sizer-cursor","controlId":"contentsizer","controlName":"ContentSizer","headerText":"Sizer Cursor","xaml":"\u003CGrid\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 /\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 /\u003E\n \u003CColumnDefinition /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003Ccontrols:ContentSizer Grid.Column=\u00221\u0022\n Cursor=\u0022Hand\u0022\n TargetControl=\u0022{x:Bind SomeContent}\u0022 /\u003E\n \u003C/Grid\u003E","csharp":"namespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Sizers","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"]},{"id":"tabbedcommandbar-basic-usage","controlId":"tabbedcommandbar","controlName":"TabbedCommandBar","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003Ccontrols:TabbedCommandBar\u003E\n \u003Ccontrols:TabbedCommandBar.AutoSuggestBox\u003E\n \u003CAutoSuggestBox\n QueryIcon=\u0022Find\u0022 /\u003E\n \u003C/controls:TabbedCommandBar.AutoSuggestBox\u003E\n \u003Ccontrols:TabbedCommandBar.PaneFooter\u003E\n \u003CCommandBar Background=\u0022Transparent\u0022\n DefaultLabelPosition=\u0022Right\u0022\u003E\n \u003CAppBarButton Icon=\u0022{ui:FontIcon Glyph=\u0026#xE72D;}\u0022\n Label=\u0022Share\u0022 /\u003E\n \u003CAppBarButton Icon=\u0022{ui:FontIcon Glyph=\u0026#xE8BD;}\u0022\n Label=\u0022Comments\u0022 /\u003E\n \u003C/CommandBar\u003E\n \u003C/controls:TabbedCommandBar.PaneFooter\u003E\n \u003Ccontrols:TabbedCommandBar.MenuItems\u003E\n \u003Ccontrols:TabbedCommandBarItem Header=\u0022Home\u0022\u003E\n \u003CAppBarButton Icon=\u0022{ui:FontIcon Glyph=\u0026#xE7A7;}\u0022\n Label=\u0022Undo\u0022 /\u003E\n \u003CAppBarButton Icon=\u0022{ui:FontIcon Glyph=\u0026#xE7A6;}\u0022\n Label=\u0022Redo\u0022 /\u003E\n \u003CAppBarButton Icon=\u0022{ui:FontIcon Glyph=\u0026#xE77F;}\u0022\n Label=\u0022Paste\u0022 /\u003E\n \u003CAppBarSeparator /\u003E\n \u003CAppBarElementContainer\u003E\n \u003CComboBox\u003E\n \u003CComboBoxItem Content=\u0022Arial\u0022 /\u003E\n \u003CComboBoxItem Content=\u0022Calibri\u0022 /\u003E\u003C/ComboBox\u003E\u003C/AppBarElementContainer\u003E\u003C/controls:TabbedCommandBarItem\u003E\u003C/controls:TabbedCommandBar.MenuItems\u003E\u003C/controls:TabbedCommandBar\u003E\u003C/Grid\u003E\n\u003C!-- NOTE: XAML truncated \u2014 additional sibling elements omitted --\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.TabbedCommandBar","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]},{"id":"tokenizingtextbox-basic-usage","controlId":"tokenizingtextbox","controlName":"TokenizingTextBox","headerText":"Basic usage","xaml":"\u003Ccontrols:TokenizingTextBox\n ItemClick=\u0022TokenBox_ItemClick\u0022\n ItemsSource=\u0022{x:Bind SelectedTokens, Mode=TwoWay}\u0022\n Loaded=\u0022TokenBox_Loaded\u0022\n MaximumTokens=\u00225\u0022\n PlaceholderText=\u0022Add actions\u0022\n QueryIcon=\u0022{ui:FontIconSource Glyph=\u0026#xE721;,\n FontSize=12}\u0022\n SuggestedItemsSource=\u0022{x:Bind _samples, Mode=OneWay}\u0022\n TextChanged=\u0022TextChanged\u0022\n TextMemberPath=\u0022Text\u0022\n TokenDelimiter=\u0022,\u0022\n TokenItemAdding=\u0022TokenItemCreating\u0022\u003E\n \u003Ccontrols:TokenizingTextBox.Header\u003E\n \u003C/controls:TokenizingTextBox.Header\u003E\n \u003Ccontrols:TokenizingTextBox.SuggestedItemTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CStackPanel Orientation=\u0022Horizontal\u0022\u003E\n \u003CViewbox\u003E\n \u003CSymbolIcon Symbol=\u0022{Binding Icon}\u0022 /\u003E\n \u003C/Viewbox\u003E\n \u003CTextBlock\n Text=\u0022{Binding Text}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/DataTemplate\u003E\n \u003C/controls:TokenizingTextBox.SuggestedItemTemplate\u003E\u003C/controls:TokenizingTextBox\u003E\n\u003C!-- NOTE: XAML truncated \u2014 additional sibling elements omitted --\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public readonly List\u003CSampleDataType\u003E _samples = new List\u003CSampleDataType\u003E()\n {\n new SampleDataType() { Text = \u0022Account\u0022, Icon = Symbol.Account },\n new SampleDataType() { Text = \u0022Add friend\u0022, Icon = Symbol.AddFriend },\n new SampleDataType() { Text = \u0022Attach\u0022, Icon = Symbol.Attach },\n new SampleDataType() { Text = \u0022Attach camera\u0022, Icon = Symbol.AttachCamera },\n new SampleDataType() { Text = \u0022Audio\u0022, Icon = Symbol.Audio },\n new SampleDataType() { Text = \u0022Block contact\u0022, Icon = Symbol.BlockContact },\n new SampleDataType() { Text = \u0022Calculator\u0022, Icon = Symbol.Calculator },\n new SampleDataType() { Text = \u0022Calendar\u0022, Icon = Symbol.Calendar },\n new SampleDataType() { Text = \u0022Camera\u0022, Icon = Symbol.Camera },\n// NOTE: snippet truncated \u2014 refer to full sample for additional code","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.TokenizingTextBox","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"]}] \ No newline at end of file +[{"id":"advancedcollectionview-1","controlId":"advancedcollectionview","controlName":"AdvancedCollectionView","headerText":"Basic usage","xaml":"\u003CGrid ColumnSpacing=\u002212\u0022\n RowSpacing=\u00228\u0022\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition /\u003E\n \u003CColumnDefinition /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition /\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CStackPanel Grid.Column=\u00220\u0022\n Grid.ColumnSpan=\u00222\u0022\n Orientation=\u0022Horizontal\u0022\u003E\n \u003CTextBox\n PlaceholderText=\u0022Add new item\u0022 /\u003E\n \u003CButton\n VerticalAlignment=\u0022Bottom\u0022\n Click=\u0022Add_Click\u0022\n Content=\u0022Add\u0022\n Style=\u0022{StaticResource AccentButtonStyle}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003CTextBlock Grid.Row=\u00221\u0022\n Text=\u0022Original list\u0022 /\u003E\n \u003CGrid Grid.Row=\u00222\u0022\u003E\u003C/Grid\u003E\u003C/Grid\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using CommunityToolkit.WinUI.Collections;\nusing System.Diagnostics.CodeAnalysis;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public ObservableCollection\u003CEmployee\u003E EmployeeCollection { get; private set; }\n\n public AdvancedCollectionView CollectionView { get; private set; }\n\n public YourPage()\n {\n this.InitializeComponent();\n Setup();\n }\n\n [MemberNotNull(nameof(EmployeeCollection))]\n [MemberNotNull(nameof(CollectionView))]\n private void Setup()\n {\n // left list\n EmployeeCollection = new()\n {\n new() { Name = \u0022Staff\u0022 },\n new() { Name = \u002242\u0022 },\n new() { Name = \u0022Swan\u0022 },\n new() { Name = \u0022Orchid\u0022 },\n new() { Name = \u002215\u0022 },\n new() { Name = \u0022Flame\u0022 },\n new() { Name = \u002216\u0022 },\n new() { Name = \u0022Arrow\u0022 },\n new() { Name = \u0022Tempest\u0022 },\n new() { Name = \u002223\u0022 },\n new() { Name = \u0022Pearl\u0022 },\n new() { Name = \u0022Hydra\u0022 },\n new() { Name = \u0022Lamp Post\u0022 },\n new() { Name = \u00224\u0022 },\n new() { Name = \u0022Looking Glass\u0022 },\n new() { Name = \u00228\u0022 },\n };\n\n // right list\n AdvancedCollectionView acv = new(EmployeeCollection);\n acv.Filter = x =\u003E !int.TryParse(((Employee)x).Name, out _);\n acv.SortDescriptions.Add(new SortDescription\u003CEmployee\u003E(nameof(Employee.Name), SortDirection.Ascending));\n\n CollectionView = acv;\n }\n\n private void Add_Click(object sender, RoutedEventArgs e)\n {\n if (!string.IsNullOrWhiteSpace(NewItemBox.Text))\n {\n EmployeeCollection.Insert(0, new Employee { Name = NewItemBox.Text });\n NewItemBox.Text = \u0022\u0022;\n }\n }\n}\n\n/// \u003Csummary\u003E\n/// A sample class used to show how to use the \u003Csee cref=\u0022AdvancedCollectionView\u0022/\u003E class.\n/// \u003C/summary\u003E\npublic partial class Employee\n{\n /// \u003Csummary\u003E\n /// Gets or sets the name of the person.\n /// \u003C/summary\u003E\n public string? Name { get; set; }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Collections","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The following is a complete example of how to perform ...","controlDescription":"The AdvancedCollectionView is a collection view implementation that support filtering, sorting and incremental loading. It\u0027s meant to be used in a view or viewmodel.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"incrementalloadingcollection-1","controlId":"incrementalloadingcollection","controlName":"IncrementalLoadingCollection","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022*\u0022 /\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003CStackPanel\u003E\n \u003CButton\n Click=\u0022{x:Bind PeopleSource.RefreshAsync}\u0022\n Content=\u0022Refresh collection\u0022\n Style=\u0022{StaticResource AccentButtonStyle}\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003CGrid Grid.Row=\u00222\u0022\u003E\n \u003CListView\n ItemsSource=\u0022{x:Bind PeopleSource, Mode=OneWay}\u0022\u003E\n \u003CListView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:Person\u0022\u003E\n \u003CGrid\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 /\u003E\n \u003CColumnDefinition /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\u003C/Grid\u003E\u003C/DataTemplate\u003E\u003C/ListView.ItemTemplate\u003E\u003C/ListView\u003E\u003C/Grid\u003E\u003C/Grid\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using CommunityToolkit.WinUI.Collections;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n // IncrementalLoadingCollection can be bound to a GridView or a ListView. In this case it is a ListView called PeopleListView.\n public IncrementalLoadingCollection\u003CPeopleSource, Person\u003E PeopleSource { get; set; } = new(new PeopleSource());\n\n public YourPage()\n {\n this.InitializeComponent();\n }\n}\n\n/// \u003Csummary\u003E\n/// A sample implementation of the \u003Csee cref=\u0022IIncrementalSource{TSource}\u0022/\u003E interface.\n/// \u003C/summary\u003E\n/// \u003Cseealso cref=\u0022IIncrementalSource{TSource}\u0022/\u003E\npublic partial class PeopleSource : IIncrementalSource\u003CPerson\u003E\n{\n private readonly List\u003CPerson\u003E _people;\n\n /// \u003Csummary\u003E\n /// Initializes a new instance of the \u003Csee cref=\u0022PeopleSource\u0022/\u003E class.\n /// \u003C/summary\u003E\n public PeopleSource()\n {\n // Creates an example collection.\n _people = new List\u003CPerson\u003E();\n\n for (int i = 1; i \u003C= 200; i\u002B\u002B)\n {\n var p = new Person { Name = \u0022Person \u0022 \u002B i };\n _people.Add(p);\n }\n }\n\n /// \u003Csummary\u003E\n /// Retrieves items based on \u003Cparamref name=\u0022pageIndex\u0022/\u003E and \u003Cparamref name=\u0022pageSize\u0022/\u003E arguments.\n /// \u003C/summary\u003E\n /// \u003Cparam name=\u0022pageIndex\u0022\u003E\n /// The zero-based index of the page that corresponds to the items to retrieve.\n /// \u003C/param\u003E\n /// \u003Cparam name=\u0022pageSize\u0022\u003E\n /// The number of \u003Csee cref=\u0022Person\u0022/\u003E items to retrieve for the specified \u003Cparamref name=\u0022pageIndex\u0022/\u003E.\n /// \u003C/param\u003E\n /// \u003Cparam name=\u0022cancellationToken\u0022\u003E\n /// Used to propagate notification that operation should be canceled.\n /// \u003C/param\u003E\n /// \u003Creturns\u003E\n /// Returns a collection of \u003Csee cref=\u0022Person\u0022/\u003E.\n /// \u003C/returns\u003E\n public async Task\u003CIEnumerable\u003CPerson\u003E\u003E GetPagedItemsAsync(int pageIndex, int pageSize, CancellationToken cancellationToken = default(CancellationToken))\n {\n // Gets items from the collection according to pageIndex and pageSize parameters.\n var result = (from p in _people\n select p).Skip(pageIndex * pageSize).Take(pageSize);\n\n // Simulates a longer request...\n // Make sure the list is still in order after a refresh,\n // even if the first page takes longer to load\n if (pageIndex == 0)\n {\n await Task.Delay(2000);\n }\n else\n {\n await Task.Delay(1000);\n }\n\n return result;\n }\n}\n\n/// \u003Csummary\u003E\n// ...truncated","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Collections","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":null,"controlDescription":"The IncrementalLoadingCollection helpers greatly simplify the definition and usage of collections whose items can be loaded incrementally only when needed by the view (such as a ScrollViewer).","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"colorpickerbutton-1","controlId":"colorpickerbutton","controlName":"ColorPickerButton","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003Ccontrols:ColorPickerButton\n SelectedColor=\u0022LightBlue\u0022 /\u003E\n \u003C/Grid\u003E","csharp":"using ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.ColorPicker","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":null,"controlDescription":"An extended color picker control that lets a user pick a color using a color spectrum, sliders, or text input.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"colorpicker-1","controlId":"colorpicker","controlName":"ColorPicker","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003Ccontrols:ColorPicker\n ColorSpectrumShape=\u0022{x:Bind local:ColorPickerSample.ConvertStringToColorSpectrumShape(SpectrumShape), Mode=OneWay}\u0022\n IsAlphaEnabled=\u0022{x:Bind AlphaEnabled, Mode=OneWay}\u0022\n IsAlphaSliderVisible=\u0022{x:Bind AlphaSlider, Mode=OneWay}\u0022\n IsColorChannelTextInputVisible=\u0022{x:Bind ColorChannel, Mode=OneWay}\u0022\n IsColorPaletteVisible=\u0022{x:Bind ColorPalette, Mode=OneWay}\u0022\n IsColorSliderVisible=\u0022{x:Bind ColorSlider, Mode=OneWay}\u0022\n IsColorSpectrumVisible=\u0022{x:Bind SpectrumVisible, Mode=OneWay}\u0022\n ShowAccentColors=\u0022{x:Bind AccentColors, Mode=OneWay}\u0022\n Color=\u0022LightBlue\u0022 /\u003E\n \u003C/Grid\u003E","csharp":"using ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n\n // TODO: See https://github.com/CommunityToolkit/Labs-Windows/issues/149\n \n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.ColorPicker","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The ColorPicker control lets a user pick a color using a color spectrum, palette, sliders, or text input.","controlDescription":"An extended color picker control that lets a user pick a color using a color spectrum, sliders, or text input.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"headeredcontentcontrol-1","controlId":"headeredcontentcontrol","controlName":"HeaderedContentControl","headerText":"Complex","xaml":"\u003Ccontrols:HeaderedContentControl\n Header=\u0022Complex content\u0022\u003E\n \u003CRelativePanel\u003E\n \u003CImage\n Source=\u0022ms-appx:///Assets/Sunny.png\u0022 /\u003E\n \u003CStackPanel\n RelativePanel.RightOf=\u0022Icon\u0022\u003E\n \u003CTextBlock Text=\u002265\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003CTextBlock FontSize=\u002212\u0022\n Foreground=\u0022{ThemeResource TextFillColorSecondaryBrush}\u0022\n RelativePanel.AlignLeftWith=\u0022Temp\u0022\n RelativePanel.Below=\u0022Temp\u0022\n Text=\u0022Rainy\u0022 /\u003E\n \u003C/RelativePanel\u003E\n \u003C/controls:HeaderedContentControl\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.HeaderedControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":null,"controlDescription":"The HeaderedContentControl allows content to be displayed with a specified header.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"headeredcontentcontrol-2","controlId":"headeredcontentcontrol","controlName":"HeaderedContentControl","headerText":"Image","xaml":"\u003Ccontrols:HeaderedContentControl Grid.Row=\u00221\u0022\n Grid.Column=\u00220\u0022\n Header=\u0022Image content\u0022\u003E\n \u003CImage Source=\u0022ms-appx:///Assets/BisonBadlandsChillin.jpg\u0022 /\u003E\n \u003C/controls:HeaderedContentControl\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.HeaderedControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":null,"controlDescription":"The HeaderedContentControl allows content to be displayed with a specified header.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"headeredcontentcontrol-3","controlId":"headeredcontentcontrol","controlName":"HeaderedContentControl","headerText":"Basic usage","xaml":"\u003Ccontrols:HeaderedContentControl\n HorizontalContentAlignment=\u0022Stretch\u0022\n VerticalContentAlignment=\u0022Stretch\u0022\n Header=\u0022Rectangle content\u0022\u003E\n \u003CRectangle\n Fill=\u0022{ThemeResource AccentFillColorDefaultBrush}\u0022 /\u003E\n \u003C/controls:HeaderedContentControl\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.HeaderedControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The Header property can be any object and you can use the HeaderTemplate to specify a custom look to the header.","controlDescription":"The HeaderedContentControl allows content to be displayed with a specified header.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"headeredcontentcontrol-4","controlId":"headeredcontentcontrol","controlName":"HeaderedContentControl","headerText":"Text","xaml":"\u003Ccontrols:HeaderedContentControl\n Header=\u0022TextBlock content header\u0022\u003E\n \u003CTextBlock FontSize=\u002212\u0022\n Foreground=\u0022{ThemeResource TextFillColorSecondaryBrush}\u0022\n Text=\u0022Some more text about this content\u0022\n TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003C/controls:HeaderedContentControl\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.HeaderedControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":null,"controlDescription":"The HeaderedContentControl allows content to be displayed with a specified header.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"headereditemscontrol-1","controlId":"headereditemscontrol","controlName":"HeaderedItemsControl","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition /\u003E\n \u003CColumnDefinition /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003Ccontrols:HeaderedItemsControl Footer=\u0022Footer 1\u0022\n Header=\u0022Header 1\u0022\n ItemsSource=\u0022{x:Bind Items, Mode=OneWay}\u0022 /\u003E\n \u003Ccontrols:HeaderedItemsControl Grid.Column=\u00221\u0022\n Footer=\u0022Footer 2\u0022\n Header=\u0022Header 2\u0022\n ItemsSource=\u0022{x:Bind Items, Mode=OneWay}\u0022\u003E\n \u003Ccontrols:HeaderedItemsControl.HeaderTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CTextBlock FontWeight=\u0022SemiBold\u0022\n Text=\u0022{Binding}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/controls:HeaderedItemsControl.HeaderTemplate\u003E\n \u003Ccontrols:HeaderedItemsControl.FooterTemplate\u003E\n \u003CDataTemplate\u003E\u003C/DataTemplate\u003E\u003C/controls:HeaderedItemsControl.FooterTemplate\u003E\u003C/controls:HeaderedItemsControl\u003E\u003C/Grid\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n Items = \u0022The quick brown fox jumped over the lazy river\u0022.Split(\u0027 \u0027);\n }\n public IEnumerable\u003Cstring\u003E Items { get; }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.HeaderedControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The Header property can be any object and you can use the HeaderTemplate to specify a custom look to the header. Similar objects can be set for the Footer and FooterTemplate.","controlDescription":"The HeaderedItemsControl allows items to be displayed with a specified header.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"headeredtreeview-1","controlId":"headeredtreeview","controlName":"HeaderedTreeView","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003Ccontrols:HeaderedTreeView Footer=\u0022Footer\u0022\n Header=\u0022Header\u0022\n ItemsSource=\u0022{x:Bind Items, Mode=OneWay}\u0022\u003E\n \u003Ccontrols:HeaderedTreeView.HeaderTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CTextBlock FontWeight=\u0022SemiBold\u0022\n Text=\u0022{Binding}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/controls:HeaderedTreeView.HeaderTemplate\u003E\n \u003Ccontrols:HeaderedTreeView.FooterTemplate\u003E\n \u003CDataTemplate\u003E\n \u003CTextBlock FontWeight=\u0022SemiBold\u0022\n Text=\u0022{Binding}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/controls:HeaderedTreeView.FooterTemplate\u003E\n \u003Ccontrols:HeaderedTreeView.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:ExplorerItem\u0022\u003E\u003C/DataTemplate\u003E\u003C/controls:HeaderedTreeView.ItemTemplate\u003E\u003C/controls:HeaderedTreeView\u003E\u003C/Grid\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n Items = GetData();\n }\n public ObservableCollection\u003CExplorerItem\u003E Items { get; }\n\n private ObservableCollection\u003CExplorerItem\u003E GetData()\n {\n var list = new ObservableCollection\u003CExplorerItem\u003E();\n ExplorerItem folder1 = new ExplorerItem()\n {\n Name = \u0022Work Documents\u0022,\n Children =\n {\n new ExplorerItem()\n {\n Name = \u0022Functional Specifications\u0022,\n Children =\n {\n new ExplorerItem()\n {\n Name = \u0022TreeView spec\u0022,\n }\n }\n },\n new ExplorerItem()\n {\n Name = \u0022Feature Schedule\u0022,\n },\n new ExplorerItem()\n {\n Name = \u0022Overall Project Plan\u0022,\n },\n new ExplorerItem()\n {\n Name = \u0022Feature Resources Allocation\u0022,\n }\n }\n };\n ExplorerItem folder2 = new ExplorerItem()\n {\n Name = \u0022Personal Folder\u0022,\n Children =\n {\n new ExplorerItem()\n {\n Name = \u0022Home Remodel Folder\u0022,\n Children =\n {\n new ExplorerItem()\n {\n Name = \u0022Contractor Contact Info\u0022,\n },\n new ExplorerItem()\n {\n Name = \u0022Paint Color Scheme\u0022,\n },\n new ExplorerItem()\n {\n Name = \u0022Flooring Woodgrain type\u0022,\n },\n new ExplorerItem()\n {\n// ...truncated","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.HeaderedControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The Header property can be any object and you can use the HeaderTemplate to specify a custom look to the header. Similar objects can be set for the Footer and FooterTemplate.","controlDescription":"The HeaderedTreeView allows a treeview to be displayed with a specified header.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"imagecropper-1","controlId":"imagecropper","controlName":"ImageCropper","headerText":"Overlay","xaml":"\u003CGrid\u003E\n \u003Ccontrols:ImageCropper\n AspectRatio=\u0022{x:Bind local:ImageCropperSample.ConvertStringToAspectRatio(AspectRatioSetting), Mode=OneWay}\u0022\n CropShape=\u0022{x:Bind local:ImageCropperSample.ConvertStringToCropShape(CropShapeSetting), Mode=OneWay}\u0022\n ThumbPlacement=\u0022{x:Bind local:ImageCropperSample.ConvertStringToThumbPlacement(ThumbPlacementSetting), Mode=OneWay}\u0022\u003E\n \u003Ccontrols:ImageCropper.Overlay\u003E\n \u003Cmedia:RadialGradientBrush\u003E\n \u003CGradientStop Offset=\u00220.75\u0022 Color=\u0022Transparent\u0022 /\u003E\n \u003CGradientStop Offset=\u00221\u0022 Color=\u0022DimGray\u0022 /\u003E\n \u003C/media:RadialGradientBrush\u003E\n \u003C/controls:ImageCropper.Overlay\u003E\n \u003C/controls:ImageCropper\u003E\n \u003C/Grid\u003E","csharp":"using Windows.Storage;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n\n _ = Load();\n }\n\n private async Task Load()\n {\n var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri(\u0022ms-appx:///Assets/Owl.jpg\u0022));\n await ImageCropper.LoadImageFromFile(file);\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.ImageCropper","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The crop area can be overlaid with a brush. Here we use a RadialGradientBrush, but you can use any brush; backdrop Media brushes, Geometry brushes, bitmap and image brushes, and so on.","controlDescription":"Control to crop rectangular and circular images.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"imagecropper-2","controlId":"imagecropper","controlName":"ImageCropper","headerText":"Basic usage","xaml":"\u003Ccontrols:ImageCropper\n AspectRatio=\u0022{x:Bind local:ImageCropperSample.ConvertStringToAspectRatio(AspectRatioSetting), Mode=OneWay}\u0022\n CropShape=\u0022{x:Bind local:ImageCropperSample.ConvertStringToCropShape(CropShapeSetting), Mode=OneWay}\u0022\n ThumbPlacement=\u0022{x:Bind local:ImageCropperSample.ConvertStringToThumbPlacement(ThumbPlacementSetting), Mode=OneWay}\u0022 /\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\nusing Windows.Storage;\nusing Windows.Storage.Pickers;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n _ = Load();\n }\n\n private async Task Load()\n {\n var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri(\u0022ms-appx:///Assets/Owl.jpg\u0022));\n await imageCropper.LoadImageFromFile(file);\n }\n\n private async Task PickImage()\n {\n var filePicker = new FileOpenPicker\n {\n ViewMode = PickerViewMode.Thumbnail,\n SuggestedStartLocation = PickerLocationId.PicturesLibrary,\n FileTypeFilter =\n {\n \u0022.png\u0022, \u0022.jpg\u0022, \u0022.jpeg\u0022\n }\n };\n var file = await filePicker.PickSingleFileAsync();\n if (file != null \u0026\u0026 imageCropper != null)\n {\n await imageCropper.LoadImageFromFile(file);\n }\n }\n\n private async Task SaveCroppedImage()\n {\n var savePicker = new FileSavePicker\n {\n SuggestedStartLocation = PickerLocationId.PicturesLibrary,\n SuggestedFileName = \u0022Cropped_Image\u0022,\n FileTypeChoices =\n {\n { \u0022PNG Picture\u0022, new List\u003Cstring\u003E { \u0022.png\u0022 } },\n { \u0022JPEG Picture\u0022, new List\u003Cstring\u003E { \u0022.jpg\u0022 } }\n }\n };\n var imageFile = await savePicker.PickSaveFileAsync();\n if (imageFile != null)\n {\n BitmapFileFormat bitmapFileFormat;\n switch (imageFile.FileType.ToLower())\n {\n case \u0022.png\u0022:\n bitmapFileFormat = BitmapFileFormat.Png;\n break;\n case \u0022.jpg\u0022:\n bitmapFileFormat = BitmapFileFormat.Jpeg;\n break;\n default:\n bitmapFileFormat = BitmapFileFormat.Png;\n break;\n }\n\n using (var fileStream = await imageFile.OpenAsync(FileAccessMode.ReadWrite, StorageOpenOptions.None))\n {\n await imageCropper.SaveAsync(fileStream, bitmapFileFormat);\n }\n }\n }\n\n private async void PickButton_Click(object sender, RoutedEventArgs e)\n {\n await PickImage();\n }\n\n private async void SaveButton_Click(object sender, RoutedEventArgs e)\n {\n await SaveCroppedImage();\n }\n// ...truncated","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.ImageCropper","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The ImageCropper Control allows user to freely crop an image.","controlDescription":"Control to crop rectangular and circular images.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"metadatacontrol-1","controlId":"metadatacontrol","controlName":"MetadataControl","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022*\u0022 /\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003Ccontrols:MetadataControl\n AccessibleSeparator=\u0022{x:Bind AccessibleSeparator, Mode=OneWay}\u0022\n Separator=\u0022{x:Bind Separator, Mode=OneWay}\u0022 /\u003E\n \u003CTextBlock\n Grid.Row=\u00221\u0022\n FontWeight=\u0022SemiBold\u0022 /\u003E\n \u003CStackPanel Grid.Row=\u00222\u0022\n Orientation=\u0022Horizontal\u0022\u003E\n \u003CButton Click=\u0022AddLabel_Click\u0022\n Content=\u0022Add label\u0022 /\u003E\n \u003CButton Click=\u0022AddCommand_Click\u0022\n Content=\u0022Add command\u0022 /\u003E\n \u003CButton Click=\u0022Clear_Click\u0022\n Content=\u0022Clear\u0022 /\u003E\n \u003C/StackPanel\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\nusing System.Windows.Input;\n\nnamespace YourApp;\n\n/// \u003Csummary\u003E\n/// An example sample page of a custom control inheriting from Panel.\n/// \u003C/summary\u003E\npublic sealed partial class YourPage : Page\n{\n private static readonly string[] Labels = \u0022Lorem ipsum dolor sit amet consectetur adipiscing elit\u0022.Split(\u0027 \u0027);\n\n private readonly Random _random;\n private readonly ObservableCollection\u003CMetadataItem\u003E _units;\n private readonly DelegateCommand\u003Cobject\u003E _command;\n\n public YourPage()\n {\n this.InitializeComponent();\n _random = new Random();\n _units = new ObservableCollection\u003CMetadataItem\u003E\n {\n new MetadataItem { Label = GetRandomLabel() },\n new MetadataItem { Label = GetRandomLabel() }\n };\n _command = new DelegateCommand\u003Cobject\u003E(OnExecuteCommand);\n metadataControl.Items = _units;\n }\n\n private string GetRandomLabel() =\u003E Labels[_random!.Next(Labels.Length)];\n\n private void OnExecuteCommand(object obj)\n {\n OutputTxt.Text = $\u0022Command invoked - parameter: {obj}\u0022;\n }\n\n private void AddLabel_Click(object sender, RoutedEventArgs e)\n {\n if (_units != null)\n {\n _units.Add(new MetadataItem { Label = GetRandomLabel() });\n }\n }\n\n private void AddCommand_Click(object sender, RoutedEventArgs e)\n {\n if (_units != null)\n {\n var label = GetRandomLabel();\n _units.Add(new MetadataItem\n {\n Label = label,\n Command = _command!,\n CommandParameter = label,\n });\n }\n }\n\n private void Clear_Click(object sender, RoutedEventArgs e)\n {\n if (_units != null)\n {\n OutputTxt.Text = \u0022\u0022;\n _units.Clear();\n }\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.MetadataControl","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The bullet separator can be customized using the Separator property. AccessibleSeparator is used as a replacement for Separator to generate the accessible string.","controlDescription":"The MetadataControl control displays a list of labels and hyper-links separated by a bullet.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"dockpanel-1","controlId":"dockpanel","controlName":"DockPanel","headerText":"Basic usage","xaml":"\u003Ccontrols:DockPanel\n Grid.Column=\u00221\u0022\n HorizontalSpacing=\u00225\u0022\n LastChildFill=\u0022False\u0022\n VerticalSpacing=\u00225\u0022\u003E\n \u003CStackPanel\n controls:DockPanel.Dock=\u0022Top\u0022\n Background=\u0022Black\u0022 /\u003E\n \u003CStackPanel\n controls:DockPanel.Dock=\u0022Left\u0022\n Background=\u0022Red\u0022 /\u003E\n \u003CStackPanel\n controls:DockPanel.Dock=\u0022Bottom\u0022\n Background=\u0022Green\u0022 /\u003E\n \u003CStackPanel\n controls:DockPanel.Dock=\u0022Right\u0022\n Background=\u0022Blue\u0022 /\u003E\n \u003C/controls:DockPanel\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\nusing Windows.UI;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n private static readonly Random Rand = new Random();\n\n public YourPage()\n {\n this.InitializeComponent();\n }\n\n private void ClearAllDock(object sender, RoutedEventArgs e)\n {\n SampleDockPanel.Children.Clear();\n SampleDockPanel.LastChildFill = false;\n }\n\n private void AddStretchDock(object sender, RoutedEventArgs e)\n {\n AddChild(Dock.Bottom, false, false);\n SampleDockPanel.LastChildFill = true;\n }\n\n private void AddBottomDock(object sender, RoutedEventArgs e)\n {\n AddChild(Dock.Bottom, false, true);\n }\n\n private void AddTopDock(object sender, RoutedEventArgs e)\n {\n AddChild(Dock.Top, false, true);\n }\n\n private void AddLeftDock(object sender, RoutedEventArgs e)\n {\n AddChild(Dock.Left, true, false);\n }\n\n private void AddRightDock(object sender, RoutedEventArgs e)\n {\n AddChild(Dock.Right, true, false);\n }\n\n private void AddChild(Dock dock, bool setWidth = false, bool setHeight = false)\n {\n if (SampleDockPanel.LastChildFill)\n {\n return;\n }\n\n const int maxColor = 255;\n var childStackPanel = new StackPanel\n {\n Background = new SolidColorBrush(Color.FromArgb(\n (byte)Rand.Next(0, maxColor),\n (byte)Rand.Next(0, maxColor),\n (byte)Rand.Next(0, maxColor),\n 1))\n };\n\n if (setHeight)\n {\n childStackPanel.Height = Rand.Next(50, 80);\n }\n\n if (setWidth)\n {\n childStackPanel.Width = Rand.Next(50, 80);\n }\n\n childStackPanel.SetValue(DockPanel.DockProperty, dock);\n childStackPanel.PointerPressed \u002B= this.ChildStackPanel_PointerPressed;\n SampleDockPanel.Children.Add(childStackPanel);\n }\n\n private void ChildStackPanel_PointerPressed(object sender, PointerRoutedEventArgs e)\n {\n SampleDockPanel.Children.Remove((StackPanel)sender);\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Primitives","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The DockPanel position child controls based on the child Dock property, you have 4 options to Dock, left (Default), right, top, bottom.","controlDescription":"Defines an area where you can arrange child elements either horizontally or vertically, relative to each other.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"staggeredlayout-1","controlId":"staggeredlayout","controlName":"StaggeredLayout","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CScrollViewer\u003E\n \u003Cmuxc:ItemsRepeater\n ItemTemplate=\u0022{StaticResource StaggeredTemplate}\u0022\n ItemsSource=\u0022{x:Bind ColorsCollection, Mode=OneWay}\u0022\u003E\n \u003Cmuxc:ItemsRepeater.Layout\u003E\n \u003Ccontrols:StaggeredLayout ColumnSpacing=\u0022{x:Bind ColumnSpacing, Mode=OneWay}\u0022\n DesiredColumnWidth=\u0022{x:Bind DesiredColumnWidth, Mode=OneWay}\u0022\n ItemsStretch=\u0022{x:Bind local:StaggeredLayoutSample.ConvertStringToStaggeredLayoutItemsStretch(ItemsStretchProperty), Mode=OneWay}\u0022\n RowSpacing=\u0022{x:Bind RowSpacing, Mode=OneWay}\u0022 /\u003E\n \u003C/muxc:ItemsRepeater.Layout\u003E\n \u003C/muxc:ItemsRepeater\u003E\n \u003C/ScrollViewer\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\nusing Windows.UI;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public ObservableCollection\u003CColorItem\u003E ColorsCollection = new();\n public Random random;\n\n public YourPage()\n {\n this.InitializeComponent();\n\n random = new Random(DateTime.Now.Millisecond);\n for (int i = 0; i \u003C random.Next(100, 200); i\u002B\u002B)\n {\n var item = new ColorItem { Index = i, Height = random.Next(50, 250), Color = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)) };\n ColorsCollection.Add(item);\n }\n }\n\n}\n\npublic class ColorItem\n{\n public int Index { get; internal set; }\n\n public int Width { get; internal set; }\n\n public int Height { get; internal set; }\n\n public Color Color { get; internal set; }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Primitives","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The StaggeredLayout allows for layout of items in a column approach where an item will be added to whichever column has used the least amount of space.","controlDescription":"The StaggeredLayout displays items in a column approach where an item will be added to whichever column has used the least amount of space.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"staggeredpanel-1","controlId":"staggeredpanel","controlName":"StaggeredPanel","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CGridView Name=\u0022GridView\u0022\n ItemTemplate=\u0022{StaticResource StaggeredTemplate}\u0022\n ItemsSource=\u0022{x:Bind ColorsCollection, Mode=OneWay}\u0022\u003E\n \u003CGridView.ItemsPanel\u003E\n \u003CItemsPanelTemplate\u003E\n \u003Ccontrols:StaggeredPanel ColumnSpacing=\u0022{Binding ColumnSpacing, ElementName=ThisSamplePage, Mode=OneWay}\u0022\n DesiredColumnWidth=\u0022{Binding DesiredColumnWidth, ElementName=ThisSamplePage, Mode=OneWay}\u0022\n RowSpacing=\u0022{Binding RowSpacing, ElementName=ThisSamplePage, Mode=OneWay}\u0022 /\u003E\n \u003C/ItemsPanelTemplate\u003E\n \u003C/GridView.ItemsPanel\u003E\n \u003C/GridView\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\nusing Windows.UI;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public ObservableCollection\u003CColorItem\u003E ColorsCollection = new();\n public Random random;\n\n public YourPage()\n {\n this.InitializeComponent();\n random = new Random(DateTime.Now.Millisecond);\n for (int i = 0; i \u003C random.Next(100, 200); i\u002B\u002B)\n {\n var item = new ColorItem { Index = i, Width = random.Next(50, 250), Height = random.Next(50, 250), Color = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)) };\n ColorsCollection.Add(item);\n }\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Primitives","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The StaggeredPanel allows for layout of items in a column approach where an item will be added to whichever column has used the least amount of space.","controlDescription":"The StaggeredPanel displays items in a column approach where an item will be added to whichever column has used the least amount of space.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"uniformgrid-1","controlId":"uniformgrid","controlName":"UniformGrid","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003Ccontrols:UniformGrid Columns=\u0022{x:Bind (x:Int32)Columns, Mode=OneWay}\u0022\n FirstColumn=\u0022{x:Bind (x:Int32)FirstColumn, Mode=OneWay}\u0022\n Orientation=\u0022{x:Bind local:UniformGridSample.ConvertStringToOrientation(OrientationProperty), Mode=OneWay}\u0022\n Rows=\u0022{x:Bind (x:Int32)Rows, Mode=OneWay}\u0022\u003E\n \u003CBorder Grid.Row=\u00221\u0022\n Grid.RowSpan=\u0022{x:Bind (x:Int32)Item1RowSpan, Mode=OneWay}\u0022\n Grid.Column=\u00221\u0022\n Grid.ColumnSpan=\u0022{x:Bind (x:Int32)Item1ColumnSpan, Mode=OneWay}\u0022\n Background=\u0022AliceBlue\u0022\u003E\n \u003CTextBlock Text=\u00221\u0022 /\u003E\n \u003C/Border\u003E\n \u003CBorder Background=\u0022Cornsilk\u0022\u003E\n \u003CTextBlock Text=\u00222\u0022 /\u003E\n \u003C/Border\u003E\n \u003CBorder Background=\u0022DarkSalmon\u0022\u003E\n \u003CTextBlock Text=\u00223\u0022 /\u003E\n \u003C/Border\u003E\n \u003CBorder Background=\u0022Gainsboro\u0022\u003E\u003C/Border\u003E\u003C/controls:UniformGrid\u003E\u003C/Grid\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Primitives","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"Each cell in the grid, by default, will be the same size. If no value for Rows and Columns are provided, the UniformGrid will create a square layout based on the total number of visible items.","controlDescription":"Presents items in a evenly-spaced set of rows or columns to fill the total available display space. It reacts to changes in the layout as well as the content so it can adapt to different form factors automatically.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"wraplayout-1","controlId":"wraplayout","controlName":"WrapLayout","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003CScrollViewer\u003E\n \u003Cmuxc:ItemsRepeater\n ItemTemplate=\u0022{StaticResource WrapTemplate}\u0022\n ItemsSource=\u0022{x:Bind ColorsCollection, Mode=OneWay}\u0022\u003E\n \u003Cmuxc:ItemsRepeater.Layout\u003E\n \u003Ccontrols:WrapLayout\n HorizontalSpacing=\u0022{x:Bind HorizontalSpacing, Mode=OneWay}\u0022\n VerticalSpacing=\u0022{x:Bind VerticalSpacing, Mode=OneWay}\u0022 /\u003E\n \u003C/muxc:ItemsRepeater.Layout\u003E\n \u003C/muxc:ItemsRepeater\u003E\n \u003C/ScrollViewer\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\nusing Windows.UI;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public ObservableCollection\u003CColorItem\u003E ColorsCollection = new();\n public Random random;\n\n public YourPage()\n {\n this.InitializeComponent();\n\n random = new Random(DateTime.Now.Millisecond);\n for (int i = 0; i \u003C random.Next(1000, 5000); i\u002B\u002B)\n {\n var item = new ColorItem { Index = i, Width = random.Next(50, 250), Height = random.Next(50, 250), Color = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)) };\n ColorsCollection.Add(item);\n }\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Primitives","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"Subsequent ordering happens sequentially from top to bottom or from right to left, depending on the value of the Orientation property.","controlDescription":"The WrapLayout virtualizes child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"wrappanel-1","controlId":"wrappanel","controlName":"WrapPanel","headerText":"Basic usage","xaml":"\u003Ccontrols:WrapPanel\n HorizontalSpacing=\u0022{Binding HorizontalSpacing, ElementName=ThisSamplePage, Mode=OneWay}\u0022\n VerticalSpacing=\u0022{Binding VerticalSpacing, ElementName=ThisSamplePage, Mode=OneWay}\u0022 /\u003E","csharp":"using CommunityToolkit.WinUI;\n\n// TODO: Discuss with Uno folks about their own internal WrapPanel implementation.\nusing WrapPanel = CommunityToolkit.WinUI.Controls.WrapPanel;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n private static readonly Random Rand = new Random();\n private ObservableCollection\u003CPhotoDataItemWithDimension\u003E WrapPanelCollection = new();\n\n public YourPage()\n {\n this.InitializeComponent();\n }\n\n private void ItemControl_ItemClick(object sender, ItemClickEventArgs e)\n {\n var item = e.ClickedItem as PhotoDataItemWithDimension;\n if (item == null)\n {\n return;\n }\n\n WrapPanelCollection.Remove(item);\n }\n\n private void AddButton_Click(object sender, RoutedEventArgs e)\n {\n WrapPanelCollection.Add(new PhotoDataItemWithDimension\n {\n Category = \u0022Remove\u0022,\n Thumbnail = \u0022ms-appx:///Assets/BigFourSummerHeat.jpg\u0022,\n Width = Rand.Next(60, 180),\n Height = Rand.Next(40, 140)\n });\n }\n\n private void AddFixedBtn_Click(object sender, RoutedEventArgs e)\n {\n WrapPanelCollection.Add(new PhotoDataItemWithDimension\n {\n Category = \u0022Remove\u0022,\n Thumbnail = \u0022ms-appx:///Assets/BigFourSummerHeat.jpg\u0022,\n Width = 150,\n Height = 100\n });\n }\n\n private void SwitchBtn_Click(object sender, RoutedEventArgs e)\n {\n if (WrapPanelContainer.FindDescendant\u003CWrapPanel\u003E() is WrapPanel sampleWrapPanel)\n {\n if (sampleWrapPanel.Orientation == Orientation.Horizontal)\n {\n sampleWrapPanel.Orientation = Orientation.Vertical;\n ScrollViewer.SetVerticalScrollMode(WrapPanelContainer, ScrollMode.Disabled);\n ScrollViewer.SetVerticalScrollBarVisibility(WrapPanelContainer, ScrollBarVisibility.Disabled);\n ScrollViewer.SetHorizontalScrollMode(WrapPanelContainer, ScrollMode.Auto);\n ScrollViewer.SetHorizontalScrollBarVisibility(WrapPanelContainer, ScrollBarVisibility.Auto);\n }\n else\n {\n sampleWrapPanel.Orientation = Orientation.Horizontal;\n ScrollViewer.SetVerticalScrollMode(WrapPanelContainer, ScrollMode.Auto);\n ScrollViewer.SetVerticalScrollBarVisibility(WrapPanelContainer, ScrollBarVisibility.Auto);\n// ...truncated","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Primitives","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"Subsequent ordering happens sequentially from top to bottom or from right to left, depending on the value of the Orientation property.","controlDescription":"The WrapPanel Control positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"radialgauge-1","controlId":"radialgauge","controlName":"RadialGauge","headerText":"Basic usage","xaml":"\u003CStackPanel\n Orientation=\u0022Horizontal\u0022\u003E\u003C/StackPanel\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\n/// \u003Csummary\u003E\n/// An example sample page of a custom control inheriting from Panel.\n/// \u003C/summary\u003E\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.RadialGauge","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"This control will make data visualizations and dashboards more engaging with rich style and interactivity.","controlDescription":"The Radial Gauge Control displays a value in a certain range using a needle on a circular face.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"rangeselector-1","controlId":"rangeselector","controlName":"RangeSelector","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003Ccontrols:RangeSelector\n Maximum=\u0022{x:Bind Maximum, Mode=OneWay}\u0022\n Minimum=\u0022{x:Bind Minimum, Mode=OneWay}\u0022\n Orientation=\u0022{x:Bind OrientationMode, Mode=OneWay}\u0022\n RangeEnd=\u0022100\u0022\n RangeStart=\u00220\u0022\n StepFrequency=\u0022{x:Bind StepFrequency, Mode=OneWay}\u0022 /\u003E\n \u003C/Grid\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.RangeSelector","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"A RangeSelector is pretty similar to a regular Slider, and shares some of its properties such as Minimum, Maximum and StepFrequency.","controlDescription":"The RangeSelector Control is a Double Slider control that allows the user to select a sub-range of values from a larger range of possible values. The user can slide from the left or right of the range.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"richsuggestbox-1","controlId":"richsuggestbox","controlName":"RichSuggestBox","headerText":"Multiple Prefixes","xaml":"\u003CStackPanel\u003E\n \u003Ccontrols:RichSuggestBox\n Header=\u0022RichSuggestBox that supports multiple prefixes (@ and #)\u0022\n ItemTemplateSelector=\u0022{StaticResource SuggestionTemplateSelector}\u0022\n Prefixes=\u0022@#\u0022\n SuggestionChosen=\u0022SuggestingBox_SuggestionChosen\u0022\n SuggestionRequested=\u0022SuggestingBox_SuggestionRequested\u0022 /\u003E\n \u003CListView\n ItemTemplate=\u0022{StaticResource TokenTemplate}\u0022 /\u003E\n \u003C/StackPanel\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nusing Microsoft.UI;\nusing Microsoft.UI.Text;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n private readonly List\u003CSampleEmailDataType\u003E _emailSamples = new List\u003CSampleEmailDataType\u003E()\n {\n new SampleEmailDataType() { FirstName = \u0022Marcus\u0022, FamilyName = \u0022Perryman\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Michael\u0022, FamilyName = \u0022Hawker\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Matt\u0022, FamilyName = \u0022Lacey\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Alexandre\u0022, FamilyName = \u0022Chohfi\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Filip\u0022, FamilyName = \u0022Wallberg\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Shane\u0022, FamilyName = \u0022Weaver\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Vincent\u0022, FamilyName = \u0022Gromfeld\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Sergio\u0022, FamilyName = \u0022Pedri\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Alex\u0022, FamilyName = \u0022Wilber\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Allan\u0022, FamilyName = \u0022Deyoung\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Adele\u0022, FamilyName = \u0022Vance\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Grady\u0022, FamilyName = \u0022Archie\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Megan\u0022, FamilyName = \u0022Bowen\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Ben\u0022, FamilyName = \u0022Walters\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Debra\u0022, FamilyName = \u0022Berger\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Emily\u0022, FamilyName = \u0022Braun\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Christine\u0022, FamilyName = \u0022Cline\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Enrico\u0022, FamilyName = \u0022Catteneo\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Davit\u0022, FamilyName = \u0022Badalyan\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Diego\u0022, FamilyName = \u0022Siciliani\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Raul\u0022, FamilyName = \u0022Razo\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Miriam\u0022, FamilyName = \u0022Graham\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Lynne\u0022, FamilyName = \u0022Robbins\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Lydia\u0022, FamilyName = \u0022Holloway\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Nestor\u0022, FamilyName = \u0022Wilke\u0022 },\n// ...truncated","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.RichSuggestBox","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The RichSuggestBox is a combination of AutoSuggestBox and RichEditBox that can provide suggestions based on customizable prefixes.","controlDescription":"A rich text input control that auto-suggests and stores token items in a document.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"richsuggestbox-2","controlId":"richsuggestbox","controlName":"RichSuggestBox","headerText":"Plain Text","xaml":"\u003CStackPanel\u003E\n \u003Ccontrols:RichSuggestBox\n ClipboardCopyFormat=\u0022PlainText\u0022\n ClipboardPasteFormat=\u0022PlainText\u0022\n DisabledFormattingAccelerators=\u0022All\u0022\n FlyoutBase.AttachedFlyout=\u0022{StaticResource TokenSelectedFlyout}\u0022\n Header=\u0022Plain text RichSuggestBox with on token pointer over flyout\u0022\n ItemTemplate=\u0022{StaticResource EmailTemplate}\u0022\n Prefixes=\u0022@\u0022\n SuggestionChosen=\u0022SuggestingBox_SuggestionChosen\u0022\n SuggestionRequested=\u0022SuggestingBox_SuggestionRequested\u0022\n TokenPointerOver=\u0022SuggestingBox_TokenPointerOver\u0022 /\u003E\n \u003CListView\n ItemTemplate=\u0022{StaticResource TokenTemplate}\u0022 /\u003E\n \u003C/StackPanel\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nusing Microsoft.UI;\nusing Microsoft.UI.Dispatching;\nusing Microsoft.UI.Text;\n\nnamespace YourApp;\n\npublic sealed partial class RichSuggestBoxPlainTextSample : Page\n{\n private DispatcherQueue _dispatcherQueue;\n private readonly List\u003CSampleEmailDataType\u003E _emailSamples = new List\u003CSampleEmailDataType\u003E()\n {\n new SampleEmailDataType() { FirstName = \u0022Marcus\u0022, FamilyName = \u0022Perryman\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Michael\u0022, FamilyName = \u0022Hawker\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Matt\u0022, FamilyName = \u0022Lacey\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Alexandre\u0022, FamilyName = \u0022Chohfi\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Filip\u0022, FamilyName = \u0022Wallberg\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Shane\u0022, FamilyName = \u0022Weaver\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Vincent\u0022, FamilyName = \u0022Gromfeld\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Sergio\u0022, FamilyName = \u0022Pedri\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Alex\u0022, FamilyName = \u0022Wilber\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Allan\u0022, FamilyName = \u0022Deyoung\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Adele\u0022, FamilyName = \u0022Vance\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Grady\u0022, FamilyName = \u0022Archie\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Megan\u0022, FamilyName = \u0022Bowen\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Ben\u0022, FamilyName = \u0022Walters\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Debra\u0022, FamilyName = \u0022Berger\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Emily\u0022, FamilyName = \u0022Braun\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Christine\u0022, FamilyName = \u0022Cline\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Enrico\u0022, FamilyName = \u0022Catteneo\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Davit\u0022, FamilyName = \u0022Badalyan\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Diego\u0022, FamilyName = \u0022Siciliani\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Raul\u0022, FamilyName = \u0022Razo\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Miriam\u0022, FamilyName = \u0022Graham\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Lynne\u0022, FamilyName = \u0022Robbins\u0022 },\n new SampleEmailDataType() { FirstName = \u0022Lydia\u0022, FamilyName = \u0022Holloway\u0022 },\n// ...truncated","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.RichSuggestBox","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":null,"controlDescription":"A rich text input control that auto-suggests and stores token items in a document.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"segmented-1","controlId":"segmented","controlName":"Segmented","headerText":"Example 1","xaml":"\u003Ccontrols:Segmented HorizontalAlignment=\u0022{x:Bind local:SegmentedBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}\u0022\n Orientation=\u0022{x:Bind local:SegmentedBasicSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}\u0022\n SelectionMode=\u0022{x:Bind local:SegmentedBasicSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}\u0022\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Item 1\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xEA3A;}\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Item 2\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xEA3A;}\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Item 3 with a long label\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xEA3A;}\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Item 4\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xEA3A;}\u0022 /\u003E\n \u003C/controls:Segmented\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Segmented","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"The Segmented control is best used with 2-5 items and does not support overflow. The Icon and Content property can be set on the SegmentedItems.","controlDescription":"A common UI control to configure a view or setting.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"segmented-2","controlId":"segmented","controlName":"Segmented","headerText":"Example 2","xaml":"\u003Ccontrols:Segmented HorizontalAlignment=\u0022{x:Bind local:SegmentedBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}\u0022\n Orientation=\u0022{x:Bind local:SegmentedBasicSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}\u0022\n SelectionMode=\u0022{x:Bind local:SegmentedBasicSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}\u0022\u003E\n \u003Ccontrols:SegmentedItem Icon=\u0022{ui:FontIcon Glyph=\u0026#xE8BF;}\u0022\n ToolTipService.ToolTip=\u0022Day view\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Icon=\u0022{ui:FontIcon Glyph=\u0026#xE8C0;}\u0022\n ToolTipService.ToolTip=\u0022Week view\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Icon=\u0022{ui:FontIcon Glyph=\u0026#xE787;}\u0022\n ToolTipService.ToolTip=\u0022Month view\u0022 /\u003E\n \u003C/controls:Segmented\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Segmented","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"The Segmented control is best used with 2-5 items and does not support overflow. The Icon and Content property can be set on the SegmentedItems.","controlDescription":"A common UI control to configure a view or setting.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"segmented-3","controlId":"segmented","controlName":"Segmented","headerText":"Example 1","xaml":"\u003Ccontrols:Segmented Orientation=\u0022{x:Bind local:SegmentedStylesSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}\u0022\n SelectionMode=\u0022{x:Bind local:SegmentedStylesSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}\u0022\n Style=\u0022{StaticResource PivotSegmentedStyle}\u0022\u003E\n \u003Ccontrols:SegmentedItem\u003EItem 1\u003C/controls:SegmentedItem\u003E\n \u003Ccontrols:SegmentedItem\u003EItem 2\u003C/controls:SegmentedItem\u003E\n \u003Ccontrols:SegmentedItem\u003EItem with long label\u003C/controls:SegmentedItem\u003E\n \u003Ccontrols:SegmentedItem\u003EItem 4\u003C/controls:SegmentedItem\u003E\n \u003C/controls:Segmented\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Segmented","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"The Segmented control contains various additional styles, to match the look and feel of your application.","controlDescription":"A common UI control to configure a view or setting.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"segmented-4","controlId":"segmented","controlName":"Segmented","headerText":"Example 2","xaml":"\u003Ccontrols:Segmented Orientation=\u0022{x:Bind local:SegmentedStylesSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}\u0022\n SelectionMode=\u0022{x:Bind local:SegmentedStylesSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}\u0022\n Style=\u0022{StaticResource ButtonSegmentedStyle}\u0022\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Day\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xE8BF;}\u0022\n ToolTipService.ToolTip=\u0022Day view\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Week\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xE8C0;}\u0022\n ToolTipService.ToolTip=\u0022Week view\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Month\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xE787;}\u0022\n ToolTipService.ToolTip=\u0022Month view\u0022 /\u003E\n \u003C/controls:Segmented\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Segmented","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"The Segmented control contains various additional styles, to match the look and feel of your application.","controlDescription":"A common UI control to configure a view or setting.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"segmented-5","controlId":"segmented","controlName":"Segmented","headerText":"Switch Presenter","xaml":"\u003Ccontrols:Segmented\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Square\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xE739;}\u0022\n Tag=\u0022square\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Circle\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xEA3A;}\u0022\n Tag=\u0022circle\u0022 /\u003E\n \u003Ccontrols:SegmentedItem Content=\u0022Rectangle\u0022\n Icon=\u0022{ui:FontIcon Glyph=\u0026#xE7FB;}\u0022\n Tag=\u0022rect\u0022 /\u003E\n \u003C/controls:Segmented\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\n/// \u003Csummary\u003E\n/// An example sample page of a Segmented control.\n/// \u003C/summary\u003E\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Segmented","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"The Segmented control can be combined with e.g. a SwitchPresenter to provide easy navigation and with limited XAML and no code-behind!","controlDescription":"A common UI control to configure a view or setting.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"settingscard-1","controlId":"settingscard","controlName":"SettingsCard","headerText":"A clickable SettingsCard","xaml":"\u003Ccontrols:SettingsCard\n Click=\u0022OnCardClicked\u0022\n Description=\u0022A SettingsCard can be made clickable and you can leverage the Command property or Click event.\u0022\n Header=\u0022A clickable SettingsCard\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE799;}\u0022\n IsClickEnabled=\u0022True\u0022\u003E\n \u003CTextBlock Foreground=\u0022{ThemeResource TextFillColorSecondaryBrush}\u0022\n Text=\u0022This is content\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"SettingsCard can also be turned into a button, by setting the IsClickEnabled property. This can be useful whenever you want your settings component to navigate to a detail page or open an external link.","controlDescription":"A card control that can be used to create Windows 11 style settings experiences.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"settingscard-2","controlId":"settingscard","controlName":"SettingsCard","headerText":"Customizing the ActionIcon","xaml":"\u003Ccontrols:SettingsCard ActionIcon=\u0022{ui:FontIcon Glyph=\u0026#xE8A7;}\u0022\n ActionIconToolTip=\u0022Open in new window\u0022\n Click=\u0022OnCardClicked\u0022\n Description=\u0022You can customize the ActionIcon and ActionIconToolTip.\u0022\n Header=\u0022Customizing the ActionIcon\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE774;}\u0022\n IsClickEnabled=\u0022True\u0022 /\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"SettingsCard can also be turned into a button, by setting the IsClickEnabled property. This can be useful whenever you want your settings component to navigate to a detail page or open an external link.","controlDescription":"A card control that can be used to create Windows 11 style settings experiences.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"settingscard-3","controlId":"settingscard","controlName":"SettingsCard","headerText":"Hiding the ActionIcon","xaml":"\u003Ccontrols:SettingsCard Click=\u0022OnCardClicked\u0022\n Header=\u0022Hiding the ActionIcon\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE72E;}\u0022\n IsActionIconVisible=\u0022False\u0022\n IsClickEnabled=\u0022True\u0022 /\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"SettingsCard can also be turned into a button, by setting the IsClickEnabled property. This can be useful whenever you want your settings component to navigate to a detail page or open an external link.","controlDescription":"A card control that can be used to create Windows 11 style settings experiences.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"settingscard-4","controlId":"settingscard","controlName":"SettingsCard","headerText":"This is a default card, with the Header, HeaderIcon, Description and Content set.","xaml":"\u003Ccontrols:SettingsCard\n Description=\u0022This is a default card, with the Header, HeaderIcon, Description and Content set.\u0022\n Header=\u0022This is the Header\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE799;}\u0022\u003E\n \u003CComboBox\u003E\n \u003CComboBoxItem\u003EOption 1\u003C/ComboBoxItem\u003E\n \u003CComboBoxItem\u003EOption 2\u003C/ComboBoxItem\u003E\n \u003CComboBoxItem\u003EOption 3\u003C/ComboBoxItem\u003E\n \u003C/ComboBox\u003E\n \u003C/controls:SettingsCard\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"SettingsCard is a control that can be used to display settings in your experience. It uses the default styling found in Windows 11 and is easy to use, meets all accessibility standards and will make your settings page look great! You can...","controlDescription":"A card control that can be used to create Windows 11 style settings experiences.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"settingscard-5","controlId":"settingscard","controlName":"SettingsCard","headerText":"Icon options","xaml":"\u003Ccontrols:SettingsCard Description=\u0022You can use a FontIcon, SymbolIcon or BitmapIcon to set the cards HeaderIcon.\u0022\n Header=\u0022Icon options\u0022\n HeaderIcon=\u0022{ui:BitmapIcon Source=ms-appx:///Assets/AppTitleBar.scale-200.png}\u0022\u003E\n \u003CToggleSwitch /\u003E\n \u003C/controls:SettingsCard\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"SettingsCard is a control that can be used to display settings in your experience. It uses the default styling found in Windows 11 and is easy to use, meets all accessibility standards and will make your settings page look great! You can...","controlDescription":"A card control that can be used to create Windows 11 style settings experiences.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"settingscard-6","controlId":"settingscard","controlName":"SettingsCard","headerText":"A card with custom objects as its Description","xaml":"\u003Ccontrols:SettingsCard Header=\u0022A card with custom objects as its Description\u0022\u003E\n \u003Ccontrols:SettingsCard.Description\u003E\n \u003CHyperlinkButton Content=\u0022Learn more about Phone Link\u0022 /\u003E\n \u003C/controls:SettingsCard.Description\u003E\n \u003CButton Content=\u0022Open Phone Link\u0022\n Style=\u0022{StaticResource AccentButtonStyle}\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"SettingsCard is a control that can be used to display settings in your experience. It uses the default styling found in Windows 11 and is easy to use, meets all accessibility standards and will make your settings page look great! You can...","controlDescription":"A card control that can be used to create Windows 11 style settings experiences.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"settingscard-7","controlId":"settingscard","controlName":"SettingsCard","headerText":"Adaptive layouts","xaml":"\u003Ccontrols:SettingsCard Description=\u0022When resizing a SettingsCard, the Content will wrap vertically. You can override this breakpoint by setting the SettingsCardWrapThreshold resource. For edge cases, you can also hide the icon by setting SettingsCardWrapNoIconThreshold.\u0022\n Header=\u0022Adaptive layouts\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE745;}\u0022\u003E\n \u003Ccontrols:SettingsCard.Resources\u003E\n \u003Cx:Double x:Key=\u0022SettingsCardWrapThreshold\u0022\u003E800\u003C/x:Double\u003E\n \u003Cx:Double x:Key=\u0022SettingsCardWrapNoIconThreshold\u0022\u003E600\u003C/x:Double\u003E\n \u003C/controls:SettingsCard.Resources\u003E\n \u003CButton Content=\u0022This control will wrap vertically!\u0022\n Style=\u0022{StaticResource AccentButtonStyle}\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"SettingsCard is a control that can be used to display settings in your experience. It uses the default styling found in Windows 11 and is easy to use, meets all accessibility standards and will make your settings page look great! You can...","controlDescription":"A card control that can be used to create Windows 11 style settings experiences.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"settingscard-8","controlId":"settingscard","controlName":"SettingsCard","headerText":"Example 5","xaml":"\u003Ccontrols:SettingsCard Header=\u0022This is a card with a Header only\u0022 /\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"SettingsCard is a control that can be used to display settings in your experience. It uses the default styling found in Windows 11 and is easy to use, meets all accessibility standards and will make your settings page look great! You can...","controlDescription":"A card control that can be used to create Windows 11 style settings experiences.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"settingsexpander-1","controlId":"settingsexpander","controlName":"SettingsExpander","headerText":"Drag Handle","xaml":"\u003Ccontrols:SettingsExpander Grid.Column=\u00221\u0022\n Description=\u0022{x:Bind Info}\u0022\n Header=\u0022{x:Bind Name}\u0022\n IsExpanded=\u0022{x:Bind IsExpanded, Mode=TwoWay}\u0022\u003E\n \u003CToggleSwitch IsOn=\u0022{x:Bind IsExpanded, Mode=TwoWay}\u0022\n OffContent=\u0022Off\u0022\n OnContent=\u0022On\u0022 /\u003E\n \u003Ccontrols:SettingsExpander.Items\u003E\n \u003Ccontrols:SettingsCard Header=\u0022{x:Bind LinkDescription}\u0022\u003E\n \u003CHyperlinkButton Content=\u0022{x:Bind Url}\u0022\n NavigateUri=\u0022{x:Bind Url}\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\n \u003C/controls:SettingsExpander.Items\u003E\n \u003C/controls:SettingsExpander\u003E","csharp":"using CommunityToolkit.Mvvm.ComponentModel;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n\n public ObservableCollection\u003CExpandedCardInfo\u003E MyDataSet = new() {\n new()\n {\n Name = \u0022First Item\u0022,\n Info = \u0022More about first item.\u0022,\n LinkDescription = \u0022Click the link for more on first item.\u0022,\n Url = \u0022https://microsoft.com/\u0022,\n },\n new()\n {\n Name = \u0022Second Item\u0022,\n Info = \u0022More about second item.\u0022,\n LinkDescription = \u0022Click the link for more on second item.\u0022,\n Url = \u0022https://xbox.com/\u0022,\n },\n new()\n {\n Name = \u0022Third Item\u0022,\n Info = \u0022More about third item.\u0022,\n LinkDescription = \u0022Click the link for more on third item.\u0022,\n Url = \u0022https://toolkitlabs.dev/\u0022,\n },\n };\n\n public YourPage()\n {\n this.InitializeComponent();\n }\n}\n\npublic partial class ExpandedCardInfo : ObservableObject\n{\n public string? Name { get; set; }\n\n public string? Info { get; set; }\n\n public string? LinkDescription { get; set; }\n\n public string? Url { get; set; }\n\n [ObservableProperty]\n public partial bool IsExpanded { get; set; } = false;\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"You may use a list of SettingsCard or SettingsExpander to represent configurable items within a tool.","controlDescription":"An expander control that can be used to create Windows 11 style settings experiences.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"settingsexpander-2","controlId":"settingsexpander","controlName":"SettingsExpander","headerText":"Settings Expander with ItemsSource","xaml":"\u003Ccontrols:SettingsExpander Description=\u0022The SettingsExpander can use ItemsSource to define its Items.\u0022\n Header=\u0022Settings Expander with ItemsSource\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xEA37;}\u0022\n ItemsSource=\u0022{x:Bind MyDataSet}\u0022\u003E\n \u003Ccontrols:SettingsExpander.ItemTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:MyDataModel\u0022\u003E\n \u003Ccontrols:SettingsCard Description=\u0022{x:Bind Info}\u0022\n Header=\u0022{x:Bind Name}\u0022\u003E\n \u003CHyperlinkButton Content=\u0022{x:Bind LinkDescription}\u0022\n NavigateUri=\u0022{x:Bind Url}\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\n \u003C/DataTemplate\u003E\n \u003C/controls:SettingsExpander.ItemTemplate\u003E\n \u003Ccontrols:SettingsExpander.ItemsHeader\u003E\n \u003Cmuxc:InfoBar Title=\u0022This is the ItemsHeader\u0022\n IsIconVisible=\u0022False\u0022\n IsOpen=\u0022True\u0022\n Severity=\u0022Success\u0022\u003E\n \u003Cmuxc:InfoBar.ActionButton\u003E\n \u003CHyperlinkButton Content=\u0022It can host custom content\u0022 /\u003E\n \u003C/muxc:InfoBar.ActionButton\u003E\n \u003C/muxc:InfoBar\u003E\n \u003C/controls:SettingsExpander.ItemsHeader\u003E\n \u003Ccontrols:SettingsExpander.ItemsFooter\u003E\n \u003Ccontrols:SettingsCard Header=\u0022This is the ItemsFooter\u0022\n Style=\u0022{StaticResource DefaultSettingsExpanderItemStyle}\u0022\u003E\n \u003CButton Content=\u0022Add a device\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\n \u003C/controls:SettingsExpander.ItemsFooter\u003E\n \u003C/controls:SettingsExpander\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"You can easily override certain properties to create custom experiences. For instance, you can customize the ContentAlignment of a SettingsCard, to align your content to the Right (default), Left (hiding the HeaderIcon, Header and Descri...","controlDescription":"An expander control that can be used to create Windows 11 style settings experiences.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"settingsexpander-3","controlId":"settingsexpander","controlName":"SettingsExpander","headerText":"Settings Expander with a custom ItemTemplate","xaml":"\u003Ccontrols:SettingsExpander Description=\u0022SettingsExpander can use a DataTemplate, DataTemplateSelector, or IElementFactory for its ItemTemplate.\u0022\n Header=\u0022Settings Expander with a custom ItemTemplate\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE8FD;}\u0022\n ItemsSource=\u0022{x:Bind MyDataSet}\u0022\u003E\n \u003Ccontrols:SettingsExpander.ItemTemplate\u003E\n \u003Clocal:MyDataModelTemplateSelector\u003E\n \u003Clocal:MyDataModelTemplateSelector.ButtonTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:MyDataModel\u0022\u003E\n \u003Ccontrols:SettingsCard Description=\u0022{x:Bind ItemType}\u0022\n Header=\u0022{x:Bind Name}\u0022\u003E\n \u003CButton Click=\u0022Button_Click\u0022\n Content=\u0022{x:Bind LinkDescription}\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\n \u003C/DataTemplate\u003E\n \u003C/local:MyDataModelTemplateSelector.ButtonTemplate\u003E\n \u003Clocal:MyDataModelTemplateSelector.LinkButtonTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:MyDataModel\u0022\u003E\n \u003Ccontrols:SettingsCard Description=\u0022{x:Bind ItemType}\u0022\n Header=\u0022{x:Bind Name}\u0022\u003E\n \u003CHyperlinkButton Content=\u0022{x:Bind LinkDescription}\u0022\n NavigateUri=\u0022{x:Bind Url}\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\n \u003C/DataTemplate\u003E\n \u003C/local:MyDataModelTemplateSelector.LinkButtonTemplate\u003E\n \u003Clocal:MyDataModelTemplateSelector.NoButtonTemplate\u003E\n \u003CDataTemplate x:DataType=\u0022local:MyDataModel\u0022\u003E\n \u003Ccontrols:SettingsCard Description=\u0022{x:Bind ItemType}\u0022\n Header=\u0022{x:Bind Name}\u0022 /\u003E\n \u003C/DataTemplate\u003E\n \u003C/local:MyDataModelTemplateSelector.NoButtonTemplate\u003E\n \u003C/local:MyDataModelTemplateSelector\u003E\n \u003C/controls:SettingsExpander.ItemTemplate\u003E\n \u003C/controls:SettingsExpander\u003E","csharp":null,"source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"You can easily override certain properties to create custom experiences. For instance, you can customize the ContentAlignment of a SettingsCard, to align your content to the Right (default), Left (hiding the HeaderIcon, Header and Descri...","controlDescription":"An expander control that can be used to create Windows 11 style settings experiences.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"settingsexpander-4","controlId":"settingsexpander","controlName":"SettingsExpander","headerText":"Basic usage","xaml":"\u003Ccontrols:SettingsExpander\n Description=\u0022The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection.\u0022\n Header=\u0022SettingsExpander\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE91B;}\u0022\u003E\n \u003CComboBox\u003E\n \u003CComboBoxItem\u003EOption 1\u003C/ComboBoxItem\u003E\n \u003CComboBoxItem\u003EOption 2\u003C/ComboBoxItem\u003E\n \u003CComboBoxItem\u003EOption 3\u003C/ComboBoxItem\u003E\n \u003C/ComboBox\u003E\n \u003Ccontrols:SettingsExpander.Items\u003E\n \u003Ccontrols:SettingsCard Header=\u0022A basic SettingsCard within an SettingsExpander\u0022\u003E\n \u003CButton Content=\u0022Button\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\n \u003Ccontrols:SettingsCard Description=\u0022SettingsCard within an Expander can be made clickable too!\u0022\n Header=\u0022This item can be clicked\u0022\n IsClickEnabled=\u0022True\u0022 /\u003E\u003C/controls:SettingsExpander.Items\u003E\u003C/controls:SettingsExpander\u003E\n\u003C!-- ...truncated --\u003E","csharp":"namespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"The SettingsExpander can be used to group multiple SettingsCards into a single collapsible group. A SettingsExpander can have it\u0027s own content to display a setting on the right, just like a SettingsCard, but in addition can have any numb...","controlDescription":"An expander control that can be used to create Windows 11 style settings experiences.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"settingscard-9","controlId":"settingscard","controlName":"SettingsCard","headerText":"Settings Page Example","xaml":"\u003Ccontrols:SettingsCard Description=\u0022This is a default card, with the Header, HeaderIcon, Description and Content set\u0022\n Header=\u0022This is the Header\u0022\n HeaderIcon=\u0022{ui:FontIcon Glyph=\u0026#xE716;}\u0022\u003E\n \u003CToggleSwitch IsOn=\u0022True\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\r\n\r\n\u003Ccontrols:SettingsCard Header=\u0022A basic SettingsCard within an SettingsExpander\u0022\u003E\n \u003CButton Content=\u0022Button\u0022 /\u003E\n \u003C/controls:SettingsCard\u003E\r\n\r\n\u003Ccontrols:SettingsCard Description=\u0022SettingsCard within an Expander can be made clickable too!\u0022\n Header=\u0022This item can be clicked\u0022\n IsClickEnabled=\u0022True\u0022 /\u003E\r\n\r\n\u003Ccontrols:SettingsCard ContentAlignment=\u0022Left\u0022\u003E\n \u003CCheckBox Content=\u0022Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons\u0022 /\u003E\u003C/controls:SettingsCard\u003E\n\u003C!-- ...truncated --\u003E","csharp":"namespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.SettingsControls","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"The following sample provides a typical design page, following the correct Windows 11 design specifications for things like spacing, section headers and animations.","controlDescription":"A card control that can be used to create Windows 11 style settings experiences.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"contentsizer-1","controlId":"contentsizer","controlName":"ContentSizer","headerText":"Left Shelf","xaml":"\u003CGrid\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 /\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 /\u003E\n \u003CColumnDefinition /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003CBorder\u003E\n \u003CTextBlock\n Foreground=\u0022{ThemeResource TextOnAccentFillColorPrimaryBrush}\u0022\n Style=\u0022{ThemeResource BodyStrongTextBlockStyle}\u0022\n Text=\u0022Side Content\u0022 /\u003E\n \u003C/Border\u003E\n \u003Ccontrols:ContentSizer Grid.Column=\u00221\u0022\n TargetControl=\u0022{x:Bind SideContent}\u0022 /\u003E\n \u003C/Grid\u003E","csharp":"namespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Sizers","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The following example shows how to use the ContentSizer to create a left-side shelf; however, this scenario can also be accomplished with a GridSplitter.","controlDescription":"The ContentSizer is a control which can be used to resize any element, usually its parent.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"contentsizer-2","controlId":"contentsizer","controlName":"ContentSizer","headerText":"Top Shelf","xaml":"\u003CGrid\u003E\n \u003CGrid.RowDefinitions\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022Auto\u0022 /\u003E\n \u003CRowDefinition Height=\u0022*\u0022 /\u003E\n \u003C/Grid.RowDefinitions\u003E\n \u003Cmuxc:Expander\n HorizontalContentAlignment=\u0022Stretch\u0022\n ExpandDirection=\u0022Up\u0022\n Header=\u0022This is some Shelf\u0022\n IsExpanded=\u0022True\u0022\u003E\n \u003CGrid\u003E\n \u003CTextBlock\n Text=\u0022This is the expanded content\u0022\n TextWrapping=\u0022Wrap\u0022 /\u003E\n \u003C/Grid\u003E\n \u003C/muxc:Expander\u003E\n \u003Ccontrols:ContentSizer Grid.Row=\u00221\u0022\n Orientation=\u0022Horizontal\u0022\n TargetControl=\u0022{x:Bind ExpandContent}\u0022\n Visibility=\u0022{x:Bind TopExpander.IsExpanded, Mode=OneWay}\u0022 /\u003E\n \u003C/Grid\u003E","csharp":"namespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Sizers","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"If you are using a Grid, use GridSplitter instead. The main use-case for a ContentSizer is to create an expandable shelf for your application.","controlDescription":"The ContentSizer is a control which can be used to resize any element, usually its parent.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"gridsplitter-1","controlId":"gridsplitter","controlName":"GridSplitter","headerText":"Basic usage","xaml":"\u003Ccontrols:GridSplitter Grid.Column=\u00221\u0022\n ResizeBehavior=\u0022BasedOnAlignment\u0022\n ResizeDirection=\u0022Auto\u0022\u003E\n \u003Ccontrols:GridSplitter.RenderTransform\u003E\n \u003CTranslateTransform X=\u0022-7\u0022 /\u003E\n \u003C/controls:GridSplitter.RenderTransform\u003E\n \u003C/controls:GridSplitter\u003E\r\n\r\n\u003Ccontrols:GridSplitter Grid.Row=\u00221\u0022\n Grid.ColumnSpan=\u00224\u0022\u003E\n \u003Ccontrols:GridSplitter.RenderTransform\u003E\n \u003CTranslateTransform Y=\u0022-7\u0022 /\u003E\n \u003C/controls:GridSplitter.RenderTransform\u003E\n \u003C/controls:GridSplitter\u003E\r\n\r\n\u003Ccontrols:GridSplitter Grid.Row=\u00220\u0022\n Grid.RowSpan=\u00222\u0022\n Grid.Column=\u00223\u0022\n ResizeBehavior=\u0022BasedOnAlignment\u0022\n ResizeDirection=\u0022Auto\u0022\u003E\n \u003Ccontrols:GridSplitter.RenderTransform\u003E\n \u003CTranslateTransform X=\u0022-7\u0022 /\u003E\u003C/controls:GridSplitter.RenderTransform\u003E\u003C/controls:GridSplitter\u003E\n\u003C!-- ...truncated --\u003E","csharp":"namespace YourApp;\n\n/// \u003Csummary\u003E\n/// An empty page that can be used on its own or navigated to within a Frame.\n/// \u003C/summary\u003E\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Sizers","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The control automatically detects the targeted columns/rows to resize, while dragging the control it starts to resize the columns/rows and redistributes space between columns/rows, you can manually specify the ResizeDirection (Auto / Col...","controlDescription":"The GridSplitter control provides an easy-to-use Splitter that redistributes space between columns or rows of a Grid Control.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"propertysizer-1","controlId":"propertysizer","controlName":"PropertySizer","headerText":"Navigation View","xaml":"\u003Ccontrols:PropertySizer\n Binding=\u0022{x:Bind ViewPanel.OpenPaneLength, Mode=TwoWay}\u0022\n Maximum=\u0022440\u0022\n Minimum=\u002252\u0022\n Visibility=\u0022{x:Bind ViewPanel.IsPaneOpen, Mode=OneWay}\u0022 /\u003E","csharp":"namespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Sizers","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"The main use-case is for PropertySizer to allow you to manipulate the OpenPaneLength property of a NavigationView control to create a user customizable size shelf.","controlDescription":"The PropertySizer is a control which can be used to manipulate the value of another double based property.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"contentsizer-3","controlId":"contentsizer","controlName":"ContentSizer","headerText":"Sizer Cursor","xaml":"\u003CGrid\u003E\n \u003CGrid.ColumnDefinitions\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 /\u003E\n \u003CColumnDefinition Width=\u0022Auto\u0022 /\u003E\n \u003CColumnDefinition /\u003E\n \u003C/Grid.ColumnDefinitions\u003E\n \u003Ccontrols:ContentSizer Grid.Column=\u00221\u0022\n Cursor=\u0022Hand\u0022\n TargetControl=\u0022{x:Bind SomeContent}\u0022 /\u003E\n \u003C/Grid\u003E","csharp":"namespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.Sizers","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022"],"description":"You may want to change the cursor that is shown when hovering over your element like this:","controlDescription":"The ContentSizer is a control which can be used to resize any element, usually its parent.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"tabbedcommandbar-1","controlId":"tabbedcommandbar","controlName":"TabbedCommandBar","headerText":"Basic usage","xaml":"\u003CGrid\u003E\n \u003Ccontrols:TabbedCommandBar\u003E\n \u003Ccontrols:TabbedCommandBar.AutoSuggestBox\u003E\n \u003CAutoSuggestBox\n QueryIcon=\u0022Find\u0022 /\u003E\n \u003C/controls:TabbedCommandBar.AutoSuggestBox\u003E\n \u003Ccontrols:TabbedCommandBar.PaneFooter\u003E\n \u003CCommandBar Background=\u0022Transparent\u0022\n DefaultLabelPosition=\u0022Right\u0022\u003E\n \u003CAppBarButton Icon=\u0022{ui:FontIcon Glyph=\u0026#xE72D;}\u0022\n Label=\u0022Share\u0022 /\u003E\n \u003CAppBarButton Icon=\u0022{ui:FontIcon Glyph=\u0026#xE8BD;}\u0022\n Label=\u0022Comments\u0022 /\u003E\n \u003C/CommandBar\u003E\n \u003C/controls:TabbedCommandBar.PaneFooter\u003E\n \u003Ccontrols:TabbedCommandBar.MenuItems\u003E\n \u003Ccontrols:TabbedCommandBarItem Header=\u0022Home\u0022\u003E\n \u003CAppBarButton Icon=\u0022{ui:FontIcon Glyph=\u0026#xE7A7;}\u0022\n Label=\u0022Undo\u0022 /\u003E\u003C/controls:TabbedCommandBarItem\u003E\u003C/controls:TabbedCommandBar.MenuItems\u003E\u003C/controls:TabbedCommandBar\u003E\u003C/Grid\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public YourPage()\n {\n this.InitializeComponent();\n }\n}","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.TabbedCommandBar","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"The TabbedCommandBar displays a set of TabbedCommandBarItem in a shared container found in many productivity type apps.","controlDescription":"A control for displaying multiple CommandBars in the same space, like Microsoft Office\u0027s ribbon.","relatedControls":[],"apiNamespace":null,"docs":[]},{"id":"tokenizingtextbox-1","controlId":"tokenizingtextbox","controlName":"TokenizingTextBox","headerText":"Basic usage","xaml":"\u003Ccontrols:TokenizingTextBox\n ItemClick=\u0022TokenBox_ItemClick\u0022\n ItemsSource=\u0022{x:Bind SelectedTokens, Mode=TwoWay}\u0022\n Loaded=\u0022TokenBox_Loaded\u0022\n MaximumTokens=\u00225\u0022\n PlaceholderText=\u0022Add actions\u0022\n QueryIcon=\u0022{ui:FontIconSource Glyph=\u0026#xE721;,\n FontSize=12}\u0022\n SuggestedItemsSource=\u0022{x:Bind _samples, Mode=OneWay}\u0022\n TextChanged=\u0022TextChanged\u0022\n TextMemberPath=\u0022Text\u0022\n TokenDelimiter=\u0022,\u0022\n TokenItemAdding=\u0022TokenItemCreating\u0022\u003E\n \u003Ccontrols:TokenizingTextBox.Header\u003E\n \u003C/controls:TokenizingTextBox.Header\u003E\u003C/controls:TokenizingTextBox\u003E\n\u003C!-- ...truncated --\u003E","csharp":"using CommunityToolkit.WinUI.Controls;\n\nnamespace YourApp;\n\npublic sealed partial class YourPage : Page\n{\n public readonly List\u003CSampleDataType\u003E _samples = new List\u003CSampleDataType\u003E()\n {\n new SampleDataType() { Text = \u0022Account\u0022, Icon = Symbol.Account },\n new SampleDataType() { Text = \u0022Add friend\u0022, Icon = Symbol.AddFriend },\n new SampleDataType() { Text = \u0022Attach\u0022, Icon = Symbol.Attach },\n new SampleDataType() { Text = \u0022Attach camera\u0022, Icon = Symbol.AttachCamera },\n new SampleDataType() { Text = \u0022Audio\u0022, Icon = Symbol.Audio },\n new SampleDataType() { Text = \u0022Block contact\u0022, Icon = Symbol.BlockContact },\n new SampleDataType() { Text = \u0022Calculator\u0022, Icon = Symbol.Calculator },\n new SampleDataType() { Text = \u0022Calendar\u0022, Icon = Symbol.Calendar },\n new SampleDataType() { Text = \u0022Camera\u0022, Icon = Symbol.Camera },\n new SampleDataType() { Text = \u0022Contact\u0022, Icon = Symbol.Contact },\n new SampleDataType() { Text = \u0022Favorite\u0022, Icon = Symbol.Favorite },\n new SampleDataType() { Text = \u0022Link\u0022, Icon = Symbol.Link },\n new SampleDataType() { Text = \u0022Mail\u0022, Icon = Symbol.Mail },\n new SampleDataType() { Text = \u0022Map\u0022, Icon = Symbol.Map },\n new SampleDataType() { Text = \u0022Phone\u0022, Icon = Symbol.Phone },\n new SampleDataType() { Text = \u0022Pin\u0022, Icon = Symbol.Pin },\n new SampleDataType() { Text = \u0022Rotate\u0022, Icon = Symbol.Rotate },\n new SampleDataType() { Text = \u0022Rotate camera\u0022, Icon = Symbol.RotateCamera },\n new SampleDataType() { Text = \u0022Send\u0022, Icon = Symbol.Send },\n new SampleDataType() { Text = \u0022Tags\u0022, Icon = Symbol.Tag },\n new SampleDataType() { Text = \u0022UnFavorite\u0022, Icon = Symbol.UnFavorite },\n new SampleDataType() { Text = \u0022UnPin\u0022, Icon = Symbol.UnPin },\n new SampleDataType() { Text = \u0022Zoom\u0022, Icon = Symbol.Zoom },\n new SampleDataType() { Text = \u0022ZoomIn\u0022, Icon = Symbol.ZoomIn },\n new SampleDataType() { Text = \u0022ZoomOut\u0022, Icon = Symbol.ZoomOut },\n };\n\n public ObservableCollection\u003CSampleDataType\u003E SelectedTokens { get; set; }\n\n public YourPage()\n {\n this.InitializeComponent();\n SelectedTokens = new()\n {\n _samples[0],\n _samples[1]\n };\n \n }\n\n private void TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)\n {\n// ...truncated","source":"toolkit","nugetPackage":"CommunityToolkit.WinUI.Controls.TokenizingTextBox","xmlnsImports":["xmlns:controls=\u0022using:CommunityToolkit.WinUI.Controls\u0022","xmlns:ui=\u0022using:CommunityToolkit.WinUI\u0022"],"description":"The TokenizingTextBox is an advanced AutoSuggestBox which will display selected items as tokens within the textbox. A user can easily see the picked items or remove them easily.","controlDescription":"A text input control that auto-suggests and displays token items.","relatedControls":[],"apiNamespace":null,"docs":[]}] \ No newline at end of file diff --git a/src/tools/winui-search/Data/toolkit-tags.json b/src/tools/winui-search/Data/toolkit-tags.json index 59a274f..3b639fe 100644 --- a/src/tools/winui-search/Data/toolkit-tags.json +++ b/src/tools/winui-search/Data/toolkit-tags.json @@ -1 +1 @@ -{"advancedcollectionview":["advancedcollectionview","advanced","collection","view","collectionviewsource","data","sorting","filtering","collections","viewmodel","sort","bound","listview","pass","list","constructor","done","communitytoolkit"],"incrementalloadingcollection":["incrementalloadingcollection","incremental","loading","collection","data","collections","incrementalloadingcollectionsample","incrementally","communitytoolkit"],"colorpicker":["colorpicker","color","picker","layout","input","pick","spectrum","palette","sliders","text","colorpickersample","communitytoolkit"],"headeredcontentcontrol":["headeredcontentcontrol","headered","layout","header","align","left","maintain","same","functionality","contentcontrol","effect","communitytoolkit"],"headereditemscontrol":["headereditemscontrol","headered","layout","header","effect","maintain","same","functionality","itemscontrol","communitytoolkit"],"headeredtreeview":["headeredtreeview","headered","tree","view","layout","treeview","header","headeredtreeviewsample","communitytoolkit"],"imagecropper":["imagecropper","image","cropper","layout","media","freely","crop","imagecroppersample","communitytoolkit"],"metadatacontrol":["metadatacontrol","metadata","statusandinfo","bullet","separator","customized","string","list","metadataitem","displayed","either","communitytoolkit"],"constrainedbox":["constrainedbox","constrained","box","viewbox","content decorator","media","border","template","compatibility","future","inherit","frameworkelement","directly","platform","communitytoolkit"],"dockpanel":["dockpanel","dock","panel","position","child","options","left","right","bottom","lastchildfill","true","communitytoolkit"],"staggeredlayout":["staggeredlayout","staggered","layout","staggeredpanel","column","approach","least","amount","space","better","virtualization","compared","communitytoolkit"],"staggeredpanel":["staggeredpanel","staggered","panel","staggeredlayout","layout","column","approach","least","amount","space","staggeredpanelsample","communitytoolkit"],"switchpresenter":["switchpresenter","switch","presenter","logic","contentpresenter","visibility","triggers","converters","miscellaneous","statement","developer","condition","another","alternative","managing","multiple","complex","communitytoolkit"],"uniformgrid":["uniformgrid","uniform","grid","layout","responsive","miscellaneous","cell","same","size","square","total","number","visible","communitytoolkit"],"wraplayout":["wraplayout","wrap","layout","ordering","bottom","right","left","orientation","positions","child","horizontal","communitytoolkit"],"wrappanel":["wrappanel","wrap","panel","ordering","bottom","right","left","orientation","position","child","horizontal","communitytoolkit"],"radialgauge":["radialgauge","radial","gauge","input","data","visualizations","dashboards","engaging","rich","style","interactivity","round","communitytoolkit"],"rangeselector":["rangeselector","range","selector","double slider","slider rangeslider","input","regular","rangeselectorsample","communitytoolkit"],"richsuggestbox":["richsuggestbox","rich","suggest","box","text","combination","autosuggestbox","richeditbox","suggestions","customizable","prefixes","selected","embedded","communitytoolkit"],"segmented":["segmented","segmentedcontrol","layout","input","basics","best","overflow","communitytoolkit"],"settingscard":["settingscard","settings","card","layout","experience","uses","styling","windows","easy","meets","accessibility","standards","communitytoolkit"],"settingsexpander":["settingsexpander","settings","expander","settingscard","layout","group","multiple","single","collapsible","right","addition","number","extra","communitytoolkit"],"contentsizer":["contentsizer","sizer","sizerbase","layout","expander","splitter","sizers","gridsplitter","expandable","shelf","application","itself","remember","opening","closing","communitytoolkit"],"gridsplitter":["gridsplitter","grid","splitter","contentsizer","sizerbase","layout","expander","sizers","automatically","detects","targeted","columns","rows","resize","dragging","starts","communitytoolkit"],"propertysizer":["propertysizer","sizer","sizerbase","layout","navigationview","splitter","sizers","manipulating","communitytoolkit"],"tabbedcommandbar":["tabbedcommandbar","tabbed","command","bar","layout","commandbar","ribbon","tabbedcommandbaritem","shared","container","productivity","type","apps","navigationview","change","communitytoolkit"],"tokenizingtextbox":["tokenizingtextbox","tokenizing","text","box","tokens","advanced","autosuggestbox","selected","within","textbox","easily","picked","remove","communitytoolkit"],"colorpickerbutton":["colorpickerbutton","color","picker","button","dropdown","communitytoolkit"]} \ No newline at end of file +{"advancedcollectionview":["advancedcollectionview","collection","view","collectionviewsource","data","sorting","filtering","collections","viewmodel","sort","bound","listview","list","useful","features","provides"],"incrementalloadingcollection":["incrementalloadingcollection","incremental","loading","collection","data","collections","incrementally"],"colorpicker":["colorpicker","color","picker","spectrum","palette","sliders"],"headeredcontentcontrol":["headeredcontentcontrol","headered","align","left","same","contentcontrol"],"headereditemscontrol":["headereditemscontrol","headered","same","itemscontrol"],"headeredtreeview":["headeredtreeview","headered","tree","view","treeview"],"imagecropper":["imagecropper","image","cropper","media","freely","crop"],"metadatacontrol":["metadatacontrol","metadata","statusandinfo","bullet","separator","customized","string","list","metadataitem","displayed","either"],"constrainedbox":["constrainedbox","constrained","box","viewbox","content decorator","media","border","template","compatibility","future","inherit","frameworkelement","directly","platform"],"dockpanel":["dockpanel","dock","panel","position","child","left","right","bottom","lastchildfill","want","last"],"staggeredlayout":["staggeredlayout","staggered","staggeredpanel","column","better","virtualization","compared","below"],"staggeredpanel":["staggeredpanel","staggered","panel","staggeredlayout","column"],"switchpresenter":["switchpresenter","switch","presenter","logic","contentpresenter","visibility","triggers","converters","miscellaneous","statement","developer","condition","alternative","managing","multiple","complex","visual"],"uniformgrid":["uniformgrid","uniform","grid","responsive","miscellaneous","cell","same","size","square","total","number","visible"],"wraplayout":["wraplayout","wrap","ordering","bottom","right","left","orientation","positions","child","horizontal"],"wrappanel":["wrappanel","wrap","panel","ordering","bottom","right","left","orientation","position","child","horizontal"],"radialgauge":["radialgauge","radial","gauge","data","visualizations","dashboards","engaging","rich","style","interactivity","round"],"rangeselector":["rangeselector","range","selector","double slider","slider rangeslider","regular"],"richsuggestbox":["richsuggestbox","rich","suggest","box","combination","autosuggestbox","richeditbox","suggestions","customizable","prefixes","selected","embedded"],"segmented":["segmented","segmentedcontrol","best","overflow"],"settingscard":["settingscard","settings","card","experience","uses","styling","windows","meets","accessibility","standards","page"],"settingsexpander":["settingsexpander","settings","expander","settingscard","group","multiple","single","collapsible","right","addition","number","extra"],"contentsizer":["contentsizer","sizer","sizerbase","expander","splitter","sizers","gridsplitter","expandable","shelf","application","itself","remember","opening","closing"],"gridsplitter":["gridsplitter","grid","splitter","contentsizer","sizerbase","expander","sizers","automatically","detects","targeted","columns","rows","resize","dragging","starts"],"propertysizer":["propertysizer","sizer","sizerbase","navigationview","splitter","sizers","manipulating"],"tabbedcommandbar":["tabbedcommandbar","tabbed","command","bar","commandbar","ribbon","tabbedcommandbaritem","shared","container","productivity","apps","navigationview","change","style"],"tokenizingtextbox":["tokenizingtextbox","tokenizing","box","tokens","autosuggestbox","selected","within","textbox","easily","picked","remove"],"colorpickerbutton":["colorpickerbutton","color","picker","button","dropdown"]} \ No newline at end of file diff --git a/src/tools/winui-search/DataLoader.cs b/src/tools/winui-search/DataLoader.cs index 53fde94..5b8cd76 100644 --- a/src/tools/winui-search/DataLoader.cs +++ b/src/tools/winui-search/DataLoader.cs @@ -40,4 +40,18 @@ public static Dictionary LoadToolkitTags() .GetManifestResourceStream("toolkit-tags.json")!; return JsonSerializer.Deserialize(stream, JsonContext.Default.DictionaryStringStringArray)!; } + + /// Author-curated keywords from toolkit md frontmatter — short + /// list of high-quality intent terms scored at higher BM25 weight than + /// auto-extracted tags. Empty/missing → no extra signal. + public static Dictionary LoadToolkitKeywords() + { + var stream = Assembly.GetExecutingAssembly() + .GetManifestResourceStream("toolkit-keywords.json"); + if (stream == null) return new(); + using (stream) + { + return JsonSerializer.Deserialize(stream, JsonContext.Default.DictionaryStringStringArray) ?? new(); + } + } } diff --git a/src/tools/winui-search/GalleryFetcher.cs b/src/tools/winui-search/GalleryFetcher.cs index 8cab16c..9e12949 100644 --- a/src/tools/winui-search/GalleryFetcher.cs +++ b/src/tools/winui-search/GalleryFetcher.cs @@ -17,21 +17,24 @@ internal static partial class GalleryFetcher private static readonly TimeSpan CacheTtl = TimeSpan.FromDays(7); - /// Bump when the cached JSON schema changes (e.g., new fields on Scenario). - private const string CacheSchemaVersion = "2"; - private static readonly string CacheDir = Path.Combine( Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "winui-search", "cache", "gallery"); private static readonly HttpClient Http = new() { - DefaultRequestHeaders = { { "User-Agent", "winui-gallery-cli/1.0" } } + DefaultRequestHeaders = { { "User-Agent", "winui3-gallery-cli/1.0" } }, + Timeout = TimeSpan.FromSeconds(30) }; [GeneratedRegex(@"]*?HeaderText=""([^""]+)""", RegexOptions.IgnoreCase)] private static partial Regex ControlExampleHeaderRegex(); + /// First XML comment in a XAML snippet — used as a fallback header when + /// the upstream ControlExample omits HeaderText (common for Accessibility samples). + [GeneratedRegex(@"")] + private static partial Regex FirstXmlCommentRegex(); + [GeneratedRegex(@"CSharpSource=""([^""]+)""", RegexOptions.IgnoreCase)] private static partial Regex CSharpSourceRegex(); @@ -68,9 +71,10 @@ public static (Scenario[] scenarios, Dictionary tags) Load() if (File.Exists(scenarioCache) && File.Exists(tagCache) && File.Exists(timestampFile) && File.Exists(versionFile)) { var cachedVersion = File.ReadAllText(versionFile).Trim(); - if (cachedVersion == CacheSchemaVersion - && DateTime.TryParse(File.ReadAllText(timestampFile).Trim(), out var lastUpdated) - && DateTime.UtcNow - lastUpdated < CacheTtl) + var lastUpdated = BackgroundUpdater.ReadTimestamp(timestampFile); + if (cachedVersion == CacheVersion.Current + && lastUpdated.HasValue + && DateTime.UtcNow - lastUpdated.Value < CacheTtl) { try { @@ -82,40 +86,62 @@ public static (Scenario[] scenarios, Dictionary tags) Load() } } - // Try fetching from GitHub + // Cache miss: serve embedded data immediately (no GitHub fetch on hot path). + // GitHub fetching can take 30-60s on first call, which the runtime may interrupt + // with a "still running" message that masks the actual output. Embedded data is + // up-to-date as of the last tool build. Use `winui-search update` to update. + var fallbackScenarios = DataLoader.LoadGalleryScenarios(); + var fallbackTags = CleanTags(DataLoader.LoadGalleryTags()); try { - var (scenarios, tags) = FetchFromGitHub().GetAwaiter().GetResult(); - if (scenarios.Length > 0) - { - ApplyOverrides(scenarios); - scenarios = InjectMissing(scenarios); - Directory.CreateDirectory(CacheDir); - File.WriteAllText(scenarioCache, JsonSerializer.Serialize(scenarios, JsonContext.Default.ScenarioArray)); - File.WriteAllText(tagCache, JsonSerializer.Serialize(tags, JsonContext.Default.DictionaryStringStringArray)); - File.WriteAllText(timestampFile, DateTime.UtcNow.ToString("o")); - File.WriteAllText(versionFile, CacheSchemaVersion); - return (scenarios, tags); - } + // Atomic per-file writes (temp + rename) so a crash mid-sequence can't + // leave a truncated JSON. Order: data first, version next, timestamp LAST, + // so a partially-renamed set is detected as still-stale on next read + // (no fresh timestamp ⇒ Load() falls back to embedded again instead of + // serving fresh-but-truncated data). + BackgroundUpdater.AtomicWriteAllText(scenarioCache, JsonSerializer.Serialize(fallbackScenarios, JsonContext.Default.ScenarioArray)); + BackgroundUpdater.AtomicWriteAllText(tagCache, JsonSerializer.Serialize(fallbackTags, JsonContext.Default.DictionaryStringStringArray)); + BackgroundUpdater.AtomicWriteAllText(versionFile, CacheVersion.Current); + BackgroundUpdater.AtomicWriteAllText(timestampFile, DateTime.UtcNow.ToString("o")); } - catch + catch { /* cache write best-effort */ } + return (fallbackScenarios, fallbackTags); + } + + /// Fetch fresh data from GitHub and update the cache. Used by the `update` command. + public static void RefreshFromGitHub() + { + var scenarioCache = Path.Combine(CacheDir, "scenarios.json"); + var tagCache = Path.Combine(CacheDir, "tags.json"); + var timestampFile = Path.Combine(CacheDir, "last-updated.txt"); + var versionFile = Path.Combine(CacheDir, "schema-version.txt"); + var (scenarios, tags) = FetchFromGitHub().GetAwaiter().GetResult(); + if (scenarios.Length > 0) { - // Fall through to embedded data + ApplyOverrides(scenarios); + scenarios = InjectMissing(scenarios); + // Atomic per-file writes (see Load() comment for rationale and ordering). + BackgroundUpdater.AtomicWriteAllText(scenarioCache, JsonSerializer.Serialize(scenarios, JsonContext.Default.ScenarioArray)); + BackgroundUpdater.AtomicWriteAllText(tagCache, JsonSerializer.Serialize(tags, JsonContext.Default.DictionaryStringStringArray)); + BackgroundUpdater.AtomicWriteAllText(versionFile, CacheVersion.Current); + BackgroundUpdater.AtomicWriteAllText(timestampFile, DateTime.UtcNow.ToString("o")); } - - // Fallback to embedded (apply stop-word filter to hand-curated tags too) - return (DataLoader.LoadGalleryScenarios(), CleanTags(DataLoader.LoadGalleryTags())); } private static async Task<(Scenario[], Dictionary)> FetchFromGitHub() { - // Step 1: Fetch ControlInfoData.json — list of controls + their Subtitle (used for tags) + // Step 1: Fetch ControlInfoData.json — list of controls + Subtitle/Description/RelatedControls/Docs var infoJson = await Http.GetStringAsync(ControlInfoUrl); using var doc = JsonDocument.Parse(infoJson); var groups = doc.RootElement.GetProperty("Groups"); var controlPages = new List<(string uniqueId, string title, string? folder)>(); - var subtitles = new Dictionary(); // controlId → Subtitle text + var subtitles = new Dictionary(); // controlId → "Title Subtitle Description" (tag-source text) + var controlSubtitles = new Dictionary(); // controlId → Subtitle alone (display-friendly one-liner) + var apiNamespaces = new Dictionary(); // controlId → "Microsoft.Windows.Notifications" etc. + var relatedControls = new Dictionary(); // controlId → ["Pivot","NavigationView",...] + var docs = new Dictionary(); // controlId → [{Title,Uri},...] + foreach (var group in groups.EnumerateArray()) { string? folder = null; @@ -132,9 +158,42 @@ public static (Scenario[] scenarios, Dictionary tags) Load() var title = item.GetProperty("Title").GetString() ?? ""; controlPages.Add((uniqueId, title, folder)); + var cid = uniqueId.ToLowerInvariant(); string subtitle = ""; if (item.TryGetProperty("Subtitle", out var sub)) subtitle = sub.GetString() ?? ""; - subtitles[uniqueId.ToLowerInvariant()] = $"{title} {subtitle}".Trim(); + string description = ""; + if (item.TryGetProperty("Description", out var desc)) description = desc.GetString() ?? ""; + subtitles[cid] = $"{title} {subtitle} {description}".Trim(); + if (!string.IsNullOrWhiteSpace(subtitle)) controlSubtitles[cid] = subtitle; + + if (item.TryGetProperty("ApiNamespace", out var apiNs)) + { + var ns = apiNs.GetString(); + if (!string.IsNullOrWhiteSpace(ns)) apiNamespaces[cid] = ns!; + } + + if (item.TryGetProperty("RelatedControls", out var rel) && rel.ValueKind == JsonValueKind.Array) + { + var list = new List(); + foreach (var r in rel.EnumerateArray()) + { + var v = r.GetString(); + if (!string.IsNullOrEmpty(v)) list.Add(v!); + } + if (list.Count > 0) relatedControls[cid] = list.ToArray(); + } + + if (item.TryGetProperty("Docs", out var dList) && dList.ValueKind == JsonValueKind.Array) + { + var list = new List(); + foreach (var d in dList.EnumerateArray()) + { + var t = d.TryGetProperty("Title", out var tProp) ? (tProp.GetString() ?? "") : ""; + var u = d.TryGetProperty("Uri", out var uProp) ? (uProp.GetString() ?? "") : ""; + if (!string.IsNullOrEmpty(u)) list.Add(new DocLink { Title = t, Uri = u }); + } + if (list.Count > 0) docs[cid] = list.ToArray(); + } } } @@ -150,6 +209,18 @@ public static (Scenario[] scenarios, Dictionary tags) Load() foreach (var batch in results) allScenarios.AddRange(batch); + // Stamp ControlInfoData metadata onto every scenario of that control. + // ControlDescription comes from Subtitle (median 68 chars / max 129) — the longer + // Description (median 144 / max 448) was retired during search-output compression. + // Subtitle is small enough to surface in search list without bloating tokens. + foreach (var s in allScenarios) + { + if (controlSubtitles.TryGetValue(s.ControlId, out var sub)) s.ControlDescription = sub; + if (apiNamespaces.TryGetValue(s.ControlId, out var ns)) s.ApiNamespace = ns; + if (relatedControls.TryGetValue(s.ControlId, out var r)) s.RelatedControls = r; + if (docs.TryGetValue(s.ControlId, out var dl)) s.Docs = dl; + } + // Step 3: Build tags. For each control, prefer hand-curated embedded tags; // otherwise auto-derive from Title + Subtitle. Always strip stop words. var embeddedTags = DataLoader.LoadGalleryTags(); @@ -176,15 +247,7 @@ public static (Scenario[] scenarios, Dictionary tags) Load() private static string[] FilterStopWords(string[] tags) { - var seen = new HashSet(); - var result = new List(); - foreach (var t in tags) - { - var lower = t.ToLowerInvariant(); - if (global::StopWords.Common.Contains(lower)) continue; - if (seen.Add(lower)) result.Add(lower); - } - return result.ToArray(); + return global::StopWords.FilterTagList(tags); } private static string[] ExtractTagsFromText(string controlId, string text) @@ -196,7 +259,7 @@ private static string[] ExtractTagsFromText(string controlId, string text) foreach (Match m in Regex.Matches(text.ToLowerInvariant(), @"[a-z]{3,}")) { var w = m.Value; - if (global::StopWords.Common.Contains(w)) continue; + if (global::StopWords.IsTagNoise(w)) continue; if (seen.Add(w)) tags.Add(w); if (tags.Count >= 12) break; } @@ -228,33 +291,54 @@ private static async Task> FetchControlPageAsync( var xamlContent = await response.Content.ReadAsStringAsync(); var controlId = uniqueId.ToLowerInvariant(); int scenarioIndex = 0; - var seenIds = new HashSet(); - foreach (var (headerText, block) in ExtractControlExampleBlocks(xamlContent)) + // Fetch matching .xaml.cs once per page (real working code). + // Used by ExtractFromCodeBehind for symbol-closure extraction. + // Without this, inline templates with $(...) + // substitutions get returned and break agent builds (see storagepickers-3 etc.). + string? xamlCsContent = null; + try { - // Extract code: external file or inline - string? csharp = await ExtractCode(block, "CSharp", CSharpSourceRegex()); + var csResp = await Http.GetAsync(url + ".cs"); + if (csResp.IsSuccessStatusCode) + xamlCsContent = await csResp.Content.ReadAsStringAsync(); + } + catch { /* no code-behind, fall through */ } + + foreach (var (rawHeader, block) in ExtractControlExampleBlocks(xamlContent)) + { + // Code-behind extraction (real working code) — preferred when xaml.cs available. + string? csharp = xamlCsContent != null + ? ExtractFromCodeBehind(xamlCsContent, block) + : null; + + // External .txt file — second choice (also templated, but cleaner than inline). + csharp ??= await ExtractCode(block, "CSharp", CSharpSourceRegex()); string? xaml = await ExtractCode(block, "Xaml", XamlSourceRegex()); - // Try inline if external not found + // Inline blocks — last resort (templated with $(...)). csharp ??= ExtractInlineCode(block, "CSharp"); xaml ??= ExtractInlineCode(block, "Xaml"); if (csharp == null && xaml == null) continue; + // Fallback header: when upstream omits HeaderText, the first XML comment + // inside the sample is usually a good label (a11y samples in particular + // self-document this way: ). + // Done BEFORE truncation so the comment isn't lost if the snippet is long. + string headerText = rawHeader; + if (string.IsNullOrEmpty(headerText) && xaml != null) + { + headerText = DeriveHeaderFromComment(xaml); + } + if (xaml != null) xaml = TruncateXaml(xaml, MaxXamlChars); if (csharp != null) csharp = TruncateCode(csharp, MaxCSharpChars, "// NOTE: snippet truncated — refer to full sample for additional code"); scenarioIndex++; - var slug = HeaderToSlug(headerText); - var baseId = scenarioIndex == 1 ? controlId : $"{controlId}-{slug}"; - var scenarioId = baseId; - int suffix = 2; - while (!seenIds.Add(scenarioId)) - { - scenarioId = $"{baseId}-{suffix}"; - suffix++; - } + // Scenario IDs use a simple {controlId}-{N} format (1-indexed). Stable + // within a single fetched cache; rebuilt fresh on each cache refresh. + var scenarioId = $"{controlId}-{scenarioIndex}"; scenarios.Add(new Scenario { @@ -275,7 +359,7 @@ private static async Task> FetchControlPageAsync( } private const int MaxXamlChars = 2000; - private const int MaxCSharpChars = 1500; + private const int MaxCSharpChars = 2500; [GeneratedRegex(@"<(/?)([A-Za-z_][\w:.\-]*)\b([^>]*?)(/?)>")] private static partial Regex AnyTagRegex(); @@ -358,6 +442,32 @@ private static async Task> FetchControlPageAsync( } } + /// Pull a usable header from the first XML comment in a sample's XAML. + /// Collapses whitespace, strips trailing punctuation, truncates at sentence boundary. + /// Returns "" when no comment is found or the comment is too short to be a real header. + private static string DeriveHeaderFromComment(string xaml) + { + var m = FirstXmlCommentRegex().Match(xaml); + if (!m.Success) return ""; + + var raw = m.Groups[1].Value; + // Collapse all whitespace runs (newlines, tabs, multi-space) to single space. + var collapsed = Regex.Replace(raw, @"\s+", " ").Trim(); + if (collapsed.Length < 4) return ""; + + // Strip stray decoration sometimes used as section dividers (****, ====, ----) + collapsed = collapsed.Trim('*', '=', '-', ' '); + if (collapsed.Length < 4) return ""; + + // Prefer the first sentence so very long explanatory comments stay short. + const int MaxHeaderLen = 120; + int firstStop = collapsed.IndexOfAny(new[] { '.', '!', '?', '\n' }); + if (firstStop > 0 && firstStop < MaxHeaderLen) collapsed = collapsed.Substring(0, firstStop); + if (collapsed.Length > MaxHeaderLen) collapsed = collapsed.Substring(0, MaxHeaderLen).TrimEnd() + "…"; + + return collapsed.Trim(); + } + /// Truncate XAML at a safe boundary, appending closing tags for unclosed elements. private static string TruncateXaml(string xaml, int maxChars) { @@ -410,14 +520,55 @@ private static string TruncateXaml(string xaml, int maxChars) var sb = new System.Text.StringBuilder(head.TrimEnd()); while (stack.Count > 0) sb.Append("'); - if (needsTruncate) sb.Append("\n"); + if (needsTruncate) sb.Append("\n"); return sb.ToString(); } - /// Truncate code at line boundary with a comment marker. + /// Truncate C# code at a brace-balanced boundary. + /// Walks forward tracking depth (skipping strings/chars/comments/verbatim) and + /// prefers the most recent depth=0 cut. When none exists in the prefix, cuts at + /// the last newline and appends synthetic `}` braces equal to the open depth so + /// agents can copy the snippet without the build breaking on unbalanced braces. private static string TruncateCode(string code, int maxChars, string marker) { if (code.Length <= maxChars) return code; + + if (code.Contains('{')) + { + int depth = 0, lastZeroPos = -1, finalDepth = 0; + bool inStr = false, inChr = false, inLine = false, inBlk = false, inVerb = false; + int lastBeforeMax = 0; + for (int i = 0; i < code.Length && i < maxChars; i++) + { + char c = code[i]; char prev = i > 0 ? code[i - 1] : '\0'; + if (inLine) { if (c == '\n') inLine = false; continue; } + if (inBlk) { if (c == '/' && prev == '*') inBlk = false; continue; } + if (inStr) + { + if (inVerb) { if (c == '"' && (i + 1 >= code.Length || code[i + 1] != '"')) { inStr = false; inVerb = false; } else if (c == '"') i++; } + else if (c == '"' && prev != '\\') inStr = false; + continue; + } + if (inChr) { if (c == '\'' && prev != '\\') inChr = false; continue; } + if (c == '/' && i + 1 < code.Length && code[i + 1] == '/') { inLine = true; continue; } + if (c == '/' && i + 1 < code.Length && code[i + 1] == '*') { inBlk = true; continue; } + if (c == '@' && i + 1 < code.Length && code[i + 1] == '"') { inStr = true; inVerb = true; i++; continue; } + if (c == '"') { inStr = true; continue; } + if (c == '\'') { inChr = true; continue; } + if (c == '{') depth++; + else if (c == '}') { depth--; if (depth == 0) lastZeroPos = i + 1; } + lastBeforeMax = i + 1; + finalDepth = depth; + } + if (lastZeroPos > 0) + return code.Substring(0, lastZeroPos).TrimEnd() + "\n" + marker; + int cut1 = code.LastIndexOf('\n', Math.Min(lastBeforeMax, code.Length) - 1); + if (cut1 < 0) cut1 = lastBeforeMax; + var prefix = code.Substring(0, cut1).TrimEnd(); + var closers = finalDepth > 0 ? "\n" + new string('}', finalDepth) : ""; + return prefix + closers + "\n" + marker; + } + int cut = code.LastIndexOf('\n', maxChars - 1); if (cut < 0) cut = maxChars; return code.Substring(0, cut).TrimEnd() + "\n" + marker; @@ -436,11 +587,25 @@ private static string TruncateCode(string code, int maxChars, string marker) var response = await Http.GetAsync(url); if (!response.IsSuccessStatusCode) return null; var code = await response.Content.ReadAsStringAsync(); + // Reject the templated `_cs.txt` files that ship with WinUI Gallery — + // they're explanatory prose with method-name comments, not compileable code + // (e.g. `// ... Methods ...`, `// CustomDataObject class definition:`). + // The code-behind extractor is preferred when the page has a real .xaml.cs. + if (type == "CSharp" && IsExplanatoryStub(code)) return null; return CleanGalleryContent(code.Trim()); } catch { return null; } } + /// True if a Gallery `_cs.txt` is just a doc-style stub, not real compileable code. + private static bool IsExplanatoryStub(string code) + { + return code.Contains("// ... Methods ...") + || code.Contains("// C# code-behind") + || code.Contains("// C# Code") + || code.Contains("class definition:"); + } + private static string? ExtractInlineCode(string block, string tagName) { var pattern = $@"\s*]*>([\s\S]*?)\s*"; @@ -449,7 +614,17 @@ private static string TruncateCode(string code, int maxChars, string marker) var code = UnescapeXml(match.Groups[1].Value).Trim(); if (code.Contains("$(")) + { + // C# inline templates with $(VarName) substitutions are bound to live UI + // controls. Replacing with "..." produces literals like `Title = "..."` + // and `Resize(new SizeInt32(..., ...))` that mislead agents into compiling + // them. The code-behind extractor is the right path for C#; if it failed + // (no .xaml.cs or no event/x:Bind/x:Name seeds), surface no csharp at all. + if (tagName == "CSharp") return null; + // For XAML, the placeholder substitution is generally cosmetic (color, size) + // and the surrounding markup is still useful — keep the existing behavior. code = SubstitutionRegex().Replace(code, "..."); + } code = CleanGalleryContent(code); return string.IsNullOrWhiteSpace(code) ? null : code; } @@ -460,10 +635,10 @@ private static string CleanGalleryContent(string code) code = GalleryClassRegex().Replace(code, @"x:Class=""YourApp.YourPage"""); code = SamplePageTypeRegex().Replace(code, "typeof(YourPage)"); code = SamplePageNameRegex().Replace(code, "YourPage"); - code = Regex.Replace(code, @"using WinUIGallery[^;\n]*", "// adapt namespace to your app"); - code = Regex.Replace(code, @"using AppUIBasics[^;\n]*", "// adapt namespace to your app"); - code = Regex.Replace(code, @"namespace WinUIGallery[^{\n]*", "namespace YourApp"); - code = Regex.Replace(code, @"namespace AppUIBasics[^{\n]*", "namespace YourApp"); + code = Regex.Replace(code, @"using WinUIGallery[^;\n]*;?", "// adapt namespace to your app"); + code = Regex.Replace(code, @"using AppUIBasics[^;\n]*;?", "// adapt namespace to your app"); + code = Regex.Replace(code, @"namespace WinUIGallery[^{;\n]*;?", "namespace YourApp;"); + code = Regex.Replace(code, @"namespace AppUIBasics[^{;\n]*;?", "namespace YourApp;"); code = Regex.Replace(code, @".*NavigationHelper.*\n?", ""); // Clean demo-specific layout attributes (fixed sizes, negative margins, demo handlers) @@ -498,12 +673,448 @@ private static string UnescapeXml(string s) .Replace(" ", "\r"); } - private static string HeaderToSlug(string header) + // ============================================================ + // Code-behind extraction (real xaml.cs symbol-closure walk) + // ------------------------------------------------------------ + // Inline blocks in Gallery + // XAML pages contain $(VarName) placeholders that this scraper + // used to flatten into "..." — producing non-compileable entries + // (see storagepickers-3 for a concrete example). + // + // Instead, when we have the page's .xaml.cs, we walk the real + // working code: starting from event handlers + {x:Bind} + + // x:Name seeds in the sub-block, + // transitively pull in referenced methods, fields, and nested + // classes. This yields a self-contained, compileable C# snippet + // per example. + // ============================================================ + + [GeneratedRegex(@"x:Name=""(\w+)""")] + private static partial Regex XNameRegex(); + + [GeneratedRegex(@"([\s\S]*?)", RegexOptions.IgnoreCase)] + private static partial Regex ExampleSubBlockRegex(); + + // Match any XAML attribute whose value looks like `Foo_Bar` (WinUI Gallery's + // universal event-handler naming convention: `BasicGridView_ItemClick`, + // `OpenFileButton_Click`, etc.). Catches every ItemClick/Invoked/Drop/Pointer*/ + // Refresh*/etc. event without needing a hand-curated event-name whitelist. + [GeneratedRegex(@"=""([A-Za-z][\w]*_[A-Za-z]\w*)""")] + private static partial Regex EventHandlerRegex(); + + [GeneratedRegex(@"\{x:Bind\s+(\w+)")] + private static partial Regex XBindSeedRegex(); + + [GeneratedRegex(@"x:DataType=""(?:[\w]+:)?(\w+)""")] + private static partial Regex XDataTypeRegex(); + + [GeneratedRegex(@"\b_[A-Za-z][A-Za-z0-9_]*\b")] + private static partial Regex UnderscoreFieldRegex(); + + /// + /// Extract a self-contained, compileable C# snippet for one ControlExample. + /// Returns null if no relevant code-behind found. + /// + private static string? ExtractFromCodeBehind(string xamlCsContent, string exampleBlock) + { + // Restrict seed collection to the .Example sub-block (skip .Options panel handlers + // like SelectSuggestedFolderButton_Click that aren't part of the demo). + var exMatch = ExampleSubBlockRegex().Match(exampleBlock); + var ex = exMatch.Success ? exMatch.Groups[1].Value : exampleBlock; + + var seeds = new HashSet(StringComparer.Ordinal); + // Group 1 of EventHandlerRegex captures the handler name itself. + foreach (Match m in EventHandlerRegex().Matches(ex)) seeds.Add(m.Groups[1].Value); + foreach (Match m in XBindSeedRegex().Matches(ex)) seeds.Add(m.Groups[1].Value); + foreach (Match m in XDataTypeRegex().Matches(ex)) seeds.Add(m.Groups[1].Value); + + // x:Name references are NOT methods/fields in xaml.cs (they live in the + // generated .g.cs partial), so they get a different treatment: we look + // up methods anywhere in xaml.cs that REFERENCE this name (e.g., the + // ctor that does `BaseExample.ItemsSource = ...`). + var xNames = new HashSet(StringComparer.Ordinal); + foreach (Match m in XNameRegex().Matches(ex)) xNames.Add(m.Groups[1].Value); + + if (seeds.Count == 0 && xNames.Count == 0) return null; + + // Discover the page class name + body span once. We only accept members + // that live INSIDE the page class — `Name` properties on nested data + // classes (e.g. `Folder.Name`) shouldn't be extracted as top-level fields. + string? pageClassName = null; + int pageBodyStart = -1, pageBodyEnd = -1; + var pageClsMatch = Regex.Match(xamlCsContent, @"\bpartial\s+class\s+(\w+Page)\b"); + if (pageClsMatch.Success) + { + pageClassName = pageClsMatch.Groups[1].Value; + pageBodyStart = xamlCsContent.IndexOf('{', pageClsMatch.Index); + if (pageBodyStart > 0) + pageBodyEnd = FindMatchingBrace(xamlCsContent, pageBodyStart); + } + bool InPageClass(int pos) => + pageBodyStart < 0 || (pos > pageBodyStart && pos < pageBodyEnd); + + var extracted = new List(); + var visited = new HashSet(StringComparer.Ordinal); + var queue = new Queue(seeds); + bool ctorIncluded = false; + + while (queue.Count > 0) + { + var name = queue.Dequeue(); + if (!visited.Add(name)) continue; + if (name == pageClassName) continue; // never inline the page class itself + + var method = ExtractMethodBody(xamlCsContent, name, InPageClass); + if (method != null) + { + extracted.Add(method); + foreach (var id in ScanIdentifiers(method)) queue.Enqueue(id); + continue; + } + + var field = ExtractFieldOrProperty(xamlCsContent, name, InPageClass); + if (field != null) + { + extracted.Add(field); + foreach (var typeName in ExtractTypeNames(field)) queue.Enqueue(typeName); + // Empty-initialized collections (e.g., `= new();`) imply ctor-side population. + if (!ctorIncluded && pageClassName != null + && (field.Contains("= new()") || Regex.IsMatch(field, @"=\s*new\s+\w+(<[^>]+>)?\s*\(\s*\)\s*;?\s*$"))) + { + var ctor = ExtractConstructor(xamlCsContent, pageClassName); + if (ctor != null) + { + extracted.Add(ctor); + foreach (var id in ScanIdentifiers(ctor)) queue.Enqueue(id); + ctorIncluded = true; + } + } + continue; + } + + var cls = ExtractClass(xamlCsContent, name); + if (cls != null) + { + extracted.Add(cls); + continue; + } + // else: name resolves to a framework type or unrelated symbol — skip. + } + + // Now handle x:Name references: find any methods anywhere in xaml.cs + // that reference one of these names, and pull them in. Catches the + // "data wired up in ctor" pattern (e.g., `BaseExample.ItemsSource = ...`). + if (xNames.Count > 0 && pageClassName != null) + { + var nameRefMethods = FindMethodsReferencing(xamlCsContent, xNames, pageClassName, InPageClass); + foreach (var (mName, mBody) in nameRefMethods) + { + if (visited.Contains(mName)) continue; + visited.Add(mName); + extracted.Add(mBody); + // Walk identifiers from the new method's body to chase down referenced types/fields. + foreach (var id in ScanIdentifiers(mBody)) + { + if (visited.Contains(id)) continue; + var f = ExtractFieldOrProperty(xamlCsContent, id, InPageClass); + if (f != null) { visited.Add(id); extracted.Add(f); continue; } + var c = ExtractClass(xamlCsContent, id); + if (c != null) { visited.Add(id); extracted.Add(c); } + } + } + } + + if (extracted.Count == 0) return null; + + var usings = ExtractUsings(xamlCsContent); + var raw = (usings.Length > 0 ? string.Join("\n", usings) + "\n\n" : "") + + string.Join("\n\n", extracted); + return CompressCSharp(raw); + } + + /// + /// Find methods (incl. constructor) in xaml.cs that reference any of the given XAML element + /// names (i.e., the method body contains `Foo.Bar` or `Foo(...)` for some Foo in ). + /// + private static IEnumerable<(string name, string body)> FindMethodsReferencing( + string fileText, HashSet names, string pageClassName, Func scopeFilter) + { + var methodSig = new Regex( + $@"(?:public|private|protected|internal)(?:\s+(?:async|static|virtual|override|sealed|partial|new))*\s+(?:[\w<>\[\]?,\s\.]+?\s+)?(\w+)\s*\("); + foreach (Match m in methodSig.Matches(fileText)) + { + if (!scopeFilter(m.Index)) continue; + var memberName = m.Groups[1].Value; + if (memberName == "if" || memberName == "while" || memberName == "for") continue; + + int braceStart = fileText.IndexOf('{', m.Index); + if (braceStart < 0) continue; + int end = FindMatchingBrace(fileText, braceStart); + if (end < 0) continue; + var body = fileText.Substring(braceStart, end - braceStart + 1); + + bool referenced = false; + foreach (var n in names) + { + if (Regex.IsMatch(body, $@"\b{Regex.Escape(n)}\b")) + { + referenced = true; + break; + } + } + if (!referenced) continue; + + yield return (memberName, fileText.Substring(m.Index, end - m.Index + 1)); + } + } + + /// Find a method declaration by name and return its full text including signature and body. + private static string? ExtractMethodBody(string fileText, string methodName, Func? scopeFilter = null) + { + var sigPattern = $@"(?:public|private|protected|internal)(?:\s+(?:async|static|virtual|override|sealed|partial|new))*\s+[\w<>\[\]?,\s\.]+?\s+{Regex.Escape(methodName)}\s*\("; + foreach (Match sigMatch in Regex.Matches(fileText, sigPattern)) + { + if (scopeFilter != null && !scopeFilter(sigMatch.Index)) continue; + int braceStart = fileText.IndexOf('{', sigMatch.Index); + if (braceStart < 0) continue; + int end = FindMatchingBrace(fileText, braceStart); + if (end < 0) continue; + return fileText.Substring(sigMatch.Index, end - sigMatch.Index + 1); + } + return null; + } + + /// Find the page class's constructor. + private static string? ExtractConstructor(string fileText, string className) + { + var sigPattern = $@"(?:public|private|protected|internal)\s+{Regex.Escape(className)}\s*\("; + var sigMatch = Regex.Match(fileText, sigPattern); + if (!sigMatch.Success) return null; + + int braceStart = fileText.IndexOf('{', sigMatch.Index); + if (braceStart < 0) return null; + + int end = FindMatchingBrace(fileText, braceStart); + if (end < 0) return null; + return fileText.Substring(sigMatch.Index, end - sigMatch.Index + 1); + } + + /// Find a field or property declaration by name, including multi-line + /// initializers, brace-bodied properties, and auto-properties (with or without + /// an initializer). Honors string/char/comment context when matching the terminator. + private static string? ExtractFieldOrProperty(string fileText, string name, Func? scopeFilter = null) + { + var startPattern = $@"(?:public|private|protected|internal)(?:\s+(?:readonly|static|const))*\s+[\w<>\[\]?,\s\.]+?\s+{Regex.Escape(name)}\b"; + foreach (Match m in Regex.Matches(fileText, startPattern)) + { + if (scopeFilter != null && !scopeFilter(m.Index)) continue; + + int end = FindMemberEnd(fileText, m.Index + m.Length); + if (end < 0) continue; + return fileText.Substring(m.Index, end - m.Index + 1); + } + return null; + } + + /// + /// Locate the terminating character of a C# member declaration starting at + /// (just past the matched signature). Handles: + /// + /// Fields and consts: scans forward for ; at depth 0. + /// Brace-bodied properties ({ get; set; }, { get => ...; set { ... } }): + /// returns the matching closing brace. + /// Auto-properties with initializer ({ get; set; } = value;): + /// returns the trailing ; after the initializer. + /// Expression-bodied properties (=> expr;): scans for ; at depth 0. + /// + /// String/char/comment context is honored so that "};" or // ; inside + /// initializers don't terminate the scan prematurely. + /// + private static int FindMemberEnd(string text, int start) + { + int p = start; + while (p < text.Length && char.IsWhiteSpace(text[p])) p++; + if (p >= text.Length) return -1; + + if (text[p] == '{') + { + int closeBrace = FindMatchingBrace(text, p); + if (closeBrace < 0) return -1; + + int after = closeBrace + 1; + while (after < text.Length && char.IsWhiteSpace(text[after])) after++; + if (after < text.Length && text[after] == '=' && (after + 1 >= text.Length || text[after + 1] != '=')) + { + int semi = FindSemicolonAtDepthZero(text, after); + return semi < 0 ? closeBrace : semi; + } + return closeBrace; + } + + return FindSemicolonAtDepthZero(text, p); + } + + /// Scan forward for a ; at brace-depth 0, ignoring strings, chars, + /// and comments. Returns -1 if none found. + private static int FindSemicolonAtDepthZero(string text, int start) + { + int depth = 0; + bool inString = false, inChar = false, inBlockComment = false, inLineComment = false, inVerbatim = false; + for (int i = start; i < text.Length; i++) + { + char c = text[i]; + char prev = i > 0 ? text[i - 1] : '\0'; + + if (inLineComment) { if (c == '\n') inLineComment = false; continue; } + if (inBlockComment) { if (c == '/' && prev == '*') inBlockComment = false; continue; } + if (inString) + { + if (inVerbatim) { if (c == '"' && (i + 1 >= text.Length || text[i + 1] != '"')) { inString = false; inVerbatim = false; } else if (c == '"') { i++; } } + else if (c == '"' && prev != '\\') inString = false; + continue; + } + if (inChar) { if (c == '\'' && prev != '\\') inChar = false; continue; } + + if (c == '/' && i + 1 < text.Length && text[i + 1] == '/') { inLineComment = true; continue; } + if (c == '/' && i + 1 < text.Length && text[i + 1] == '*') { inBlockComment = true; continue; } + if (c == '@' && i + 1 < text.Length && text[i + 1] == '"') { inString = true; inVerbatim = true; i++; continue; } + if (c == '"') { inString = true; continue; } + if (c == '\'') { inChar = true; continue; } + + if (c == '{') depth++; + else if (c == '}') depth--; + else if (c == ';' && depth == 0) return i; + } + return -1; + } + + /// Find a (nested) class declaration by name and return its full text. + private static string? ExtractClass(string fileText, string className) + { + var pattern = $@"(?:public|internal)(?:\s+(?:sealed|abstract|partial|static))*\s+class\s+{Regex.Escape(className)}\b"; + var m = Regex.Match(fileText, pattern); + if (!m.Success) return null; + + int braceStart = fileText.IndexOf('{', m.Index); + if (braceStart < 0) return null; + + int end = FindMatchingBrace(fileText, braceStart); + if (end < 0) return null; + return fileText.Substring(m.Index, end - m.Index + 1); + } + + /// Brace-aware scan starting at openBracePos. Skips braces inside strings and comments. + private static int FindMatchingBrace(string text, int openBracePos) { - return Regex.Replace(header.ToLowerInvariant(), @"[^a-z0-9\s]", "") - .Split(' ', StringSplitOptions.RemoveEmptyEntries) - .Take(4) - .Aggregate((a, b) => a + "-" + b); + int depth = 0; + bool inString = false, inChar = false, inBlockComment = false, inLineComment = false, inVerbatim = false; + for (int i = openBracePos; i < text.Length; i++) + { + char c = text[i]; + char prev = i > 0 ? text[i - 1] : '\0'; + + if (inLineComment) { if (c == '\n') inLineComment = false; continue; } + if (inBlockComment) { if (c == '/' && prev == '*') inBlockComment = false; continue; } + if (inString) + { + if (inVerbatim) { if (c == '"' && (i + 1 >= text.Length || text[i + 1] != '"')) { inString = false; inVerbatim = false; } else if (c == '"') { i++; } } + else if (c == '"' && prev != '\\') inString = false; + continue; + } + if (inChar) { if (c == '\'' && prev != '\\') inChar = false; continue; } + + if (c == '/' && i + 1 < text.Length && text[i + 1] == '/') { inLineComment = true; continue; } + if (c == '/' && i + 1 < text.Length && text[i + 1] == '*') { inBlockComment = true; continue; } + if (c == '@' && i + 1 < text.Length && text[i + 1] == '"') { inString = true; inVerbatim = true; i++; continue; } + if (c == '"') { inString = true; continue; } + if (c == '\'') { inChar = true; continue; } + + if (c == '{') depth++; + else if (c == '}') { depth--; if (depth == 0) return i; } + } + return -1; + } + + /// + /// Extract `using X.Y.Z;` directives from the top of a .cs file, skipping internal Gallery + /// namespaces. Stops at the first non-directive line so that C# 8+ `using` statement-declarations + /// inside method bodies (e.g., `using IRandomAccessStream s = ...`) are NOT mistaken for directives. + /// + private static string[] ExtractUsings(string fileText) + { + var result = new List(); + foreach (var rawLine in fileText.Split('\n')) + { + var line = rawLine.TrimEnd('\r'); + var trimmed = line.TrimStart(); + if (trimmed.Length == 0) continue; + if (trimmed.StartsWith("//")) continue; + if (trimmed.StartsWith("using ") && Regex.IsMatch(trimmed, @"^using\s+[\w\.]+\s*;\s*$")) + { + if (line.Contains("WinUIGallery") || line.Contains("AppUIBasics")) continue; + result.Add(trimmed); + continue; + } + // First non-using/non-comment/non-blank line — past the directive section. + break; + } + return result.ToArray(); + } + + /// Extract identifiers from a code body that could refer to other class members. + private static IEnumerable ScanIdentifiers(string codeBody) + { + // Pascal-cased identifiers (likely properties, methods, types) + foreach (Match m in Regex.Matches(codeBody, @"\b[A-Z][A-Za-z0-9_]+\b")) + yield return m.Value; + // Underscore-prefixed (private fields by convention) + foreach (Match m in UnderscoreFieldRegex().Matches(codeBody)) + yield return m.Value; + } + + /// Extract type-argument names (e.g. `ObservableCollection<Folder>` → ["Folder"]). + private static IEnumerable ExtractTypeNames(string fieldDecl) + { + foreach (Match m in Regex.Matches(fieldDecl, @"<([\w,\s\.]+)>")) + { + foreach (var t in m.Groups[1].Value.Split(',')) + { + var name = t.Trim(); + int dot = name.LastIndexOf('.'); + if (dot >= 0) continue; + if (Regex.IsMatch(name, @"^[A-Z]\w+$")) yield return name; + } + } + } + + /// Tighten whitespace, drop license header + Gallery-internal helper lines. + private static string CompressCSharp(string code) + { + // Strip Gallery's UIHelper.* accessibility helper calls (not portable, agent doesn't have it). + code = Regex.Replace(code, @"^\s*UIHelper\.[^;]+;.*\n?", "", RegexOptions.Multiline); + + // Strip #region / #endregion preprocessor directives — they're noise and + // can produce CS1038 errors when truncation cuts off the matching half. + code = Regex.Replace(code, @"^\s*#(?:region|endregion)\b.*\n?", "", RegexOptions.Multiline); + + // Drop "// Copyright (c) Microsoft..." + "// Licensed under..." header pair. + if (code.StartsWith("// Copyright")) + { + int nl1 = code.IndexOf('\n'); + if (nl1 > 0) + { + int nl2 = code.IndexOf('\n', nl1 + 1); + if (nl2 > 0 && code.Substring(nl1 + 1, nl2 - nl1 - 1).TrimStart().StartsWith("// Licensed")) + code = code.Substring(nl2 + 1).TrimStart(); + } + } + + // De-indent: turn 4-space indents into 2-space (saves ~12% per line). + code = Regex.Replace(code, @"(?m)^( {4})+", m => new string(' ', m.Length / 2)); + + // Collapse 3+ consecutive newlines into 2. + code = Regex.Replace(code, @"\n[\t ]*\n[\t ]*\n+", "\n\n"); + return code.Trim(); } /// @@ -514,7 +1125,7 @@ private static void ApplyOverrides(Scenario[] scenarios) { foreach (var s in scenarios) { - if (s.Id == "tabview" && s.CSharp != null && s.CSharp.Contains("Frame")) + if (s.Id == "tabview-1" && s.CSharp != null && s.CSharp.Contains("Frame")) { s.CSharp = """ private void TabView_AddButtonClick(TabView sender, object args) @@ -562,10 +1173,10 @@ private static Scenario[] InjectMissing(Scenario[] scenarios) { injected.Add(new Scenario { - Id = "commandbar", + Id = "commandbar-1", ControlId = "commandbar", ControlName = "CommandBar", - HeaderText = "A CommandBar with primary and secondary commands", + HeaderText = "Primary and secondary commands", Xaml = """ @@ -583,6 +1194,68 @@ private static Scenario[] InjectMissing(Scenario[] scenarios) }); } + // ItemsRepeater + UniformGridLayout for an image/photo grid is a very common + // need (media galleries, photo organizers) but every upstream UniformGridLayout + // sample in WinUI Gallery happens to demo something else (DataTemplateSelector, + // SelectorBar, connected animation, etc.) so the layout is buried in noise. + // Inject a clean canonical example so agents can copy it directly. + // Pick the next free {controlId}-N suffix so the ID stays consistent with + // the auto-numbered scenarios from the same control. + var nextRepeaterIdx = injected + .Where(s => s.ControlId == "itemsrepeater") + .Select(s => + { + var dash = s.Id.LastIndexOf('-'); + return (dash > 0 && int.TryParse(s.Id[(dash + 1)..], out var n)) ? n : 0; + }) + .DefaultIfEmpty(0) + .Max() + 1; + injected.Add(new Scenario + { + Id = $"itemsrepeater-{nextRepeaterIdx}", + ControlId = "itemsrepeater", + ControlName = "ItemsRepeater", + HeaderText = "Photo gallery: image grid (UniformGridLayout)", + Description = "Canonical pattern for displaying a grid of images/thumbnails: ItemsRepeater + UniformGridLayout, wrapped in a ScrollView for scrolling. Use this instead of GridView+ItemsWrapGrid when you want the modern WinUI 3 collection layout.", + Xaml = """ + + + + + + + + + + + + + + + + """, + CSharp = """ + public sealed partial class PhotoItem + { + public string Thumbnail { get; set; } = ""; + } + + // ItemsSource: + // public ObservableCollection Items { get; } = new(); + """, + Source = "gallery" + }); + // CommunityToolkit controls now come from toolkit-scenarios.json // Only CommandBar needs injection (no ControlExample in WinUI Gallery) diff --git a/src/tools/winui-search/Models.cs b/src/tools/winui-search/Models.cs index e09d185..3145ad7 100644 --- a/src/tools/winui-search/Models.cs +++ b/src/tools/winui-search/Models.cs @@ -6,6 +6,7 @@ [JsonSerializable(typeof(Scenario[]))] [JsonSerializable(typeof(CorePattern[]))] [JsonSerializable(typeof(Dictionary))] +[JsonSerializable(typeof(DocLink[]))] internal partial class JsonContext : JsonSerializerContext { } internal sealed class Scenario @@ -22,6 +23,27 @@ internal sealed class Scenario [JsonPropertyName("nugetPackage")] public string? NuGetPackage { get; set; } /// XAML namespace declarations needed (e.g., xmlns:controls="...") (toolkit only). [JsonPropertyName("xmlnsImports")] public string[] XmlnsImports { get; set; } = []; + /// Longer description from ControlInfoData.json (Gallery only). + [JsonPropertyName("description")] public string? Description { get; set; } + /// Control-level one-line concept summary. For gallery: ControlInfoData.Subtitle + /// (short, median 68 chars). For toolkit: md frontmatter description. Surfaced in search + /// list as "[gallery] Name — <summary>". + [JsonPropertyName("controlDescription")] public string? ControlDescription { get; set; } + /// Related WinUI 3 controls — names of "see also" alternatives/pairings (Gallery only). + [JsonPropertyName("relatedControls")] public string[] RelatedControls { get; set; } = []; + /// API namespace from ControlInfoData.json (Gallery only). Surfaced in output + /// only when non-default — helps agents pick the right `using`/`xmlns` for long-tail + /// controls in Microsoft.Windows.*, Microsoft.UI.Windowing, etc. Empty when unknown + /// or when the standard Microsoft.UI.Xaml.Controls namespace is enough. + [JsonPropertyName("apiNamespace")] public string? ApiNamespace { get; set; } + /// Official documentation links (API reference, guidelines, etc.) (Gallery only). + [JsonPropertyName("docs")] public DocLink[] Docs { get; set; } = []; +} + +internal sealed class DocLink +{ + [JsonPropertyName("title")] public string Title { get; set; } = ""; + [JsonPropertyName("uri")] public string Uri { get; set; } = ""; } internal sealed class CorePattern diff --git a/src/tools/winui-search/Notes.cs b/src/tools/winui-search/Notes.cs index 54a0b0f..435ee8f 100644 --- a/src/tools/winui-search/Notes.cs +++ b/src/tools/winui-search/Notes.cs @@ -3,201 +3,243 @@ internal static class Notes { + /// + /// Cross-control family disambiguation. Single source of truth for "when to pick + /// X vs Y vs Z" — referenced by every family member so we don't repeat the same + /// guidance in 3-5 places (and don't drift between control entries). + /// + private static readonly Dictionary FamilyGuide = new() + { + ["Tabs"] = "TabView=closable doc tabs (browser-style); Pivot=static sections (legacy, prefer SelectorBar for new code); SelectorBar=modern Win11 flat selector; Segmented (Toolkit)=2-5 mutually-exclusive short toggles", + ["Toolbars"] = "CommandBar=app-wide toolbar (PrimaryCommands always-visible, SecondaryCommands overflow); TabbedCommandBar (Toolkit)=Office ribbon-style with multiple tabs of AppBarButton groups", + ["Popups"] = "ContentDialog=modal blocking decision; Flyout=inline contextual UI; MenuFlyout=context/dropdown menu; TeachingTip=non-blocking targeted hint; InfoBar=persistent inline status (Severity Info/Success/Warning/Error); AppNotification=system-wide toast", + ["Collections"] = "ListView=vertical text rows; GridView=image/card grid; ItemsView=modern flexible (LinedFlow/Stack/UniformGrid layouts; replaces ListView/GridView for new code); ItemsRepeater=fully custom layout (no selection, no scroll, wrap in ScrollViewer); TreeView=hierarchy", + ["TextInput"] = "TextBox=plain; RichEditBox=formatted (bold/italic/lists); AutoSuggestBox=search-as-you-type; ComboBox=closed-list dropdown; TokenizingTextBox (Toolkit)=removable chip/tag pills; RichSuggestBox (Toolkit)=@mention/#hashtag inline tokens", + ["Numeric"] = "NumberBox=precise typed value with validation; Slider=visual single-value range; RangeSelector (Toolkit)=two-handle min/max range", + ["Navigation"] = "NavigationView=app sidebar with built-in UX (SelectionChanged + Frame); SplitView=low-level pane primitive (build the list yourself); BreadcrumbBar=path-style trail (ItemsSource only)", + ["Settings"] = "SettingsCard=single setting row (Win11 standard); SettingsExpander=group of related cards under one collapsible header", + ["Sizers"] = "GridSplitter (Toolkit)=column/row resize within a Grid; ContentSizer (Toolkit)=single-axis resize of a sibling element outside a Grid", + ["LayoutPanels"] = "StackPanel=linear; Grid=row/column with sizes; Canvas=absolute positioning; DockPanel (Toolkit)=Dock attached property + LastChildFill; WrapPanel (Toolkit)=row/col then wrap; UniformGrid (Toolkit)=equal cells; StaggeredPanel (Toolkit)=Pinterest masonry; ItemsRepeater Layout=virtualized variants (StackLayout/UniformGridLayout/WrapLayout/StaggeredLayout)", + ["ColorPickers"] = "Microsoft.UI.Xaml.Controls.ColorPicker=basic, dependency-free; CommunityToolkit.WinUI.Controls.ColorPicker=adds ShowAccentColors + IsColorPaletteVisible swatches + IsColorSpectrumVisible toggle; ColorPickerButton (Toolkit)=compact button+flyout wrapper", + }; + + /// Maps each control name to its family key. + private static readonly Dictionary ControlToFamily = new() + { + ["TabView"] = "Tabs", + ["Pivot"] = "Tabs", + ["SelectorBar"] = "Tabs", + ["Segmented"] = "Tabs", + ["CommandBar"] = "Toolbars", + ["TabbedCommandBar"] = "Toolbars", + ["ContentDialog"] = "Popups", + ["Flyout"] = "Popups", + ["MenuFlyout"] = "Popups", + ["TeachingTip"] = "Popups", + ["InfoBar"] = "Popups", + ["AppNotification"] = "Popups", + ["ListView"] = "Collections", + ["GridView"] = "Collections", + ["ItemsView"] = "Collections", + ["ItemsRepeater"] = "Collections", + ["TreeView"] = "Collections", + ["TextBox"] = "TextInput", + ["RichEditBox"] = "TextInput", + ["AutoSuggestBox"] = "TextInput", + ["ComboBox"] = "TextInput", + ["TokenizingTextBox"] = "TextInput", + ["RichSuggestBox"] = "TextInput", + ["NumberBox"] = "Numeric", + ["Slider"] = "Numeric", + ["RangeSelector"] = "Numeric", + ["NavigationView"] = "Navigation", + ["SplitView"] = "Navigation", + ["BreadcrumbBar"] = "Navigation", + ["SettingsCard"] = "Settings", + ["SettingsExpander"] = "Settings", + ["GridSplitter"] = "Sizers", + ["ContentSizer"] = "Sizers", + ["DockPanel"] = "LayoutPanels", + ["WrapPanel"] = "LayoutPanels", + ["UniformGrid"] = "LayoutPanels", + ["StaggeredPanel"] = "LayoutPanels", + ["ColorPicker"] = "ColorPickers", + ["ColorPickerButton"] = "ColorPickers", + }; + + /// + /// Per-control pitfalls. ONLY control-specific guidance — cross-control "use X vs Y" + /// disambiguation lives in FamilyGuide above. + /// private static readonly Dictionary KnownPitfalls = new() { - // ─── Tabs / segmented / pivot family — when to use which ─── - ["TabView"] = [ - "TabCloseRequested provides the Tab via args.Tab — do NOT construct TabViewTabCloseRequestedEventArgs manually.", - "Use IsClosable on individual TabViewItem to control which tabs can be closed.", - "Always set VerticalAlignment=\"Stretch\" on TabView so its content fills the available space.", - "TabViewItem.Content can be ANY UIElement (TextBox, Grid, UserControl) — do NOT use Frame unless you need page navigation.", - "Use TabView for browser-style document tabs (closable, draggable, dynamic). Use Pivot for static section navigation. Use Segmented (Toolkit) for compact mode/view toggles." - ], - ["Pivot"] = [ - "Use Pivot for static section navigation in a single page (Mail folders, Settings categories). Use TabView for closable/draggable document tabs.", - "Pivot has limited customization vs SelectorBar; for modern Windows 11 designs prefer NavigationView + Frame or SelectorBar." + // ─── Data binding (covers x:Bind / Binding / DataTemplate / x:DataType) ─── + ["Binding"] = [ + "x:Bind OneWay/TwoWay needs INotifyPropertyChanged on source. Easiest: inherit ViewModel from ObservableObject (CommunityToolkit.Mvvm), mark fields [ObservableProperty], collections ObservableCollection. Else WMC1506 + UI silently never updates.", + "x:Bind enforces target type at compile time. UIElement-typed prop bound to FrameworkElement-typed (e.g. TeachingTip.Target) → WMC1121. Bind to x:Name'd element, or expose prop as the more specific type." ], - ["SelectorBar"] = [ - "Modern Windows 11 alternative to Pivot — flat horizontal selector for switching views.", - "Choose SelectorBar over Pivot for new code; choose TabView for closable tabs; choose NavigationView for full sidebar nav." + ["Templates"] = [ + "Every with x:Bind MUST set x:DataType — without it x:Bind silently falls back to {Binding} (no IntelliSense, no errors).", + "x:Bind in a DataTemplate references the x:DataType item, NOT the parent Page's ViewModel. Use ElementName or RelativeSource to escape." ], - ["Segmented"] = [ - "Compact toggle group for mutually exclusive view modes (e.g., Day/Week/Month). Use Segmented (Toolkit) instead of TabView/Pivot when you only need to switch between 2-5 short options without page-level routing." - ], - ["TabbedCommandBar"] = [ - "Office Ribbon-style command bar with multiple tabs, each containing AppBarButton groups.", - "Use TabbedCommandBar for productivity apps with many commands organized by category. Use plain CommandBar for simpler toolbars." + + // ─── Tabs ─── + ["TabView"] = [ + "TabCloseRequested provides args.Tab — don't construct TabViewTabCloseRequestedEventArgs manually.", + "IsClosable on individual TabViewItem controls which tabs can be closed.", + "Set VerticalAlignment=\"Stretch\" on TabView so content fills available space.", + "TabViewItem.Content can be ANY UIElement (TextBox, Grid, UserControl); use Frame only for page navigation." ], - // ─── Tree / lists / collection display ─── + // ─── Collections ─── ["TreeView"] = [ - "NEVER use custom .NET record/class types as TreeViewNode.Content with x:Bind DataTemplate — WinRT cannot roundtrip custom managed types through IInspectable.", - "For data-bound trees, use ItemsSource with TreeViewItem in DataTemplate that binds its own ItemsSource to Children.", - "TreeViewItemTemplateSelector does NOT exist in WinUI 3 — invented by older training data. Use a single DataTemplate with x:Bind, or use ItemContainerStyleSelector + ItemTemplate combination instead.", - "TreeViewItem has NO .Icon property. Put icons (Image / FontIcon / SymbolIcon) inside the DataTemplate as the first child of a horizontal StackPanel.", - "Border has NO .Cursor property in WinUI 3. To change cursor on hover, override ProtectedCursor on a custom UserControl, or set ProtectedCursor on the parent control inheriting from Control.", - "For a file-explorer style sidebar: bind ItemsSource to a hierarchical ObservableCollection, where each FolderNode has a Children property of the same type. Use HierarchicalDataTemplate equivalent: a DataTemplate whose root binds ItemsSource={x:Bind Children}." + "Don't use C# record/class as TreeViewNode.Content with x:Bind — WinRT can't roundtrip custom managed types through IInspectable.", + "Data-bound trees: ItemsSource → DataTemplate with TreeViewItem.ItemsSource={x:Bind Children}.", + "TreeViewItemTemplateSelector doesn't exist in WinUI 3 — use one DataTemplate with x:Bind, or ItemContainerStyleSelector + ItemTemplate.", + "TreeViewItem has no .Icon — put Image/FontIcon/SymbolIcon as first child of horizontal StackPanel inside DataTemplate.", + "File-explorer sidebar: ObservableCollection with Children:ObservableCollection; root DataTemplate binds ItemsSource={x:Bind Children}." ], ["ListView"] = [ - "Avoid wrapping ListView in ScrollViewer — it breaks virtualization.", - "Use x:Bind in DataTemplates for better performance vs Binding.", - "WinUI 3 has no built-in DataGrid. For table/spreadsheet UIs, use ListView with a Grid-based ItemTemplate to create columns. Add column headers with a separate Grid above the ListView. Use GridSplitter from CommunityToolkit for resizable columns.", - "For sortable columns, handle column header Click events and re-sort the ObservableCollection or use CollectionViewSource.", - "Use ListView for VERTICAL lists of items. Use GridView for image/card grids. Use ItemsView for the modern collection control with built-in flexible layouts. Use ItemsRepeater for custom layouts without selection support." + "Don't wrap ListView in ScrollViewer — breaks virtualization.", + "Prefer x:Bind in DataTemplates over Binding for performance.", + "WinUI 3 has no DataGrid. For tables: ListView with Grid-based ItemTemplate (columns) + separate header Grid above; CommunityToolkit GridSplitter for resizable cols.", + "Sortable columns: handle header Click events, re-sort ObservableCollection or use AdvancedCollectionView (Toolkit)." ], ["GridView"] = [ - "Use GridView for image-heavy grids (photo browser, media library). Use ListView for text-list rows. Use ItemsView for modern flexible layouts.", - "GridView lacks built-in column resize — for spreadsheet-style use ListView + Grid ItemTemplate + GridSplitter." - ], - ["ItemsView"] = [ - "Modern WinUI 3 collection control (replaces ListView/GridView for new code). Supports flexible Layout (LinedFlowLayout, StackLayout, UniformGridLayout).", - "Choose ItemsView for new code; ListView/GridView remain for backward compatibility and richer per-item interactions like swipe-to-delete." + "GridView has no built-in column resize — for spreadsheet UI use ListView + Grid ItemTemplate + GridSplitter." ], ["ItemsRepeater"] = [ - "ItemsRepeater is a layout primitive — NO selection, NO scrolling on its own. Wrap in ScrollViewer.", - "Use ItemsRepeater when you need fully custom layout and don't need ListView's interactions." + "ItemsRepeater is a layout primitive — NO selection, NO scrolling. Wrap in ScrollViewer.", + "x:Bind OneWay binding needs INPC source — see Binding entry." + ], + ["ItemsView"] = [ + "x:Bind OneWay binding needs INPC source — see Binding entry." ], - // ─── Dialogs / popups family ─── + // ─── Popups ─── ["ContentDialog"] = [ - "Always set XamlRoot = Content.XamlRoot before ShowAsync() in WinUI 3 desktop apps.", - "For save/discard/cancel flows, always provide PrimaryButtonText, SecondaryButtonText AND CloseButtonText.", - "Use ContentDialog for modal blocking decisions. Use Flyout for inline contextual UI. Use TeachingTip for non-blocking guidance/onboarding. Use InfoBar for persistent status messages." + "Set XamlRoot = Content.XamlRoot before ShowAsync() in WinUI 3 desktop apps.", + "Save/discard/cancel flows: provide all three of PrimaryButtonText, SecondaryButtonText, CloseButtonText." ], ["Flyout"] = [ - "Flyout auto-dismisses on outside click. Use ShowMode='Standard' for explicit dismiss.", - "Flyout attaches to a control via FlyoutBase.AttachedFlyout or Button.Flyout. Use ContentDialog for centered modal, MenuFlyout for menus." + "Flyout auto-dismisses on outside click; ShowMode='Standard' for explicit dismiss.", + "Attach via FlyoutBase.AttachedFlyout or Button.Flyout." ], ["MenuFlyout"] = [ - "Use MenuFlyout for context menus (right-click) and dropdown menus. Items are MenuFlyoutItem / ToggleMenuFlyoutItem / MenuFlyoutSubItem." + "Items: MenuFlyoutItem / ToggleMenuFlyoutItem / MenuFlyoutSubItem." ], ["TeachingTip"] = [ - "TeachingTip must have a Target set to appear near a control, or it shows as a banner.", - "Use TeachingTip for non-blocking onboarding hints. Use ContentDialog for modal decisions. Use InfoBar for persistent status." + "Without a Target, TeachingTip shows as a banner instead of near a control.", + "TeachingTip.Target is FrameworkElement, NOT UIElement. x:Bind from UIElement-typed prop → WMC1121. Bind to x:Name'd element or expose as FrameworkElement (Image/TextBlock/Button work)." ], ["InfoBar"] = [ - "InfoBar auto-closes if IsOpen is bound and the user clicks the close button. Ensure two-way binding on IsOpen.", - "Use InfoBar for persistent inline status (Severity = Informational/Success/Warning/Error). Use TeachingTip for transient targeted hints. Use AppNotification for system-wide toast notifications." - ], - - // ─── Color pickers — Gallery vs Toolkit ─── - ["ColorPicker"] = [ - "WinUI 3 ships a built-in in Microsoft.UI.Xaml.Controls — no NuGet needed.", - "CommunityToolkit's ADDS: ShowAccentColors (Windows accent palette), IsColorPaletteVisible (preset swatches), IsColorSpectrumVisible toggle.", - "Choose Toolkit version if you need swatches or accent colors; otherwise WinUI native is sufficient and dependency-free." - ], - ["ColorPickerButton"] = [ - "CommunityToolkit-only control — wraps ColorPicker in a Button with a flyout. Use for compact color selection in toolbars." + "InfoBar auto-closes on user-click — bind IsOpen TwoWay." ], // ─── Navigation ─── ["NavigationView"] = [ - "Use NavigationView.MenuItems for static nav, or MenuItemsSource for data-bound.", - "Handle SelectionChanged, not ItemInvoked, for reliable navigation.", - "Use NavigationView for app-level sidebar navigation (Mail, Settings). Use SplitView as a low-level pane primitive when you need full control. Use TabView for documents." + "MenuItems for static nav; MenuItemsSource for data-bound.", + "Handle SelectionChanged, NOT ItemInvoked, for reliable navigation." ], ["SplitView"] = [ - "SplitView is a low-level pane control — you build the navigation list yourself. Use NavigationView for built-in nav UX.", - "Set DisplayMode='Inline' for always-visible pane, 'CompactInline' for icon strip, 'Overlay' for hamburger flyout." + "DisplayMode='Inline'=always-visible pane; 'CompactInline'=icon strip; 'Overlay'=hamburger flyout." + ], + ["BreadcrumbBar"] = [ + "BreadcrumbBar has no Items property — only ItemsSource." ], - // ─── Numeric input ─── + // ─── Numeric ─── ["NumberBox"] = [ - "NumberBox.Value is double — use Math.Round for integer-only scenarios.", - "Set SpinButtonPlacementMode='Inline' to show +/- buttons.", - "Use NumberBox for precise numeric entry with validation. Use Slider for visual range selection. Use RangeSelector (Toolkit) for min/max range.", - "Set ValidationMode='InvalidInputOverwritten' to auto-correct invalid input." - ], - ["Slider"] = [ - "Use Slider for single-value range selection with visual feedback. Use NumberBox for precise typed input. Use RangeSelector (Toolkit) for two-handle min/max." - ], - ["RangeSelector"] = [ - "CommunityToolkit two-handle slider for min/max range selection. Use over Slider when both bounds are user-configurable." + "NumberBox.Value is double — Math.Round for integer scenarios.", + "SpinButtonPlacementMode='Inline' shows +/- buttons.", + "ValidationMode='InvalidInputOverwritten' auto-corrects invalid input." ], - // ─── Text input family ─── + // ─── Text input ─── ["AutoSuggestBox"] = [ - "Handle TextChanged with reason == UserInput to filter suggestions. Don't filter on SuggestionChosen.", - "Use AutoSuggestBox for search-as-you-type. Use TokenizingTextBox (Toolkit) for tag/chip input. Use RichSuggestBox (Toolkit) for @mention/#hashtag inline tokens." + "Filter suggestions in TextChanged when reason==UserInput, NOT in SuggestionChosen." ], ["RichEditBox"] = [ - "Use Document.GetText/SetText with TextGetOptions/TextSetOptions for content access.", - "Use RichEditBox for formatted text (bold/italic/lists). Use TextBox for plain multiline text." + "Content access: Document.GetText/SetText with TextGetOptions/TextSetOptions." ], ["RichSuggestBox"] = [ - "CommunityToolkit control combining AutoSuggestBox + RichEditBox — produces inline tokens for @mentions, #hashtags, etc.", - "Use Prefixes property to define trigger characters (e.g., '@#'). Tokens are tracked in Tokens collection." - ], - ["TokenizingTextBox"] = [ - "CommunityToolkit control for chip/tag entry — items become removable pills.", - "Use over a plain TextBox when input is a list of distinct items (recipient lists, tag clouds)." + "Prefixes property defines trigger chars (e.g. '@#'); inline tokens tracked in Tokens collection." ], ["ComboBox"] = [ - "Bind SelectedItem or SelectedIndex, not SelectedValue, unless you also set SelectedValuePath.", - "Use ComboBox for dropdown selection from a closed list. Use AutoSuggestBox for search/filter UX. Use MenuFlyout for non-data action menus." + "Bind SelectedItem/SelectedIndex, NOT SelectedValue (unless SelectedValuePath is also set)." ], - // ─── Settings card family — when to use which ─── + // ─── Settings ─── ["SettingsCard"] = [ - "Use SettingsCard for individual settings, SettingsExpander for grouped settings with sub-items.", - "This is the standard Windows 11 Settings page pattern — do not build settings UI with plain StackPanel + ToggleSwitch.", - "Set IsClickEnabled=True to turn the card into a button (e.g., for navigation to a detail page)." + "Don't build settings UI with plain StackPanel+ToggleSwitch — use SettingsCard (Win11 standard).", + "IsClickEnabled=True turns the card into a button (e.g. for nav to detail page)." ], ["SettingsExpander"] = [ - "Use SettingsExpander to group multiple SettingsCards under a single collapsible header. The Items collection holds child SettingsCards.", - "For a flat list of settings, use plain SettingsCard. For 2-3 logically related settings, use SettingsExpander." + "Items collection holds child SettingsCards under one collapsible header." ], - // ─── Sizers / splitters ─── + // ─── Sizers ─── ["GridSplitter"] = [ - "Place GridSplitter in an Auto-width column between two content columns.", - "Use ResizeBehavior='BasedOnAlignment' for the typical between-columns case. Use ResizeDirection='Auto' to let it infer." - ], - ["ContentSizer"] = [ - "Use ContentSizer for single-axis resize of a sibling element. Use GridSplitter for column/row resize within a Grid." + "Place in an Auto-width column between two content columns.", + "ResizeBehavior='BasedOnAlignment' for between-columns; ResizeDirection='Auto' infers." ], - // ─── Layout panels ─── + // ─── Layout ─── ["DockPanel"] = [ - "Set LastChildFill=True to make the last child fill remaining space.", - "Use Dock attached property on children: Top/Bottom/Left/Right." + "LastChildFill=True makes last child fill remaining space.", + "Dock attached property on children: Top/Bottom/Left/Right." ], ["WrapPanel"] = [ - "WrapPanel arranges children in a row/column then wraps to next line. Use for tag clouds, button bars.", - "Use WrapLayout (Toolkit) when you need it inside an ItemsRepeater for virtualized scenarios." + "For virtualized wrap: use WrapLayout (Toolkit) inside ItemsRepeater." ], ["UniformGrid"] = [ - "All cells are equal-sized. Specify Rows or Columns; the other dimension auto-calculates.", - "Use UniformGrid for symmetric grids (calendar, matrix). Use Grid for explicit row/column sizing." + "All cells equal-sized; specify Rows OR Columns, the other auto-calculates." ], ["StaggeredPanel"] = [ - "Pinterest-style masonry layout — variable-height columns. Use StaggeredLayout (Toolkit) inside ItemsRepeater for virtualized version." + "For virtualized masonry: StaggeredLayout (Toolkit) inside ItemsRepeater." + ], + + // ─── Toolbars ─── + ["CommandBar"] = [ + "PrimaryCommands=always-visible; SecondaryCommands=overflow menu." ], // ─── Other commonly-confused controls ─── - ["BreadcrumbBar"] = ["BreadcrumbBar has no Items property — only ItemsSource."], ["Border"] = [ - "Border has NO .Cursor property in WinUI 3 (a common WPF holdover). To change the cursor on hover, override ProtectedCursor on a custom UserControl that hosts the Border, or set Cursor on the nearest parent FrameworkElement that inherits from Control.", - "For a click-able border, wrap with Button (Style=\"{StaticResource TransparentButtonStyle}\") instead of catching pointer events on Border directly." + "Border has no .Cursor in WinUI 3 (WPF holdover). Override ProtectedCursor on a custom UserControl hosting the Border, or set ProtectedCursor on nearest parent FrameworkElement deriving from Control.", + "Clickable border: wrap with Button Style=\"{StaticResource TransparentButtonStyle}\" — don't catch pointer events on Border directly." ], ["WebView2"] = [ "Always call EnsureCoreWebView2Async() before using CoreWebView2 properties.", - "NavigateToString(html) loads inline HTML content without needing a URL." + "NavigateToString(html) loads inline HTML without a URL." ], - ["Expander"] = ["Expander does not support IsExpanded two-way binding by default — use x:Bind Mode=TwoWay."], - ["MenuBar"] = ["MenuBar must be in the title bar area or at the top of the window for standard layout."], - ["CommandBar"] = [ - "Use PrimaryCommands for always-visible actions, SecondaryCommands for overflow.", - "Use CommandBar for app-wide toolbars. Use TabbedCommandBar (Toolkit) for ribbon-style multi-tab commands." + ["Expander"] = [ + "Expander.IsExpanded TwoWay binding needs explicit x:Bind Mode=TwoWay (default doesn't work)." + ], + ["MenuBar"] = [ + "Place MenuBar in title bar or at top of window for standard layout." ], ["AdvancedCollectionView"] = [ - "Wrap your ObservableCollection with AdvancedCollectionView for sorting, filtering and grouping without modifying the source.", + "Wrap ObservableCollection with AdvancedCollectionView for sorting/filtering/grouping without modifying source.", "Call RefreshFilter() after changing the Filter predicate." ], }; - public static string[] GetNotes(string controlName) + /// Result payload combining specific pitfalls with the optional family guide. + public readonly record struct NotesPayload(string[] Pitfalls, string? FamilyName, string? FamilyGuide); + + public static NotesPayload Get(string controlName) { - return KnownPitfalls.TryGetValue(controlName, out var notes) ? notes : []; + var pitfalls = KnownPitfalls.TryGetValue(controlName, out var p) ? p : Array.Empty(); + string? famName = null, famGuide = null; + if (ControlToFamily.TryGetValue(controlName, out var fk) && FamilyGuide.TryGetValue(fk, out var guide)) + { + famName = fk; + famGuide = guide; + } + return new NotesPayload(pitfalls, famName, famGuide); } -} + + /// Backward-compat: just the pitfalls (no family). + public static string[] GetNotes(string controlName) => Get(controlName).Pitfalls; +} \ No newline at end of file diff --git a/src/tools/winui-search/Program.cs b/src/tools/winui-search/Program.cs index fe021c2..70e4a64 100644 --- a/src/tools/winui-search/Program.cs +++ b/src/tools/winui-search/Program.cs @@ -13,41 +13,153 @@ private static int Main(string[] args) var command = args[0].ToLowerInvariant(); - // Force-refresh on update + // Force-refresh on update: clear cache, then pull fresh data from GitHub. + // Hot path commands (search/get/list) never fetch from GitHub — they hit cache + // or embedded fallback for fast, reliable response. They DO opportunistically + // spawn a background `update --background` child if the cache is >7 days old. if (command == "update") { - ForceFetch(); + bool isBackground = BackgroundUpdater.IsBackgroundInvocation(args); + BackgroundUpdater.DebugLogPublic($"update entered (isBackground={isBackground})"); + bool gallerySucceeded = false; + bool toolkitSucceeded = false; + // Foreground update participates in the same lock protocol as the + // background updater so a hot-path-spawned `update --background` child + // doesn't write the same cache files concurrently with us. Background + // invocations already hold the lock (acquired by TryKickoffIfStale before + // spawn), so we only acquire here for the foreground path. + bool acquiredForeground = false; + if (!isBackground) + { + acquiredForeground = BackgroundUpdater.TryAcquireLock(); + if (!acquiredForeground) + { + Console.Error.WriteLine( + "Note: a background refresh appears to be in progress. " + + "Proceeding with foreground update anyway (atomic writes prevent corruption)."); + } + } + try + { + if (!isBackground) ForceFetch(); + try + { + GalleryFetcher.RefreshFromGitHub(); + gallerySucceeded = true; + BackgroundUpdater.DebugLogPublic("Gallery refresh OK"); + } + catch (Exception e) + { + BackgroundUpdater.DebugLogPublic($"Gallery refresh failed: {e.GetType().Name}: {e.Message}"); + if (!isBackground) Console.Error.WriteLine($"Gallery refresh failed: {e.Message}"); + } + try + { + ToolkitFetcher.RefreshFromGitHub(); + toolkitSucceeded = true; + BackgroundUpdater.DebugLogPublic("Toolkit refresh OK"); + } + catch (Exception e) + { + BackgroundUpdater.DebugLogPublic($"Toolkit refresh failed: {e.GetType().Name}: {e.Message}"); + if (!isBackground) Console.Error.WriteLine($"Toolkit refresh failed: {e.Message}"); + } + if (!isBackground) + { + if (gallerySucceeded && toolkitSucceeded) + { + Console.WriteLine("Cache refreshed from GitHub."); + } + else if (gallerySucceeded || toolkitSucceeded) + { + Console.WriteLine( + $"Cache partially refreshed: gallery={(gallerySucceeded ? "OK" : "FAILED")}, " + + $"toolkit={(toolkitSucceeded ? "OK" : "FAILED")} (failed sources fall back to embedded snapshots)"); + } + else + { + Console.WriteLine("Cache refresh failed (search still works via embedded snapshots)."); + } + } + } + finally + { + if (gallerySucceeded && toolkitSucceeded) BackgroundUpdater.MarkSuccess(); + else BackgroundUpdater.MarkAttempt(); + // Release the lock we own — for background invocations that's the lock + // TryKickoffIfStale acquired before spawning us; for foreground that's + // the lock we acquired above (only release if we successfully acquired). + if (isBackground || acquiredForeground) BackgroundUpdater.ReleaseLock(); + } + return (gallerySucceeded && toolkitSucceeded) ? 0 : 1; } var (galleryScenarios, galleryTags) = GalleryFetcher.Load(); - var (toolkitScenarios, toolkitTags) = ToolkitFetcher.Load(); + var (toolkitScenarios, toolkitTags, toolkitKeywords) = ToolkitFetcher.Load(); var allScenarios = galleryScenarios.Concat(toolkitScenarios).ToArray(); - // Merge gallery + toolkit tags - var allTags = new Dictionary(galleryTags); - foreach (var kv in toolkitTags) - allTags[kv.Key] = kv.Value; + // Merge gallery + toolkit tags/keywords using composite "{source}:{controlId}" + // keys so colliding controlIds (gallery + toolkit both expose `colorpicker`, + // `wrappanel`) don't overwrite each other. SearchEngine looks them up by the + // same composite key it uses for scenario grouping. + var allTags = new Dictionary(StringComparer.OrdinalIgnoreCase); + foreach (var kv in galleryTags) allTags[$"gallery:{kv.Key}"] = kv.Value; + foreach (var kv in toolkitTags) allTags[$"toolkit:{kv.Key}"] = kv.Value; + + var allKeywords = new Dictionary(StringComparer.OrdinalIgnoreCase); + foreach (var kv in toolkitKeywords) allKeywords[$"toolkit:{kv.Key}"] = kv.Value; var engine = new SearchEngine( allScenarios, DataLoader.LoadCorePatterns(), - allTags + allTags, + allKeywords ); return command switch { - "search" => RunSearch(engine, args.Skip(1).ToArray()), - "get" => RunGet(engine, args.Skip(1).ToArray()), - "list" => RunList(engine), - "update" => 0, // already fetched above + "search" => RunWithBackgroundRefresh(() => RunSearch(engine, args.Skip(1).ToArray())), + "get" => RunWithBackgroundRefresh(() => RunGet(engine, args.Skip(1).ToArray())), + "list" => RunWithBackgroundRefresh(() => RunList(engine, args.Skip(1).ToArray())), + "debug" => RunWithBackgroundRefresh(() => RunDebug(engine, args.Skip(1).ToArray())), _ => PrintUsage() }; } + /// Run a hot-path command, then opportunistically spawn a background + /// cache refresh if the GitHub cache is stale (>7d). The spawn is fire-and-forget; + /// the user has already received their answer by the time it kicks off. + private static int RunWithBackgroundRefresh(Func action) + { + var exit = action(); + BackgroundUpdater.TryKickoffIfStale(); + return exit; + } + + private static int RunDebug(SearchEngine engine, string[] args) + { + var query = string.Join(" ", args); + Console.WriteLine($"Query: \"{query}\""); + Console.WriteLine($"Preprocessed: \"{Synonyms.Preprocess(query)}\""); + var tokens = BM25.Tokenize(Synonyms.Preprocess(query)); + Console.WriteLine($"Tokens: [{string.Join(", ", tokens)}]"); + Console.WriteLine($"Expanded: [{string.Join(", ", Synonyms.Expand(tokens))}]"); + Console.WriteLine(); + var groups = engine.SearchGrouped(query, maxControls: 20, maxScenariosPerControl: 1, applyFloor: false); + Console.WriteLine($"Top {groups.Count} groups (no floor):"); + foreach (var g in groups) + { + var boostMark = g.HasNameBoost ? "★" : " "; + Console.WriteLine($" {boostMark} {g.Score,7:F3} [{g.Source}] {g.ControlName} ({g.Scenarios[0].Id})"); + } + return 0; + } + private static int RunSearch(SearchEngine engine, string[] args) { - int max = 5; - var queryParts = new List(); + int max = 3; + var queries = new List(); + string? sourceFilter = null; for (int i = 0; i < args.Length; i++) { @@ -55,63 +167,228 @@ private static int RunSearch(SearchEngine engine, string[] args) { int.TryParse(args[++i], out max); } + else if (args[i] == "--source" && i + 1 < args.Length) + { + var raw = args[++i]; + sourceFilter = raw.ToLowerInvariant(); + if (sourceFilter is not ("gallery" or "toolkit" or "core")) + { + Console.Error.WriteLine($"--source must be one of: gallery, toolkit, core (got: {raw})"); + return 1; + } + } else if (!args[i].StartsWith('-')) { - queryParts.Add(args[i]); + queries.Add(args[i]); } } - var query = string.Join(" ", queryParts); - if (string.IsNullOrWhiteSpace(query)) + if (queries.Count == 0) { - Console.Error.WriteLine("Usage: winui-search search [--max N]"); + Console.Error.WriteLine("Usage: winui-search search \"\" [\"\" ...] [--max N] [--source gallery|toolkit|core]"); + Console.Error.WriteLine(" Pass each query as a SEPARATE quoted argument to batch them in one call."); return 1; } - var results = engine.Search(query, max); - if (results.Count == 0) + // Single query: legacy behaviour (treat all positional args as one phrase if just one was passed) + if (queries.Count == 1) { - Console.WriteLine($"No patterns found for: \"{query}\""); - return 0; + return EmitSearch(engine, queries[0], max, header: false, sourceFilter: sourceFilter); } - Console.WriteLine($"Found {results.Count} matches for \"{query}\":"); - Console.WriteLine(); - foreach (var r in results) + // Batch: emit each query under its own header. + // NOTE: do NOT emit blank separator lines anywhere in this output — the + // Copilot CLI tool-result capture collapses runs of blank lines, which would + // glue "### Query N" headers onto the previous query's last row. Single + // newlines (one per logical line) survive intact and keep markers parseable. + var batchSuffix = sourceFilter != null ? $" (--source {sourceFilter})" : ""; + Console.WriteLine($"Batch search: {queries.Count} queries{batchSuffix}"); + // Track control IDs already shown in this batch. When a later query would + // re-surface the same control with a noticeably weaker score, suppress it + // and emit a one-line back-reference instead — saves tokens AND signals to + // the agent that they already have this info. + var shownControls = new Dictionary(StringComparer.OrdinalIgnoreCase); + int rc = 0; + for (int i = 0; i < queries.Count; i++) + { + Console.WriteLine($"### Query {i + 1}: \"{queries[i]}\""); + int qrc = EmitSearch(engine, queries[i], max, header: true, queryIndex: i + 1, shownControls: shownControls, sourceFilter: sourceFilter); + if (qrc != 0) rc = qrc; + } + Console.WriteLine("To get full code, pass one or more IDs to: winui-search get [ ...]"); + return rc; + } + + private static int EmitSearch( + SearchEngine engine, string query, int max, bool header, + int queryIndex = 0, + Dictionary? shownControls = null, + string? sourceFilter = null) + { + var groups = engine.SearchGrouped(query, maxControls: max, maxScenariosPerControl: 3, sourceFilter: sourceFilter); + if (groups.Count == 0) + { + var noMatchSuffix = sourceFilter != null ? $" (--source {sourceFilter})" : ""; + Console.WriteLine($"No patterns found for: \"{query}\"{noMatchSuffix}"); + return 0; + } + if (!header) Console.WriteLine($"Found {groups.Count} matches for \"{query}\":"); + foreach (var g in groups) { - Console.WriteLine($" {r.Id}"); - Console.WriteLine($" {r.Scenario}"); - Console.WriteLine(); + // Batch-level dedup: if this control already appeared in a previous query + // and the current query's score isn't materially higher (≥1.3×), emit only + // a back-reference. This handles the SettingsCard/SettingsExpander overlap + // and similar agent-side query duplication. + var dedupKey = g.Source == "core" + ? $"core:{g.Scenarios[0].Id}" + : $"{g.Source}:{g.ControlName}"; + if (shownControls != null + && shownControls.TryGetValue(dedupKey, out var prev) + && prev.queryIndex != queryIndex + && g.Score < prev.topScore * 1.3) + { + Console.WriteLine($" [{g.Source}] {g.ControlName} → see Query {prev.queryIndex}"); + continue; + } + if (shownControls != null && !shownControls.ContainsKey(dedupKey)) + shownControls[dedupKey] = (queryIndex, g.Score); + + // Header line: e.g. "[gallery] MenuFlyout (7 scenarios)" / "[core]" + if (g.Source == "core") + { + // Core patterns are single-row; flat output with no group header. + var row = g.Scenarios[0]; + Console.WriteLine($" {row.Id}: {CompressHeader(row.Header, controlName: "")}"); + continue; + } + + // Compact control header: "[source] Name — " (when available). + // Subtitle (median 68 chars) is short enough to keep tokens reasonable while + // giving the agent a one-liner so it can decide whether to drill into `get`. + // The earlier scenario-count summary ("showing top 3 of 8") stays dropped — + // low information density per token. + var ctrlSummary = !string.IsNullOrEmpty(g.ControlDescription) + ? $" — {g.ControlDescription}" + : ""; + Console.WriteLine($" [{g.Source}] {g.ControlName}{ctrlSummary}"); + foreach (var row in g.Scenarios) + { + // Compact: ":
" — saves ~10-15 chars/row vs. fixed-width padding, + // and the colon stays scannable for both humans and agents. + var compactHeader = CompressHeader(row.Header, g.ControlName); + var rowDesc = !string.IsNullOrEmpty(row.Description) && row.Description != g.ControlDescription + ? $" — {row.Description}" + : ""; + Console.WriteLine($" {row.Id}: {compactHeader}{rowDesc}"); + } } - Console.WriteLine("To get full code: winui-search get "); + if (!header) Console.WriteLine("To get full code: winui-search get [ ...]"); return 0; } + /// + /// Trim filler from a scenario header at display time. Cheap, deterministic, + /// reversible (full text still in cache). Specifically: + /// • Drop leading article ("A "/"An "/"The "). + /// • Drop trailing " by <ControlName>" / " using <ControlName>" — the + /// control name is already shown on the group header above. + /// • Replace "with support for" → "supports". + /// Saves ~10–15 chars per row across a typical search result. + /// + private static string CompressHeader(string h, string controlName) + { + if (string.IsNullOrEmpty(h)) return h; + + // Leading article — "A "/"An "/"The " at the very start. We don't require the + // next char to be uppercase because some headers are "A basic …" (lowercase b) + // and we still want the article gone. False-positive risk is negligible — + // no real header begins with "A "+single-letter token. + if (h.StartsWith("A ", StringComparison.Ordinal)) h = h[2..]; + else if (h.StartsWith("An ", StringComparison.Ordinal)) h = h[3..]; + else if (h.StartsWith("The ", StringComparison.Ordinal)) h = h[4..]; + + if (!string.IsNullOrEmpty(controlName)) + { + var byPattern = " by " + controlName; + var usingPattern = " using " + controlName; + if (h.EndsWith(byPattern, StringComparison.OrdinalIgnoreCase)) + h = h[..^byPattern.Length]; + else if (h.EndsWith(usingPattern, StringComparison.OrdinalIgnoreCase)) + h = h[..^usingPattern.Length]; + } + + h = System.Text.RegularExpressions.Regex.Replace( + h, @"\bwith support for\b", "supports", + System.Text.RegularExpressions.RegexOptions.IgnoreCase); + + return h.TrimEnd(); + } + private static int RunGet(SearchEngine engine, string[] args) { if (args.Length == 0) { - Console.Error.WriteLine("Usage: winui-search get "); + Console.Error.WriteLine("Usage: winui-search get [ ...]"); + Console.Error.WriteLine(" Pass multiple ids to batch them in one call."); return 1; } - var (formatted, found) = engine.GetPattern(args[0]); - Console.WriteLine(formatted); - return found ? 0 : 1; + // Single id: print directly (no separator), preserve legacy output + if (args.Length == 1) + { + var (formatted, found) = engine.GetPattern(args[0]); + Console.WriteLine(formatted); + return found ? 0 : 1; + } + + // Batch: print each pattern with a clear separator and surface any not-found ids. + // The separator is just "---" on its own line — surrounding blank lines would be + // collapsed by the Copilot CLI tool-result capture (gluing it to neighboring + // content), so we emit the separator alone. + bool anyMissing = false; + for (int i = 0; i < args.Length; i++) + { + if (i > 0) + { + Console.WriteLine("---"); + } + var (formatted, found) = engine.GetPattern(args[i]); + Console.WriteLine(formatted); + if (!found) anyMissing = true; + } + return anyMissing ? 1 : 0; } - private static int RunList(SearchEngine engine) + private static int RunList(SearchEngine engine, string[] args) { - Console.WriteLine("Available patterns:"); + string? sourceFilter = null; + for (int i = 0; i < args.Length; i++) + { + if (args[i] == "--source" && i + 1 < args.Length) + { + var raw = args[++i]; + sourceFilter = raw.ToLowerInvariant(); + if (sourceFilter is not ("gallery" or "toolkit" or "core")) + { + Console.Error.WriteLine($"--source must be one of: gallery, toolkit, core (got: {raw})"); + return 1; + } + } + } + + Console.WriteLine($"Available patterns{(sourceFilter != null ? $" (--source {sourceFilter})" : "")}:"); Console.WriteLine(); string? lastType = null; foreach (var (id, scenario) in engine.ListAll()) { string type; - if (id.StartsWith("gallery-")) type = "Gallery (WinUI 3)"; - else if (id.StartsWith("toolkit-")) type = "CommunityToolkit"; - else type = "Core platform patterns"; + string source; + if (id.StartsWith("gallery-")) { type = "Gallery (WinUI 3)"; source = "gallery"; } + else if (id.StartsWith("toolkit-")) { type = "CommunityToolkit"; source = "toolkit"; } + else { type = "Core platform patterns"; source = "core"; } + + if (sourceFilter != null && source != sourceFilter) continue; if (type != lastType) { @@ -126,13 +403,22 @@ private static int RunList(SearchEngine engine) private static void ForceFetch() { - // Delete entire cache root to force re-fetch of both Gallery + Toolkit - var cacheDir = Path.Combine( + // Delete only the per-source data subdirectories. Crucially, do NOT touch + // the cache root, because BackgroundUpdater stores its coordination files + // there (update.lock, last-github-update.txt, last-github-attempt.txt, + // background.log). A recursive delete of the root would wipe the lock file + // we may currently hold and break the single-writer guarantee against an + // in-flight background updater. + var cacheRoot = Path.Combine( Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "winui-search", "cache"); - if (Directory.Exists(cacheDir)) + foreach (var sub in new[] { "gallery", "toolkit" }) { - try { Directory.Delete(cacheDir, true); } catch { } + var subDir = Path.Combine(cacheRoot, sub); + if (Directory.Exists(subDir)) + { + try { Directory.Delete(subDir, recursive: true); } catch { } + } } } @@ -141,15 +427,21 @@ private static int PrintUsage() Console.WriteLine("winui-search - WinUI 3 control pattern search"); Console.WriteLine(); Console.WriteLine("Commands:"); - Console.WriteLine(" search [--max N] Search for controls by description"); - Console.WriteLine(" get Get full XAML + C# code for a pattern"); - Console.WriteLine(" list List all available patterns"); - Console.WriteLine(" update Force refresh from GitHub (clears cache)"); + Console.WriteLine(" search \"\" [\"\" ...] [--max N] [--source S] Search controls (batch one focused query per feature)"); + Console.WriteLine(" get [ ...] Get full XAML + C# (batch up to 3 IDs per call)"); + Console.WriteLine(" list [--source S] List all available patterns"); + Console.WriteLine(" debug \"\" Diagnostic dump: tokens, synonym expansion, top matches (no score floor)"); + Console.WriteLine(" update Force refresh from GitHub (clears cache; auto-runs in background when stale)"); + Console.WriteLine(); + Console.WriteLine(" --source S Restrict to one of: gallery, toolkit, core (applies to search + list)"); Console.WriteLine(); Console.WriteLine("Examples:"); - Console.WriteLine(" winui-search search \"tabbed document interface\""); - Console.WriteLine(" winui-search get gallery-tabview"); + Console.WriteLine(" winui-search search \"tabbed document interface\" \"settings card\" \"info bar status\""); + Console.WriteLine(" winui-search search \"file picker\" --source core"); + Console.WriteLine(" winui-search list --source toolkit"); + Console.WriteLine(" winui-search get gallery-tabview-1 toolkit-settingscard-9 gallery-infobar-1"); Console.WriteLine(" winui-search get jumplist-recent-files"); + Console.WriteLine(" winui-search debug \"settings card with toggle\""); return 1; } } diff --git a/src/tools/winui-search/README.md b/src/tools/winui-search/README.md index 1aa42f8..7f3a756 100644 --- a/src/tools/winui-search/README.md +++ b/src/tools/winui-search/README.md @@ -13,7 +13,8 @@ files at runtime. | Source | How it's loaded | |---|---| | WinUI Gallery samples | Embedded JSON snapshot baked into the exe at build time, refreshable on demand via `winui-search update` (which re-fetches from `microsoft/WinUI-Gallery@main`). | -| Community Toolkit samples | Same pattern — embedded snapshot + on-demand GitHub fetch from `CommunityToolkit/Windows@main`. | +| Community Toolkit samples | Same pattern — embedded snapshot + on-demand GitHub fetch from `CommunityToolkit/Windows@main`. C# samples have platform `#if WINAPPSDK / #else / #endif` folded so emitted code compiles cleanly against WinAppSDK. | +| Toolkit author keywords | `Data/toolkit-keywords.json` — hand-picked terms from each sample's `.md` frontmatter `keywords:` list, surfaced as a higher-weighted BM25 field separate from auto-extracted tags. | | Core WinUI 3 patterns | Hand-curated `Data/core-patterns.json` baked in. Used for foundational layouts (NavigationView, MVVM scaffolds, etc.) where pulling a Gallery scenario is overkill. | | Tag dictionaries | `Data/gallery-tags.json` / `Data/toolkit-tags.json`, also embedded — used by the BM25 scoring to bias results toward category matches. | @@ -27,6 +28,10 @@ fully offline; `update` is opt-in. > `update` mode + the long-term plan in launch tracker §10.3 cover the > cron-regenerate option. +For a deeper breakdown of every input — which GitHub paths are scraped, how +tags/keywords are derived, and how each `Data\*.json` file is regenerated — +see [`DATA_SOURCES.md`](DATA_SOURCES.md). + ## Building Requires the .NET 10 SDK. From the repo root: @@ -35,17 +40,20 @@ Requires the .NET 10 SDK. From the repo root: # Plain build (faster iteration; no AOT) dotnet build src/tools/winui-search/winui-search.csproj -c Release -# Native-AOT single-file exe for the host architecture (x64 or arm64) -dotnet publish src/tools/winui-search/winui-search.csproj -c Release +# Native-AOT publish + deploy to src/skills/winui-search/winui-search.exe +.\scripts\build-search.ps1 # Cross-publish for ARM64 from an x64 host -dotnet publish src/tools/winui-search/winui-search.csproj -c Release -r win-arm64 +.\scripts\build-search.ps1 -Runtime win-arm64 + +# Build only, don't deploy to the skill folder +.\scripts\build-search.ps1 -SkipPublish ``` -`dotnet publish` produces a self-contained ~15 MB single-file `winui-search.exe` -under `src/tools/winui-search/bin/Release/net10.0//publish/`. Copy that into -the consuming skill folder (currently distributed via `winui-design` / -`winui-dev-workflow`). +`build-search.ps1` produces a self-contained ~8 MB single-file `winui-search.exe` +under `src/tools/winui-search/bin/Release/net10.0//publish/` and copies it +into `src/skills/winui-search/winui-search.exe` (currently distributed via the +`winui-search` skill, which `winui-design` and `winui-dev-workflow` depend on). For a one-shot rebuild of all three tools (analyzer DLL refresh + AOT exes for host arch), use [`scripts/build-tools.ps1`](../../../scripts/build-tools.ps1) @@ -53,10 +61,20 @@ from the repo root. ## Architecture -* `Program.cs` — entry point, command parsing. +* `Program.cs` — entry point, command parsing, opportunistic background-refresh + hook on hot-path commands. * `DataLoader.cs` — loads the embedded JSON snapshots into memory at startup. * `GalleryFetcher.cs` / `ToolkitFetcher.cs` — `update`-mode network code that - re-pulls snapshots from GitHub. + re-pulls snapshots from GitHub. `ToolkitFetcher` also folds platform `#if` + blocks (`#if WINAPPSDK / #else / #endif`) so emitted samples are clean + WinAppSDK code without UWP/Uno preprocessor noise. +* `BackgroundUpdater.cs` — stale-while-revalidate refresher: hot-path commands + spawn a detached `winui-search update --background` child if the GitHub cache + is older than 7 days. Concurrency-safe (atomic `update.lock`, 10-min TTL, + 1-hour failure backoff). See "Background updates" below. +* `CacheVersion.cs` — single source of truth for cache schema versioning. Both + fetchers stamp `CacheVersion.Current` into `schema-version.txt`; mismatched + caches are discarded on read so embedded JSON wins until the next refresh. * `SearchEngine.cs` + `BM25.cs` — BM25 scoring with stop-word filtering (`StopWords.cs`) and synonym expansion (`Synonyms.cs`). * `Notes.cs` — embeds extra context strings appended to result snippets when @@ -68,15 +86,87 @@ from the repo root. ## Usage ```text -winui-search Search across all sources, ranked by BM25 score. -winui-search --source gallery Restrict to WinUI Gallery. -winui-search --source toolkit Restrict to Community Toolkit. -winui-search --source core Restrict to core patterns. -winui-search update Re-fetch the GitHub snapshots and rebuild caches. +winui-search search [ ...] [--max N] [--source S] + Search for control patterns by description. Multiple queries are batched + into a single response, grouped by control. + +winui-search get [ ...] + Get full XAML + C# code (plus NuGet/xmlns prereqs and pitfall notes) for + one or more scenario ids. Skill convention is ≤3 ids per call. + +winui-search list [--source S] + List all available patterns. + +winui-search debug + Diagnostic dump: query preprocessing, token expansion, top-N grouped + matches without the score floor. Useful for tuning queries / synonyms. + +winui-search update + Force a synchronous re-fetch from GitHub (clears the on-disk cache and + repopulates it). Takes ~10s. Normally not needed — see "Background + updates" below. +``` + +`--source ` restricts results to a single source on +both `search` and `list` (case-insensitive, single value). Useful when you +already know the answer is a Toolkit-only control or a curated core pattern +and want to skip Gallery noise. + +Output is compact text designed for agent consumption — `search` returns a +short header per match, `get` returns fenced XAML/C# blocks plus prerequisite +hints separated by `---`. + +## Background updates + +Hot-path commands (`search` / `get` / `list` / `debug`) never block on a +GitHub fetch. After answering, they consult `BackgroundUpdater.TryKickoffIfStale()`, +which spawns a detached `winui-search update --background` child when: + +1. `last-github-update.txt` is older than 7 days (or absent), AND +2. `last-github-attempt.txt` is older than 1 hour (rate-limit on failures), AND +3. No other process holds `update.lock` (atomic `FileMode.CreateNew`; a 10-min + TTL reaps locks orphaned by a crashed child). + +The child fetches GitHub and updates the cache while the user has already +received their answer. Detach is true fire-and-forget on Windows: the parent +exits within ~1.5 s on a cold cache, and the child outlives it without +blocking pipes. + +Environment overrides: + +| Variable | Effect | +|---|---| +| `WINUI_SEARCH_NO_BACKGROUND=1` | Skip the spawn entirely. Use in CI, sandboxed networks, or when offline. | +| `WINUI_SEARCH_DEBUG=1` | Emit a trace to `%LOCALAPPDATA%\winui-search\cache\background.log` for diagnosing the spawn / fetch / lock lifecycle. | + +The internal `--background` flag on `winui-search update` is for the spawned +child only — it suppresses console output, skips the cache wipe (so the lock +file survives), and writes only the timestamp markers. Don't pass it manually. + +## Cache layout + +``` +%LOCALAPPDATA%\winui-search\cache\ + schema-version.txt # Stamped with CacheVersion.Current + last-github-update.txt # Last successful GitHub fetch (UTC ISO) + last-github-attempt.txt # Last attempted fetch (success or failure) + update.lock # Held by spawned child while fetching + background.log # Optional trace (WINUI_SEARCH_DEBUG=1 only) + gallery\ + scenarios.json + tags.json + schema-version.txt + last-updated.txt + toolkit\ + scenarios.json + tags.json + keywords.json + schema-version.txt + last-updated.txt ``` -Output is one result per line, prefixed with a `[score]` tag (`[100]` is a -perfect match) so it parses cleanly when consumed by an agent. +The on-disk cache is per-user and discarded when `CacheVersion.Current` bumps; +embedded JSON in the exe is the safety net. ## Tests diff --git a/src/tools/winui-search/SearchEngine.cs b/src/tools/winui-search/SearchEngine.cs index 90a5eb5..5d04f10 100644 --- a/src/tools/winui-search/SearchEngine.cs +++ b/src/tools/winui-search/SearchEngine.cs @@ -6,14 +6,20 @@ internal sealed class SearchEngine private readonly Scenario[] _scenarios; private readonly CorePattern[] _corePatterns; private readonly Dictionary _enrichmentTags; + private readonly Dictionary _curatedKeywords; private readonly Dictionary> _scenariosByControl; private readonly string[] _uniqueControls; - public SearchEngine(Scenario[] scenarios, CorePattern[] corePatterns, Dictionary enrichmentTags) + public SearchEngine( + Scenario[] scenarios, + CorePattern[] corePatterns, + Dictionary enrichmentTags, + Dictionary? curatedKeywords = null) { _scenarios = scenarios; _corePatterns = corePatterns; _enrichmentTags = enrichmentTags; + _curatedKeywords = curatedKeywords ?? new(); _scenariosByControl = new(); foreach (var s in scenarios) @@ -33,18 +39,97 @@ public SearchEngine(Scenario[] scenarios, CorePattern[] corePatterns, Dictionary public record SearchResult(string Id, string Scenario, string Type, double Score); + /// One entry inside a control group (a single scenario row). + public record ScenarioRow(string Id, string Header, string? Description = null); + + /// + /// Grouped search result. For core patterns, Scenarios holds one row. + /// For gallery/toolkit controls, it holds up to maxScenariosPerControl rows + /// — letting the caller decide which scenario fits best. + /// + public record GroupedResult( + string Source, // "core" / "gallery" / "toolkit" + string ControlName, // empty for core + int TotalScenarios, + List Scenarios, + double Score, + string? ControlDescription = null, // one-line concept summary (toolkit/gallery) + bool HasNameBoost = false); // matched via name/id/compound/substring (vs. only via headers/tags) + + // ─── Intent classification ─────────────────────────────────────────── + private static readonly string[] ToolkitIntent = + ["toolkit", "communitytoolkit", "community"]; + + /// + /// Maps platform-intent query keywords → the core pattern id that should be boosted. + /// Keys are lowercased single tokens that appear in the user's query (after Preprocess). + /// We use this to nudge the *specific* curated pattern, not every core pattern. + /// + private static readonly Dictionary PlatformKeywordToPatternId = new(StringComparer.OrdinalIgnoreCase) + { + ["share"] = "share-contract-desktop", + ["jumplist"] = "jumplist-recent-files", + ["taskbar"] = "jumplist-recent-files", + ["tray"] = "system-tray-minimize", + ["systemtray"] = "system-tray-minimize", + ["drag"] = "drag-drop-files", + ["drop"] = "drag-drop-files", + ["dragdrop"] = "drag-drop-files", + ["picker"] = "file-picker-desktop", + ["filepicker"] = "file-picker-desktop", + ["folderpicker"] = "file-picker-desktop", + }; + + private static string CompactQuery(string q) => + System.Text.RegularExpressions.Regex.Replace(q.ToLowerInvariant(), @"[^a-z0-9]", ""); + + /// + /// Split a CamelCase or PascalCase identifier into space-separated words. + /// "TokenizingTextBox" → "Tokenizing Text Box" (then BM25.Tokenize lowercases). + /// "ColorPicker" → "Color Picker". Used to build a tokenized variant of control + /// names for BM25 so multi-word queries can match the *parts* of a name, not + /// only the name as a single opaque token. + /// + private static string SplitCamelCase(string s) + { + if (string.IsNullOrEmpty(s)) return s; + var sb = new System.Text.StringBuilder(s.Length + 8); + for (int i = 0; i < s.Length; i++) + { + char c = s[i]; + if (i > 0 && char.IsUpper(c) + && (char.IsLower(s[i - 1]) || (i + 1 < s.Length && char.IsLower(s[i + 1])))) + { + sb.Append(' '); + } + sb.Append(c); + } + return sb.ToString(); + } + /// Two-layer search: find controls first, then pick best scenario. public List Search(string query, int maxResults = 5) { - // Phrase preprocessing: merge known multi-word phrases (e.g. "data grid" → "datagrid") + // Phrase preprocessing: append merged tokens (e.g. "data grid" → keeps "data", "grid", adds "datagrid") var preprocessed = Synonyms.Preprocess(query); var queryWords = BM25.Tokenize(preprocessed); if (queryWords.Length == 0) return []; - var queryLower = preprocessed; + var queryCompact = CompactQuery(query); // e.g., "Color Picker Button" → "colorpickerbutton" // Expand query with synonyms (datagrid → listview, modal → contentdialog, etc.) var expandedWords = Synonyms.Expand(queryWords); + // Detect query intents + bool wantsToolkit = queryWords.Any(w => ToolkitIntent.Contains(w)); + // Targeted platform-intent: only boost the SPECIFIC core pattern keyed by the query token. + // (Avoids the old "any platform keyword boosts ALL core patterns" noise.) + var platformBoostIds = new HashSet(StringComparer.Ordinal); + foreach (var w in queryWords) + { + if (PlatformKeywordToPatternId.TryGetValue(w, out var pid)) + platformBoostIds.Add(pid); + } + // Build docs for core patterns var coreDocs = _corePatterns.Select(p => BM25.BuildDoc( (string.Join(" ", p.Tags), 3.0), @@ -59,10 +144,17 @@ public List Search(string query, int maxResults = 5) var scenarios = _scenariosByControl[key]; var controlId = scenarios[0].ControlId; var controlName = scenarios[0].ControlName; - var enrichTags = _enrichmentTags.TryGetValue(controlId, out var tags) ? tags : []; + // `key` is already "{source}:{controlId}" — match the composite-key + // dictionaries Program.cs builds so gallery↔toolkit collisions + // (colorpicker, wrappanel) don't bleed tags/keywords across sources. + var enrichTags = _enrichmentTags.TryGetValue(key, out var tags) ? tags : []; + var keywords = _curatedKeywords.TryGetValue(key, out var kws) ? kws : []; + var nameSplit = SplitCamelCase(controlName); return BM25.BuildDoc( (controlName, 3.0), (controlId, 3.0), + (nameSplit, 2.5), + (string.Join(" ", keywords), 5.0), (string.Join(" ", enrichTags), 3.0), (scenarios[0].HeaderText, 1.5) ); @@ -73,26 +165,62 @@ public List Search(string query, int maxResults = 5) var results = new List(); - // Score core patterns + // Score core patterns + targeted platform-intent boost for (int i = 0; i < _corePatterns.Length; i++) { var s = BM25.Score(coreDocs[i], expandedWords, corpus); + // Only boost the core pattern(s) the query actually points at. + if (platformBoostIds.Contains(_corePatterns[i].Id)) s *= 1.6; if (s > 0) results.Add(new(_corePatterns[i].Id, _corePatterns[i].Scenario, "core", s)); } - // Score gallery controls, then pick best scenario + // Find the LONGEST control name (compact form) that the query contains, so for + // queries like "color picker button" we boost ColorPickerButton (17 chars) and + // explicitly NOT ColorPicker (11 chars). Both technically match the compact form, + // but the longer one is what the user actually asked for. + string? longestCompactMatch = null; + for (int i = 0; i < _uniqueControls.Length; i++) + { + var compactName = CompactQuery(_scenariosByControl[_uniqueControls[i]][0].ControlName); + if (compactName.Length >= 8 && queryCompact.Contains(compactName)) + { + if (longestCompactMatch == null || compactName.Length > longestCompactMatch.Length) + longestCompactMatch = compactName; + } + } + + // Score gallery/toolkit controls, then pick best scenario for (int i = 0; i < _uniqueControls.Length; i++) { var s = BM25.Score(controlDocs[i], expandedWords, corpus); - var controlName = _scenariosByControl[_uniqueControls[i]][0].ControlName; + var scenarios = _scenariosByControl[_uniqueControls[i]]; + var first = scenarios[0]; + var controlName = first.ControlName; var controlLower = controlName.ToLowerInvariant(); - // Boost if ORIGINAL query (not synonym-expanded) contains the exact control name + var controlCompact = CompactQuery(controlName); + + // Whole-word match on control name (existing boost) if (controlLower.Length > 2 && queryWords.Any(w => w == controlLower)) s *= 2.0; + + // Compound-name match — but only the LONGEST match wins big. + // Shorter prefixes that happen to be contained get a small boost; the + // most-specific match gets the strong one. + if (controlCompact.Length >= 8 && queryCompact.Contains(controlCompact)) + { + if (controlCompact == longestCompactMatch) s *= 4.0; // strongest: most specific + else s *= 1.3; // mild: matched but not most specific + } + + // Source intent boost + if (wantsToolkit && first.Source == "toolkit") s *= 1.6; + if (s <= 0) continue; - var scenarios = _scenariosByControl[_uniqueControls[i]]; var bestScenario = PickBestScenario(scenarios, expandedWords); + // Demote scenarios with placeholder/generic header (Basic usage, Example N, "This is the Header") + if (IsGenericHeader(bestScenario.HeaderText)) s *= 0.85; + var prefix = bestScenario.Source == "toolkit" ? "toolkit-" : "gallery-"; results.Add(new($"{prefix}{bestScenario.Id}", $"{bestScenario.ControlName}: {bestScenario.HeaderText}", bestScenario.Source, s)); } @@ -101,6 +229,343 @@ public List Search(string query, int maxResults = 5) return results.Take(maxResults).ToList(); } + /// + /// Grouped search: returns up to matched controls, + /// each with all its scenarios (capped at ) + /// ordered by per-scenario relevance. Lets callers (and the AI) pick which + /// scenario actually fits without the engine having to commit to one. + /// + public List SearchGrouped( + string query, int maxControls = 3, int maxScenariosPerControl = 3, + bool applyFloor = true, string? sourceFilter = null) + { + var preprocessed = Synonyms.Preprocess(query); + var queryWords = BM25.Tokenize(preprocessed); + if (queryWords.Length == 0) return []; + var queryCompact = CompactQuery(query); + var expandedWords = Synonyms.Expand(queryWords); + + // Coverage gate inputs: original query tokens (NOT preprocessed/expanded), + // so synonyms inflating N to 7 don't cause false rejections. + // Distinct so repeated tokens don't double-count. + var rawQueryTokens = BM25.Tokenize(query).Distinct().ToArray(); + // Only enforce the gate for queries with >= 3 user tokens. With 1-2 tokens, + // BM25's own ranking is already adequate and adding a half-coverage rule + // would reject normal short queries like "tab close" → TabView (hits=1/2). + bool applyCoverageGate = rawQueryTokens.Length >= 3; + int coverageMin = (rawQueryTokens.Length + 1) / 2; // ceil(N/2) + + bool wantsToolkit = queryWords.Any(w => ToolkitIntent.Contains(w)); + var platformBoostIds = new HashSet(StringComparer.Ordinal); + foreach (var w in queryWords) + { + if (PlatformKeywordToPatternId.TryGetValue(w, out var pid)) + platformBoostIds.Add(pid); + } + + var coreDocs = _corePatterns.Select(p => BM25.BuildDoc( + (string.Join(" ", p.Tags), 3.0), + (p.Scenario, 2.0), + (p.Description, 1.0), + (p.Id, 1.0) + )).ToArray(); + + // Pre-collect enrichment tags per control so the scoring loop can re-use them + // for the platform-keyword reverse-demotion check below. `key` is composite + // ("{source}:{controlId}") to keep gallery + toolkit colliding controlIds + // separate. + var controlEnrichTags = _uniqueControls.Select(key => + { + return _enrichmentTags.TryGetValue(key, out var tags) ? tags : Array.Empty(); + }).ToArray(); + + // Author-curated keywords (toolkit md frontmatter). Empty for gallery + // controls; used both as a high-weight BM25 field AND added to the + // tag substring check so a query word that appears only in keywords + // still counts as a "real" match for the platform-keyword guard. + var controlKeywords = _uniqueControls.Select(key => + { + return _curatedKeywords.TryGetValue(key, out var kws) ? kws : Array.Empty(); + }).ToArray(); + + var controlDocs = _uniqueControls.Select((key, idx) => + { + var scenarios = _scenariosByControl[key]; + var controlName = scenarios[0].ControlName; + var controlId = scenarios[0].ControlId; + var enrichTags = controlEnrichTags[idx]; + var keywords = controlKeywords[idx]; + // All scenario headers concatenated, controlName stripped to avoid + // double-counting against the dedicated controlName field. No "primary" + // bias: every scenario contributes equally; BM25's TF saturation handles repeats. + string CleanHeader(string h) + { + var stripped = h.Replace(controlName, "", StringComparison.OrdinalIgnoreCase); + return string.Join(" ", global::StopWords.FilterTagList(BM25.Tokenize(stripped))); + } + var allHeaders = string.Join(" ", scenarios.Select(s => CleanHeader(s.HeaderText))); + // CamelCase-split control name: "TokenizingTextBox" → "tokenizing text box" + // so a query like "tokenizing tag input" can match the *name* directly, + // not only via tags. Without this, BM25 sees "tokenizingtextbox" as one + // opaque token; "tokenizing" never matches and good answers tie with noise. + var nameSplit = SplitCamelCase(controlName); + return BM25.BuildDoc( + (controlName, 3.0), + (controlId, 3.0), + (nameSplit, 2.5), + (string.Join(" ", keywords), 5.0), + (string.Join(" ", enrichTags), 3.0), + (allHeaders, 0.8) + ); + }).ToArray(); + + var allDocs = coreDocs.Concat(controlDocs).ToArray(); + var corpus = BM25.BuildCorpus(allDocs); + + var groups = new List(); + + // Core patterns — always one row each. + for (int i = 0; i < _corePatterns.Length; i++) + { + var s = BM25.Score(coreDocs[i], expandedWords, corpus); + if (platformBoostIds.Contains(_corePatterns[i].Id)) s *= 1.6; + if (applyCoverageGate && BM25.CountHits(coreDocs[i], rawQueryTokens) < coverageMin) s = 0; + if (s <= 0) continue; + groups.Add(new GroupedResult( + Source: "core", + ControlName: "", + TotalScenarios: 1, + Scenarios: [new ScenarioRow(_corePatterns[i].Id, _corePatterns[i].Scenario)], + Score: s)); + } + + // Find the longest compact control name contained in the query (same as Search). + string? longestCompactMatch = null; + for (int i = 0; i < _uniqueControls.Length; i++) + { + var compactName = CompactQuery(_scenariosByControl[_uniqueControls[i]][0].ControlName); + if (compactName.Length >= 8 && queryCompact.Contains(compactName)) + { + if (longestCompactMatch == null || compactName.Length > longestCompactMatch.Length) + longestCompactMatch = compactName; + } + } + + // Single-name auto-tighten:when the query is a single token that matches a + // control name exactly (e.g. "combobox", "togglesswitch"), the user already + // knows what they want — don't pad the result list with weak siblings. + // Show ONE control with more of its scenarios instead. + if (queryWords.Length == 1 && longestCompactMatch != null && longestCompactMatch == queryCompact) + { + maxControls = 1; + maxScenariosPerControl = Math.Max(maxScenariosPerControl, 5); + } + + // Platform-keyword reverse demotion targets: any control whose compact name + // contains a platform-intent keyword in the query (e.g. "picker") but whose + // name doesn't satisfy any *other* (non-keyword) query word should be demoted — + // it's matching only on the platform noun, which already has a curated core + // pattern that wins. + var platformKeywordsInQuery = queryWords + .Where(w => PlatformKeywordToPatternId.ContainsKey(w)) + .ToArray(); + var nonPlatformQueryWords = queryWords + .Where(w => !PlatformKeywordToPatternId.ContainsKey(w)) + .ToArray(); + + for (int i = 0; i < _uniqueControls.Length; i++) + { + var s = BM25.Score(controlDocs[i], expandedWords, corpus); + var scenarios = _scenariosByControl[_uniqueControls[i]]; + var first = scenarios[0]; + var controlName = first.ControlName; + var controlLower = controlName.ToLowerInvariant(); + var controlCompact = CompactQuery(controlName); + var enrichTags = controlEnrichTags[i]; + var keywords = controlKeywords[i]; + + // Substring boost: a long query word fully contained in the control's + // compact name is strong evidence of intent ("tokenizing" inside + // "tokenizingtextbox", "advanced" inside "advancedcollectionview"). + // Skip platform keywords — they have their own targeted boost on the + // curated core pattern; substring-matching them on every *Picker / + // *Tray control would re-amplify exactly the noise we just demoted. + bool hasNameBoost = false; + foreach (var qw in queryWords) + { + if (qw.Length >= 6 + && !PlatformKeywordToPatternId.ContainsKey(qw) + && controlCompact.Contains(qw)) + { + s *= 2.5; + hasNameBoost = true; + break; // one substring boost per control + } + } + + if (controlLower.Length > 2 && queryWords.Any(w => w == controlLower)) + { + s *= 2.0; + hasNameBoost = true; + } + + if (controlCompact.Length >= 8 && queryCompact.Contains(controlCompact)) + { + if (controlCompact == longestCompactMatch) s *= 4.0; + else s *= 1.3; + hasNameBoost = true; + } + + if (wantsToolkit && first.Source == "toolkit") s *= 1.6; + + // Reverse demotion: control name contains a platform keyword from the query + // (e.g. DatePicker matched on "picker"), but no non-keyword query word + // independently matches the control name or its tags. The targeted core + // pattern already covers this intent — we don't want to also surface every + // *Picker control just because they share the noun. + if (platformKeywordsInQuery.Length > 0 + && platformKeywordsInQuery.Any(kw => controlLower.Contains(kw))) + { + bool hasOtherMatch = nonPlatformQueryWords.Any(qw => + controlLower.Contains(qw) + || enrichTags.Any(t => t.Contains(qw, StringComparison.OrdinalIgnoreCase)) + || keywords.Any(k => k.Contains(qw, StringComparison.OrdinalIgnoreCase))); + if (!hasOtherMatch) s *= 0.3; + } + + // Coverage gate: when the user typed >=3 distinct words and this control + // matched fewer than half of them, suppress it. Skipped when hasNameBoost + // fires (the user named the control directly), since a single strong + // intent signal can override missing supporting tokens. + if (applyCoverageGate + && !hasNameBoost + && BM25.CountHits(controlDocs[i], rawQueryTokens) < coverageMin) + { + s = 0; + } + + if (s <= 0) continue; + + // Score each scenario individually so we can present them in relevance order. + var scenDocs = scenarios.Select(sc => BM25.BuildDoc( + (sc.HeaderText, 2.0), + (sc.ControlName, 1.0) + )).ToArray(); + var scenCorpus = BM25.BuildCorpus(scenDocs); + + var ranked = scenarios + .Select((sc, idx) => + { + var score = BM25.Score(scenDocs[idx], expandedWords, scenCorpus); + // Tie-breaker nudge: when nothing in the query specifically matches a + // wordier scenario (e.g. "settings page" vs. SettingsExpander's + // ItemsSource demo), prefer the canonical "Basic usage" / "A basic …" + // entry. Small additive boost so it only flips near-ties. + if (IsBasicHeader(sc.HeaderText)) score += 0.1; + return (sc, score); + }) + // Stable order: by score desc, then by ID for determinism. + .OrderByDescending(t => t.score) + .ThenBy(t => t.sc.Id, StringComparer.OrdinalIgnoreCase) + .ToList(); + + // Demote whole control if every scenario has a generic header. + if (ranked.All(r => IsGenericHeader(r.sc.HeaderText))) s *= 0.85; + + var prefix = first.Source == "toolkit" ? "toolkit-" : "gallery-"; + // Drop scenarios with zero BM25 score: they have no query-token hits at + // all, so they're pure noise pulled in only because the parent control + // ranked into top-N. Fall back to top-1 if that empties the list, so + // the control still shows a representative scenario. + var withSignal = ranked.Where(r => r.score > 0).Take(maxScenariosPerControl).ToList(); + var rows = (withSignal.Count > 0 ? withSignal : ranked.Take(1)) + .Select(r => new ScenarioRow($"{prefix}{r.sc.Id}", r.sc.HeaderText, r.sc.Description)) + .ToList(); + + // Control-level summary: prefer explicit ControlDescription (toolkit frontmatter). + string? controlDesc = scenarios + .Select(sc => sc.ControlDescription) + .FirstOrDefault(d => !string.IsNullOrEmpty(d)); + // Fallback: when every scenario shares the same Description (Gallery, where + // Description is per-control), promote it so per-row rendering can dedupe. + if (controlDesc == null) + { + var firstDesc = scenarios.FirstOrDefault()?.Description; + if (!string.IsNullOrEmpty(firstDesc) && scenarios.All(sc => sc.Description == firstDesc)) + controlDesc = firstDesc; + } + + groups.Add(new GroupedResult( + Source: first.Source, + ControlName: controlName, + TotalScenarios: scenarios.Count, + Scenarios: rows, + Score: s, + ControlDescription: controlDesc, + HasNameBoost: hasNameBoost)); + } + + groups.Sort((a, b) => b.Score.CompareTo(a.Score)); + + // Source filter applied BEFORE the relevance floor + Take(maxControls). + // If callers post-filtered after Take, valid hits could be silently dropped + // when a non-matching source ranked above them (e.g. `--source toolkit` on + // "colorpicker" — gallery's ColorPicker scores higher, would consume the + // only slot, then the post-filter would return empty). + if (sourceFilter != null) + { + groups = groups + .Where(g => string.Equals(g.Source, sourceFilter, StringComparison.OrdinalIgnoreCase)) + .ToList(); + } + + // Relevance floor (applied to RUNNERS-UP only — top-1 always survives): + // Runner-up needs score ≥ 70% of top to be shown. + // + // Replaces an earlier two-tier (15%/40%) floor that let weak name-substring + // hits leak through (e.g. "find text" → RichTextBlock + TextBlock + TextBox, + // "image crop" → ImageCropper + Image). With 70% we keep only runners-up + // that are genuinely close to top-1, e.g. "settings page" → SettingsCard + + // SettingsExpander or "tabbed documents" → TabView + TabbedCommandBar. + if (applyFloor && groups.Count > 1) + { + var topScore = groups[0].Score; + var runnerUpFloor = topScore * 0.70; + groups = groups.Where((g, i) => i == 0 || g.Score >= runnerUpFloor).ToList(); + } + + return groups.Take(maxControls).ToList(); + } + + /// True if a scenario header is a placeholder (Basic usage, Example N, "This is X"). + private static bool IsGenericHeader(string h) + { + if (string.IsNullOrWhiteSpace(h)) return true; + var t = h.Trim(); + if (t.Equals("Basic usage", StringComparison.OrdinalIgnoreCase)) return true; + if (System.Text.RegularExpressions.Regex.IsMatch(t, @"^Example\s*\d*$", System.Text.RegularExpressions.RegexOptions.IgnoreCase)) return true; + if (System.Text.RegularExpressions.Regex.IsMatch(t, @"^Sample\s*\d*$", System.Text.RegularExpressions.RegexOptions.IgnoreCase)) return true; + if (t.StartsWith("This is the ", StringComparison.OrdinalIgnoreCase)) return true; + return false; + } + + /// + /// True if the header is the canonical "first example" of a control. Used as a + /// per-scenario tie-breaker — when nothing in the query specifically picks a + /// wordier scenario, the Basic/Simple variant should win. + /// + private static bool IsBasicHeader(string h) + { + if (string.IsNullOrWhiteSpace(h)) return false; + var t = h.Trim(); + if (t.Equals("Basic usage", StringComparison.OrdinalIgnoreCase)) return true; + if (t.StartsWith("Basic ", StringComparison.OrdinalIgnoreCase)) return true; + if (t.StartsWith("Simple ", StringComparison.OrdinalIgnoreCase)) return true; + if (t.StartsWith("A basic ", StringComparison.OrdinalIgnoreCase)) return true; + if (t.StartsWith("A simple ", StringComparison.OrdinalIgnoreCase)) return true; + return false; + } + private Scenario PickBestScenario(List scenarios, string[] queryWords) { if (scenarios.Count == 1) return scenarios[0]; @@ -145,14 +610,37 @@ private Scenario PickBestScenario(List scenarios, string[] queryWords) bool MatchesSource(Scenario s) => expectedSource == null || s.Source == expectedSource; - var scenario = - _scenarios.FirstOrDefault(s => s.Id == bareId && MatchesSource(s)) - ?? _scenarios.FirstOrDefault(s => s.ControlId == bareId && MatchesSource(s)); + // Exact match on the new {controlId}-{N} scheme. + var scenario = _scenarios.FirstOrDefault(s => s.Id == bareId && MatchesSource(s)); + + // Fallback: caller passed a bare control id (e.g. "gallery-gridview") + // → return the lowest-numbered scenario for that control. Parses the + // trailing -{N} as an integer so e.g. "-2" sorts before "-10" (which + // a lexicographic sort would invert). Ids without a parseable suffix + // fall to the end and break ties via OrdinalIgnoreCase. + if (scenario == null) + { + scenario = _scenarios + .Where(s => s.ControlId == bareId && MatchesSource(s)) + .OrderBy(s => ParseTrailingNumber(s.Id)) + .ThenBy(s => s.Id, StringComparer.OrdinalIgnoreCase) + .FirstOrDefault(); + } if (scenario != null) return (FormatScenario(scenario), true); return ($"Pattern '{id}' not found.", false); } + /// Parse the integer after the last - in , + /// returning if no parseable suffix is present so + /// such ids sort to the end. + private static int ParseTrailingNumber(string id) + { + int dash = id.LastIndexOf('-'); + if (dash < 0 || dash == id.Length - 1) return int.MaxValue; + return int.TryParse(id.AsSpan(dash + 1), out var n) ? n : int.MaxValue; + } + public IEnumerable<(string id, string scenario)> ListAll() { foreach (var p in _corePatterns) @@ -176,32 +664,31 @@ private Scenario PickBestScenario(List scenarios, string[] queryWords) private static string FormatCorePattern(CorePattern p) { + // Note: blank lines between sections are intentionally omitted — the Copilot CLI + // tool-result capture collapses runs of newlines, which would glue "**XAML:**" + // onto the previous block's content. Single newlines (one per logical line) + // survive intact. var sb = new System.Text.StringBuilder(); sb.AppendLine($"## {p.Scenario}"); - sb.AppendLine(); sb.AppendLine(p.Description); if (p.Prerequisites.Length > 0) { - sb.AppendLine(); sb.AppendLine("**Prerequisites:**"); foreach (var pre in p.Prerequisites) sb.AppendLine($"- {pre}"); } if (p.Xaml != null) { - sb.AppendLine(); sb.AppendLine("**XAML:**"); sb.AppendLine("```xml"); - sb.AppendLine(p.Xaml); + sb.AppendLine(NormalizeIndent(p.Xaml)); sb.AppendLine("```"); } - sb.AppendLine(); sb.AppendLine("**C#:**"); sb.AppendLine("```csharp"); - sb.AppendLine(p.CSharp); + sb.AppendLine(NormalizeIndent(p.CSharp)); sb.AppendLine("```"); if (p.Notes.Length > 0) { - sb.AppendLine(); sb.AppendLine("**Important:**"); foreach (var n in p.Notes) sb.AppendLine($"- {n}"); } @@ -210,44 +697,133 @@ private static string FormatCorePattern(CorePattern p) private static string FormatScenario(Scenario s) { + // See note on FormatCorePattern: no blank-line separators (runtime collapses them). var sb = new System.Text.StringBuilder(); var sourceTag = s.Source == "toolkit" ? " [CommunityToolkit]" : ""; sb.AppendLine($"## {s.ControlName}: {s.HeaderText}{sourceTag}"); - sb.AppendLine(); - // Toolkit-specific prerequisites + // Toolkit-specific prerequisites — single compact line if (s.Source == "toolkit" && (!string.IsNullOrEmpty(s.NuGetPackage) || s.XmlnsImports.Length > 0)) { - sb.AppendLine("**Prerequisites:**"); + var parts = new List(1 + s.XmlnsImports.Length); if (!string.IsNullOrEmpty(s.NuGetPackage)) - sb.AppendLine($"- Install NuGet package: `{s.NuGetPackage}`"); + parts.Add($"NuGet `{s.NuGetPackage}`"); foreach (var ns in s.XmlnsImports) - sb.AppendLine($"- Add XAML namespace: `{ns}`"); - sb.AppendLine(); + parts.Add($"`{ns}`"); + sb.AppendLine($"**Setup:** {string.Join(" · ", parts)}"); + } + // Gallery non-default namespace hint — agents miss `using Microsoft.Windows.Notifications` + // and similar long-tail imports. Skip the dominant Microsoft.UI.Xaml.Controls (auto-imported + // in default templates) so 79/107 controls stay quiet. + else if (s.Source == "gallery" + && !string.IsNullOrEmpty(s.ApiNamespace) + && s.ApiNamespace != "Microsoft.UI.Xaml.Controls") + { + sb.AppendLine($"**Namespace:** `{s.ApiNamespace}`"); } if (s.Xaml != null) { sb.AppendLine("**XAML:**"); sb.AppendLine("```xml"); - sb.AppendLine(s.Xaml); + sb.AppendLine(NormalizeIndent(s.Xaml)); sb.AppendLine("```"); } - if (s.CSharp != null) + if (s.CSharp != null && !IsBoilerplatePageWrapper(s.CSharp)) { - sb.AppendLine(); sb.AppendLine("**C#:**"); sb.AppendLine("```csharp"); - sb.AppendLine(s.CSharp); + sb.AppendLine(NormalizeIndent(s.CSharp)); sb.AppendLine("```"); } - var notes = Notes.GetNotes(s.ControlName); - if (notes.Length > 0) + var notesPayload = Notes.Get(s.ControlName); + if (notesPayload.Pitfalls.Length > 0) { - sb.AppendLine(); sb.AppendLine("**Important:**"); - foreach (var n in notes) sb.AppendLine($"- {n}"); + foreach (var n in notesPayload.Pitfalls) sb.AppendLine($"- {n}"); + } + if (notesPayload.FamilyName != null) + { + sb.AppendLine($"**Family ({notesPayload.FamilyName}):** {notesPayload.FamilyGuide}"); + } + + // Related controls (from WinUI Gallery's ControlInfoData.json) + if (s.RelatedControls.Length > 0) + { + sb.AppendLine($"**See also:** {string.Join(", ", s.RelatedControls)}"); } + + // Note: Docs links from ControlInfoData.json are intentionally not emitted — + // benchmark logs show agents never fetch them, so the bytes/tokens are pure + // overhead. The data is still kept on Scenario.Docs for potential future use. + return sb.ToString(); } + + /// + /// Re-maps the distinct leading-whitespace levels in a code block to a canonical + /// 0/2/4/6/... scale, preserving relative nesting structure. + /// Gallery samples are sliced from deeply-nested original XAML, so attribute lines + /// often start at column 30+. This collapses those huge prefixes (e.g. 36 → 4) while + /// keeping each child line strictly indented relative to its parent. + /// For already-clean code (e.g. C# at 0/4/8/12) this slightly tightens to 0/2/4/6. + /// + private static string NormalizeIndent(string code) + { + if (string.IsNullOrEmpty(code)) return code; + var lines = code.Split('\n'); + var distinct = new SortedSet(); + foreach (var line in lines) + { + if (line.Trim().Length == 0) continue; + var indent = 0; + while (indent < line.Length && (line[indent] == ' ' || line[indent] == '\t')) indent++; + distinct.Add(indent); + } + if (distinct.Count == 0) return code; + + var map = new Dictionary(distinct.Count); + int rank = 0; + foreach (var d in distinct) + { + map[d] = rank * 2; + rank++; + } + + var sb = new System.Text.StringBuilder(code.Length); + for (int i = 0; i < lines.Length; i++) + { + var line = lines[i]; + if (line.Trim().Length == 0) + { + if (i > 0) sb.Append('\n'); + continue; + } + var indent = 0; + while (indent < line.Length && (line[indent] == ' ' || line[indent] == '\t')) indent++; + if (i > 0) sb.Append('\n'); + sb.Append(' ', map[indent]); + sb.Append(line, indent, line.Length - indent); + } + return sb.ToString(); + } + + /// + /// True when the C# block is just an empty page wrapper (constructor that only calls + /// InitializeComponent — no other members or methods). Suppressing these saves ~140 + /// chars per scenario without losing any signal. + /// + private static bool IsBoilerplatePageWrapper(string cs) + { + if (string.IsNullOrWhiteSpace(cs)) return true; + if (!cs.Contains("InitializeComponent")) return false; + // Strip whitespace; if the only method body is `InitializeComponent();` the wrapper + // is empty. Heuristic: count occurrences of `(` that introduce a callable other + // than the ctor + InitializeComponent — none means boilerplate. + var collapsed = System.Text.RegularExpressions.Regex.Replace(cs, @"\s+", " "); + // Pattern: ... class X : Page { public X() { this.InitializeComponent(); } } + return System.Text.RegularExpressions.Regex.IsMatch( + collapsed, + @"class\s+\w+\s*:\s*Page\s*\{\s*public\s+\w+\s*\(\s*\)\s*\{\s*(?:this\.)?InitializeComponent\(\)\s*;\s*\}\s*\}\s*$"); + } } diff --git a/src/tools/winui-search/StopWords.cs b/src/tools/winui-search/StopWords.cs index cab9340..5d96c5b 100644 --- a/src/tools/winui-search/StopWords.cs +++ b/src/tools/winui-search/StopWords.cs @@ -19,8 +19,9 @@ internal static class StopWords "about","into","over","such","only","very","well","see", // Generic verbs "use","used","using","set","get","make","made", - "displays","display","presents","shows","show","lets","let", - "between","while", + "displays","display","displaying","presents","shows","show","lets","let", + "between","while","contain","contains","containing", + "maintain","maintains","maintaining", // Generic UI nouns (no discrimination value across many controls) "control","controls","property","properties","value","values", "default","custom","new","component","sample","example", @@ -36,5 +37,72 @@ internal static class StopWords "needs","generate","accessible","replacement","look","specify", "interface","represents","source","whose","loaded","ienumerable", "instances","instance","examples", + // Auto-extraction noise from sample C#/XAML / commit messages + "true","false","pass","done","constructor", + "functionality","effect","through","various","modern","easy","simple", + "kind","type","types","approach","amount","least","space", + // Low-signal words common in Gallery sample HeaderText + "basic","adding","changes","header","options","another", }; + + /// + /// Words that pollute control tag lists but a user might legitimately type as + /// a query token. Removed from tag dictionaries (in ) + /// but NOT from BM25.Tokenize, so queries like "text editor" still see + /// the "text" token and match TextBox via its nameSplit field. + /// + /// + /// Why this matters: control docs contain a SplitCamelCase field + /// (TextBox → "text"+"box", CalendarDatePicker → "calendar"+"date"+"picker"), + /// so removing these tokens from enrichment tags does NOT lose the canonical + /// match — only the spurious matches (Clipboard's "text", ColorPicker's + /// "text/input/layout/pick", every panel's "layout" subcategory). + /// + public static readonly HashSet TagOnly = new(StringComparer.OrdinalIgnoreCase) + { + "text", // Clipboard/HyperlinkButton/RichSuggestBox/ColorPicker noise; Text* controls keep it via nameSplit + "input", // Button/ColorPicker/RangeSelector noise; *Box controls keep it via nameSplit + "layout", // Toolkit subcategory — auto-stamped onto 18 controls, near-zero IDF + "pick", // Picker controls keep "picker" via nameSplit; "pick a X" queries match via X + "basics", // section heading filler + "advanced", // AdvancedCollectionView keeps it via nameSplit + }; + + /// True if the token should be dropped from BOTH BM25 query tokens AND tag dicts. + public static bool IsCommon(string w) => Common.Contains(w); + + /// True if the token should be dropped from tag dicts (a superset of ). + public static bool IsTagNoise(string w) => Common.Contains(w) || TagOnly.Contains(w); + + /// + /// Drops stop words (Common + TagOnly), sample-suffix tokens (e.g., + /// "imagecroppersample"), and dedupes. Multi-word tags ("context menu") are + /// preserved as-is. Use this for tag dictionaries; for BM25 query + /// tokenization use directly. + /// + public static string[] FilterTagList(string[] tags) + { + var seen = new HashSet(); + var result = new List(tags.Length); + foreach (var t in tags) + { + if (string.IsNullOrWhiteSpace(t)) continue; + var lower = t.Trim().ToLowerInvariant(); + if (IsTagNoise(lower)) continue; + // Drop auto-extracted *sample suffix tokens like "imagecroppersample" + // (only single-word tokens; preserve multi-word tags as-is). + if (!lower.Contains(' ') && lower.Length > "sample".Length && lower.EndsWith("sample")) + continue; + if (seen.Add(lower)) result.Add(lower); + } + return result.ToArray(); + } + + /// Apply to every entry of a tag dictionary. + public static Dictionary CleanTagDictionary(Dictionary tags) + { + var result = new Dictionary(tags.Count); + foreach (var (k, v) in tags) result[k] = FilterTagList(v); + return result; + } } diff --git a/src/tools/winui-search/Synonyms.cs b/src/tools/winui-search/Synonyms.cs index 78949b1..741897a 100644 --- a/src/tools/winui-search/Synonyms.cs +++ b/src/tools/winui-search/Synonyms.cs @@ -31,6 +31,7 @@ internal static class Synonyms ["time picker"] = "timepicker", ["color picker"] = "colorpicker", ["file picker"] = "filepicker", + ["folder picker"] = "filepicker", ["info bar"] = "infobar", ["search box"] = "searchbox", ["search bar"] = "searchbox", @@ -50,6 +51,18 @@ internal static class Synonyms ["app bar"] = "commandbar", ["tab view"] = "tabview", ["tree view"] = "treeview", + // Accessibility / screen-reader / automation + ["screen reader"] = "screenreader", + ["screen-reader"] = "screenreader", + ["automation properties"] = "automationproperties", + ["automation property"] = "automationproperties", + ["automation id"] = "automationid", + ["automation name"] = "automationproperties", + ["accessible name"] = "automationproperties", + ["alt text"] = "automationproperties", + ["aria label"] = "automationproperties", + ["aria-label"] = "automationproperties", + ["live region"] = "liveregion", ["list view"] = "listview", ["grid view"] = "gridview", ["web view"] = "webview", @@ -72,6 +85,7 @@ internal static class Synonyms ["bottom sheet"] = "contentdialog", ["app notification"] = "appnotification", ["push notification"] = "appnotification", + ["system tray icon"] = "systemtray", ["system tray"] = "systemtray", ["jump list"] = "jumplist", ["recent files"] = "recent", @@ -79,37 +93,109 @@ internal static class Synonyms ["drag drop"] = "dragdrop", }; - /// Replace known multi-word phrases with their single-token equivalent. + /// + /// Algorithmic suffix-stripping stemmer for query words. Yields candidate base + /// forms (without removing the original token from the query). Handles -s, -ed, + /// and -ing inflections including doubled-consonant cases (dropped → drop, + /// dragging → drag) and silent-e cases (closing → close, themed → theme). + /// + /// We emit multiple candidates per word to avoid false stems (e.g. "scrolled" + /// stems to BOTH "scroll" and "scrol" — the wrong one matches nothing in the + /// corpus, the right one matches; BM25 handles the rest). This is much smaller + /// and easier to maintain than the previous hand-curated 60+ entry Stems dict. + /// + public static IEnumerable Stem(string word) + { + if (string.IsNullOrEmpty(word)) yield break; + + if (word.Length > 5 && word.EndsWith("ing", StringComparison.Ordinal)) + { + var b = word[..^3]; // editing → edit, scrolling → scroll + yield return b; + yield return b + "e"; // closing → close, sharing → share + if (b.Length >= 2 && b[^1] == b[^2]) // dragging → dragg → drag + yield return b[..^1]; + } + else if (word.Length > 4 && word.EndsWith("ed", StringComparison.Ordinal)) + { + var b = word[..^2]; // edited → edit, scrolled → scroll + yield return b; + yield return word[..^1]; // themed → theme + if (b.Length >= 2 && b[^1] == b[^2]) // dropped → dropp → drop + yield return b[..^1]; + } + else if (word.Length > 3 && word.EndsWith("s", StringComparison.Ordinal) + && !word.EndsWith("ss", StringComparison.Ordinal)) + { + yield return word[..^1]; // tabs → tab, folders → folder + if (word.Length > 4 && word.EndsWith("es", StringComparison.Ordinal)) + yield return word[..^2]; // boxes → box + } + } + + /// + /// Manual exceptions to the algorithmic stemmer: words whose base form cannot be + /// derived by suffix stripping (e.g. "paginated" → "page", not "paginat"). + /// Keep this list small — most morphology is handled by . + /// + public static readonly Dictionary StemExceptions = new(StringComparer.OrdinalIgnoreCase) + { + ["paginated"] = ["page"], + ["paginating"] = ["page"], + ["paging"] = ["page"], + ["pages"] = ["page"], + ["tabbed"] = ["tab", "tabs"], // need both forms; "tabs" is in Map + }; + + /// + /// Append single-token equivalents for known multi-word phrases AND base forms + /// for inflected words, KEEPING the original words. So "file picker" becomes + /// tokens {file, picker, filepicker} and "tabbed editor" becomes {tabbed, editor, + /// tab, tabs, edit} — BM25 can match on either form. Synonym expansion still runs + /// after this step, so "tabs" → "tabview" via Map. + /// public static string Preprocess(string query) { var lower = query.ToLowerInvariant(); + var sb = new System.Text.StringBuilder(lower); foreach (var (phrase, replacement) in Phrases) { - // Word-boundary-aware replace: avoid matching inside other words. - // Surround with whitespace check by padding. - int idx; - while ((idx = lower.IndexOf(phrase, StringComparison.Ordinal)) >= 0) + int searchFrom = 0; + while (true) { + int idx = lower.IndexOf(phrase, searchFrom, StringComparison.Ordinal); + if (idx < 0) break; + searchFrom = idx + phrase.Length; + // Word-boundary check bool leftOk = idx == 0 || !IsWordChar(lower[idx - 1]); - int after = idx + phrase.Length; - bool rightOk = after == lower.Length || !IsWordChar(lower[after]); - if (leftOk && rightOk) - { - lower = lower.Substring(0, idx) + replacement + lower.Substring(after); - } - else - { - // Skip this hit, look for next occurrence - var rest = lower.IndexOf(phrase, idx + 1, StringComparison.Ordinal); - if (rest < 0) break; - // Move forward by replacing this single occurrence with itself padded — simpler: break and rely on next iteration - break; - } + bool rightOk = searchFrom == lower.Length || !IsWordChar(lower[searchFrom]); + if (!leftOk || !rightOk) continue; + // Append the merged token instead of replacing — keeps both forms searchable + sb.Append(' ').Append(replacement); } } - return lower; + + // Stemming: append base forms for inflected query words. Whole-word match on + // the lowercased original (we don't restem the appended phrase tokens — those + // are already canonical). Manual exceptions take precedence over the + // algorithmic stemmer for irregular cases (paginated → page, tabbed → tabs). + foreach (var word in lower.Split(WordSeparators, StringSplitOptions.RemoveEmptyEntries)) + { + if (StemExceptions.TryGetValue(word, out var bases)) + { + foreach (var b in bases) sb.Append(' ').Append(b); + } + else + { + foreach (var b in Stem(word)) sb.Append(' ').Append(b); + } + } + + return sb.ToString(); } + private static readonly char[] WordSeparators = [' ', '\t', '\n', '\r', ',', '.', ';', ':', '!', '?', '(', ')', '[', ']', '{', '}', '"', '\'']; + private static bool IsWordChar(char c) => char.IsLetterOrDigit(c) || c == '_'; /// @@ -128,41 +214,30 @@ public static string Preprocess(string query) // ─── Dialogs / popups ─── ["modal"] = ["contentdialog", "dialog"], ["popup"] = ["flyout", "dialog", "teachingtip"], - ["alert"] = ["contentdialog", "infobar"], - ["confirm"] = ["contentdialog"], ["prompt"] = ["contentdialog"], ["actionsheet"] = ["contentdialog", "menuflyout"], ["snackbar"] = ["infobar", "teachingtip"], - ["toast"] = ["appnotification", "infobar"], - ["banner"] = ["infobar"], ["tooltip"] = ["tooltipservice", "teachingtip"], // ─── Navigation ─── ["sidebar"] = ["navigationview", "splitview", "navigation"], ["navbar"] = ["navigationview", "menubar"], ["drawer"] = ["navigationview", "splitview"], - ["hamburger"] = ["navigationview", "splitview"], ["breadcrumbs"] = ["breadcrumbbar"], ["crumbs"] = ["breadcrumbbar"], // ─── Tabs ─── - ["tabs"] = ["tabview", "pivot", "selectorbar"], ["tabbar"] = ["selectorbar", "segmented"], // ─── Inputs ─── - ["dropdown"] = ["combobox", "menuflyout", "dropdownbutton"], ["select"] = ["combobox"], ["picker"] = ["combobox", "calendarpicker", "datepicker", "timepicker"], ["stepper"] = ["numberbox"], ["radiogroup"] = ["radiobuttons"], - ["switch"] = ["toggleswitch"], ["chip"] = ["tokenizingtextbox", "token"], ["chips"] = ["tokenizingtextbox", "token"], ["pill"] = ["tokenizingtextbox", "segmented"], - ["range"] = ["rangeselector", "slider"], - ["search"] = ["autosuggestbox", "textbox"], ["searchbox"] = ["autosuggestbox"], - ["autocomplete"] = ["autosuggestbox"], ["typeahead"] = ["autosuggestbox"], ["mention"] = ["richsuggestbox"], ["hashtag"] = ["richsuggestbox"], @@ -170,74 +245,49 @@ public static string Preprocess(string query) // ─── Text ─── ["textarea"] = ["textbox", "richeditbox"], ["multiline"] = ["textbox", "richeditbox"], - ["editor"] = ["richeditbox", "textbox"], ["wysiwyg"] = ["richeditbox"], - ["password"] = ["passwordbox"], - ["label"] = ["textblock"], ["heading"] = ["textblock"], ["link"] = ["hyperlinkbutton", "hyperlink"], // ─── Layout ─── ["flex"] = ["stackpanel", "wrappanel", "grid"], ["flexbox"] = ["stackpanel", "wrappanel"], - ["card"] = ["settingscard", "border", "expander"], ["container"] = ["border", "grid", "stackpanel"], ["divider"] = ["appbarseparator", "menubarseparator", "rectangle"], - ["splitter"] = ["gridsplitter", "splitview"], ["resizable"] = ["gridsplitter", "contentsizer"], - ["accordion"] = ["expander", "settingsexpander"], - ["collapse"] = ["expander", "treeview"], - ["dock"] = ["dockpanel"], ["wrap"] = ["wrappanel", "wraplayout"], ["masonry"] = ["staggeredpanel", "staggeredlayout"], // ─── Scrolling / virtualization ─── ["scrollview"] = ["scrollviewer"], - ["virtualized"] = ["listview", "itemsrepeater", "gridview"], ["lazy"] = ["listview", "itemsrepeater"], - ["pulltorefresh"] = ["pulltorefresh"], ["infinite"] = ["incrementalloadingcollection"], // ─── Tree / hierarchy ─── - ["tree"] = ["treeview", "headeredtreeview"], ["folder"] = ["treeview"], ["hierarchy"] = ["treeview"], ["outline"] = ["treeview"], // ─── Progress / loading ─── ["loading"] = ["progressring", "progressbar"], - ["spinner"] = ["progressring"], ["loader"] = ["progressring", "progressbar"], // ─── Commands / buttons ─── ["fab"] = ["button"], ["iconbutton"] = ["button", "appbarbutton"], - ["toolbar"] = ["commandbar", "appbarbutton"], ["ribbon"] = ["tabbedcommandbar"], - ["menu"] = ["menubar", "menuflyout"], ["contextmenu"] = ["menuflyout"], ["rightclick"] = ["menuflyout"], // ─── Media ─── - ["video"] = ["mediaplayerelement"], ["audio"] = ["mediaplayerelement"], - ["player"] = ["mediaplayerelement"], - ["webview"] = ["webview2"], - ["browser"] = ["webview2"], ["iframe"] = ["webview2"], - ["crop"] = ["imagecropper"], + ["cropping"] = ["imagecropper"], ["thumbnail"] = ["image"], - ["avatar"] = ["personpicture"], - ["profile"] = ["personpicture"], // ─── Date / time / color ─── - ["calendar"] = ["calendarview", "calendardatepicker"], - ["datepicker"] = ["datepicker", "calendardatepicker"], - ["clock"] = ["timepicker"], - ["palette"] = ["colorpicker"], // ─── Settings / forms ─── - ["settings"] = ["settingscard", "settingsexpander"], ["form"] = ["settingscard", "stackpanel"], ["preferences"] = ["settingscard", "settingsexpander"], ["options"] = ["settingscard", "combobox", "radiobuttons"], @@ -246,8 +296,9 @@ public static string Preprocess(string query) ["taskbar"] = ["jumplist", "appbadge"], ["recent"] = ["jumplist"], ["tray"] = ["systemtray"], - ["systemtray"] = ["systemtray"], + ["systemtray"] = ["system", "tray", "icon", "minimize"], ["share"] = ["sharecontract"], + ["filepicker"] = ["file", "picker"], ["openfile"] = ["filepicker"], ["savefile"] = ["filepicker"], ["dragdrop"] = ["drag", "drop"], @@ -256,7 +307,6 @@ public static string Preprocess(string query) ["btn"] = ["button"], ["txt"] = ["textbox", "textblock"], ["img"] = ["image"], - ["nav"] = ["navigationview"], ["lv"] = ["listview"], ["gv"] = ["gridview"], @@ -264,20 +314,46 @@ public static string Preprocess(string query) ["buttons"] = ["button"], ["lists"] = ["listview"], ["dialogs"] = ["contentdialog"], + + // ─── Accessibility / screen reader / automation ─── + // Maps the various ways an agent may phrase a11y needs to the gallery + // sample controls that demonstrate them. Both `accessibilityscreenreader` + // (the controlId, indexed as one token) and `screenreader` / `accessibility` + // (separate tag tokens after CamelCase split) are useful targets. + ["a11y"] = ["accessibility", "screenreader", "accessibilityscreenreader"], + ["accessibility"] = ["accessibilityscreenreader", "accessibilitykeyboard", "screenreader", "accessible"], + ["accessible"] = ["accessibility", "screenreader", "accessibilityscreenreader"], + ["screenreader"] = ["accessibilityscreenreader", "accessibility", "screen", "reader"], + ["narrator"] = ["accessibilityscreenreader", "screenreader", "accessibility"], + ["automationproperties"] = ["accessibilityscreenreader", "screenreader", "accessibility", "automation", "name"], + ["automationid"] = ["accessibilityscreenreader", "screenreader", "accessibility", "automation"], + ["liveregion"] = ["accessibilityscreenreader", "screenreader", "accessibility"], }; /// /// Expand a tokenized query by appending synonyms for each known term. /// Returns the original tokens plus any synonym tokens. + /// + /// Compound-suffix guard: if the query already contains a more-specific compound + /// ending with the current token (e.g. "file picker" → tokens [file, picker, filepicker]), + /// we skip synonym expansion for the bare token. The compound form already pins + /// the user's intent; expanding the bare suffix would pull in unrelated controls + /// (e.g. "picker" → ComboBox/DatePicker/TimePicker, which all dilute "file picker" + /// when the user clearly wants the file picker pattern). /// public static string[] Expand(string[] queryWords) { var result = new List(queryWords); var seen = new HashSet(queryWords, StringComparer.OrdinalIgnoreCase); + var queryWordSet = new HashSet(queryWords, StringComparer.OrdinalIgnoreCase); foreach (var w in queryWords) { if (Map.TryGetValue(w, out var syns)) { + bool hasCompoundParent = queryWordSet.Any(other => + other.Length > w.Length && other.EndsWith(w, StringComparison.OrdinalIgnoreCase)); + if (hasCompoundParent) continue; + foreach (var s in syns) { if (seen.Add(s)) result.Add(s); diff --git a/src/tools/winui-search/ToolkitFetcher.cs b/src/tools/winui-search/ToolkitFetcher.cs index f9fcea2..4c4cd2a 100644 --- a/src/tools/winui-search/ToolkitFetcher.cs +++ b/src/tools/winui-search/ToolkitFetcher.cs @@ -23,8 +23,8 @@ internal static partial class ToolkitFetcher Timeout = TimeSpan.FromSeconds(30) }; - private const int MaxXamlChars = 1500; - private const int MaxCSharpChars = 1000; + private const int MaxXamlChars = 1000; + private const int MaxCSharpChars = 2500; /// Components/samples that aren't visual controls — skip them. private static readonly HashSet SkippedComponents = new(StringComparer.OrdinalIgnoreCase) @@ -151,13 +151,11 @@ private static bool UsesPrefix(string xaml, string prefix) // Stop words come from shared StopWords.Common - /// Bump when the cached JSON schema changes (e.g., new fields on Scenario). - private const string CacheSchemaVersion = "2"; - - public static (Scenario[] scenarios, Dictionary tags) Load() + public static (Scenario[] scenarios, Dictionary tags, Dictionary keywords) Load() { var cacheScenarios = Path.Combine(CacheDir, "scenarios.json"); var cacheTags = Path.Combine(CacheDir, "tags.json"); + var cacheKeywords = Path.Combine(CacheDir, "keywords.json"); var timestamp = Path.Combine(CacheDir, "last-updated.txt"); var versionFile = Path.Combine(CacheDir, "schema-version.txt"); @@ -165,38 +163,69 @@ public static (Scenario[] scenarios, Dictionary tags) Load() if (File.Exists(cacheScenarios) && File.Exists(cacheTags) && File.Exists(timestamp) && File.Exists(versionFile)) { var cachedVersion = File.ReadAllText(versionFile).Trim(); - if (cachedVersion == CacheSchemaVersion - && DateTime.TryParse(File.ReadAllText(timestamp).Trim(), out var lastUpdated) - && DateTime.UtcNow - lastUpdated < CacheTtl) + var lastUpdated = BackgroundUpdater.ReadTimestamp(timestamp); + if (cachedVersion == CacheVersion.Current + && lastUpdated.HasValue + && DateTime.UtcNow - lastUpdated.Value < CacheTtl) { try { var s = JsonSerializer.Deserialize(File.ReadAllText(cacheScenarios), JsonContext.Default.ScenarioArray); var t = JsonSerializer.Deserialize(File.ReadAllText(cacheTags), JsonContext.Default.DictionaryStringStringArray); - if (s != null && s.Length > 0 && t != null) return (s, t); + Dictionary? k = null; + if (File.Exists(cacheKeywords)) + { + try { k = JsonSerializer.Deserialize(File.ReadAllText(cacheKeywords), JsonContext.Default.DictionaryStringStringArray); } + catch { k = null; } + } + if (s != null && s.Length > 0 && t != null) + return (s, global::StopWords.CleanTagDictionary(t), k ?? new Dictionary()); } catch { /* fall through */ } } } - // Try fetch + // Cache miss: serve embedded data immediately (no GitHub fetch on hot path). + // GitHub fetching can take 30-60s on first call, which the runtime may interrupt + // with a "still running" message that masks the actual output. Embedded data is + // up-to-date as of the last tool build. Use `winui-search update` to update. + var fallbackScenarios = DataLoader.LoadToolkitScenarios(); + var fallbackTags = global::StopWords.CleanTagDictionary(DataLoader.LoadToolkitTags()); + var fallbackKeywords = DataLoader.LoadToolkitKeywords(); try { - var (scenarios, tags) = FetchFromGitHub().GetAwaiter().GetResult(); - if (scenarios.Length > 0) - { - Directory.CreateDirectory(CacheDir); - File.WriteAllText(cacheScenarios, JsonSerializer.Serialize(scenarios, JsonContext.Default.ScenarioArray)); - File.WriteAllText(cacheTags, JsonSerializer.Serialize(tags, JsonContext.Default.DictionaryStringStringArray)); - File.WriteAllText(timestamp, DateTime.UtcNow.ToString("o")); - File.WriteAllText(versionFile, CacheSchemaVersion); - return (scenarios, tags); - } + // Atomic per-file writes (temp + rename) so a crash mid-sequence can't + // leave a truncated JSON. Order: data first, version next, timestamp LAST, + // so a partially-renamed set is detected as still-stale on next read. + BackgroundUpdater.AtomicWriteAllText(cacheScenarios, JsonSerializer.Serialize(fallbackScenarios, JsonContext.Default.ScenarioArray)); + BackgroundUpdater.AtomicWriteAllText(cacheTags, JsonSerializer.Serialize(fallbackTags, JsonContext.Default.DictionaryStringStringArray)); + BackgroundUpdater.AtomicWriteAllText(cacheKeywords, JsonSerializer.Serialize(fallbackKeywords, JsonContext.Default.DictionaryStringStringArray)); + BackgroundUpdater.AtomicWriteAllText(versionFile, CacheVersion.Current); + BackgroundUpdater.AtomicWriteAllText(timestamp, DateTime.UtcNow.ToString("o")); } - catch { /* fall through */ } + catch { /* cache write best-effort */ } + return (fallbackScenarios, fallbackTags, fallbackKeywords); + } - // Embedded fallback - return (DataLoader.LoadToolkitScenarios(), DataLoader.LoadToolkitTags()); + /// Fetch fresh data from GitHub and update the cache. Used by the `update` command. + public static void RefreshFromGitHub() + { + var cacheScenarios = Path.Combine(CacheDir, "scenarios.json"); + var cacheTags = Path.Combine(CacheDir, "tags.json"); + var cacheKeywords = Path.Combine(CacheDir, "keywords.json"); + var timestamp = Path.Combine(CacheDir, "last-updated.txt"); + var versionFile = Path.Combine(CacheDir, "schema-version.txt"); + var (scenarios, tags, keywords) = FetchFromGitHub().GetAwaiter().GetResult(); + if (scenarios.Length > 0) + { + tags = global::StopWords.CleanTagDictionary(tags); + // Atomic per-file writes (see Load() comment for rationale and ordering). + BackgroundUpdater.AtomicWriteAllText(cacheScenarios, JsonSerializer.Serialize(scenarios, JsonContext.Default.ScenarioArray)); + BackgroundUpdater.AtomicWriteAllText(cacheTags, JsonSerializer.Serialize(tags, JsonContext.Default.DictionaryStringStringArray)); + BackgroundUpdater.AtomicWriteAllText(cacheKeywords, JsonSerializer.Serialize(keywords, JsonContext.Default.DictionaryStringStringArray)); + BackgroundUpdater.AtomicWriteAllText(versionFile, CacheVersion.Current); + BackgroundUpdater.AtomicWriteAllText(timestamp, DateTime.UtcNow.ToString("o")); + } } public static void ClearCache() @@ -207,7 +236,7 @@ public static void ClearCache() } } - private static async Task<(Scenario[], Dictionary)> FetchFromGitHub() + private static async Task<(Scenario[], Dictionary, Dictionary)> FetchFromGitHub() { // Step 1: Get full file tree var treeJson = await Http.GetStringAsync(TreeApiUrl); @@ -251,49 +280,78 @@ public static void ClearCache() } } - // Step 2: Fetch all sample XAML + C# (parallel) — pass NuGet map down so each - // FetchSampleAsync can stamp the right package id on its scenarios. - var sem = new SemaphoreSlim(10); - var sampleTasks = xamlSamples.Select(p => FetchSampleAsync(p, sem, nugetByComponent)).ToArray(); - var sampleResults = await Task.WhenAll(sampleTasks); - var allScenarios = sampleResults.Where(s => s != null).SelectMany(s => s!).ToArray(); - - // Deduplicate IDs - var seen = new Dictionary(); - foreach (var s in allScenarios) - { - if (seen.TryGetValue(s.Id, out var n)) - { - seen[s.Id] = n + 1; - s.Id = $"{s.Id}-{n + 1}"; - } - else - { - seen[s.Id] = 1; - } - } + // Sort sample / md paths so downstream processing (and the per-control + // renumbering below) is deterministic regardless of GitHub tree ordering. + xamlSamples.Sort(StringComparer.OrdinalIgnoreCase); + mdDocs.Sort(StringComparer.OrdinalIgnoreCase); - // Step 3: Fetch all md docs + extract tags (parallel) + // Step 2: Fetch all md docs FIRST (parallel) — gives us tags + descriptions + // before processing samples, so each scenario can be enriched with prose. + var sem = new SemaphoreSlim(10); var mdTasks = mdDocs.Select(p => FetchMdAsync(p, sem)).ToArray(); var mdResults = await Task.WhenAll(mdTasks); var tags = new Dictionary(); - foreach (var (cid, tagList) in mdResults.Where(r => r.cid != null)) + var keywords = new Dictionary(); + var controlDescByCid = new Dictionary(StringComparer.OrdinalIgnoreCase); + var sampleDescByName = new Dictionary(StringComparer.OrdinalIgnoreCase); + foreach (var md in mdResults) { - tags[cid!] = tagList!; + if (md.ControlId != null && md.Tags != null) tags[md.ControlId] = md.Tags; + if (md.ControlId != null && md.Keywords != null && md.Keywords.Length > 0) + keywords[md.ControlId] = md.Keywords; + if (md.ControlId != null && md.ControlDescription != null) + controlDescByCid[md.ControlId] = md.ControlDescription; + if (md.SampleDescriptions != null) + { + foreach (var (k, v) in md.SampleDescriptions) sampleDescByName[k] = v; + } } // ColorPickerButton has no separate md if (tags.ContainsKey("colorpicker") && !tags.ContainsKey("colorpickerbutton")) { tags["colorpickerbutton"] = ["colorpickerbutton","color","picker","button","dropdown","communitytoolkit"]; } + if (keywords.ContainsKey("colorpicker") && !keywords.ContainsKey("colorpickerbutton")) + { + keywords["colorpickerbutton"] = keywords["colorpicker"]; + } + if (controlDescByCid.TryGetValue("colorpicker", out var cpDesc) && !controlDescByCid.ContainsKey("colorpickerbutton")) + { + controlDescByCid["colorpickerbutton"] = cpDesc; + } + + // Step 3: Fetch all sample XAML + C# (parallel) — pass NuGet map and description + // maps down so each FetchSampleAsync can stamp packaging + prose on its scenarios. + var sampleTasks = xamlSamples.Select(p => FetchSampleAsync(p, sem, nugetByComponent, controlDescByCid, sampleDescByName)).ToArray(); + var sampleResults = await Task.WhenAll(sampleTasks); + var allScenarios = sampleResults.Where(s => s != null).SelectMany(s => s!).ToArray(); + + // Renumber scenario IDs per controlId to {controlId}-{N} (1-indexed) for + // a uniform short ID scheme across Gallery and Toolkit. Order follows the + // sample-path sort above (Task.WhenAll + SelectMany + GroupBy all preserve + // input order), so {controlId}-{N} is stable across fetches as long as + // the underlying sample file paths don't change. + var byControl = allScenarios + .GroupBy(s => s.ControlId, StringComparer.OrdinalIgnoreCase); + foreach (var grp in byControl) + { + var idx = 0; + foreach (var s in grp) + { + idx++; + s.Id = $"{grp.Key}-{idx}"; + } + } - return (allScenarios, tags); + return (allScenarios, tags, keywords); } private static async Task?> FetchSampleAsync( string path, SemaphoreSlim sem, - Dictionary nugetByComponent) + Dictionary nugetByComponent, + Dictionary controlDescByCid, + Dictionary sampleDescByName) { await sem.WaitAsync(); try @@ -325,10 +383,20 @@ public static void ClearCache() : "CommunityToolkit.WinUI"; var xmlns = DetectXmlnsImports(cleanedXaml); + // Look up descriptions: prefer the per-sample paragraph from the .md (most specific), + // fall back to the control-level frontmatter description. + string? controlDesc = controlDescByCid.TryGetValue(controlId, out var cd) ? cd : null; + string? sampleDesc = sampleDescByName.TryGetValue(sampleName, out var sd) ? sd : null; + if (splits.Count > 1) { - // Multiple instances → split each into its own scenario - foreach (var (slugLabel, headerText, xml) in splits) + // Multiple instances → split each into its own scenario. + // All splits come from the same sample file, so they share its description + // (from the .md preceding [!SAMPLE PageName]). Fall back to the per-sample + // XAML attribute when no .md paragraph is present; + // this avoids the previous behaviour of jamming Header + Description into + // one string and then ALSO appending the .md paragraph (visible duplication). + foreach (var (slugLabel, label, xamlDesc, xml) in splits) { var sid = MakeScenarioId(controlId, slugLabel); scenarios.Add(new Scenario @@ -336,12 +404,14 @@ public static void ClearCache() Id = sid, ControlId = controlId, ControlName = controlName, - HeaderText = headerText, + HeaderText = label, Xaml = xml, CSharp = null, Source = "toolkit", NuGetPackage = nuget, XmlnsImports = xmlns, + Description = sampleDesc ?? xamlDesc, + ControlDescription = controlDesc, }); } } @@ -374,6 +444,8 @@ public static void ClearCache() Source = "toolkit", NuGetPackage = nuget, XmlnsImports = xmlns, + Description = sampleDesc, + ControlDescription = controlDesc, }); } @@ -383,24 +455,108 @@ public static void ClearCache() finally { sem.Release(); } } - private static async Task<(string? cid, string[]? tags)> FetchMdAsync(string path, SemaphoreSlim sem) + /// Per-.md aggregated extract: tags (mapped only) + descriptions (frontmatter + per-sample). + private sealed record MdData( + string? ControlId, + string[]? Tags, + string[]? Keywords, + string? ControlDescription, + Dictionary? SampleDescriptions); + + private static async Task FetchMdAsync(string path, SemaphoreSlim sem) { await sem.WaitAsync(); try { var fileName = Path.GetFileName(path); - if (!MdControlMap.TryGetValue(fileName, out var controlId) || controlId == null) - return (null, null); - var text = await TryGetString(RawBase + path); - if (text == null) return (null, null); + if (text == null) return new MdData(null, null, null, null, null); + + // Normalize newlines once: downstream parsers (ParseFrontmatter, + // ExtractSampleDescriptions, ExtractTags) split on "\n" / "\n\n", + // which breaks on CRLF. Toolkit repo is LF today but raw bytes + // could change; fix at the source. + text = text.Replace("\r\n", "\n").Replace('\r', '\n'); + + // Frontmatter description (control-level intro, e.g. "The ContentSizer is a control...") + var fm = ParseFrontmatter(text); + string? controlDesc = null; + if (fm.TryGetValue("description", out var d) && !string.IsNullOrWhiteSpace(d)) + controlDesc = CleanProse(d); + + // Per-sample description: paragraph immediately preceding each [!SAMPLE PageName] marker + var sampleDescs = ExtractSampleDescriptions(text); + + // Tags + curated keywords only for .md files explicitly mapped to a controlId + string? cid = null; + string[]? tags = null; + string[]? keywords = null; + if (MdControlMap.TryGetValue(fileName, out var mapped) && mapped != null) + { + cid = mapped; + tags = ExtractTags(text, mapped); + keywords = ExtractKeywords(text); + } - return (controlId, ExtractTags(text, controlId)); + return new MdData(cid, tags, keywords, controlDesc, sampleDescs); } - catch { return (null, null); } + catch { return new MdData(null, null, null, null, null); } finally { sem.Release(); } } + /// Parse `> [!SAMPLE PageName]` markers and grab the text between this marker + /// and the previous SAMPLE / section header / doc start (whichever is closest), filtered + /// to non-header / non-blockquote prose. Section-header boundaries keep multi-section + /// overview .md files (like SizerControls.md) from polluting per-sample descriptions. + private static Dictionary ExtractSampleDescriptions(string md) + { + var result = new Dictionary(StringComparer.OrdinalIgnoreCase); + // Strip frontmatter + var body = Regex.Replace(md, @"^---\s*\n.*?\n---\s*", "", RegexOptions.Singleline); + var matches = Regex.Matches(body, @">\s*\[!SAMPLE\s+(\w+)\]", RegexOptions.IgnoreCase); + int lastEnd = 0; + foreach (Match m in matches) + { + var name = m.Groups[1].Value; + var preceding = body.Substring(lastEnd, m.Index - lastEnd); + // Take paragraphs since most recent section header (## or deeper) — keeps + // descriptions scoped to the local section in multi-section overview docs. + var paras = preceding.Split(new[] { "\n\n" }, StringSplitOptions.RemoveEmptyEntries) + .Select(p => p.Trim()) + .Where(p => !string.IsNullOrEmpty(p)) + .ToList(); + int sectionStart = 0; + for (int i = paras.Count - 1; i >= 0; i--) + { + if (paras[i].StartsWith("#")) { sectionStart = i + 1; break; } + } + var local = paras.Skip(sectionStart) + .Where(p => !p.StartsWith("#") && !p.StartsWith(">")) // strip headers / blockquotes + .ToArray(); + if (local.Length > 0) + { + var clean = CleanProse(string.Join(" ", local)); + if (clean.Length > 10) result[name] = clean; + } + lastEnd = m.Index + m.Length; + } + return result; + } + + /// Strip markdown noise (links, inline code) and collapse whitespace; cap at ~240 chars. + private static string CleanProse(string text) + { + var s = Regex.Replace(text, @"\[([^\]]+)\]\([^)]+\)", "$1"); // [text](link) → text + s = Regex.Replace(s, @"`([^`]+)`", "$1"); // `code` → code + s = Regex.Replace(s, @"\s+", " ").Trim(); + if (s.Length > 240) + { + int dot = s.IndexOf('.', 100); + s = (dot > 0 && dot < 240) ? s.Substring(0, dot + 1) : s.Substring(0, 237) + "..."; + } + return s; + } + private static async Task TryGetString(string url) { try @@ -507,7 +663,7 @@ private static string CleanXaml(string xaml) return null; } - private static List<(string slugKey, string headerText, string xaml)> SplitStackPanelChildren(string xaml, string targetControl) + private static List<(string slugKey, string label, string? xamlDescription, string xaml)> SplitStackPanelChildren(string xaml, string targetControl) { var trimmed = xaml.TrimStart(); if (!Regex.IsMatch(trimmed, @"^]")) return new(); @@ -517,7 +673,7 @@ private static string CleanXaml(string xaml) var matches = Regex.Matches(xaml, pattern, RegexOptions.Singleline); if (matches.Count <= 1) return new(); - var results = new List<(string, string, string)>(); + var results = new List<(string, string, string?, string)>(); int i = 0; foreach (Match m in matches) { @@ -536,9 +692,14 @@ private static string CleanXaml(string xaml) } // Pick a SHORT label for the URL slug (max 6 words from header or description). string slugLabel = PickSlugLabel(rawHeader, rawDescription, targetControl, i); - // Build the full description shown in search results. - string fullDesc = BuildScenarioDescription(rawHeader, rawDescription, targetControl, i); - results.Add((slugLabel, fullDesc, block.Trim())); + // Header label: short, suitable as the row's "title" — falls back to description + // or "Example N" only when Header is missing/placeholder. + string label = BuildScenarioLabel(rawHeader, rawDescription, targetControl, i); + // XAML Description attribute kept separately so callers can use it as a + // fallback when the .md doesn't have a per-sample paragraph; truncated to + // ~120 chars for display. + string? xamlDesc = TrimDescription(rawDescription); + results.Add((slugLabel, label, xamlDesc, block.Trim())); } return results; } @@ -566,27 +727,30 @@ private static string TruncateWords(string text, int maxWords) } /// - /// Combine raw Header / Description attributes into a useful agent-facing description. - /// Falls back to control-name-based defaults for placeholder text like "This is the Header" - /// or descriptions that just repeat the control name. + /// Pick a SHORT label for the row (typically the Sample's Header attribute). + /// Falls back to a truncated Description / "Example N" when Header is a + /// generic placeholder. The XAML Description attribute is NOT concatenated + /// here — callers keep it separately so it can be presented (or replaced + /// by a richer .md paragraph) without duplicating the label. /// - private static string BuildScenarioDescription(string? header, string? description, string controlName, int index) + private static string BuildScenarioLabel(string? header, string? description, string controlName, int index) { - var label = IsPlaceholderHeader(header, controlName) ? null : header; - string? desc = description?.Trim(); - if (!string.IsNullOrWhiteSpace(desc) && desc!.Length > 120) - { - int dot = desc.IndexOf('.', 60); - desc = (dot > 0 && dot < 120) ? desc.Substring(0, dot + 1) : desc.Substring(0, 117) + "..."; - } - - if (!string.IsNullOrEmpty(label) && !string.IsNullOrEmpty(desc) && !desc!.Equals(label, StringComparison.OrdinalIgnoreCase)) - return $"{label} — {desc}"; - if (!string.IsNullOrEmpty(label)) return label!; + if (!IsPlaceholderHeader(header, controlName)) return header!; + var desc = TrimDescription(description); if (!string.IsNullOrEmpty(desc)) return desc!; return $"Example {index}"; } + /// Cap a Description attribute at the first sentence under ~120 chars. + private static string? TrimDescription(string? description) + { + var d = description?.Trim(); + if (string.IsNullOrWhiteSpace(d)) return null; + if (d!.Length <= 120) return d; + int dot = d.IndexOf('.', 60); + return (dot > 0 && dot < 120) ? d.Substring(0, dot + 1) : d.Substring(0, 117) + "..."; + } + /// /// Return true if a Header attribute is a generic demo placeholder (not informative). /// @@ -643,9 +807,12 @@ private static string CleanCSharp(string cs, string sampleName) cs = Regex.Replace(cs, @"^//\s*Licensed to.*?(?=\n[^/])", "", RegexOptions.Singleline); cs = Regex.Replace(cs, @"^//\s*The \.NET Foundation.*?\n", "", RegexOptions.Multiline); cs = Regex.Replace(cs, @"^//\s*See the LICENSE.*?\n", "", RegexOptions.Multiline); - // [ToolkitSample(...)] attributes - cs = Regex.Replace(cs, @"\[ToolkitSample[^\]]*\][\r\n]*", "", RegexOptions.Singleline); - cs = Regex.Replace(cs, @"\[ToolkitSampleOptionsPane[^\]]*\][\r\n]*", "", RegexOptions.Singleline); + // Fold platform #if/#else/#endif: agents target WinAppSDK, so keep only the + // WINAPPSDK branch and discard UWP/Uno fallbacks. Done before the rest of the + // cleanup so we don't waste work on text that's about to be stripped. + cs = FoldPreprocessorDirectives(cs); + // [ToolkitSample(...)] and related docs-build attributes (single-line + multi-line, balanced brackets) + cs = Regex.Replace(cs, @"\[Toolkit(?:Sample|SampleOptionsPane|SampleMultiChoiceOption|SampleNumericOption|SampleBoolOption|SampleTextOption)\b[^\]]*\][\r\n]*", "", RegexOptions.Singleline); cs = Regex.Replace(cs, @"\[SuppressMessage[^\]]*\][\r\n]*", "", RegexOptions.Singleline); // Original namespace declaration → replace with placeholder so the class wrapper compiles cs = Regex.Replace(cs, @"namespace\s+[\w.]+\s*(?:;|\{)\s*", "namespace YourApp;\n\n"); @@ -656,11 +823,107 @@ private static string CleanCSharp(string cs, string sampleName) $@"\b{Regex.Escape(sampleName)}\b", "YourPage"); } + // Drop docs-only converter helpers (back the [ToolkitSample*Option] attributes we just stripped). + // Pattern: `public static T ConvertStringTo(string ...) => ... switch { ... };` — single statement + // followed by a switch expression body. These only exist to wire up the docs option pane. + cs = Regex.Replace(cs, + @"public\s+static\s+[\w?<>]+\s+ConvertString\w+\s*\([^)]*\)\s*=>\s*\w+\s+switch\s*\{[^}]*\}\s*;", + "", + RegexOptions.Singleline); // Drop trailing blank lines cs = Regex.Replace(cs, @"\n\s*\n\s*\n+", "\n\n"); return cs.Trim(); } + /// + /// Compile-time preprocessor folding for toolkit samples. Agents target WinAppSDK, + /// so we evaluate #if WINAPPSDK as true (and HAS_UNO / WINUI2 / + /// UWP / NETFX_CORE as false), keep the live branch's lines, and drop + /// the directives + dead branches. Unknown symbols are treated as true (conservative: + /// keep code rather than silently delete it). Supports #if, #elif, + /// #else, #endif, single ! negation, and nested blocks. + /// + private static string FoldPreprocessorDirectives(string cs) + { + if (cs.IndexOf("#if", StringComparison.Ordinal) < 0) return cs; + + // Treat WinAppSDK-targeting symbols as true; UWP/Uno/legacy as false. + // Anything else: true (preserve code we don't recognize). + static bool Eval(string expr) + { + expr = expr.Trim(); + bool negate = false; + if (expr.StartsWith('!')) + { + negate = true; + expr = expr[1..].Trim(); + } + bool value = expr switch + { + "WINAPPSDK" or "WINUI3" or "NET" => true, + "HAS_UNO" or "WINUI2" or "UWP" or "NETFX_CORE" => false, + _ => true, + }; + return negate ? !value : value; + } + + var lines = cs.Replace("\r\n", "\n").Split('\n'); + var output = new List(lines.Length); + // Stack frame: (anyBranchTakenYet, currentlyEmittingThisBranch). + // Parent's emitting state is tracked separately via parentEmit. + var stack = new Stack<(bool taken, bool emit)>(); + + bool ParentEmitting() + { + foreach (var f in stack) + if (!f.emit) return false; + return true; + } + + foreach (var rawLine in lines) + { + var line = rawLine; + var trimmed = line.TrimStart(); + + if (trimmed.StartsWith("#if ", StringComparison.Ordinal) || trimmed == "#if") + { + var expr = trimmed.Length > 3 ? trimmed[3..].Trim() : ""; + bool parentEmit = ParentEmitting(); + bool take = parentEmit && Eval(expr); + stack.Push((take, take)); + continue; + } + if (trimmed.StartsWith("#elif ", StringComparison.Ordinal)) + { + if (stack.Count == 0) continue; // malformed, drop + var (taken, _) = stack.Pop(); + var expr = trimmed[5..].Trim(); + bool parentEmit = ParentEmitting(); + bool take = parentEmit && !taken && Eval(expr); + stack.Push((taken || take, take)); + continue; + } + if (trimmed.StartsWith("#else", StringComparison.Ordinal)) + { + if (stack.Count == 0) continue; + var (taken, _) = stack.Pop(); + bool parentEmit = ParentEmitting(); + bool take = parentEmit && !taken; + stack.Push((true, take)); + continue; + } + if (trimmed.StartsWith("#endif", StringComparison.Ordinal)) + { + if (stack.Count > 0) stack.Pop(); + continue; + } + + if (ParentEmitting()) output.Add(line); + } + + return string.Join('\n', output); + } + [GeneratedRegex(@"<(/?)([A-Za-z_][\w:.\-]*)\b([^>]*?)(/?)>")] private static partial Regex AnyTagRegex(); @@ -712,7 +975,7 @@ private static string TruncateXaml(string xaml, int maxChars) var sb = new System.Text.StringBuilder(head.TrimEnd()); while (stack.Count > 0) sb.Append("'); - if (needsTrunc) sb.Append("\n"); + if (needsTrunc) sb.Append("\n"); return sb.ToString(); } @@ -721,7 +984,7 @@ private static string TruncateCSharp(string code, int maxChars) if (code.Length <= maxChars) return code; int cut = code.LastIndexOf('\n', maxChars - 1); if (cut < 0) cut = maxChars; - return code.Substring(0, cut).TrimEnd() + "\n// NOTE: snippet truncated — refer to full sample for additional code"; + return code.Substring(0, cut).TrimEnd() + "\n// ...truncated"; } private static string MakeScenarioId(string controlId, string header) @@ -733,6 +996,30 @@ private static string MakeScenarioId(string controlId, string header) // ─── Markdown frontmatter / tag extraction ───────────────────────── + /// + /// Extract author-curated keywords from the md frontmatter `keywords:` + /// comma-separated list. These are the highest-quality intent signal + /// available (hand-picked by toolkit authors) so they're surfaced as a + /// separate, higher-weighted BM25 field — distinct from auto-extracted + /// description tags which are noisier. Stop-word filtering still applies. + /// + private static string[] ExtractKeywords(string mdText) + { + var fm = ParseFrontmatter(mdText); + if (!fm.TryGetValue("keywords", out var raw) || string.IsNullOrWhiteSpace(raw)) + return []; + var list = new List(); + var seen = new HashSet(); + foreach (var k in raw.Split(',')) + { + var t = k.Trim().ToLowerInvariant(); + if (string.IsNullOrEmpty(t)) continue; + if (global::StopWords.IsTagNoise(t)) continue; + if (seen.Add(t)) list.Add(t); + } + return list.ToArray(); + } + private static string[] ExtractTags(string mdText, string controlId) { var fm = ParseFrontmatter(mdText); @@ -744,7 +1031,7 @@ private static string[] ExtractTags(string mdText, string controlId) foreach (Match m in Regex.Matches(title, @"[A-Z]?[a-z]+|[A-Z]+")) { var p = m.Value.ToLowerInvariant(); - if (p.Length >= 3 && !global::StopWords.Common.Contains(p)) tags.Add(p); + if (p.Length >= 3 && !global::StopWords.IsTagNoise(p)) tags.Add(p); } } // keywords (comma-separated) @@ -753,14 +1040,14 @@ private static string[] ExtractTags(string mdText, string controlId) foreach (var kw in keywords.Split(',')) { var t = kw.Trim().ToLowerInvariant(); - if (!string.IsNullOrEmpty(t) && !global::StopWords.Common.Contains(t)) tags.Add(t); + if (!string.IsNullOrEmpty(t) && !global::StopWords.IsTagNoise(t)) tags.Add(t); } } // subcategory if (fm.TryGetValue("subcategory", out var sub)) { var s = sub.Trim().ToLowerInvariant(); - if (!string.IsNullOrEmpty(s) && !global::StopWords.Common.Contains(s)) tags.Add(s); + if (!string.IsNullOrEmpty(s) && !global::StopWords.IsTagNoise(s)) tags.Add(s); } // Description text keywords var descText = Regex.Replace(mdText, @"^---.*?---\s*", "", RegexOptions.Singleline); @@ -776,7 +1063,7 @@ private static string[] ExtractTags(string mdText, string controlId) { if (descAdded >= 8) break; var w = m.Value; - if (global::StopWords.Common.Contains(w) || !seen.Add(w)) continue; + if (global::StopWords.IsTagNoise(w) || !seen.Add(w)) continue; tags.Add(w); descAdded++; } diff --git a/src/tools/winui-search/winui-search.csproj b/src/tools/winui-search/winui-search.csproj index 061014e..c969c22 100644 --- a/src/tools/winui-search/winui-search.csproj +++ b/src/tools/winui-search/winui-search.csproj @@ -27,5 +27,6 @@ +