WPF ControlTemplate Patterns

WPF ControlTemplate Patterns

All controls inherited from the Control class can completely redefine their visual structure through ControlTemplate.

1. Core Concepts

ControlTemplate vs Style

ControlTemplate Components

• TargetType: Control type to which the template applies
• TemplateBinding: Connection to TemplatedParent properties
• ContentPresenter: Specifies where Content property is rendered
• Triggers: State-based visual changes

---

2. Basic Implementation Patterns

2.1 Button ControlTemplate (XAML)

<ResourceDictionary xmlns="http://schemas.microsoft.com/​winfx/​2006/​xaml/​presentation"
                    xmlns:x="http://schemas.microsoft.com/​winfx/​2006/​xaml">

    <Style TargetType="{x:Type Button}" x:Key="RoundedButtonStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <!-- Visual structure definition -->
                    <Border x:Name="PART_Border"
                            CornerRadius="10"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}"
                            Padding="{TemplateBinding Padding}">

                        <!-- Content rendering location -->
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          RecognizesAccessKey="True"/>
                    </​Border>

                    <!-- State-based triggers -->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="PART_Border" Property="Background" Value="#E3F2FD"/>
                        </​Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="PART_Border" Property="Background" Value="#BBDEFB"/>
                        </​Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="PART_Border" Property="Opacity" Value="0.5"/>
                        </​Trigger>
                    </​ControlTemplate.Triggers>
                </​ControlTemplate>
            </​Setter.Value>
        </​Setter>

        <!-- Default property values -->
        <Setter Property="Background" Value="#2196F3"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Padding" Value="16,8"/>
        <Setter Property="Cursor" Value="Hand"/>
    </​Style>

</​ResourceDictionary>

2.2 Applying ControlTemplate in Code

namespace MyApp.Helpers;

using System.IO;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Markup;

public static class TemplateHelper
{
    /// <summary>
    /// Create ControlTemplate from XAML string
    /// </​summary>
    public static ControlTemplate CreateTemplate(string xaml)
    {
        using var stream = new MemoryStream(Encoding.UTF8.GetBytes(xaml));

        var context = new ParserContext();
        context.XmlnsDictionary.Add("", "http://schemas.microsoft.com/​winfx/​2006/​xaml/​presentation");
        context.XmlnsDictionary.Add("x", "http://schemas.microsoft.com/​winfx/​2006/​xaml");

        return (ControlTemplate)XamlReader.Load(stream, context);
    }
}

---

3. TemplateBinding vs Binding

3.1 TemplateBinding (Recommended)

<!-- Compile-time binding, one-way, better performance -->
<Border Background="{TemplateBinding Background}"/>

3.2 RelativeSource TemplatedParent (When Two-Way Needed)

<!-- Runtime binding, two-way possible, relatively slower -->
<Border Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"/>

Comparison

---

4. ContentPresenter Details

4.1 Key Properties

<ContentPresenter
    Content="{TemplateBinding Content}"
    ContentTemplate="{TemplateBinding ContentTemplate}"
    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
    ContentStringFormat="{TemplateBinding ContentStringFormat}"
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
    Margin="{TemplateBinding Padding}"
    RecognizesAccessKey="True"/>

4.2 RecognizesAccessKey

<!-- Enable button activation with Alt + underlined character -->
<Button Content="_Save"/>  <!-- Activate with Alt+S -->

---

5. Trigger Patterns

5.1 Property Trigger

<ControlTemplate.Triggers>
    <!-- Single property condition -->
    <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="PART_Border" Property="Background" Value="LightBlue"/>
    </​Trigger>
</​ControlTemplate.Triggers>

5.2 MultiTrigger

<ControlTemplate.Triggers>
    <!-- Multiple property conditions (AND) -->
    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsMouseOver" Value="True"/>
            <Condition Property="IsEnabled" Value="True"/>
        </​MultiTrigger.Conditions>
        <Setter TargetName="PART_Border" Property="Background" Value="LightGreen"/>
    </​MultiTrigger>
</​ControlTemplate.Triggers>

5.3 EventTrigger (Animation)

<ControlTemplate.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="PART_Border"
                                 Storyboard.TargetProperty="Opacity"
                                 To="0.8" Duration="0:0:0.2"/>
            </​Storyboard>
        </​BeginStoryboard>
    </​EventTrigger>
</​ControlTemplate.Triggers>

---

6. Practical Example: Toggle Button

<Style TargetType="{x:Type ToggleButton}" x:Key="SwitchToggleStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid>
                    <!-- Background track -->
                    <Border x:Name="PART_Track"
                            Width="50" Height="26"
                            CornerRadius="13"
                            Background="#E0E0E0"/>

                    <!-- Sliding thumb -->
                    <Border x:Name="PART_Thumb"
                            Width="22" Height="22"
                            CornerRadius="11"
                            Background="White"
                            HorizontalAlignment="Left"
                            Margin="2,0,0,0">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="1" BlurRadius="3" Opacity="0.3"/>
                        </​Border.Effect>
                    </​Border>
                </​Grid>

                <ControlTemplate.Triggers>
                    <!-- Checked state -->
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="PART_Track" Property="Background" Value="#4CAF50"/>
                        <Setter TargetName="PART_Thumb" Property="HorizontalAlignment" Value="Right"/>
                        <Setter TargetName="PART_Thumb" Property="Margin" Value="0,0,2,0"/>
                    </​Trigger>

                    <!-- Disabled state -->
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" Value="0.5"/>
                    </​Trigger>
                </​ControlTemplate.Triggers>
            </​ControlTemplate>
        </​Setter.Value>
    </​Setter>
</​Style>

---

7. PART_ Naming Convention

Used when code-behind in CustomControl needs to access specific elements:

<!-- Mark required elements with PART_ prefix -->
<Border x:Name="PART_Border"/>
<ContentPresenter x:Name="PART_ContentHost"/>
<Popup x:Name="PART_Popup"/>

// Find PART_ elements in OnApplyTemplate
public override void OnApplyTemplate()
{
    base.OnApplyTemplate();

    var border = GetTemplateChild("PART_Border") as Border;
    var popup = GetTemplateChild("PART_Popup") as Popup;
}

---

8. Checklist

• Specify TargetType
• Connect properties with TemplateBinding
• Set RecognizesAccessKey="True" on ContentPresenter
• Handle IsMouseOver, IsPressed, IsEnabled, IsFocused triggers
• Mark required elements with PART_ naming
• Specify default property values with Style's Setter

---

9. References

• ControlTemplate - Microsoft Docs
• Styling and Templating - Microsoft Docs