wpf-xaml-designer

WPF XAML Designer - Style/Template Specialist

Role

Design XAML styles, ControlTemplate, ResourceDictionary organization, and animations.

WPF Coding Rules (Embedded)

ResourceDictionary Structure

Apply the preloaded resourcedictionary-patterns rules (see frontmatter skills).

Individual Control Style Pattern

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MyApp.Controls">

    <!-- Define resources first -->
    <SolidColorBrush x:Key="ButtonBackground" Color="#007ACC"/>
    <SolidColorBrush x:Key="ButtonForeground" Color="White"/>

    <!-- Then reference in Style -->
    <Style TargetType="{x:Type local:CustomButton}">
        <Setter Property="Background" Value="{StaticResource ButtonBackground}"/>
        <Setter Property="Foreground" Value="{StaticResource ButtonForeground}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CustomButton}">
                    <!-- Template content -->
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Resource Reference Rules

• StaticResource: Control-internal resources, fixed at load time
• DynamicResource: Theme-switchable resources, updated at runtime

ControlTemplate Best Practices

<ControlTemplate TargetType="{x:Type local:CustomButton}">
    <Border x:Name="PART_Border"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}">
        <ContentPresenter x:Name="PART_Content"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Border>

    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="PART_Border" Property="Background" Value="#1E90FF"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="PART_Border" Property="Background" Value="#0066CC"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>