MSDN Documentation – .NET Framework 3.5

Creating a Custom WPF Control

This tutorial guides you through building a reusable custom control in WPF, targeting the .NET Framework 3.5. By the end you will have a fully functional ColorPicker control that you can drop into any WPF application.

Step 1 – Create the Project

Open Visual Studio, create a new WPF Custom Control Library project named WpfColorPicker.

dotnet new wpfclasslib -n WpfColorPicker -f net35

Step 2 – Define the Control Class

Add a new class called ColorPicker.cs that derives from Control. Register a SelectedColor dependency property.

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfColorPicker
{
    public class ColorPicker : Control
    {
        static ColorPicker()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ColorPicker),
                new FrameworkPropertyMetadata(typeof(ColorPicker)));
        }

        public static readonly DependencyProperty SelectedColorProperty =
            DependencyProperty.Register(
                nameof(SelectedColor),
                typeof(Color),
                typeof(ColorPicker),
                new FrameworkPropertyMetadata(Colors.Black));

        public Color SelectedColor
        {
            get => (Color)GetValue(SelectedColorProperty);
            set => SetValue(SelectedColorProperty, value);
        }
    }
}

Step 3 – Create the Default Style

In Themes/Generic.xaml define the visual tree for the control. This example uses a simple ComboBox of preset colors.

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

    <Style TargetType="{x:Type local:ColorPicker}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ColorPicker}">
                    <ComboBox SelectedItem="{Binding SelectedColor,
                                         RelativeSource={RelativeSource TemplatedParent},
                                         Mode=TwoWay}">
                        <ComboBoxItem Content="Black"   Tag="{x:Static SystemColors.BlackColor}" />
                        <ComboBoxItem Content="Red"     Tag="{x:Static SystemColors.RedColor}" />
                        <ComboBoxItem Content="Green"   Tag="{x:Static SystemColors.GreenColor}" />
                        <ComboBoxItem Content="Blue"    Tag="{x:Static SystemColors.BlueColor}" />
                        <ComboBoxItem Content="Yellow"  Tag="{x:Static SystemColors.YellowColor}" />
                    </ComboBox>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

Step 4 – Use the Control

Add a reference to the library in a WPF application and use the new ColorPicker control.

<Window x:Class="SampleApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cp="clr-namespace:WpfColorPicker;assembly=WpfColorPicker"
        Title="Color Picker Demo" Height="200" Width="300">
    <StackPanel Margin="20">
        <cp:ColorPicker SelectedColor="{Binding Path=Background.(SolidColorBrush.Color), 
                                         RelativeSource={RelativeSource AncestorType=Window}}" />
        <TextBlock Text="Select a color above to change the window background." 
                   Margin="0,20,0,0" TextWrapping="Wrap" />
    </StackPanel>
</Window>

Build the solution, run the sample application, and you should see the custom color picker affecting the window background.

Download the Sample

Click the button below to download a ZIP file containing the complete Visual Studio solution.