winui-patterns

majiayu000's avatarfrom majiayu000

WinUI 3 and XAML patterns for the Pomodoro Time Tracker. Activates when working with ViewModels, XAML pages, data binding, or UI components.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026
[Architecture Design]

When & Why to Use This Skill

This Claude skill provides a comprehensive set of WinUI 3 and XAML development patterns specifically tailored for building the Pomodoro Time Tracker. It enforces modern MVVM architecture, high-performance data binding practices, and proper Dependency Injection (DI) configurations to ensure code maintainability and application stability in the .NET ecosystem.

Use Cases

  • Implementing clean MVVM architecture by replacing traditional Value Converters with explicit ViewModel properties for better performance and readability.
  • Developing type-safe and compile-time checked UI components using WinUI 3's x:Bind syntax to reduce runtime binding errors.
  • Configuring service lifetimes and Dependency Injection (DI) for ViewModels and UI services within a Windows desktop application.
  • Standardizing XAML page setups and dialog handling, including critical requirements like XamlRoot initialization for ContentDialogs.
  • Preventing common WinUI 3 pitfalls such as improper async/await usage and incorrect ViewModel initialization sequences.
namewinui-patterns
descriptionWinUI 3 and XAML patterns for the Pomodoro Time Tracker. Activates when working with ViewModels, XAML pages, data binding, or UI components.

WinUI 3 Patterns Skill

Activates when: ViewModels, XAML, data binding, or UI components mentioned.

Shared WinUI Guidelines

@/.claude/prompts/winui/mvvm/no-value-converters.md @/.claude/prompts/winui/fundamentals/page-setup.md @/.claude/prompts/winui/mvvm/dialog-callbacks.md @/.claude/prompts/winui/mvvm/timer-pattern.md @~/.claude/prompts/dotnet/fundamentals/async-await.md

Project-Specific Conventions

CRITICAL: No Value Converters

// ❌ NEVER
Visibility="{x:Bind Converter={StaticResource BoolToVisibility}}"

// ✅ ALWAYS
public bool IsVisible => SomeCondition;
Visibility="{x:Bind ViewModel.IsVisible, Mode=OneWay}"

WinUI 3's x:Bind auto-converts bool to Visibility.

Always Use x:Bind

<!-- ✅ CORRECT - Compile-time checked -->
<TextBox Text="{x:Bind ViewModel.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

<!-- ❌ WRONG - Runtime binding -->
<TextBox Text="{Binding Name, Mode=TwoWay}" />

Binding Modes

Mode Use Case
OneTime Static data
OneWay Display-only
TwoWay User input

Key Namespaces

using PomodoroTimeTracker.ViewModels;
using PomodoroTimeTracker.Application.DTOs;
using PomodoroTimeTracker.Application.Interfaces;

DI Registration

// ViewModels - Transient (CRUD) or Singleton (Timers)
services.AddTransient<ClientDetailViewModel>();
services.AddSingleton<PomodoroViewModel>();

// UI Services - Singleton
services.AddSingleton<INavigationService, NavigationService>();
services.AddSingleton<IDialogService, DialogService>();

Common Mistakes to Avoid

  1. InitializeComponent before ViewModel - ViewModel must exist first
  2. Binding instead of x:Bind - Always use x:Bind
  3. async void - Only for framework handlers
  4. Value converters - Use explicit properties instead
  5. XamlRoot missing - ContentDialog requires XamlRoot = this.XamlRoot