Paint a custom control

• Nov 21, 2018
• 2 minutes to read

Color Themes allow you to assign a color value to a name and then use this name as an individual/multiple elements’ color value. When you change the color value assigned to a name, the color of all the elements with this name changes to the newly assigned color.

Color themes allow you to use palette colors as resources in code. This feature allows you to paint custom controls with the DevExpress Theme colors to make application’s style consistent. You can find the theme resource keys in the following files:

DevExpressControlsInstallationPath\Components\Sources\DevExpress.Xpf.Themes\Theme_Name\Core\Core\Themes\Theme_Name\Palettes.xaml

DevExpressControlsInstallationPath\Components\Sources\DevExpress.Xpf.Themes\Theme_Name\Core\Core\Themes\Theme_Name\Palettes_Base.xaml

The following themes are available:

• Office2016BlackSE
• Office2016ColorfulSE
• Office2016DarkGraySE
• Office2016WhiteSE
• VS2017Blue
• VS2017Dark
• VS2017Light

The code example below demonstrates how to bind the VS2017Blue theme’s Border palette resource to a custom control’s BorderBrush property:

MainWindow.xaml

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:local="clr-namespace:WpfApp36"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApp36.MainWindow">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <local:CustomControl1 Grid.Row="0" Margin="5" Text="Custom control binding to a theme name"/>
    </Grid>
</Window>

CustomControls.cs

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

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

        public string Text {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }
        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), typeof(CustomControl1), new PropertyMetadata(null));
    }
}

CustomControl1_Resources.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:dxt="http://schemas.devexpress.com/winfx/2008/xaml/core/themekeys" 
                    xmlns:local="clr-namespace:WpfApp36">    
    <Style TargetType="{x:Type local:CustomControl1}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CustomControl1}">
                    <Border BorderBrush="{DynamicResource {dxt:PaletteBrushThemeKey ResourceKey=Border, ThemeName=VS2017Blue}}" BorderThickness="3">
                        <TextBlock Foreground="Black" HorizontalAlignment="Center" Text="{TemplateBinding Text}" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

App.xaml

<Application x:Class="WpfApp36.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/WPFApp36;component/CustomControl1_Resources.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Add the XPF.Core and VS2017Blue theme references to run this project.

The following image displays the application window:

Note

The complete sample project is available at https://github.com/DevExpress-Examples/Binding-Custom-Controls-to-a-Palette-Resource.