Search

PythonReactSEOPDF
GitHub Skill

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.

YosrBennagra☆ 1 Repository stars0 Repository forks

Installation

Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.

View source ↗Guides

Skill 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

  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.

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)

chat_bubble_outline

No comments yet. Be the first to share your thoughts!