From wpf-dev-pack
Customizes WPF control appearances using ControlTemplate, TemplateBinding, and ContentPresenter. For full visual redesigns, state-based feedback, or TemplatedParent bindings.
How this skill is triggered — by the user, by Claude, or both
Slash command
/wpf-dev-pack:customizing-controltemplatesonnetThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
All controls inherited from the Control class can completely redefine their visual structure through ControlTemplate.
All controls inherited from the Control class can completely redefine their visual structure through ControlTemplate.
| Aspect | Style | ControlTemplate |
|---|---|---|
| Role | Batch property value setting | Visual structure redefinition |
| Scope | Property changes only | Full appearance change possible |
| Target | All FrameworkElements | Control-derived classes only |
<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>
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);
}
}
<!-- Compile-time binding, one-way, better performance -->
<Border Background="{TemplateBinding Background}"/>
<!-- Runtime binding, two-way possible, relatively slower -->
<Border Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"/>
| Aspect | TemplateBinding | RelativeSource TemplatedParent |
|---|---|---|
| Direction | One-way (OneWay) | Two-way possible |
| Performance | Fast | Relatively slower |
| Converter | Not available | Available |
| Use case | Most cases | When two-way/converter needed |
<ContentPresenter
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"/>
<!-- Enable button activation with Alt + underlined character -->
<Button Content="_Save"/> <!-- Activate with Alt+S -->
<ControlTemplate.Triggers>
<!-- Single property condition -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Border" Property="Background" Value="LightBlue"/>
</Trigger>
</ControlTemplate.Triggers>
<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>
<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>
<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>
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;
}
npx claudepluginhub christian289/dotnet-with-claudecode --plugin wpf-dev-packDevelops WPF CustomControls using Parts and States Model best practices. Use for templatable controls with TemplatePart, TemplateVisualState, OnApplyTemplate, or VisualStateManager.
Provides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.