winui-design

Guides WinUI 3 XAML design, control selection, theming, and accessibility decisions.

3|Updated Aug 8, 2026
One-click install
npx skills add https://github.com/Jose-Polanco-Oxte/Echos-Live-Music-Visualizer --skill winui-design-jose-polanco-oxte
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: winui-design
Source: https://github.com/Jose-Polanco-Oxte/Echos-Live-Music-Visualizer/tree/main/.agents/skills/winui/sub-skills/winui-design
Command: npx skills add https://github.com/Jose-Polanco-Oxte/Echos-Live-Music-Visualizer --skill winui-design-jose-polanco-oxte

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building WinUI 3 interfaces involves non-obvious pitfalls: missing DataGrid controls, x:Bind defaulting to OneTime, no SizeToContent window sizing, and High Contrast theming rules. This Skill provides decision tables, landmine warnings, and searchable code samples so XAML is written correctly the first time. ## Core Features & Use Cases - Control and layout mapping: Match app requirements to the right WinUI controls (NavigationView, TabView, ListView, ContentDialog) using app-shape anchors and a reach-for-this control map. - XAML landmine prevention: Covers x:Bind mode defaults, TextBox UpdateSourceTrigger, attached property setters, Converter={x:Null} crashes, and DPI-aware window sizing with GetDpiForWindow. - Theming and accessibility references: On-demand references for theme brushes, icon types, High Contrast dictionaries, and responsive layout review. - Use Case: When building a settings page for a Windows app, load this Skill to pick SettingsCard patterns, size the window correctly, bind the view model without silent OneTime bindings, and apply ThemeResource brushes that work in Light, Dark, and High Contrast. ## Quick Start Ask the assistant to design a WinUI 3 settings page with proper Fluent theming, correct x:Bind modes, and accessible controls.

Frequently Asked Questions about winui-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose the right WinUI 3 control for my layout?

Map the requirement to a platform control: NavigationView for 2-7 sections, TabView for documents, ListView for vertical lists, ComboBox for picking one from 4+ options. The Skill provides a control map and app-shape anchor table to short-circuit cross-framework instincts.

Why does my x:Bind binding never update in WinUI 3?

x:Bind defaults to OneTime mode, so the UI never refreshes when the view model changes. Add Mode=OneWay explicitly, and for TextBox two-way binding also set UpdateSourceTrigger=PropertyChanged since it defaults to LostFocus.

Does WinUI 3 have a DataGrid control?

WinUI 3 has no built-in DataGrid. Use a ListView with a Grid-based ItemTemplate and a header Grid above it. The CommunityToolkit DataGrid exists but its columns cannot use x:Bind, so it is not the default recommendation.

How do I size a WinUI 3 window correctly?

WinUI 3 has no SizeToContent, so call AppWindow.Resize in the MainWindow constructor. It takes physical pixels, so multiply your DIP dimensions by the DPI scale obtained via GetDpiForWindow, since XamlRoot.RasterizationScale is null in the constructor.

How do I support High Contrast themes in WinUI 3?

Only SystemColor*Brush resources are allowed inside a HighContrast theme dictionary, and never set Opacity on them. If platform brushes already work in contrast themes, leave the dictionary empty, and never set HighContrastAdjustment=None as a fix.