Winui Design

WinUI 3 Layout, Steuerelementauswahl, Theming und XAML-Binding Design-/Review-Anleitung

von microsoft · microsoft/win-dev-skills

Getestet · Funktioniert ★ 8.8/10

Winui Design — WinUI 3 Layout, Steuerelementauswahl, Theming und XAML-Binding Design-/Review-Anleitung

Was es kann

Ein Design- und Review-Skill für WinUI 3 (Windows App SDK): Er ordnet Anforderungen Plattform-Steuerelementen zu, wendet Fluent App-Shape-Silhouetten, eine Fenstergrößen-Rubrik, Light/Dark/High-Contrast Theming-Regeln an und fängt gängige XAML x:Bind Binding-Fallen ab. Wird ausgelöst beim Erstellen oder Überprüfen von WinUI 3 XAML, der Migration von Desktop/WPF UI zu WinUI oder der Wahl zwischen WinUI-Steuerelementen und -Mustern. Liefert ein gebündeltes winui-search.exe (nur Windows) zum Suchen von WinUI Gallery/Toolkit/Reactor Code-Beispielen sowie drei On-Demand-Referenzdateien.

Testbericht

SKILL.md unter plugins/winui/skills/winui-design/ gefunden; Frontmatter wird mit name+description geparst. Alle 3 referenzierten Dateien (references/brushes-and-icons.md, theme-accessibility.md, layout-review.md) stichprobenartig überprüft – HTTP 200 – plus winui-search.exe (HTTP 200, 7.9MB; `file` meldet PE32+ Windows-Konsolen-Binary, auf diesem macOS-Host nicht ausführbar, daher ist dieser Schritt nur Windows-spezifisch). Installation in einem sauberen temporären HOME überprüft: SKILL.md landet unter ~/.claude/skills/winui-design/SKILL.md. OUTPUT-Test: ein kleines „Rename File“ WinUI 3-Dienstprogramm (TextBox + Status + Button) zweimal geschrieben – Basislinie vs. Skill-folgend (beide im Scratchpad gespeichert). Die Befolgung des Bodys führte zu konkret besserem XAML: Es wurden zwei echte stille Fehler abgefangen, die die Basislinie enthielt – {x:Bind Vm.Status} ist standardmäßig OneTime, sodass der Status nie aktualisiert wird (Skill fügte Mode=OneWay hinzu), und eine TwoWay TextBox ohne UpdateSourceTrigger=PropertyChanged lässt die VM bis zum Fokusverlust veraltet – und wendete die Fenstergrößen-Rubrik mit einem DPI-korrekten AppWindow.Resize an (Basislinie beließ die überdimensionierte ~1024x768 Standardeinstellung), ersetzte ein fest codiertes „Gray“-Literal + Platzhalter als Beschriftung durch einen semantischen InfoBar-Status und eine sichtbare Beschriftung. winui-search.exe wurde NICHT ausgeführt (falsche Plattform); die Inline-Anleitung lieferte die Ausgabe ohne sie.

Getestet am: 2026-07-21 · Claude Code 2.x (agent harness)

Installation

git clone --depth 1 https://github.com/microsoft/win-dev-skills.git /tmp/winui-design-src
mkdir -p ~/.claude/skills
cp -R /tmp/winui-design-src/plugins/winui/skills/winui-design ~/.claude/skills/winui-design
# SKILL.md now at ~/.claude/skills/winui-design/SKILL.md
# Optional bundled tool: winui-search.exe is a Windows-only PE32+ binary (~7.9MB, .NET).
#   It runs ONLY on Windows (WinUI's real target platform); NOT usable on macOS/Linux.
#   The skill's design/review guidance works without it — the exe only adds sample lookups.
# Source for the binary is in the same repo at src/tools/winui-search if you want to build/inspect.
# Plugin-marketplace alternative: repo exposes .claude-plugin/marketplace.json (plugin name: winui).

Befehle & Beispiel-Prompts

/winui-designWinUI 3 Layout, Steuerelementauswahl, Theming und XAML-Binding Design-/Review-Anleitung

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

Review this XAML page against Fluent Design
Choose the right WinUI control for this layout
Fix dark theme contrast in this WinUI screen

Vollständiger Testbericht (Englisch) →