# 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

- Skill: `majiayu000/wpf-styling` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/wpf-styling`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/wpf-styling/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/wpf-styling

---


---
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

1. Identify the target style: base control style, derived variant, or template.
2. Check existing theme/typography resources before creating new ones.
3. Add/adjust styles in `Styles/*.xaml` and keep theme colors in `Themes/*.xaml`.
4. Keep view XAML clean by using keyed styles and implicit styles when safe.

## Style structure

- `Styles/Typography.xaml` for fonts, sizes, weights.
- `Styles/Controls.xaml` for base control styles.
- `Themes/Light.xaml` and `Themes/Dark.xaml` for brushes only.

## Control templates and visual states

- Use `VisualStateManager` only 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.md` for font scales and text styles.
- `references/control-styles.md` for base button/textbox/list styles.
- `references/theme-brushes.md` for Light/Dark resource keys.