name: wpf-styling
description: 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.
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.