wpf-styling
Define and evolve WPF XAML styling for the widget host app: control styles, templates, visual states, typography, and theme variants. Use when working in `App.xaml`, theme dictionaries, `Styles/*.xaml`, or control templates to achieve the Fluent-inspired design system with Light/Dark themes.
Installation
Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.
View source ↗GuidesSkill instructions
Wpf Styling
Overview
Standardize WPF styling and theming so views stay lean and visuals remain consistent across the shell and widget windows.
Constraints
- Native WPF styles/templates (no WinUI/Windows App SDK)
- Fluent-inspired design system
- Light/Dark themes via ResourceDictionaries
- .NET 8 app
Definition of done (DoD)
- No hardcoded colors in view XAML (use theme brushes)
- New controls use existing base styles or extend them
- Typography uses defined text styles (Body, Title, Caption)
- Both Light and Dark themes tested visually
- Styles organized: typography in Typography.xaml, controls in Controls.xaml, colors in Themes/*.xaml
Workflow
- Identify the target style: base control style, derived variant, or template.
- Check existing theme/typography resources before creating new ones.
- Add/adjust styles in
Styles/*.xamland keep theme colors inThemes/*.xaml. - Keep view XAML clean by using keyed styles and implicit styles when safe.
Style structure
-
Styles/Typography.xamlfor fonts, sizes, weights. -
Styles/Controls.xamlfor base control styles. -
Themes/Light.xamlandThemes/Dark.xamlfor brushes only.
Control templates and visual states
- Use
VisualStateManageronly when state transitions are needed. - Prefer triggers and setters for simple states.
- Keep templates small and parameterize via brushes and thickness resources.
Typography
- Define a small set of text styles (Body, Title, Caption).
- Apply styles via resource keys to avoid duplicating font settings.
References
-
references/typography.mdfor font scales and text styles. -
references/control-styles.mdfor base button/textbox/list styles. -
references/theme-brushes.mdfor Light/Dark resource keys.
Examples
Read the usage examples in the source repository.
View source ↗Source history
- Indexed on
- 2026-01-20
- Index updated
- 2026-01-26
- Branch
- main
Index and sync dates describe this directory. View the source repository for code history.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!