[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-microsoft-winui-design":3,"mdc--b32vdx-key":49,"related-org-microsoft-winui-design":2134,"related-repo-microsoft-winui-design":2331},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":28,"repoUrl":29,"updatedAt":30,"license":31,"forks":32,"topics":33,"repo":44,"sourceUrl":47,"mdContent":48},"winui-design","design WinUI 3 user interfaces","Use when designing, reviewing, or fixing WinUI 3: layout planning, control choice, Fluent Design alignment, Light\u002FDark\u002FHigh Contrast theming, typography, spacing, brushes, accessibility, and XAML data-binding design. Load before authoring new XAML, reviewing UI PRs, migrating desktop UI to WinUI, or choosing between WinUI controls\u002Fpatterns.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"microsoft","Microsoft","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmicrosoft.png",[12,16,19,22,25],{"name":13,"slug":14,"type":15},"Accessibility","accessibility","tag",{"name":17,"slug":18,"type":15},"Windows","windows",{"name":20,"slug":21,"type":15},"UI Components","ui-components",{"name":23,"slug":24,"type":15},"WinUI","winui",{"name":26,"slug":27,"type":15},"Design","design",352,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fwin-dev-skills","2026-07-24T05:42:12.022973",null,19,[34,35,36,37,38,39,40,41,42,43],"agent","agent-skills","copilot","copilot-cli","ghcp","skills","winappsdk","winui3","winui3-app","xaml",{"repoUrl":29,"stars":28,"forks":32,"topics":45,"description":46},[34,35,36,37,38,39,40,41,42,43],"Agents and skills for building Windows apps with WinUI 3 and the Windows App SDK","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fwin-dev-skills\u002Ftree\u002FHEAD\u002Fplugins\u002Fwinui\u002Fskills\u002Fwinui-design","---\nname: winui-design\ndescription: \"Use when designing, reviewing, or fixing WinUI 3: layout planning, control choice, Fluent Design alignment, Light\u002FDark\u002FHigh Contrast theming, typography, spacing, brushes, accessibility, and XAML data-binding design. Load before authoring new XAML, reviewing UI PRs, migrating desktop UI to WinUI, or choosing between WinUI controls\u002Fpatterns.\"\n---\n\n\n\n## Search samples before writing XAML\n\nThis skill ships `winui-search.exe` alongside this `SKILL.md` (≈100 WinUI Gallery controls, every Windows Community Toolkit scenario, 90+ Reactor declarative-C# controls, curated platform-integration patterns; each result returns full code — XAML + C#, or C#-only for Reactor — plus pitfall notes). **Front-load lookups, then code** — don't interleave.\n\n```powershell\n.\\winui-search.exe search \"\u003Cfeature 1>\" \"\u003Cfeature 2>\" ...   # batch one focused query per feature (BM25 likes focused phrasing)\n.\\winui-search.exe get \u003Cid 1> \u003Cid 2> ...                     # batch up to 3 IDs — full XAML + C# + pitfall notes\n.\\winui-search.exe list                                       # browse all patterns (heavy — prefer search)\n.\\winui-search.exe update                                     # force cache refresh\n```\n\nSearch covers controls **and** platform integration (file pickers, Share, JumpList, drag-drop, app lifecycle, dialogs) — front-load all lookups before writing XAML; **don't interleave** search with coding.\n\n## App-shape anchors\n\nPick the closest shipping app silhouette before laying out a page:\n\n| App type | Anchor controls | Reference apps |\n|----------|-----------------|----------------|\n| Settings \u002F config tool | `NavigationView` Left + `SettingsCard` \u002F `SettingsExpander` | Windows Settings, Slack |\n| Document \u002F session editor | `TabView` + full-bleed content, light chrome | Windows Terminal, VS Code, Notepad |\n| Hierarchical browser | `TreeView` + `ListView` + `BreadcrumbBar` | File Explorer, Outlook |\n| Developer tool \u002F dashboard | `NavigationView` + card layout | Dev Home, GitHub Desktop |\n| Single-purpose utility | Mode switcher + compact grid | Calculator, Snipping Tool |\n| Media \u002F canvas \u002F hero | `Grid` with hero surface, floating commands, **no** `NavigationView` | Photos, Spotify, Clipchamp |\n\n## Reach-for-this control map\n\nBefore writing XAML, map the requirement to a platform control. These mappings exist to short-circuit cross-framework instincts (WPF `DataGrid`, web `\u003Cselect>`, HTML `\u003Cinput type=date>`):\n\n- **Navigation:** 2–7 sections → `NavigationView`; document\u002Fsession tabs → `TabView`; breadcrumb trail → `BreadcrumbBar`; 2–3 modes → `SelectorBar`.\n- **Data display:** Vertical list → `ListView`; tiles\u002Fgrid → `GridView` or `ItemsRepeater` + `UniformGridLayout`; hierarchy → `TreeView`; **tabular → `ListView` with a `Grid`-based `ItemTemplate` and a header `Grid` above** (WinUI has no `DataGrid`; don't default to `CommunityToolkit.WinUI.Controls.DataGrid` — its columns can't use `x:Bind`); master-detail → `ListView` + detail `Grid`.\n- **Input:** Text → `TextBox`; number → `NumberBox`; search → `AutoSuggestBox`; date → `CalendarDatePicker`; boolean → `ToggleSwitch`; pick one from 2–3 → `RadioButtons`; pick one from 4+ → `ComboBox`.\n- **Feedback:** Blocking decision → `ContentDialog`; contextual action → `Flyout` \u002F `MenuFlyout`; onboarding \u002F hint → `TeachingTip`; inline status \u002F async progress → `InfoBar`; system notification → `AppNotification`.\n\nIf the mapping above doesn't fit, search `winui-search.exe` before improvising.\n\n## Window sizing (WinUI 3 specifics)\n\n> **WinUI 3 has no `SizeToContent`.** Without an explicit size, Windows defaults the main window to ~1024×768 — oversized for most utilities. Size it in `MainWindow`'s constructor.\n\n**Rubric.** Width = widest row + 48 padding, 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 ranges (derive yours from the rubric):\n\n- Single-purpose utility → ~440–560 wide\n- Form \u002F single-page tool → ~600–800 wide, ~640–800 tall\n- Multi-pane (nav + content) → ~1100–1300 wide, ~720–840 tall\n- Document \u002F canvas \u002F media editor → 1280+ wide\n\n`AppWindow.Resize` takes **physical pixels**, not DIPs — multiply by the monitor's DPI scale. `XamlRoot.RasterizationScale` is null in the constructor and stale after `AppWindow.Move`, so `[DllImport] GetDpiForWindow` is the cleanest path:\n\n```csharp\nusing Microsoft.UI;\nusing Microsoft.UI.Windowing;\nusing System.Runtime.InteropServices;\nusing Windows.Graphics;\n\npublic sealed partial class MainWindow : Window\n{\n    [DllImport(\"user32.dll\")]\n    private static extern uint GetDpiForWindow(IntPtr hWnd);\n\n    public MainWindow()\n    {\n        InitializeComponent();\n        var hwnd  = Win32Interop.GetWindowFromWindowId(AppWindow.Id);\n        var scale = GetDpiForWindow(hwnd) \u002F 96.0;\n        \u002F\u002F widthDip \u002F heightDip come from the rubric above — derive, don't copy.\n        AppWindow.Resize(new SizeInt32((int)(widthDip * scale), (int)(heightDip * scale)));\n    }\n}\n```\n\nDon't size the window by setting `Width`\u002F`Height` on the root `Grid` — that clips content, not the window.\n\n## XAML landmines (the things you'll otherwise ship broken)\n\n### `x:Bind` defaults to `OneTime`\n\n```xml\n\u003C!-- ❌ silently never updates -->\n\u003CTextBlock Text=\"{x:Bind Vm.Status}\" \u002F>\n\u003C!-- ✅ -->\n\u003CTextBlock Text=\"{x:Bind Vm.Status, Mode=OneWay}\" \u002F>\n```\n\n### `TextBox` two-way needs `UpdateSourceTrigger=PropertyChanged`\n\n```xml\n\u003CTextBox Text=\"{x:Bind Vm.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}\" \u002F>\n```\n\nDefault trigger resolves to `LostFocus` specifically for `TextBox.Text` (most other properties default to `PropertyChanged`). The VM is not updated per keystroke, and UIA keyboard-simulation tests (WinAppDriver `SendKeys`, etc.) that assert immediately after typing will see stale VM state until focus moves.\n\n### Attached properties from C# use static setters, not initializers\n\n```csharp\nusing Microsoft.UI.Xaml.Automation;\n\n\u002F\u002F ❌ WRONG — does not compile. CS0117: 'Button' does not contain a definition for 'AutomationProperties'.\n\u002F\u002F AutomationProperties is a static class of attached-property accessors, not an instance member.\nvar btn = new Button { AutomationProperties = { AutomationId = \"BtnSave\" } };\n\n\u002F\u002F ✅ CORRECT\nvar btn = new Button { Content = \"Save\" };\nAutomationProperties.SetAutomationId(btn, \"BtnSave\");\nAutomationProperties.SetName(btn, \"Save button\");\nGrid.SetRow(btn, 1);\nToolTipService.SetToolTip(btn, \"Save the current document\");\n```\n\n### `Converter={x:Null}` crashes `x:Bind` at runtime\n\n`{x:Bind}` requires `Converter` to be a `{StaticResource}` lookup. `Converter={x:Null}` compiles but the generated code calls `LookupConverter(\"\")`, which returns null, then dereferences it — you get `Resource Dictionary Key can only be String-typed` \u002F `NullReferenceException` on first activation of the binding. If you don't want a converter, omit the property entirely.\n\n### Prefer `x:Bind` static functions over `IValueConverter`\n\n```csharp\n\u002F\u002F MainPage.xaml.cs\npublic static Visibility BoolToVisibility(bool v) => v ? Visibility.Visible : Visibility.Collapsed;\npublic static Visibility InvertBoolToVisibility(bool v) => v ? Visibility.Collapsed : Visibility.Visible;\npublic static bool Not(bool v) => !v;\n```\n```xml\n\u003CTextBlock Visibility=\"{x:Bind local:MainPage.BoolToVisibility(Vm.IsLoading), Mode=OneWay}\" \u002F>\n\u003CButton   IsEnabled=\"{x:Bind local:MainPage.Not(Vm.IsLoading), Mode=OneWay}\" \u002F>\n```\n\n### Acrylic and `ThemeShadow` rendering rules\n\n- `BackgroundSizing` defaults to `InnerBorderEdge` on both `Border` and `Control`, which correctly clips acrylic to the inner stroke. The hazard is the opposite of intuition: don't *change* it to `OuterBorderEdge` on a bordered acrylic surface — that's what makes the material bleed past the stroke.\n- `ThemeShadow` casts a shadow from the caster's `Translation` Z. Microsoft's recommended elevations are `16` for tooltips, `32` for popup\u002Fflyout UI, `128` for dialogs — pick by surface type. For non-popup casters, add the surfaces it should land on to `ThemeShadow.Receivers`; otherwise the shadow has nothing to fall on and looks clipped.\n\n## Theming rules (short version)\n\n- `{ThemeResource ...}` at usage sites (updates on theme switch). `{StaticResource}` inside `ThemeDictionaries` for theme-local definitions; `SystemAccentColor` \u002F `SystemColor*` are the exceptions and stay `{ThemeResource}`.\n- Custom theme dictionaries cover `Light`, `Dark`, **and** `HighContrast` explicitly — never `Default`.\n- Name resources by purpose (`CardBackgroundBrush`, `DangerTextBrush`), not hue.\n- Light\u002FDark working ≠ High Contrast working. Test in a Contrast theme separately.\n- Never set `HighContrastAdjustment=\"None\"` unless your app already supplies system-aware brushes throughout.\n\n## Anti-patterns\n\n| ❌ Don't | ✅ Do instead |\n|---------|--------------|\n| Reflexively build every app as `NavigationView` Left | Pick the closest row in the silhouette table; hero \u002F document \u002F utility shapes are equally valid |\n| Treat brand colour or tinted backdrop as off-pattern | Overriding `SystemAccentColor` or using a tinted `DesktopAcrylicBackdrop` is how Microsoft's own first-party apps differentiate |\n| Tiny content island on an oversized window | Either size the window to the content (see *Window sizing*) or let content fill the available space |\n| Custom pill \u002F segmented tab switcher built by hand | `NavigationView` Top or `SelectorBar` |\n| Equal-width 50\u002F50 column split where one pane is structural | Stable size for the structural pane, flexible for content — only if a structural pane is part of the silhouette at all |\n| Hard-coded color literals (`#RRGGBB`, `White`) | `{ThemeResource}` brushes by semantic name |\n| `ScrollViewer` wrapped around a `ListView` \u002F `GridView` | The collection control already scrolls — give it a constrained height |\n| Custom `ControlTemplate` for a standard control | Built-in control + lightweight style overrides |\n| Placeholder text used as the only field label | Always provide a visible label |\n| Required commands hidden at small widths with no route | Overflow menu, secondary surface, or a responsive promotion rule |\n| Modal `ContentDialog` for non-blocking hints | `TeachingTip`, `InfoBar`, or inline status |\n| Destructive action (Delete \u002F Discard \u002F Reset) fired without confirmation | `ContentDialog` with verb-labelled primary action and `Cancel` secondary; surface item identity (name, count) in the body |\n| Custom list control when `ListView` \u002F `GridView` fits | Use the platform collection + virtualisation |\n\nBuild custom UI **only when all are true**: no platform\u002FGallery\u002FToolkit control fits; you'll implement keyboard, focus, UI Automation, theme resources, High Contrast, and responsive behaviour; you have specs for default\u002Fhover\u002Fpressed\u002Fdisabled\u002Fselected\u002Ffocused\u002Ferror states; you've tested with keyboard and a contrast theme.\n\n## References (load on demand)\n\n| File | Load when… |\n|------|-----------|\n| `references\u002Fbrushes-and-icons.md` | Looking up a brush key by purpose, picking between `Icon` \u002F `IconSource` slots, choosing among `FontIcon` \u002F `SymbolIcon` \u002F `PathIcon` \u002F etc. |\n| `references\u002Ftheme-accessibility.md` | Authoring theme dictionaries, custom brushes\u002Fstyles\u002Ftemplates, or High Contrast support. |\n| `references\u002Flayout-review.md` | Reviewing responsive behaviour, breakpoints, or empty\u002Floading\u002Ferror coverage on a data-driven page. |\n",{"data":50,"body":51},{"name":4,"description":6},{"type":52,"children":53},"root",[54,63,94,143,162,168,173,382,388,417,701,713,719,748,758,781,823,998,1026,1032,1050,1091,1108,1122,1159,1165,1266,1285,1342,1361,1400,1423,1437,1540,1546,1675,1681,2000,2012,2018,2128],{"type":55,"tag":56,"props":57,"children":59},"element","h2",{"id":58},"search-samples-before-writing-xaml",[60],{"type":61,"value":62},"text","Search samples before writing XAML",{"type":55,"tag":64,"props":65,"children":66},"p",{},[67,69,76,78,84,86,92],{"type":61,"value":68},"This skill ships ",{"type":55,"tag":70,"props":71,"children":73},"code",{"className":72},[],[74],{"type":61,"value":75},"winui-search.exe",{"type":61,"value":77}," alongside this ",{"type":55,"tag":70,"props":79,"children":81},{"className":80},[],[82],{"type":61,"value":83},"SKILL.md",{"type":61,"value":85}," (≈100 WinUI Gallery controls, every Windows Community Toolkit scenario, 90+ Reactor declarative-C# controls, curated platform-integration patterns; each result returns full code — XAML + C#, or C#-only for Reactor — plus pitfall notes). ",{"type":55,"tag":87,"props":88,"children":89},"strong",{},[90],{"type":61,"value":91},"Front-load lookups, then code",{"type":61,"value":93}," — don't interleave.",{"type":55,"tag":95,"props":96,"children":101},"pre",{"className":97,"code":98,"language":99,"meta":100,"style":100},"language-powershell shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".\\winui-search.exe search \"\u003Cfeature 1>\" \"\u003Cfeature 2>\" ...   # batch one focused query per feature (BM25 likes focused phrasing)\n.\\winui-search.exe get \u003Cid 1> \u003Cid 2> ...                     # batch up to 3 IDs — full XAML + C# + pitfall notes\n.\\winui-search.exe list                                       # browse all patterns (heavy — prefer search)\n.\\winui-search.exe update                                     # force cache refresh\n","powershell","",[102],{"type":55,"tag":70,"props":103,"children":104},{"__ignoreMap":100},[105,116,125,134],{"type":55,"tag":106,"props":107,"children":110},"span",{"class":108,"line":109},"line",1,[111],{"type":55,"tag":106,"props":112,"children":113},{},[114],{"type":61,"value":115},".\\winui-search.exe search \"\u003Cfeature 1>\" \"\u003Cfeature 2>\" ...   # batch one focused query per feature (BM25 likes focused phrasing)\n",{"type":55,"tag":106,"props":117,"children":119},{"class":108,"line":118},2,[120],{"type":55,"tag":106,"props":121,"children":122},{},[123],{"type":61,"value":124},".\\winui-search.exe get \u003Cid 1> \u003Cid 2> ...                     # batch up to 3 IDs — full XAML + C# + pitfall notes\n",{"type":55,"tag":106,"props":126,"children":128},{"class":108,"line":127},3,[129],{"type":55,"tag":106,"props":130,"children":131},{},[132],{"type":61,"value":133},".\\winui-search.exe list                                       # browse all patterns (heavy — prefer search)\n",{"type":55,"tag":106,"props":135,"children":137},{"class":108,"line":136},4,[138],{"type":55,"tag":106,"props":139,"children":140},{},[141],{"type":61,"value":142},".\\winui-search.exe update                                     # force cache refresh\n",{"type":55,"tag":64,"props":144,"children":145},{},[146,148,153,155,160],{"type":61,"value":147},"Search covers controls ",{"type":55,"tag":87,"props":149,"children":150},{},[151],{"type":61,"value":152},"and",{"type":61,"value":154}," platform integration (file pickers, Share, JumpList, drag-drop, app lifecycle, dialogs) — front-load all lookups before writing XAML; ",{"type":55,"tag":87,"props":156,"children":157},{},[158],{"type":61,"value":159},"don't interleave",{"type":61,"value":161}," search with coding.",{"type":55,"tag":56,"props":163,"children":165},{"id":164},"app-shape-anchors",[166],{"type":61,"value":167},"App-shape anchors",{"type":55,"tag":64,"props":169,"children":170},{},[171],{"type":61,"value":172},"Pick the closest shipping app silhouette before laying out a page:",{"type":55,"tag":174,"props":175,"children":176},"table",{},[177,201],{"type":55,"tag":178,"props":179,"children":180},"thead",{},[181],{"type":55,"tag":182,"props":183,"children":184},"tr",{},[185,191,196],{"type":55,"tag":186,"props":187,"children":188},"th",{},[189],{"type":61,"value":190},"App type",{"type":55,"tag":186,"props":192,"children":193},{},[194],{"type":61,"value":195},"Anchor controls",{"type":55,"tag":186,"props":197,"children":198},{},[199],{"type":61,"value":200},"Reference apps",{"type":55,"tag":202,"props":203,"children":204},"tbody",{},[205,244,268,305,328,346],{"type":55,"tag":182,"props":206,"children":207},{},[208,214,239],{"type":55,"tag":209,"props":210,"children":211},"td",{},[212],{"type":61,"value":213},"Settings \u002F config tool",{"type":55,"tag":209,"props":215,"children":216},{},[217,223,225,231,233],{"type":55,"tag":70,"props":218,"children":220},{"className":219},[],[221],{"type":61,"value":222},"NavigationView",{"type":61,"value":224}," Left + ",{"type":55,"tag":70,"props":226,"children":228},{"className":227},[],[229],{"type":61,"value":230},"SettingsCard",{"type":61,"value":232}," \u002F ",{"type":55,"tag":70,"props":234,"children":236},{"className":235},[],[237],{"type":61,"value":238},"SettingsExpander",{"type":55,"tag":209,"props":240,"children":241},{},[242],{"type":61,"value":243},"Windows Settings, Slack",{"type":55,"tag":182,"props":245,"children":246},{},[247,252,263],{"type":55,"tag":209,"props":248,"children":249},{},[250],{"type":61,"value":251},"Document \u002F session editor",{"type":55,"tag":209,"props":253,"children":254},{},[255,261],{"type":55,"tag":70,"props":256,"children":258},{"className":257},[],[259],{"type":61,"value":260},"TabView",{"type":61,"value":262}," + full-bleed content, light chrome",{"type":55,"tag":209,"props":264,"children":265},{},[266],{"type":61,"value":267},"Windows Terminal, VS Code, Notepad",{"type":55,"tag":182,"props":269,"children":270},{},[271,276,300],{"type":55,"tag":209,"props":272,"children":273},{},[274],{"type":61,"value":275},"Hierarchical browser",{"type":55,"tag":209,"props":277,"children":278},{},[279,285,287,293,294],{"type":55,"tag":70,"props":280,"children":282},{"className":281},[],[283],{"type":61,"value":284},"TreeView",{"type":61,"value":286}," + ",{"type":55,"tag":70,"props":288,"children":290},{"className":289},[],[291],{"type":61,"value":292},"ListView",{"type":61,"value":286},{"type":55,"tag":70,"props":295,"children":297},{"className":296},[],[298],{"type":61,"value":299},"BreadcrumbBar",{"type":55,"tag":209,"props":301,"children":302},{},[303],{"type":61,"value":304},"File Explorer, Outlook",{"type":55,"tag":182,"props":306,"children":307},{},[308,313,323],{"type":55,"tag":209,"props":309,"children":310},{},[311],{"type":61,"value":312},"Developer tool \u002F dashboard",{"type":55,"tag":209,"props":314,"children":315},{},[316,321],{"type":55,"tag":70,"props":317,"children":319},{"className":318},[],[320],{"type":61,"value":222},{"type":61,"value":322}," + card layout",{"type":55,"tag":209,"props":324,"children":325},{},[326],{"type":61,"value":327},"Dev Home, GitHub Desktop",{"type":55,"tag":182,"props":329,"children":330},{},[331,336,341],{"type":55,"tag":209,"props":332,"children":333},{},[334],{"type":61,"value":335},"Single-purpose utility",{"type":55,"tag":209,"props":337,"children":338},{},[339],{"type":61,"value":340},"Mode switcher + compact grid",{"type":55,"tag":209,"props":342,"children":343},{},[344],{"type":61,"value":345},"Calculator, Snipping Tool",{"type":55,"tag":182,"props":347,"children":348},{},[349,354,377],{"type":55,"tag":209,"props":350,"children":351},{},[352],{"type":61,"value":353},"Media \u002F canvas \u002F hero",{"type":55,"tag":209,"props":355,"children":356},{},[357,363,365,370,372],{"type":55,"tag":70,"props":358,"children":360},{"className":359},[],[361],{"type":61,"value":362},"Grid",{"type":61,"value":364}," with hero surface, floating commands, ",{"type":55,"tag":87,"props":366,"children":367},{},[368],{"type":61,"value":369},"no",{"type":61,"value":371}," ",{"type":55,"tag":70,"props":373,"children":375},{"className":374},[],[376],{"type":61,"value":222},{"type":55,"tag":209,"props":378,"children":379},{},[380],{"type":61,"value":381},"Photos, Spotify, Clipchamp",{"type":55,"tag":56,"props":383,"children":385},{"id":384},"reach-for-this-control-map",[386],{"type":61,"value":387},"Reach-for-this control map",{"type":55,"tag":64,"props":389,"children":390},{},[391,393,399,401,407,409,415],{"type":61,"value":392},"Before writing XAML, map the requirement to a platform control. These mappings exist to short-circuit cross-framework instincts (WPF ",{"type":55,"tag":70,"props":394,"children":396},{"className":395},[],[397],{"type":61,"value":398},"DataGrid",{"type":61,"value":400},", web ",{"type":55,"tag":70,"props":402,"children":404},{"className":403},[],[405],{"type":61,"value":406},"\u003Cselect>",{"type":61,"value":408},", HTML ",{"type":55,"tag":70,"props":410,"children":412},{"className":411},[],[413],{"type":61,"value":414},"\u003Cinput type=date>",{"type":61,"value":416},"):",{"type":55,"tag":418,"props":419,"children":420},"ul",{},[421,461,580,645],{"type":55,"tag":422,"props":423,"children":424},"li",{},[425,430,432,437,439,444,446,451,453,459],{"type":55,"tag":87,"props":426,"children":427},{},[428],{"type":61,"value":429},"Navigation:",{"type":61,"value":431}," 2–7 sections → ",{"type":55,"tag":70,"props":433,"children":435},{"className":434},[],[436],{"type":61,"value":222},{"type":61,"value":438},"; document\u002Fsession tabs → ",{"type":55,"tag":70,"props":440,"children":442},{"className":441},[],[443],{"type":61,"value":260},{"type":61,"value":445},"; breadcrumb trail → ",{"type":55,"tag":70,"props":447,"children":449},{"className":448},[],[450],{"type":61,"value":299},{"type":61,"value":452},"; 2–3 modes → ",{"type":55,"tag":70,"props":454,"children":456},{"className":455},[],[457],{"type":61,"value":458},"SelectorBar",{"type":61,"value":460},".",{"type":55,"tag":422,"props":462,"children":463},{},[464,469,471,476,478,484,486,492,493,499,501,506,508,542,544,549,551,557,559,565,567,572,574,579],{"type":55,"tag":87,"props":465,"children":466},{},[467],{"type":61,"value":468},"Data display:",{"type":61,"value":470}," Vertical list → ",{"type":55,"tag":70,"props":472,"children":474},{"className":473},[],[475],{"type":61,"value":292},{"type":61,"value":477},"; tiles\u002Fgrid → ",{"type":55,"tag":70,"props":479,"children":481},{"className":480},[],[482],{"type":61,"value":483},"GridView",{"type":61,"value":485}," or ",{"type":55,"tag":70,"props":487,"children":489},{"className":488},[],[490],{"type":61,"value":491},"ItemsRepeater",{"type":61,"value":286},{"type":55,"tag":70,"props":494,"children":496},{"className":495},[],[497],{"type":61,"value":498},"UniformGridLayout",{"type":61,"value":500},"; hierarchy → ",{"type":55,"tag":70,"props":502,"children":504},{"className":503},[],[505],{"type":61,"value":284},{"type":61,"value":507},"; ",{"type":55,"tag":87,"props":509,"children":510},{},[511,513,518,520,525,527,533,535,540],{"type":61,"value":512},"tabular → ",{"type":55,"tag":70,"props":514,"children":516},{"className":515},[],[517],{"type":61,"value":292},{"type":61,"value":519}," with a ",{"type":55,"tag":70,"props":521,"children":523},{"className":522},[],[524],{"type":61,"value":362},{"type":61,"value":526},"-based ",{"type":55,"tag":70,"props":528,"children":530},{"className":529},[],[531],{"type":61,"value":532},"ItemTemplate",{"type":61,"value":534}," and a header ",{"type":55,"tag":70,"props":536,"children":538},{"className":537},[],[539],{"type":61,"value":362},{"type":61,"value":541}," above",{"type":61,"value":543}," (WinUI has no ",{"type":55,"tag":70,"props":545,"children":547},{"className":546},[],[548],{"type":61,"value":398},{"type":61,"value":550},"; don't default to ",{"type":55,"tag":70,"props":552,"children":554},{"className":553},[],[555],{"type":61,"value":556},"CommunityToolkit.WinUI.Controls.DataGrid",{"type":61,"value":558}," — its columns can't use ",{"type":55,"tag":70,"props":560,"children":562},{"className":561},[],[563],{"type":61,"value":564},"x:Bind",{"type":61,"value":566},"); master-detail → ",{"type":55,"tag":70,"props":568,"children":570},{"className":569},[],[571],{"type":61,"value":292},{"type":61,"value":573}," + detail ",{"type":55,"tag":70,"props":575,"children":577},{"className":576},[],[578],{"type":61,"value":362},{"type":61,"value":460},{"type":55,"tag":422,"props":581,"children":582},{},[583,588,590,596,598,604,606,612,614,620,622,628,630,636,638,644],{"type":55,"tag":87,"props":584,"children":585},{},[586],{"type":61,"value":587},"Input:",{"type":61,"value":589}," Text → ",{"type":55,"tag":70,"props":591,"children":593},{"className":592},[],[594],{"type":61,"value":595},"TextBox",{"type":61,"value":597},"; number → ",{"type":55,"tag":70,"props":599,"children":601},{"className":600},[],[602],{"type":61,"value":603},"NumberBox",{"type":61,"value":605},"; search → ",{"type":55,"tag":70,"props":607,"children":609},{"className":608},[],[610],{"type":61,"value":611},"AutoSuggestBox",{"type":61,"value":613},"; date → ",{"type":55,"tag":70,"props":615,"children":617},{"className":616},[],[618],{"type":61,"value":619},"CalendarDatePicker",{"type":61,"value":621},"; boolean → ",{"type":55,"tag":70,"props":623,"children":625},{"className":624},[],[626],{"type":61,"value":627},"ToggleSwitch",{"type":61,"value":629},"; pick one from 2–3 → ",{"type":55,"tag":70,"props":631,"children":633},{"className":632},[],[634],{"type":61,"value":635},"RadioButtons",{"type":61,"value":637},"; pick one from 4+ → ",{"type":55,"tag":70,"props":639,"children":641},{"className":640},[],[642],{"type":61,"value":643},"ComboBox",{"type":61,"value":460},{"type":55,"tag":422,"props":646,"children":647},{},[648,653,655,661,663,669,670,676,678,684,686,692,694,700],{"type":55,"tag":87,"props":649,"children":650},{},[651],{"type":61,"value":652},"Feedback:",{"type":61,"value":654}," Blocking decision → ",{"type":55,"tag":70,"props":656,"children":658},{"className":657},[],[659],{"type":61,"value":660},"ContentDialog",{"type":61,"value":662},"; contextual action → ",{"type":55,"tag":70,"props":664,"children":666},{"className":665},[],[667],{"type":61,"value":668},"Flyout",{"type":61,"value":232},{"type":55,"tag":70,"props":671,"children":673},{"className":672},[],[674],{"type":61,"value":675},"MenuFlyout",{"type":61,"value":677},"; onboarding \u002F hint → ",{"type":55,"tag":70,"props":679,"children":681},{"className":680},[],[682],{"type":61,"value":683},"TeachingTip",{"type":61,"value":685},"; inline status \u002F async progress → ",{"type":55,"tag":70,"props":687,"children":689},{"className":688},[],[690],{"type":61,"value":691},"InfoBar",{"type":61,"value":693},"; system notification → ",{"type":55,"tag":70,"props":695,"children":697},{"className":696},[],[698],{"type":61,"value":699},"AppNotification",{"type":61,"value":460},{"type":55,"tag":64,"props":702,"children":703},{},[704,706,711],{"type":61,"value":705},"If the mapping above doesn't fit, search ",{"type":55,"tag":70,"props":707,"children":709},{"className":708},[],[710],{"type":61,"value":75},{"type":61,"value":712}," before improvising.",{"type":55,"tag":56,"props":714,"children":716},{"id":715},"window-sizing-winui-3-specifics",[717],{"type":61,"value":718},"Window sizing (WinUI 3 specifics)",{"type":55,"tag":720,"props":721,"children":722},"blockquote",{},[723],{"type":55,"tag":64,"props":724,"children":725},{},[726,738,740,746],{"type":55,"tag":87,"props":727,"children":728},{},[729,731,737],{"type":61,"value":730},"WinUI 3 has no ",{"type":55,"tag":70,"props":732,"children":734},{"className":733},[],[735],{"type":61,"value":736},"SizeToContent",{"type":61,"value":460},{"type":61,"value":739}," Without an explicit size, Windows defaults the main window to ~1024×768 — oversized for most utilities. Size it in ",{"type":55,"tag":70,"props":741,"children":743},{"className":742},[],[744],{"type":61,"value":745},"MainWindow",{"type":61,"value":747},"'s constructor.",{"type":55,"tag":64,"props":749,"children":750},{},[751,756],{"type":55,"tag":87,"props":752,"children":753},{},[754],{"type":61,"value":755},"Rubric.",{"type":61,"value":757}," Width = widest row + 48 padding, 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 ranges (derive yours from the rubric):",{"type":55,"tag":418,"props":759,"children":760},{},[761,766,771,776],{"type":55,"tag":422,"props":762,"children":763},{},[764],{"type":61,"value":765},"Single-purpose utility → ~440–560 wide",{"type":55,"tag":422,"props":767,"children":768},{},[769],{"type":61,"value":770},"Form \u002F single-page tool → ~600–800 wide, ~640–800 tall",{"type":55,"tag":422,"props":772,"children":773},{},[774],{"type":61,"value":775},"Multi-pane (nav + content) → ~1100–1300 wide, ~720–840 tall",{"type":55,"tag":422,"props":777,"children":778},{},[779],{"type":61,"value":780},"Document \u002F canvas \u002F media editor → 1280+ wide",{"type":55,"tag":64,"props":782,"children":783},{},[784,790,792,797,799,805,807,813,815,821],{"type":55,"tag":70,"props":785,"children":787},{"className":786},[],[788],{"type":61,"value":789},"AppWindow.Resize",{"type":61,"value":791}," takes ",{"type":55,"tag":87,"props":793,"children":794},{},[795],{"type":61,"value":796},"physical pixels",{"type":61,"value":798},", not DIPs — multiply by the monitor's DPI scale. ",{"type":55,"tag":70,"props":800,"children":802},{"className":801},[],[803],{"type":61,"value":804},"XamlRoot.RasterizationScale",{"type":61,"value":806}," is null in the constructor and stale after ",{"type":55,"tag":70,"props":808,"children":810},{"className":809},[],[811],{"type":61,"value":812},"AppWindow.Move",{"type":61,"value":814},", so ",{"type":55,"tag":70,"props":816,"children":818},{"className":817},[],[819],{"type":61,"value":820},"[DllImport] GetDpiForWindow",{"type":61,"value":822}," is the cleanest path:",{"type":55,"tag":95,"props":824,"children":828},{"className":825,"code":826,"language":827,"meta":100,"style":100},"language-csharp shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","using Microsoft.UI;\nusing Microsoft.UI.Windowing;\nusing System.Runtime.InteropServices;\nusing Windows.Graphics;\n\npublic sealed partial class MainWindow : Window\n{\n    [DllImport(\"user32.dll\")]\n    private static extern uint GetDpiForWindow(IntPtr hWnd);\n\n    public MainWindow()\n    {\n        InitializeComponent();\n        var hwnd  = Win32Interop.GetWindowFromWindowId(AppWindow.Id);\n        var scale = GetDpiForWindow(hwnd) \u002F 96.0;\n        \u002F\u002F widthDip \u002F heightDip come from the rubric above — derive, don't copy.\n        AppWindow.Resize(new SizeInt32((int)(widthDip * scale), (int)(heightDip * scale)));\n    }\n}\n","csharp",[829],{"type":55,"tag":70,"props":830,"children":831},{"__ignoreMap":100},[832,840,848,856,864,874,883,892,901,910,918,927,936,945,954,963,972,981,990],{"type":55,"tag":106,"props":833,"children":834},{"class":108,"line":109},[835],{"type":55,"tag":106,"props":836,"children":837},{},[838],{"type":61,"value":839},"using Microsoft.UI;\n",{"type":55,"tag":106,"props":841,"children":842},{"class":108,"line":118},[843],{"type":55,"tag":106,"props":844,"children":845},{},[846],{"type":61,"value":847},"using Microsoft.UI.Windowing;\n",{"type":55,"tag":106,"props":849,"children":850},{"class":108,"line":127},[851],{"type":55,"tag":106,"props":852,"children":853},{},[854],{"type":61,"value":855},"using System.Runtime.InteropServices;\n",{"type":55,"tag":106,"props":857,"children":858},{"class":108,"line":136},[859],{"type":55,"tag":106,"props":860,"children":861},{},[862],{"type":61,"value":863},"using Windows.Graphics;\n",{"type":55,"tag":106,"props":865,"children":867},{"class":108,"line":866},5,[868],{"type":55,"tag":106,"props":869,"children":871},{"emptyLinePlaceholder":870},true,[872],{"type":61,"value":873},"\n",{"type":55,"tag":106,"props":875,"children":877},{"class":108,"line":876},6,[878],{"type":55,"tag":106,"props":879,"children":880},{},[881],{"type":61,"value":882},"public sealed partial class MainWindow : Window\n",{"type":55,"tag":106,"props":884,"children":886},{"class":108,"line":885},7,[887],{"type":55,"tag":106,"props":888,"children":889},{},[890],{"type":61,"value":891},"{\n",{"type":55,"tag":106,"props":893,"children":895},{"class":108,"line":894},8,[896],{"type":55,"tag":106,"props":897,"children":898},{},[899],{"type":61,"value":900},"    [DllImport(\"user32.dll\")]\n",{"type":55,"tag":106,"props":902,"children":904},{"class":108,"line":903},9,[905],{"type":55,"tag":106,"props":906,"children":907},{},[908],{"type":61,"value":909},"    private static extern uint GetDpiForWindow(IntPtr hWnd);\n",{"type":55,"tag":106,"props":911,"children":913},{"class":108,"line":912},10,[914],{"type":55,"tag":106,"props":915,"children":916},{"emptyLinePlaceholder":870},[917],{"type":61,"value":873},{"type":55,"tag":106,"props":919,"children":921},{"class":108,"line":920},11,[922],{"type":55,"tag":106,"props":923,"children":924},{},[925],{"type":61,"value":926},"    public MainWindow()\n",{"type":55,"tag":106,"props":928,"children":930},{"class":108,"line":929},12,[931],{"type":55,"tag":106,"props":932,"children":933},{},[934],{"type":61,"value":935},"    {\n",{"type":55,"tag":106,"props":937,"children":939},{"class":108,"line":938},13,[940],{"type":55,"tag":106,"props":941,"children":942},{},[943],{"type":61,"value":944},"        InitializeComponent();\n",{"type":55,"tag":106,"props":946,"children":948},{"class":108,"line":947},14,[949],{"type":55,"tag":106,"props":950,"children":951},{},[952],{"type":61,"value":953},"        var hwnd  = Win32Interop.GetWindowFromWindowId(AppWindow.Id);\n",{"type":55,"tag":106,"props":955,"children":957},{"class":108,"line":956},15,[958],{"type":55,"tag":106,"props":959,"children":960},{},[961],{"type":61,"value":962},"        var scale = GetDpiForWindow(hwnd) \u002F 96.0;\n",{"type":55,"tag":106,"props":964,"children":966},{"class":108,"line":965},16,[967],{"type":55,"tag":106,"props":968,"children":969},{},[970],{"type":61,"value":971},"        \u002F\u002F widthDip \u002F heightDip come from the rubric above — derive, don't copy.\n",{"type":55,"tag":106,"props":973,"children":975},{"class":108,"line":974},17,[976],{"type":55,"tag":106,"props":977,"children":978},{},[979],{"type":61,"value":980},"        AppWindow.Resize(new SizeInt32((int)(widthDip * scale), (int)(heightDip * scale)));\n",{"type":55,"tag":106,"props":982,"children":984},{"class":108,"line":983},18,[985],{"type":55,"tag":106,"props":986,"children":987},{},[988],{"type":61,"value":989},"    }\n",{"type":55,"tag":106,"props":991,"children":992},{"class":108,"line":32},[993],{"type":55,"tag":106,"props":994,"children":995},{},[996],{"type":61,"value":997},"}\n",{"type":55,"tag":64,"props":999,"children":1000},{},[1001,1003,1009,1011,1017,1019,1024],{"type":61,"value":1002},"Don't size the window by setting ",{"type":55,"tag":70,"props":1004,"children":1006},{"className":1005},[],[1007],{"type":61,"value":1008},"Width",{"type":61,"value":1010},"\u002F",{"type":55,"tag":70,"props":1012,"children":1014},{"className":1013},[],[1015],{"type":61,"value":1016},"Height",{"type":61,"value":1018}," on the root ",{"type":55,"tag":70,"props":1020,"children":1022},{"className":1021},[],[1023],{"type":61,"value":362},{"type":61,"value":1025}," — that clips content, not the window.",{"type":55,"tag":56,"props":1027,"children":1029},{"id":1028},"xaml-landmines-the-things-youll-otherwise-ship-broken",[1030],{"type":61,"value":1031},"XAML landmines (the things you'll otherwise ship broken)",{"type":55,"tag":1033,"props":1034,"children":1036},"h3",{"id":1035},"xbind-defaults-to-onetime",[1037,1042,1044],{"type":55,"tag":70,"props":1038,"children":1040},{"className":1039},[],[1041],{"type":61,"value":564},{"type":61,"value":1043}," defaults to ",{"type":55,"tag":70,"props":1045,"children":1047},{"className":1046},[],[1048],{"type":61,"value":1049},"OneTime",{"type":55,"tag":95,"props":1051,"children":1055},{"className":1052,"code":1053,"language":1054,"meta":100,"style":100},"language-xml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- ❌ silently never updates -->\n\u003CTextBlock Text=\"{x:Bind Vm.Status}\" \u002F>\n\u003C!-- ✅ -->\n\u003CTextBlock Text=\"{x:Bind Vm.Status, Mode=OneWay}\" \u002F>\n","xml",[1056],{"type":55,"tag":70,"props":1057,"children":1058},{"__ignoreMap":100},[1059,1067,1075,1083],{"type":55,"tag":106,"props":1060,"children":1061},{"class":108,"line":109},[1062],{"type":55,"tag":106,"props":1063,"children":1064},{},[1065],{"type":61,"value":1066},"\u003C!-- ❌ silently never updates -->\n",{"type":55,"tag":106,"props":1068,"children":1069},{"class":108,"line":118},[1070],{"type":55,"tag":106,"props":1071,"children":1072},{},[1073],{"type":61,"value":1074},"\u003CTextBlock Text=\"{x:Bind Vm.Status}\" \u002F>\n",{"type":55,"tag":106,"props":1076,"children":1077},{"class":108,"line":127},[1078],{"type":55,"tag":106,"props":1079,"children":1080},{},[1081],{"type":61,"value":1082},"\u003C!-- ✅ -->\n",{"type":55,"tag":106,"props":1084,"children":1085},{"class":108,"line":136},[1086],{"type":55,"tag":106,"props":1087,"children":1088},{},[1089],{"type":61,"value":1090},"\u003CTextBlock Text=\"{x:Bind Vm.Status, Mode=OneWay}\" \u002F>\n",{"type":55,"tag":1033,"props":1092,"children":1094},{"id":1093},"textbox-two-way-needs-updatesourcetriggerpropertychanged",[1095,1100,1102],{"type":55,"tag":70,"props":1096,"children":1098},{"className":1097},[],[1099],{"type":61,"value":595},{"type":61,"value":1101}," two-way needs ",{"type":55,"tag":70,"props":1103,"children":1105},{"className":1104},[],[1106],{"type":61,"value":1107},"UpdateSourceTrigger=PropertyChanged",{"type":55,"tag":95,"props":1109,"children":1111},{"className":1052,"code":1110,"language":1054,"meta":100,"style":100},"\u003CTextBox Text=\"{x:Bind Vm.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}\" \u002F>\n",[1112],{"type":55,"tag":70,"props":1113,"children":1114},{"__ignoreMap":100},[1115],{"type":55,"tag":106,"props":1116,"children":1117},{"class":108,"line":109},[1118],{"type":55,"tag":106,"props":1119,"children":1120},{},[1121],{"type":61,"value":1110},{"type":55,"tag":64,"props":1123,"children":1124},{},[1125,1127,1133,1135,1141,1143,1149,1151,1157],{"type":61,"value":1126},"Default trigger resolves to ",{"type":55,"tag":70,"props":1128,"children":1130},{"className":1129},[],[1131],{"type":61,"value":1132},"LostFocus",{"type":61,"value":1134}," specifically for ",{"type":55,"tag":70,"props":1136,"children":1138},{"className":1137},[],[1139],{"type":61,"value":1140},"TextBox.Text",{"type":61,"value":1142}," (most other properties default to ",{"type":55,"tag":70,"props":1144,"children":1146},{"className":1145},[],[1147],{"type":61,"value":1148},"PropertyChanged",{"type":61,"value":1150},"). The VM is not updated per keystroke, and UIA keyboard-simulation tests (WinAppDriver ",{"type":55,"tag":70,"props":1152,"children":1154},{"className":1153},[],[1155],{"type":61,"value":1156},"SendKeys",{"type":61,"value":1158},", etc.) that assert immediately after typing will see stale VM state until focus moves.",{"type":55,"tag":1033,"props":1160,"children":1162},{"id":1161},"attached-properties-from-c-use-static-setters-not-initializers",[1163],{"type":61,"value":1164},"Attached properties from C# use static setters, not initializers",{"type":55,"tag":95,"props":1166,"children":1168},{"className":825,"code":1167,"language":827,"meta":100,"style":100},"using Microsoft.UI.Xaml.Automation;\n\n\u002F\u002F ❌ WRONG — does not compile. CS0117: 'Button' does not contain a definition for 'AutomationProperties'.\n\u002F\u002F AutomationProperties is a static class of attached-property accessors, not an instance member.\nvar btn = new Button { AutomationProperties = { AutomationId = \"BtnSave\" } };\n\n\u002F\u002F ✅ CORRECT\nvar btn = new Button { Content = \"Save\" };\nAutomationProperties.SetAutomationId(btn, \"BtnSave\");\nAutomationProperties.SetName(btn, \"Save button\");\nGrid.SetRow(btn, 1);\nToolTipService.SetToolTip(btn, \"Save the current document\");\n",[1169],{"type":55,"tag":70,"props":1170,"children":1171},{"__ignoreMap":100},[1172,1180,1187,1195,1203,1211,1218,1226,1234,1242,1250,1258],{"type":55,"tag":106,"props":1173,"children":1174},{"class":108,"line":109},[1175],{"type":55,"tag":106,"props":1176,"children":1177},{},[1178],{"type":61,"value":1179},"using Microsoft.UI.Xaml.Automation;\n",{"type":55,"tag":106,"props":1181,"children":1182},{"class":108,"line":118},[1183],{"type":55,"tag":106,"props":1184,"children":1185},{"emptyLinePlaceholder":870},[1186],{"type":61,"value":873},{"type":55,"tag":106,"props":1188,"children":1189},{"class":108,"line":127},[1190],{"type":55,"tag":106,"props":1191,"children":1192},{},[1193],{"type":61,"value":1194},"\u002F\u002F ❌ WRONG — does not compile. CS0117: 'Button' does not contain a definition for 'AutomationProperties'.\n",{"type":55,"tag":106,"props":1196,"children":1197},{"class":108,"line":136},[1198],{"type":55,"tag":106,"props":1199,"children":1200},{},[1201],{"type":61,"value":1202},"\u002F\u002F AutomationProperties is a static class of attached-property accessors, not an instance member.\n",{"type":55,"tag":106,"props":1204,"children":1205},{"class":108,"line":866},[1206],{"type":55,"tag":106,"props":1207,"children":1208},{},[1209],{"type":61,"value":1210},"var btn = new Button { AutomationProperties = { AutomationId = \"BtnSave\" } };\n",{"type":55,"tag":106,"props":1212,"children":1213},{"class":108,"line":876},[1214],{"type":55,"tag":106,"props":1215,"children":1216},{"emptyLinePlaceholder":870},[1217],{"type":61,"value":873},{"type":55,"tag":106,"props":1219,"children":1220},{"class":108,"line":885},[1221],{"type":55,"tag":106,"props":1222,"children":1223},{},[1224],{"type":61,"value":1225},"\u002F\u002F ✅ CORRECT\n",{"type":55,"tag":106,"props":1227,"children":1228},{"class":108,"line":894},[1229],{"type":55,"tag":106,"props":1230,"children":1231},{},[1232],{"type":61,"value":1233},"var btn = new Button { Content = \"Save\" };\n",{"type":55,"tag":106,"props":1235,"children":1236},{"class":108,"line":903},[1237],{"type":55,"tag":106,"props":1238,"children":1239},{},[1240],{"type":61,"value":1241},"AutomationProperties.SetAutomationId(btn, \"BtnSave\");\n",{"type":55,"tag":106,"props":1243,"children":1244},{"class":108,"line":912},[1245],{"type":55,"tag":106,"props":1246,"children":1247},{},[1248],{"type":61,"value":1249},"AutomationProperties.SetName(btn, \"Save button\");\n",{"type":55,"tag":106,"props":1251,"children":1252},{"class":108,"line":920},[1253],{"type":55,"tag":106,"props":1254,"children":1255},{},[1256],{"type":61,"value":1257},"Grid.SetRow(btn, 1);\n",{"type":55,"tag":106,"props":1259,"children":1260},{"class":108,"line":929},[1261],{"type":55,"tag":106,"props":1262,"children":1263},{},[1264],{"type":61,"value":1265},"ToolTipService.SetToolTip(btn, \"Save the current document\");\n",{"type":55,"tag":1033,"props":1267,"children":1269},{"id":1268},"converterxnull-crashes-xbind-at-runtime",[1270,1276,1278,1283],{"type":55,"tag":70,"props":1271,"children":1273},{"className":1272},[],[1274],{"type":61,"value":1275},"Converter={x:Null}",{"type":61,"value":1277}," crashes ",{"type":55,"tag":70,"props":1279,"children":1281},{"className":1280},[],[1282],{"type":61,"value":564},{"type":61,"value":1284}," at runtime",{"type":55,"tag":64,"props":1286,"children":1287},{},[1288,1294,1296,1302,1304,1310,1312,1317,1319,1325,1327,1333,1334,1340],{"type":55,"tag":70,"props":1289,"children":1291},{"className":1290},[],[1292],{"type":61,"value":1293},"{x:Bind}",{"type":61,"value":1295}," requires ",{"type":55,"tag":70,"props":1297,"children":1299},{"className":1298},[],[1300],{"type":61,"value":1301},"Converter",{"type":61,"value":1303}," to be a ",{"type":55,"tag":70,"props":1305,"children":1307},{"className":1306},[],[1308],{"type":61,"value":1309},"{StaticResource}",{"type":61,"value":1311}," lookup. ",{"type":55,"tag":70,"props":1313,"children":1315},{"className":1314},[],[1316],{"type":61,"value":1275},{"type":61,"value":1318}," compiles but the generated code calls ",{"type":55,"tag":70,"props":1320,"children":1322},{"className":1321},[],[1323],{"type":61,"value":1324},"LookupConverter(\"\")",{"type":61,"value":1326},", which returns null, then dereferences it — you get ",{"type":55,"tag":70,"props":1328,"children":1330},{"className":1329},[],[1331],{"type":61,"value":1332},"Resource Dictionary Key can only be String-typed",{"type":61,"value":232},{"type":55,"tag":70,"props":1335,"children":1337},{"className":1336},[],[1338],{"type":61,"value":1339},"NullReferenceException",{"type":61,"value":1341}," on first activation of the binding. If you don't want a converter, omit the property entirely.",{"type":55,"tag":1033,"props":1343,"children":1345},{"id":1344},"prefer-xbind-static-functions-over-ivalueconverter",[1346,1348,1353,1355],{"type":61,"value":1347},"Prefer ",{"type":55,"tag":70,"props":1349,"children":1351},{"className":1350},[],[1352],{"type":61,"value":564},{"type":61,"value":1354}," static functions over ",{"type":55,"tag":70,"props":1356,"children":1358},{"className":1357},[],[1359],{"type":61,"value":1360},"IValueConverter",{"type":55,"tag":95,"props":1362,"children":1364},{"className":825,"code":1363,"language":827,"meta":100,"style":100},"\u002F\u002F MainPage.xaml.cs\npublic static Visibility BoolToVisibility(bool v) => v ? Visibility.Visible : Visibility.Collapsed;\npublic static Visibility InvertBoolToVisibility(bool v) => v ? Visibility.Collapsed : Visibility.Visible;\npublic static bool Not(bool v) => !v;\n",[1365],{"type":55,"tag":70,"props":1366,"children":1367},{"__ignoreMap":100},[1368,1376,1384,1392],{"type":55,"tag":106,"props":1369,"children":1370},{"class":108,"line":109},[1371],{"type":55,"tag":106,"props":1372,"children":1373},{},[1374],{"type":61,"value":1375},"\u002F\u002F MainPage.xaml.cs\n",{"type":55,"tag":106,"props":1377,"children":1378},{"class":108,"line":118},[1379],{"type":55,"tag":106,"props":1380,"children":1381},{},[1382],{"type":61,"value":1383},"public static Visibility BoolToVisibility(bool v) => v ? Visibility.Visible : Visibility.Collapsed;\n",{"type":55,"tag":106,"props":1385,"children":1386},{"class":108,"line":127},[1387],{"type":55,"tag":106,"props":1388,"children":1389},{},[1390],{"type":61,"value":1391},"public static Visibility InvertBoolToVisibility(bool v) => v ? Visibility.Collapsed : Visibility.Visible;\n",{"type":55,"tag":106,"props":1393,"children":1394},{"class":108,"line":136},[1395],{"type":55,"tag":106,"props":1396,"children":1397},{},[1398],{"type":61,"value":1399},"public static bool Not(bool v) => !v;\n",{"type":55,"tag":95,"props":1401,"children":1403},{"className":1052,"code":1402,"language":1054,"meta":100,"style":100},"\u003CTextBlock Visibility=\"{x:Bind local:MainPage.BoolToVisibility(Vm.IsLoading), Mode=OneWay}\" \u002F>\n\u003CButton   IsEnabled=\"{x:Bind local:MainPage.Not(Vm.IsLoading), Mode=OneWay}\" \u002F>\n",[1404],{"type":55,"tag":70,"props":1405,"children":1406},{"__ignoreMap":100},[1407,1415],{"type":55,"tag":106,"props":1408,"children":1409},{"class":108,"line":109},[1410],{"type":55,"tag":106,"props":1411,"children":1412},{},[1413],{"type":61,"value":1414},"\u003CTextBlock Visibility=\"{x:Bind local:MainPage.BoolToVisibility(Vm.IsLoading), Mode=OneWay}\" \u002F>\n",{"type":55,"tag":106,"props":1416,"children":1417},{"class":108,"line":118},[1418],{"type":55,"tag":106,"props":1419,"children":1420},{},[1421],{"type":61,"value":1422},"\u003CButton   IsEnabled=\"{x:Bind local:MainPage.Not(Vm.IsLoading), Mode=OneWay}\" \u002F>\n",{"type":55,"tag":1033,"props":1424,"children":1426},{"id":1425},"acrylic-and-themeshadow-rendering-rules",[1427,1429,1435],{"type":61,"value":1428},"Acrylic and ",{"type":55,"tag":70,"props":1430,"children":1432},{"className":1431},[],[1433],{"type":61,"value":1434},"ThemeShadow",{"type":61,"value":1436}," rendering rules",{"type":55,"tag":418,"props":1438,"children":1439},{},[1440,1490],{"type":55,"tag":422,"props":1441,"children":1442},{},[1443,1449,1450,1456,1458,1464,1466,1472,1474,1480,1482,1488],{"type":55,"tag":70,"props":1444,"children":1446},{"className":1445},[],[1447],{"type":61,"value":1448},"BackgroundSizing",{"type":61,"value":1043},{"type":55,"tag":70,"props":1451,"children":1453},{"className":1452},[],[1454],{"type":61,"value":1455},"InnerBorderEdge",{"type":61,"value":1457}," on both ",{"type":55,"tag":70,"props":1459,"children":1461},{"className":1460},[],[1462],{"type":61,"value":1463},"Border",{"type":61,"value":1465}," and ",{"type":55,"tag":70,"props":1467,"children":1469},{"className":1468},[],[1470],{"type":61,"value":1471},"Control",{"type":61,"value":1473},", which correctly clips acrylic to the inner stroke. The hazard is the opposite of intuition: don't ",{"type":55,"tag":1475,"props":1476,"children":1477},"em",{},[1478],{"type":61,"value":1479},"change",{"type":61,"value":1481}," it to ",{"type":55,"tag":70,"props":1483,"children":1485},{"className":1484},[],[1486],{"type":61,"value":1487},"OuterBorderEdge",{"type":61,"value":1489}," on a bordered acrylic surface — that's what makes the material bleed past the stroke.",{"type":55,"tag":422,"props":1491,"children":1492},{},[1493,1498,1500,1506,1508,1514,1516,1522,1524,1530,1532,1538],{"type":55,"tag":70,"props":1494,"children":1496},{"className":1495},[],[1497],{"type":61,"value":1434},{"type":61,"value":1499}," casts a shadow from the caster's ",{"type":55,"tag":70,"props":1501,"children":1503},{"className":1502},[],[1504],{"type":61,"value":1505},"Translation",{"type":61,"value":1507}," Z. Microsoft's recommended elevations are ",{"type":55,"tag":70,"props":1509,"children":1511},{"className":1510},[],[1512],{"type":61,"value":1513},"16",{"type":61,"value":1515}," for tooltips, ",{"type":55,"tag":70,"props":1517,"children":1519},{"className":1518},[],[1520],{"type":61,"value":1521},"32",{"type":61,"value":1523}," for popup\u002Fflyout UI, ",{"type":55,"tag":70,"props":1525,"children":1527},{"className":1526},[],[1528],{"type":61,"value":1529},"128",{"type":61,"value":1531}," for dialogs — pick by surface type. For non-popup casters, add the surfaces it should land on to ",{"type":55,"tag":70,"props":1533,"children":1535},{"className":1534},[],[1536],{"type":61,"value":1537},"ThemeShadow.Receivers",{"type":61,"value":1539},"; otherwise the shadow has nothing to fall on and looks clipped.",{"type":55,"tag":56,"props":1541,"children":1543},{"id":1542},"theming-rules-short-version",[1544],{"type":61,"value":1545},"Theming rules (short version)",{"type":55,"tag":418,"props":1547,"children":1548},{},[1549,1597,1637,1657,1662],{"type":55,"tag":422,"props":1550,"children":1551},{},[1552,1558,1560,1565,1567,1573,1575,1581,1582,1588,1590,1596],{"type":55,"tag":70,"props":1553,"children":1555},{"className":1554},[],[1556],{"type":61,"value":1557},"{ThemeResource ...}",{"type":61,"value":1559}," at usage sites (updates on theme switch). ",{"type":55,"tag":70,"props":1561,"children":1563},{"className":1562},[],[1564],{"type":61,"value":1309},{"type":61,"value":1566}," inside ",{"type":55,"tag":70,"props":1568,"children":1570},{"className":1569},[],[1571],{"type":61,"value":1572},"ThemeDictionaries",{"type":61,"value":1574}," for theme-local definitions; ",{"type":55,"tag":70,"props":1576,"children":1578},{"className":1577},[],[1579],{"type":61,"value":1580},"SystemAccentColor",{"type":61,"value":232},{"type":55,"tag":70,"props":1583,"children":1585},{"className":1584},[],[1586],{"type":61,"value":1587},"SystemColor*",{"type":61,"value":1589}," are the exceptions and stay ",{"type":55,"tag":70,"props":1591,"children":1593},{"className":1592},[],[1594],{"type":61,"value":1595},"{ThemeResource}",{"type":61,"value":460},{"type":55,"tag":422,"props":1598,"children":1599},{},[1600,1602,1608,1610,1616,1617,1621,1622,1628,1630,1636],{"type":61,"value":1601},"Custom theme dictionaries cover ",{"type":55,"tag":70,"props":1603,"children":1605},{"className":1604},[],[1606],{"type":61,"value":1607},"Light",{"type":61,"value":1609},", ",{"type":55,"tag":70,"props":1611,"children":1613},{"className":1612},[],[1614],{"type":61,"value":1615},"Dark",{"type":61,"value":1609},{"type":55,"tag":87,"props":1618,"children":1619},{},[1620],{"type":61,"value":152},{"type":61,"value":371},{"type":55,"tag":70,"props":1623,"children":1625},{"className":1624},[],[1626],{"type":61,"value":1627},"HighContrast",{"type":61,"value":1629}," explicitly — never ",{"type":55,"tag":70,"props":1631,"children":1633},{"className":1632},[],[1634],{"type":61,"value":1635},"Default",{"type":61,"value":460},{"type":55,"tag":422,"props":1638,"children":1639},{},[1640,1642,1648,1649,1655],{"type":61,"value":1641},"Name resources by purpose (",{"type":55,"tag":70,"props":1643,"children":1645},{"className":1644},[],[1646],{"type":61,"value":1647},"CardBackgroundBrush",{"type":61,"value":1609},{"type":55,"tag":70,"props":1650,"children":1652},{"className":1651},[],[1653],{"type":61,"value":1654},"DangerTextBrush",{"type":61,"value":1656},"), not hue.",{"type":55,"tag":422,"props":1658,"children":1659},{},[1660],{"type":61,"value":1661},"Light\u002FDark working ≠ High Contrast working. Test in a Contrast theme separately.",{"type":55,"tag":422,"props":1663,"children":1664},{},[1665,1667,1673],{"type":61,"value":1666},"Never set ",{"type":55,"tag":70,"props":1668,"children":1670},{"className":1669},[],[1671],{"type":61,"value":1672},"HighContrastAdjustment=\"None\"",{"type":61,"value":1674}," unless your app already supplies system-aware brushes throughout.",{"type":55,"tag":56,"props":1676,"children":1678},{"id":1677},"anti-patterns",[1679],{"type":61,"value":1680},"Anti-patterns",{"type":55,"tag":174,"props":1682,"children":1683},{},[1684,1700],{"type":55,"tag":178,"props":1685,"children":1686},{},[1687],{"type":55,"tag":182,"props":1688,"children":1689},{},[1690,1695],{"type":55,"tag":186,"props":1691,"children":1692},{},[1693],{"type":61,"value":1694},"❌ Don't",{"type":55,"tag":186,"props":1696,"children":1697},{},[1698],{"type":61,"value":1699},"✅ Do instead",{"type":55,"tag":202,"props":1701,"children":1702},{},[1703,1723,1751,1771,1794,1807,1840,1870,1891,1904,1917,1948,1974],{"type":55,"tag":182,"props":1704,"children":1705},{},[1706,1718],{"type":55,"tag":209,"props":1707,"children":1708},{},[1709,1711,1716],{"type":61,"value":1710},"Reflexively build every app as ",{"type":55,"tag":70,"props":1712,"children":1714},{"className":1713},[],[1715],{"type":61,"value":222},{"type":61,"value":1717}," Left",{"type":55,"tag":209,"props":1719,"children":1720},{},[1721],{"type":61,"value":1722},"Pick the closest row in the silhouette table; hero \u002F document \u002F utility shapes are equally valid",{"type":55,"tag":182,"props":1724,"children":1725},{},[1726,1731],{"type":55,"tag":209,"props":1727,"children":1728},{},[1729],{"type":61,"value":1730},"Treat brand colour or tinted backdrop as off-pattern",{"type":55,"tag":209,"props":1732,"children":1733},{},[1734,1736,1741,1743,1749],{"type":61,"value":1735},"Overriding ",{"type":55,"tag":70,"props":1737,"children":1739},{"className":1738},[],[1740],{"type":61,"value":1580},{"type":61,"value":1742}," or using a tinted ",{"type":55,"tag":70,"props":1744,"children":1746},{"className":1745},[],[1747],{"type":61,"value":1748},"DesktopAcrylicBackdrop",{"type":61,"value":1750}," is how Microsoft's own first-party apps differentiate",{"type":55,"tag":182,"props":1752,"children":1753},{},[1754,1759],{"type":55,"tag":209,"props":1755,"children":1756},{},[1757],{"type":61,"value":1758},"Tiny content island on an oversized window",{"type":55,"tag":209,"props":1760,"children":1761},{},[1762,1764,1769],{"type":61,"value":1763},"Either size the window to the content (see ",{"type":55,"tag":1475,"props":1765,"children":1766},{},[1767],{"type":61,"value":1768},"Window sizing",{"type":61,"value":1770},") or let content fill the available space",{"type":55,"tag":182,"props":1772,"children":1773},{},[1774,1779],{"type":55,"tag":209,"props":1775,"children":1776},{},[1777],{"type":61,"value":1778},"Custom pill \u002F segmented tab switcher built by hand",{"type":55,"tag":209,"props":1780,"children":1781},{},[1782,1787,1789],{"type":55,"tag":70,"props":1783,"children":1785},{"className":1784},[],[1786],{"type":61,"value":222},{"type":61,"value":1788}," Top or ",{"type":55,"tag":70,"props":1790,"children":1792},{"className":1791},[],[1793],{"type":61,"value":458},{"type":55,"tag":182,"props":1795,"children":1796},{},[1797,1802],{"type":55,"tag":209,"props":1798,"children":1799},{},[1800],{"type":61,"value":1801},"Equal-width 50\u002F50 column split where one pane is structural",{"type":55,"tag":209,"props":1803,"children":1804},{},[1805],{"type":61,"value":1806},"Stable size for the structural pane, flexible for content — only if a structural pane is part of the silhouette at all",{"type":55,"tag":182,"props":1808,"children":1809},{},[1810,1830],{"type":55,"tag":209,"props":1811,"children":1812},{},[1813,1815,1821,1822,1828],{"type":61,"value":1814},"Hard-coded color literals (",{"type":55,"tag":70,"props":1816,"children":1818},{"className":1817},[],[1819],{"type":61,"value":1820},"#RRGGBB",{"type":61,"value":1609},{"type":55,"tag":70,"props":1823,"children":1825},{"className":1824},[],[1826],{"type":61,"value":1827},"White",{"type":61,"value":1829},")",{"type":55,"tag":209,"props":1831,"children":1832},{},[1833,1838],{"type":55,"tag":70,"props":1834,"children":1836},{"className":1835},[],[1837],{"type":61,"value":1595},{"type":61,"value":1839}," brushes by semantic name",{"type":55,"tag":182,"props":1841,"children":1842},{},[1843,1865],{"type":55,"tag":209,"props":1844,"children":1845},{},[1846,1852,1854,1859,1860],{"type":55,"tag":70,"props":1847,"children":1849},{"className":1848},[],[1850],{"type":61,"value":1851},"ScrollViewer",{"type":61,"value":1853}," wrapped around a ",{"type":55,"tag":70,"props":1855,"children":1857},{"className":1856},[],[1858],{"type":61,"value":292},{"type":61,"value":232},{"type":55,"tag":70,"props":1861,"children":1863},{"className":1862},[],[1864],{"type":61,"value":483},{"type":55,"tag":209,"props":1866,"children":1867},{},[1868],{"type":61,"value":1869},"The collection control already scrolls — give it a constrained height",{"type":55,"tag":182,"props":1871,"children":1872},{},[1873,1886],{"type":55,"tag":209,"props":1874,"children":1875},{},[1876,1878,1884],{"type":61,"value":1877},"Custom ",{"type":55,"tag":70,"props":1879,"children":1881},{"className":1880},[],[1882],{"type":61,"value":1883},"ControlTemplate",{"type":61,"value":1885}," for a standard control",{"type":55,"tag":209,"props":1887,"children":1888},{},[1889],{"type":61,"value":1890},"Built-in control + lightweight style overrides",{"type":55,"tag":182,"props":1892,"children":1893},{},[1894,1899],{"type":55,"tag":209,"props":1895,"children":1896},{},[1897],{"type":61,"value":1898},"Placeholder text used as the only field label",{"type":55,"tag":209,"props":1900,"children":1901},{},[1902],{"type":61,"value":1903},"Always provide a visible label",{"type":55,"tag":182,"props":1905,"children":1906},{},[1907,1912],{"type":55,"tag":209,"props":1908,"children":1909},{},[1910],{"type":61,"value":1911},"Required commands hidden at small widths with no route",{"type":55,"tag":209,"props":1913,"children":1914},{},[1915],{"type":61,"value":1916},"Overflow menu, secondary surface, or a responsive promotion rule",{"type":55,"tag":182,"props":1918,"children":1919},{},[1920,1932],{"type":55,"tag":209,"props":1921,"children":1922},{},[1923,1925,1930],{"type":61,"value":1924},"Modal ",{"type":55,"tag":70,"props":1926,"children":1928},{"className":1927},[],[1929],{"type":61,"value":660},{"type":61,"value":1931}," for non-blocking hints",{"type":55,"tag":209,"props":1933,"children":1934},{},[1935,1940,1941,1946],{"type":55,"tag":70,"props":1936,"children":1938},{"className":1937},[],[1939],{"type":61,"value":683},{"type":61,"value":1609},{"type":55,"tag":70,"props":1942,"children":1944},{"className":1943},[],[1945],{"type":61,"value":691},{"type":61,"value":1947},", or inline status",{"type":55,"tag":182,"props":1949,"children":1950},{},[1951,1956],{"type":55,"tag":209,"props":1952,"children":1953},{},[1954],{"type":61,"value":1955},"Destructive action (Delete \u002F Discard \u002F Reset) fired without confirmation",{"type":55,"tag":209,"props":1957,"children":1958},{},[1959,1964,1966,1972],{"type":55,"tag":70,"props":1960,"children":1962},{"className":1961},[],[1963],{"type":61,"value":660},{"type":61,"value":1965}," with verb-labelled primary action and ",{"type":55,"tag":70,"props":1967,"children":1969},{"className":1968},[],[1970],{"type":61,"value":1971},"Cancel",{"type":61,"value":1973}," secondary; surface item identity (name, count) in the body",{"type":55,"tag":182,"props":1975,"children":1976},{},[1977,1995],{"type":55,"tag":209,"props":1978,"children":1979},{},[1980,1982,1987,1988,1993],{"type":61,"value":1981},"Custom list control when ",{"type":55,"tag":70,"props":1983,"children":1985},{"className":1984},[],[1986],{"type":61,"value":292},{"type":61,"value":232},{"type":55,"tag":70,"props":1989,"children":1991},{"className":1990},[],[1992],{"type":61,"value":483},{"type":61,"value":1994}," fits",{"type":55,"tag":209,"props":1996,"children":1997},{},[1998],{"type":61,"value":1999},"Use the platform collection + virtualisation",{"type":55,"tag":64,"props":2001,"children":2002},{},[2003,2005,2010],{"type":61,"value":2004},"Build custom UI ",{"type":55,"tag":87,"props":2006,"children":2007},{},[2008],{"type":61,"value":2009},"only when all are true",{"type":61,"value":2011},": no platform\u002FGallery\u002FToolkit control fits; you'll implement keyboard, focus, UI Automation, theme resources, High Contrast, and responsive behaviour; you have specs for default\u002Fhover\u002Fpressed\u002Fdisabled\u002Fselected\u002Ffocused\u002Ferror states; you've tested with keyboard and a contrast theme.",{"type":55,"tag":56,"props":2013,"children":2015},{"id":2014},"references-load-on-demand",[2016],{"type":61,"value":2017},"References (load on demand)",{"type":55,"tag":174,"props":2019,"children":2020},{},[2021,2037],{"type":55,"tag":178,"props":2022,"children":2023},{},[2024],{"type":55,"tag":182,"props":2025,"children":2026},{},[2027,2032],{"type":55,"tag":186,"props":2028,"children":2029},{},[2030],{"type":61,"value":2031},"File",{"type":55,"tag":186,"props":2033,"children":2034},{},[2035],{"type":61,"value":2036},"Load when…",{"type":55,"tag":202,"props":2038,"children":2039},{},[2040,2094,2111],{"type":55,"tag":182,"props":2041,"children":2042},{},[2043,2052],{"type":55,"tag":209,"props":2044,"children":2045},{},[2046],{"type":55,"tag":70,"props":2047,"children":2049},{"className":2048},[],[2050],{"type":61,"value":2051},"references\u002Fbrushes-and-icons.md",{"type":55,"tag":209,"props":2053,"children":2054},{},[2055,2057,2063,2064,2070,2072,2078,2079,2085,2086,2092],{"type":61,"value":2056},"Looking up a brush key by purpose, picking between ",{"type":55,"tag":70,"props":2058,"children":2060},{"className":2059},[],[2061],{"type":61,"value":2062},"Icon",{"type":61,"value":232},{"type":55,"tag":70,"props":2065,"children":2067},{"className":2066},[],[2068],{"type":61,"value":2069},"IconSource",{"type":61,"value":2071}," slots, choosing among ",{"type":55,"tag":70,"props":2073,"children":2075},{"className":2074},[],[2076],{"type":61,"value":2077},"FontIcon",{"type":61,"value":232},{"type":55,"tag":70,"props":2080,"children":2082},{"className":2081},[],[2083],{"type":61,"value":2084},"SymbolIcon",{"type":61,"value":232},{"type":55,"tag":70,"props":2087,"children":2089},{"className":2088},[],[2090],{"type":61,"value":2091},"PathIcon",{"type":61,"value":2093}," \u002F etc.",{"type":55,"tag":182,"props":2095,"children":2096},{},[2097,2106],{"type":55,"tag":209,"props":2098,"children":2099},{},[2100],{"type":55,"tag":70,"props":2101,"children":2103},{"className":2102},[],[2104],{"type":61,"value":2105},"references\u002Ftheme-accessibility.md",{"type":55,"tag":209,"props":2107,"children":2108},{},[2109],{"type":61,"value":2110},"Authoring theme dictionaries, custom brushes\u002Fstyles\u002Ftemplates, or High Contrast support.",{"type":55,"tag":182,"props":2112,"children":2113},{},[2114,2123],{"type":55,"tag":209,"props":2115,"children":2116},{},[2117],{"type":55,"tag":70,"props":2118,"children":2120},{"className":2119},[],[2121],{"type":61,"value":2122},"references\u002Flayout-review.md",{"type":55,"tag":209,"props":2124,"children":2125},{},[2126],{"type":61,"value":2127},"Reviewing responsive behaviour, breakpoints, or empty\u002Floading\u002Ferror coverage on a data-driven page.",{"type":55,"tag":2129,"props":2130,"children":2131},"style",{},[2132],{"type":61,"value":2133},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2135,"total":2330},[2136,2158,2179,2200,2215,2232,2243,2256,2271,2286,2305,2318],{"slug":2137,"name":2137,"fn":2138,"description":2139,"org":2140,"tags":2141,"stars":2155,"repoUrl":2156,"updatedAt":2157},"rushstack-best-practices","manage Rush monorepos with best practices","Provides best practices and guidance for working with Rush monorepos. Use when the user is working in a Rush-based repository, asks about Rush commands (install, update, build, rebuild), needs help with project selection, dependency management, build caching, subspace configuration, or troubleshooting Rush-specific issues.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2142,2145,2148,2149,2152],{"name":2143,"slug":2144,"type":15},"Engineering","engineering",{"name":2146,"slug":2147,"type":15},"Local Development","local-development",{"name":9,"slug":8,"type":15},{"name":2150,"slug":2151,"type":15},"Project Management","project-management",{"name":2153,"slug":2154,"type":15},"Rush","rush",6484,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Frushstack","2026-04-06T18:34:44.965032",{"slug":2159,"name":2159,"fn":2160,"description":2161,"org":2162,"tags":2163,"stars":2176,"repoUrl":2177,"updatedAt":2178},"azure-ai-agents-persistent-dotnet","build AI agents with Azure .NET SDK","Azure AI Agents Persistent SDK for .NET. Low-level SDK for creating and managing AI agents with threads, messages, runs, and tools. Use for agent CRUD, conversation threads, streaming responses, function calling, file search, and code interpreter. Triggers: \"PersistentAgentsClient\", \"persistent agents\", \"agent threads\", \"agent runs\", \"streaming agents\", \"function calling agents .NET\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2164,2167,2170,2173],{"name":2165,"slug":2166,"type":15},".NET","net",{"name":2168,"slug":2169,"type":15},"Agents","agents",{"name":2171,"slug":2172,"type":15},"Azure","azure",{"name":2174,"slug":2175,"type":15},"LLM","llm",2804,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills","2026-07-03T16:32:10.297433",{"slug":2180,"name":2180,"fn":2181,"description":2182,"org":2183,"tags":2184,"stars":2176,"repoUrl":2177,"updatedAt":2199},"azure-ai-anomalydetector-java","build anomaly detection applications with Java","Build anomaly detection applications with Azure AI Anomaly Detector SDK for Java. Use when implementing univariate\u002Fmultivariate anomaly detection, time-series analysis, or AI-powered monitoring.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2185,2188,2189,2192,2195,2196],{"name":2186,"slug":2187,"type":15},"Analytics","analytics",{"name":2171,"slug":2172,"type":15},{"name":2190,"slug":2191,"type":15},"Data Analysis","data-analysis",{"name":2193,"slug":2194,"type":15},"Java","java",{"name":9,"slug":8,"type":15},{"name":2197,"slug":2198,"type":15},"Monitoring","monitoring","2026-05-13T06:14:16.261754",{"slug":2201,"name":2201,"fn":2202,"description":2203,"org":2204,"tags":2205,"stars":2176,"repoUrl":2177,"updatedAt":2214},"azure-ai-contentsafety-java","build content moderation applications with Azure AI","Build content moderation applications with Azure AI Content Safety SDK for Java. Use when implementing text\u002Fimage analysis, blocklist management, or harm detection for hate, violence, sexual content, and self-harm.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2206,2209,2210,2211],{"name":2207,"slug":2208,"type":15},"AI Infrastructure","ai-infrastructure",{"name":2171,"slug":2172,"type":15},{"name":2193,"slug":2194,"type":15},{"name":2212,"slug":2213,"type":15},"Security","security","2026-07-07T06:53:31.293235",{"slug":2216,"name":2216,"fn":2217,"description":2218,"org":2219,"tags":2220,"stars":2176,"repoUrl":2177,"updatedAt":2231},"azure-ai-contentsafety-py","detect harmful content with Azure AI Content Safety","Azure AI Content Safety SDK for Python. Use for detecting harmful content in text and images with multi-severity classification.\nTriggers: \"azure-ai-contentsafety\", \"ContentSafetyClient\", \"content moderation\", \"harmful content\", \"text analysis\", \"image analysis\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2221,2222,2225,2226,2227,2230],{"name":2171,"slug":2172,"type":15},{"name":2223,"slug":2224,"type":15},"Compliance","compliance",{"name":2174,"slug":2175,"type":15},{"name":9,"slug":8,"type":15},{"name":2228,"slug":2229,"type":15},"Python","python",{"name":2212,"slug":2213,"type":15},"2026-07-18T05:14:23.017504",{"slug":2233,"name":2233,"fn":2234,"description":2235,"org":2236,"tags":2237,"stars":2176,"repoUrl":2177,"updatedAt":2242},"azure-ai-language-conversations-py","implement conversational language understanding with Python","Implement Conversational Language Understanding (CLU) using the azure-ai-language-conversations Python SDK. Use when working with ConversationAnalysisClient to analyze conversation intent and entities, building NLP features, or integrating language understanding into applications.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2238,2239,2240,2241],{"name":2186,"slug":2187,"type":15},{"name":2171,"slug":2172,"type":15},{"name":2174,"slug":2175,"type":15},{"name":2228,"slug":2229,"type":15},"2026-07-31T05:54:29.068751",{"slug":2244,"name":2244,"fn":2245,"description":2246,"org":2247,"tags":2248,"stars":2176,"repoUrl":2177,"updatedAt":2255},"azure-ai-translation-text-py","translate text using Azure AI services","Azure AI Text Translation SDK for real-time text translation, transliteration, language detection, and dictionary lookup. Use for translating text content in applications.\nTriggers: \"text translation\", \"translator\", \"translate text\", \"transliterate\", \"TextTranslationClient\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2249,2252,2253,2254],{"name":2250,"slug":2251,"type":15},"API Development","api-development",{"name":2171,"slug":2172,"type":15},{"name":9,"slug":8,"type":15},{"name":2228,"slug":2229,"type":15},"2026-07-18T05:14:16.988376",{"slug":2257,"name":2257,"fn":2258,"description":2259,"org":2260,"tags":2261,"stars":2176,"repoUrl":2177,"updatedAt":2270},"azure-ai-vision-imageanalysis-py","analyze images with Azure AI Vision","Azure AI Vision Image Analysis SDK for captions, tags, objects, OCR, people detection, and smart cropping. Use for computer vision and image understanding tasks.\nTriggers: \"image analysis\", \"computer vision\", \"OCR\", \"object detection\", \"ImageAnalysisClient\", \"image caption\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2262,2263,2266,2269],{"name":2171,"slug":2172,"type":15},{"name":2264,"slug":2265,"type":15},"Computer Vision","computer-vision",{"name":2267,"slug":2268,"type":15},"Images","images",{"name":2228,"slug":2229,"type":15},"2026-07-18T05:14:18.007737",{"slug":2272,"name":2272,"fn":2273,"description":2274,"org":2275,"tags":2276,"stars":2176,"repoUrl":2177,"updatedAt":2285},"azure-appconfiguration-java","manage configuration with Azure App Configuration","Azure App Configuration SDK for Java. Centralized application configuration management with key-value settings, feature flags, and snapshots.\nTriggers: \"ConfigurationClient java\", \"app configuration java\", \"feature flag java\", \"configuration setting java\", \"azure config java\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2277,2278,2281,2284],{"name":2171,"slug":2172,"type":15},{"name":2279,"slug":2280,"type":15},"Configuration","configuration",{"name":2282,"slug":2283,"type":15},"Feature Flags","feature-flags",{"name":2193,"slug":2194,"type":15},"2026-07-03T16:32:01.278468",{"slug":2287,"name":2287,"fn":2288,"description":2289,"org":2290,"tags":2291,"stars":2176,"repoUrl":2177,"updatedAt":2304},"azure-cosmos-rust","build applications with Azure Cosmos DB","Azure Cosmos DB library for Rust (NoSQL API). Document CRUD, containers, and globally distributed data.\nTriggers: \"cosmos db rust\", \"CosmosClient rust\", \"document crud rust\", \"NoSQL rust\", \"partition key rust\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2292,2295,2298,2301],{"name":2293,"slug":2294,"type":15},"Cosmos DB","cosmos-db",{"name":2296,"slug":2297,"type":15},"Database","database",{"name":2299,"slug":2300,"type":15},"NoSQL","nosql",{"name":2302,"slug":2303,"type":15},"Rust","rust","2026-07-31T05:54:27.021432",{"slug":2306,"name":2306,"fn":2288,"description":2307,"org":2308,"tags":2309,"stars":2176,"repoUrl":2177,"updatedAt":2317},"azure-cosmos-ts","Azure Cosmos DB JavaScript\u002FTypeScript SDK (@azure\u002Fcosmos) for data plane operations. Use for CRUD operations on documents, queries, bulk operations, and container management. Triggers: \"Cosmos DB\", \"@azure\u002Fcosmos\", \"CosmosClient\", \"document CRUD\", \"NoSQL queries\", \"bulk operations\", \"partition key\", \"container.items\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2310,2311,2312,2313,2314],{"name":2293,"slug":2294,"type":15},{"name":2296,"slug":2297,"type":15},{"name":9,"slug":8,"type":15},{"name":2299,"slug":2300,"type":15},{"name":2315,"slug":2316,"type":15},"TypeScript","typescript","2026-07-03T16:31:19.368382",{"slug":2319,"name":2319,"fn":2320,"description":2321,"org":2322,"tags":2323,"stars":2176,"repoUrl":2177,"updatedAt":2329},"azure-data-tables-java","build table storage applications with Java","Build table storage applications with Azure Tables SDK for Java. Use when working with Azure Table Storage or Cosmos DB Table API for NoSQL key-value data, schemaless storage, or structured data at scale.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2324,2325,2326,2327,2328],{"name":2171,"slug":2172,"type":15},{"name":2293,"slug":2294,"type":15},{"name":2296,"slug":2297,"type":15},{"name":2193,"slug":2194,"type":15},{"name":2299,"slug":2300,"type":15},"2026-05-13T06:14:17.582229",267,{"items":2332,"total":118},[2333,2341],{"slug":4,"name":4,"fn":5,"description":6,"org":2334,"tags":2335,"stars":28,"repoUrl":29,"updatedAt":30},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2336,2337,2338,2339,2340],{"name":13,"slug":14,"type":15},{"name":26,"slug":27,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"name":23,"slug":24,"type":15},{"slug":2342,"name":2342,"fn":2343,"description":2344,"org":2345,"tags":2346,"stars":28,"repoUrl":29,"updatedAt":2352},"winui-wpf-migration","migrate WPF applications to WinUI 3","Migrate WPF applications to WinUI 3 — namespace replacement (System.Windows → Microsoft.UI.Xaml), control mapping (DataGrid→ListView, WrapPanel→ItemsRepeater, TabControl→TabView), threading (Dispatcher→DispatcherQueue), imaging (System.Drawing→BitmapImage), MVVM conversion to CommunityToolkit.Mvvm, and DynamicResource→ThemeResource. Use when converting WPF code, replacing WPF namespaces, or fixing migration build errors.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2347,2350,2351],{"name":2348,"slug":2349,"type":15},"Migration","migration",{"name":17,"slug":18,"type":15},{"name":23,"slug":24,"type":15},"2026-05-13T06:14:13.804392"]