XAML Code Writing - WPF CustomControl

XAML Code Writing - WPF CustomControl

A guide for using CustomControl and ResourceDictionary when writing XAML code in WPF.

Project Structure

The templates folder contains a WPF project example (use latest .NET per version mapping).

templates/
├── WpfCustomControlSample.Controls/        ← WPF Custom Control Library
│   ├── Properties/
│   │   └── AssemblyInfo.cs
│   ├── Themes/
│   │   ├── Generic.xaml                    ← MergedDictionaries hub
│   │   └── CustomButton.xaml               ← Individual control style
│   ├── CustomButton.cs
│   ├── GlobalUsings.cs
│   └── WpfCustomControlSample.Controls.csproj
└── WpfCustomControlSample.App/             ← WPF Application
    ├── Views/
    │   ├── MainWindow.xaml
    │   └── MainWindow.xaml.cs
    ├── App.xaml
    ├── App.xaml.cs
    ├── GlobalUsings.cs
    └── WpfCustomControlSample.App.csproj

Basic Principles

When generating XAML code, use CustomControl with Stand-Alone Control Style Resource through ResourceDictionary

Purpose: Fix the timing of StaticResource loading and minimize style dependencies

WPF Custom Control Library Project Structure

Default Structure When Creating Project

YourProject/
├── Dependencies/
├── Themes/
│   └── Generic.xaml
├── AssemblyInfo.cs
└── CustomControl1.cs

Restructure to Recommended Project Structure

YourProject/
├── Dependencies/
├── Properties/
│   └── AssemblyInfo.cs          ← Moved
├── Themes/
│   ├── Generic.xaml             ← Use as MergedDictionaries hub
│   ├── CustomButton.xaml        ← Individual control style
│   └── CustomTextBox.xaml       ← Individual control style
├── CustomButton.cs
└── CustomTextBox.cs

Step-by-Step Setup

1. Create Properties Folder and Configure AssemblyInfo.cs

• Create Properties folder in the project
• Move AssemblyInfo.cs to the Properties folder
• Configure ThemeInfo attribute → See /configuring-wpf-themeinfo

2. Configure Generic.xaml - Use as MergedDictionaries Hub

Generic.xaml does not define styles directly; it only performs the role of merging individual ResourceDictionaries:

<!-- Themes/Generic.xaml -->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/YourProjectName;component/Themes/CustomButton.xaml" />
        <ResourceDictionary Source="/YourProjectName;component/Themes/CustomTextBox.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

3. Define Individual Control Styles

Define styles in independent XAML files for each control:

<!-- Themes/CustomButton.xaml -->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:YourNamespace">

    <!-- Control-specific resource definitions -->
    <SolidColorBrush x:Key="ButtonBackground" Color="#FF2D5460" />
    <SolidColorBrush x:Key="ButtonBackground_MouseOver" Color="#FF1D5460" />
    <SolidColorBrush x:Key="ButtonForeground" Color="#FFFFFFFF" />

    <!-- Control style definition -->
    <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}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <ContentPresenter HorizontalAlignment="Center"
                                        VerticalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background"
                                    Value="{StaticResource ButtonBackground_MouseOver}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Real Project Example

Generic.xaml Example

<!-- Themes/Generic.xaml -->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/GameDataTool.Controls.Popup;component/Themes/GdtBranchSelectionPopup.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Individual Control Style Example

<!-- Themes/GdtBranchSelectionPopup.xaml -->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:GameDataTool.Controls.Popup"
                    xmlns:ui="clr-namespace:GameDataTool.Controls.GdtCore.UI;assembly=GameDataTool.Controls.GdtCore"
                    xmlns:unit="clr-namespace:GameDataTool.Controls.GdtUnits;assembly=GameDataTool.Controls.GdtUnits">

    <SolidColorBrush x:Key="ApplyButtonBackground" Color="{DynamicResource Theme_PopupConfirmButtonColor}" />
    <SolidColorBrush x:Key="ApplyButtonBackground_MouseOver" Color="#FF1D5460" />
    <SolidColorBrush x:Key="ApplyButtonForeground" Color="{DynamicResource Theme_PopupConfirmButtonTextColor}" />
    <SolidColorBrush x:Key="CancelButtonBackground" Color="#FFE8EBED" />
    <SolidColorBrush x:Key="CancelButtonBackground_MouseOver" Color="#FFC9CDD2" />
    <SolidColorBrush x:Key="CancelButtonForeground" Color="#FF323334" />

    <Style TargetType="{x:Type local:GdtBranchSelectionPopup}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:GdtBranchSelectionPopup}">
                    <Border Width="{DynamicResource BranchSelectionPopupWidthSize}"
                            Height="{DynamicResource BranchSelectionPopupHeightSize}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid>
                            <!-- Control content -->
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Advantages

• Each control's style is separated into independent files for easier management
• Generic.xaml simply performs a merging role, making the structure clear
• StaticResource reference timing is clear and dependencies are minimized
• Work can be split by file for team collaboration