How to: Use Palette Resources

Jun 26, 2020
7 minutes to read

DevExpress themes allow you to use palette colors as resources in code. You can paint custom controls with the DevExpress Theme colors to make your application’s style consistent.

You can use each palette color as a Color (PaletteColorThemeKey) or a Brush (PaletteBrushThemeKey).

MainWindow.xaml

<ThemedWindow ...
    xmlns:dxt="http://schemas.devexpress.com/winfx/2008/xaml/themes">
    <Button Background="{dxi:ThemeResource {dxt:PaletteBrushThemeKey ResourceKey=Button.Background}}" 
    BorderBrush="{dxi:ThemeResource {dxt:PaletteBrushThemeKey ResourceKey=Border}}"  
    BorderThickness="1" />  
</ThemedWindow>

Example

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

<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>

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));
    }
}

<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>

<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.

Custom Control palette color binding

Note

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

Palette Color List

This section contains palette color names and values.

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

Office2019Black

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF444444
Backstage.Delimiter	#FF686868
Backstage.Editor.Background	#FF262626
Backstage.Focused	#FFB5B5B5
Backstage.Foreground	#FFFFFFFF
Backstage.HoverBackground	#FF444444
Backstage.SelectionBackground	#FF6A6A6A
Backstage.Window.Background	#FF0A0A0A
Border	#FF686868
Button.Background	#FF444444
Control.Background	#FF2D2D2D
Control.HoverBackground	#FF505050
Control.SelectionBackground	#FF6A6A6A
ControlLight.Background	#FF363636
ControlLight.Foreground	#FFDADADA
ControlLight.HoverBackground	#FF505050
ControlLight.HoverForeground	#FFFFFFFF
ControlLight.SelectionBackground	#FF6A6A6A
ControlLight.SelectionForeground	#FFFFFFFF
Custom.Blue	#FF99CCFF
Custom.Green	#FF99FF99
Custom.Red	#FFFF9999
Delimiter	#FF686868
Editor.Background	#FF444444
Editor.Delimiter	#FF686868
Focused	#FFB5B5B5
Foreground	#FFDADADA
ForegroundDark	#FF999999
HoverBackground	#FF505050
HoverBorder	#FF505050
HoverForeground	#FFFFFFFF
SelectionBackground	#FF6A6A6A
SelectionBorder	#FF6A6A6A
SelectionForeground	#FFFFFFFF
Window.Background	#FF262626
Window.CloseButton.HoverBackground	#FFE81123
Window.CloseButton.SelectionBackground	#FFF1707A
Window.HeaderButton.HoverBackground	#FF444444
Window.HeaderButton.SelectionBackground	#FF969696

Office2019Colorful

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF015C9F
Backstage.Delimiter	#FF2A8DD4
Backstage.Editor.Background	#FF015C9F
Backstage.Focused	#FFFFFFFF
Backstage.Foreground	#FFFFFFFF
Backstage.HoverBackground	#FF2A8AD4
Backstage.SelectionBackground	#FF015C9F
Backstage.Window.Background	#FF0173C7
Border	#FFABABAB
Button.Background	#FFFDFDFD
Control.Background	#FFF0F0F0
Custom.Blue	#FF0026C1
Custom.Green	#FF00C126
Custom.Red	#FFC12600
Delimiter	#FFD5D5D5
Editor.Background	#FFFFFFFF
Focused	#FF0173C7
Foreground	#FF444444
HoverAltBackground	#FFCBCACA
HoverAltBorder	#FFCBCACA
HoverBackground	#FFE6F2FA
HoverBorder	#FFE6F2FA
HoverForeground	#FF444444
SelectionAltBackground	#FFBABAB9
SelectionAltBorder	#FFBABAB9
SelectionBackground	#FFCDE6F7
SelectionBorder	#FFCDE6F7
SelectionForeground	#FF444444
Window.Background	#FFF8F8F8

Office2019DarkGray

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF363636
Backstage.Delimiter	#FF666666
Backstage.Editor.Background	#FF363636
Backstage.Focused	#FFFFFFFF
Backstage.Foreground	#FFEFEFEF
Backstage.HoverBackground	#FF0072C6
Backstage.SelectionBackground	#FF0072C6
Backstage.Window.Background	#FF444444
Border	#FF444444
Button.Background	#FFD4D4D4
Control.Background	#FF605E5C
Control.HoverBackground	#FF484848
Control.SelectionBackground	#FF303030
ControlLight.Background	#FFBEBBB8
ControlLight.Foreground	#FF262626
ControlLight.HoverBackground	#FF989694
ControlLight.HoverForeground	#FF000000
ControlLight.SelectionBackground	#FF898785
ControlLight.SelectionForeground	#FF000000
Custom.Blue	#FF44AFE0
Custom.Green	#FF5EA600
Custom.Red	#FFFF4A11
Delimiter	#FF808080
Editor.Background	#FFD4D4D4
Editor.Delimiter	#FFC2C2C2
Focused	#FF0072C6
Foreground	#FFEFEFEF
ForegroundDark	#FFC2C2C2
HoverBackground	#FF484848
HoverBorder	#FF484848
HoverForeground	#FFEFEFEF
SelectionBackground	#FF444444
SelectionBorder	#FF444444
SelectionForeground	#FFEFEFEF
Window.Background	#FF605E5C
Window.CloseButton.HoverBackground	#FFE81123
Window.CloseButton.SelectionBackground	#FFF1707A
Window.HeaderButton.SelectionBackground	#FF303030

Office2019HighContrast

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF1AEBFF
Backstage.Delimiter	#FFFFFFFF
Backstage.Editor.Background	#FF1AEBFF
Backstage.Focused	#FFFFFFFF
Backstage.Foreground	#FFFFFFFF
Backstage.HoverBackground	#FF1AEBFF
Backstage.SelectionBackground	#FF1AEBFF
Backstage.Window.Background	#FF37006E
Border	#FFFFFFFF
Button.Background	#FF000000
Control.Background	#FF000000
Custom.Blue	#FF007FFF
Custom.Green	#FFB5EEB5
Custom.Red	#FFFF0000
Delimiter	#FFFFFFFF
Editor.Background	#FF000000
Focused	#FF1AEBFF
Foreground	#FFFFFFFF
HoverBackground	#FF1AEBFF
HoverBorder	#FF1AEBFF
HoverForeground	#FF000000
SelectionBackground	#FF1AEBFF
SelectionBorder	#FF1AEBFF
SelectionForeground	#FF000000
Window.Background	#FF000000

Office2019White

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF106EBE
Backstage.Delimiter	#FF2A8DD4
Backstage.Editor.Background	#FF106EBE
Backstage.Focused	#FFFFFFFF
Backstage.Foreground	#FFFFFFFF
Backstage.HoverBackground	#FF005A9E
Backstage.SelectionBackground	#FF004578
Backstage.Window.Background	#FF106EBE
Border	#FFC8C6C4
Button.Background	#FFFCFCFC
Control.Background	#FFFFFFFF
Custom.Blue	#FF0026C1
Custom.Green	#FF00C126
Custom.Red	#FFC12600
Delimiter	#FFE1DFDD
Editor.Background	#FFFFFFFF
Focused	#FF106EBE
Foreground	#FF444444
HoverBackground	#FFEFF6FC
HoverBorder	#FFEFF6FC
HoverForeground	#FF106EBE
SelectionBackground	#FFDEECF9
SelectionBorder	#FFDEECF9
SelectionForeground	#FF106EBE
Window.Background	#FFFFFFFF

VS2019Blue

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF40568D
Backstage.Delimiter	#FF5B7199
Backstage.Editor.Background	#FF40568D
Backstage.Focused	#FFF5CC84
Backstage.Foreground	#FFFFFFFF
Backstage.HoverBackground	#FFBBC6F1
Backstage.SelectionBackground	#FFF5CC84
Backstage.Window.Background	#FF5D6B99
Border	#FF8E9BBC
Button.Background	#FFF2F5FC
Control.Background	#FFE9EEFF
Custom.Blue	#FF0026C1
Custom.Green	#FF00C126
Custom.Red	#FFC12600
Delimiter	#FFBFC3D9
Editor.Background	#FFFFFFFF
Focused	#FFF5CC84
Foreground	#FF1E1E1E
HoverBackground	#FFFBE0B3
HoverBorder	#FFE5C365
HoverForeground	#FF1E1E1E
SelectionBackground	#FFFCD89F
SelectionBorder	#FFE5C365
SelectionForeground	#FF1E1E1E
Window.Background	#FFE9EEFF
Window.CloseButton.HoverBackground	#FFFBE0B3
Window.CloseButton.SelectionBackground	#FFFCD89F
Window.HeaderButton.HoverBackground	#FFFBE0B3
Window.HeaderButton.SelectionBackground	#FFFCD89F

VS2019Dark

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF118EDA
Backstage.Delimiter	#FF118EDA
Backstage.Editor.Background	#FF006EB7
Backstage.Focused	#FFFFFFFF
Backstage.Foreground	#FFFFFFFF
Backstage.HoverBackground	#FF1C97EA
Backstage.SelectionBackground	#FF005E9F
Backstage.Window.Background	#FF007ACC
Border	#FF3F3F46
Button.Background	#FF333337
Control.Background	#FF252526
Custom.Blue	#FFADD8E6
Custom.Green	#FF90EE90
Custom.Red	#FFFFB6C1
Delimiter	#FF3F3F46
Editor.Background	#FF333337
Focused	#FF007ACC
Foreground	#FFF1F1F1
Glyph	#FF92929B
HoverBackground	#FF3E3E40
HoverBorder	#FF3E3E40
HoverForeground	#FFFFFFFF
SelectionBackground	#FF007ACC
SelectionBorder	#FF007ACC
SelectionForeground	#FFFFFFFF
Window.Background	#FF2D2D30

VS2019Light

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF118EDA
Backstage.Delimiter	#FF118EDA
Backstage.Editor.Background	#FF006EB7
Backstage.Focused	#FFFFFFFF
Backstage.Foreground	#FFFFFFFF
Backstage.HoverBackground	#FF2E98E0
Backstage.SelectionBackground	#FF005E9F
Backstage.Window.Background	#FF007ACC
Border	#FFCCCEDB
Button.Background	#FFF5F5F7
Control.Background	#FFF5F5F7
Custom.Blue	#FF0026C1
Custom.Green	#FF00C126
Custom.Red	#FFC12600
Delimiter	#FFCCCEDB
Editor.Background	#FFFFFFFF
Focused	#FF007ACC
Foreground	#FF1E1E1E
HoverBackground	#FFC9DEF5
HoverBorder	#FFC9DEF5
HoverForeground	#FF1E1E1E
SelectionBackground	#FF007ACC
SelectionBorder	#FF007ACC
SelectionForeground	#FFFFFFFF
Window.Background	#FFEEEEF2

VS2017Blue

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF4D6082
Backstage.Delimiter	#FF5B7199
Backstage.Editor.Background	#FF364E6F
Backstage.Focused	#FFFFFFFF
Backstage.Foreground	#FFFFFFFF
Backstage.HoverBackground	#FF5B7199
Backstage.SelectionBackground	#FF4D6082
Backstage.Window.Background	#FF293955
Border	#FF8E9BBC
Button.Background	#FFDCE0EC
Control.Background	#FFCFD6E5
Custom.Blue	#FF0026C1
Custom.Green	#FF00C126
Custom.Red	#FFC12600
Delimiter	#FFBDC5D8
Editor.Background	#FFFFFFFF
Focused	#FFE5C365
Foreground	#FF1E1E1E
HoverBackground	#FFFDF4BF
HoverBorder	#FFE5C365
HoverForeground	#FF1E1E1E
SelectionBackground	#FFFFF29D
SelectionBorder	#FFE5C365
SelectionForeground	#FF1E1E1E
Window.Background	#FFD6DBE9
Window.CloseButton.HoverBackground	#FFFDF4BF
Window.CloseButton.SelectionBackground	#FFFFF29D
Window.HeaderButton.HoverBackground	#FFFDF4BF
Window.HeaderButton.SelectionBackground	#FFFFF29D

VS2017Dark

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF118EDA
Backstage.Delimiter	#FF118EDA
Backstage.Editor.Background	#FF006EB7
Backstage.Focused	#FFFFFFFF
Backstage.Foreground	#FFFFFFFF
Backstage.HoverBackground	#FF1C97EA
Backstage.SelectionBackground	#FF005E9F
Backstage.Window.Background	#FF007ACC
Border	#FF3F3F46
Button.Background	#FF333337
Control.Background	#FF252526
Custom.Blue	#FFADD8E6
Custom.Green	#FF90EE90
Custom.Red	#FFFFB6C1
Glyph	#FF92929B
Delimiter	#FF3F3F46
Editor.Background	#FF333337
Focused	#FF007ACC
Foreground	#FFF1F1F1
HoverBackground	#FF3E3E40
HoverBorder	#FF3E3E40
HoverForeground	#FFFFFFFF
SelectionBackground	#FF007ACC
SelectionBorder	#FF007ACC
SelectionForeground	#FFFFFFFF
Window.Background	#FF2D2D30

VS2017Light

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF118EDA
Backstage.Delimiter	#FF118EDA
Backstage.Editor.Background	#FF006EB7
Backstage.Focused	#FFFFFFFF
Backstage.Foreground	#FFFFFFFF
Backstage.HoverBackground	#FF2E98E0
Backstage.SelectionBackground	#FF005E9F
Backstage.Window.Background	#FF007ACC
Border	#FFCCCEDB
Button.Background	#FFF5F5F7
Control.Background	#FFF5F5F7
Custom.Blue	#FF0026C1
Custom.Green	#FF00C126
Custom.Red	#FFC12600
Delimiter	#FFCCCEDB
Editor.Background	#FFFFFFFF
Focused	#FF007ACC
Foreground	#FF1E1E1E
HoverBackground	#FFC9DEF5
HoverBorder	#FFC9DEF5
HoverForeground	#FF1E1E1E
SelectionBackground	#FF007ACC
SelectionBorder	#FF007ACC
SelectionForeground	#FFFFFFFF
Window.Background	#FFEEEEF2

Office2016BlackSE

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF444444
Backstage.Delimiter	#FF686868
Backstage.Editor.Background	#FF262626
Backstage.Focused	#FFB5B5B5
Backstage.Foreground	#FFFFFFFF
Backstage.HoverBackground	#FF444444
Backstage.SelectionBackground	#FF6A6A6A
Backstage.Window.Background	#FF0A0A0A
Border	#FF686868
Button.Background	#FF444444
Control.Background	#FF2D2D2D
Control.HoverBackground	#FF505050
Control.SelectionBackground	#FF6A6A6A
ControlLight.Background	#FF363636
ControlLight.Foreground	#FFDADADA
ControlLight.HoverBackground	#FF505050
ControlLight.HoverForeground	#FFFFFFFF
ControlLight.SelectionBackground	#FF6A6A6A
ControlLight.SelectionForeground	#FFFFFFFF
Custom.Blue	#FF99CCFF
Custom.Green	#FF99FF99
Custom.Red	#FFFF9999
Delimiter	#FF686868
Editor.Background	#FF444444
Editor.Delimiter	#FF686868
Focused	#FFB5B5B5
Foreground	#FFDADADA
ForegroundDark	#FF999999
HoverBackground	#FF505050
HoverBorder	#FF505050
HoverForeground	#FFFFFFFF
SelectionBackground	#FF6A6A6A
SelectionBorder	#FF6A6A6A
SelectionForeground	#FFFFFFFF
Window.Background	#FF262626
Window.CloseButton.HoverBackground	#FFE81123
Window.CloseButton.SelectionBackground	#FFF1707A
Window.HeaderButton.HoverBackground	#FF444444
Window.HeaderButton.SelectionBackground	#FF969696

Office2016ColorfulSE

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF015C9F
Backstage.Delimiter	#FF2A8DD4
Backstage.Editor.Background	#FF015C9F
Backstage.Focused	#FFFFFFFF
Backstage.Foreground	#FFFFFFFF
Backstage.HoverBackground	#FF2A8AD4
Backstage.SelectionBackground	#FF015C9F
Backstage.Window.Background	#FF0173C7
Border	#FFABABAB
Button.Background	#FFFDFDFD
Control.Background	#FFF0F0F0
Custom.Blue	#FF0026C1
Custom.Green	#FF00C126
Custom.Red	#FFC12600
Delimiter	#FFD5D5D5
Editor.Background	#FFFFFFFF
Focused	#FF0173C7
Foreground	#FF444444
HoverBackground	#FFC5C5C5
HoverBorder	#FFC5C5C5
HoverForeground	#FF444444
SelectionBackground	#FFAEAEAE
SelectionBorder	#FFAEAEAE
SelectionForeground	#FF444444
Window.Background	#FFE6E6E6
Window.CloseButton.HoverBackground	#FFE81123
Window.CloseButton.SelectionBackground	#FFF1707A
Window.HeaderButton.HoverBackground	#FF2A8AD4
Window.HeaderButton.SelectionBackground	#FF015C9F

Office2016DarkGraySE

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF363636
Backstage.Delimiter	#FF666666
Backstage.Editor.Background	#FF363636
Backstage.Focused	#FFFFFFFF
Backstage.Foreground	#FFEFEFEF
Backstage.HoverBackground	#FF575757
Backstage.SelectionBackground	#FF303030
Backstage.Window.Background	#FF444444
Border	#FF444444
Button.Background	#FFD4D4D4
Control.Background	#FF595959
Control.HoverBackground	#FF484848
Control.SelectionBackground	#FF303030
ControlLight.Background	#FFB2B2B2
ControlLight.Foreground	#FF262626
ControlLight.HoverBackground	#FF969696
ControlLight.HoverForeground	#FF000000
ControlLight.SelectionBackground	#FF868686
ControlLight.SelectionForeground	#FF000000
Custom.Blue	#FF44AFE0
Custom.Green	#FF5EA600
Custom.Red	#FFFF4A11
Delimiter	#FF808080
Editor.Background	#FFD4D4D4
Editor.Delimiter	#FFC2C2C2
Focused	#FF000000
Foreground	#FFEFEFEF
ForegroundDark	#FFC2C2C2
HoverBackground	#FF575757
HoverBorder	#FF575757
HoverForeground	#FFEFEFEF
SelectionBackground	#FF444444
SelectionBorder	#FF444444
SelectionForeground	#FFEFEFEF
Window.Background	#FF666666
Window.CloseButton.HoverBackground	#FFE81123
Window.CloseButton.SelectionBackground	#FFF1707A
Window.HeaderButton.HoverBackground	#FF575757
Window.HeaderButton.SelectionBackground	#FF303030

Office2016WhiteSE

Show palette colors

Color Name	Color Value
Backstage.Button.Background	#FF1664A7
Backstage.Delimiter	#FF2A8DD4
Backstage.Editor.Background	#FF1664A7
Backstage.Focused	#FFFFFFFF
Backstage.Foreground	#FFFFFFFF
Backstage.HoverBackground	#FF2A8DD4
Backstage.SelectionBackground	#FF1664A7
Backstage.Window.Background	#FF0072C6
Border	#FFD4D4D4
Button.Background	#FFFCFCFC
Control.Background	#FFFFFFFF
Custom.Blue	#FF0026C1
Custom.Green	#FF00C126
Custom.Red	#FFC12600
Delimiter	#FFE1E1E1
Editor.Background	#FFFFFFFF
Focused	#FF0072C6
Foreground	#FF444444
HoverBackground	#FFCDE6F7
HoverBorder	#FFCDE6F7
HoverForeground	#FF0072C6
SelectionBackground	#FF92C0E0
SelectionBorder	#FF92C0E0
SelectionForeground	#FF0072C6
Window.Background	#FFFFFFFF

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Example

Palette Color List

Office2019Black

Office2019Colorful

Office2019DarkGray

Office2019HighContrast

Office2019White

VS2019Blue

VS2019Dark

VS2019Light

VS2017Blue

VS2017Dark

VS2017Light

Office2016BlackSE

Office2016ColorfulSE

Office2016DarkGraySE

Office2016WhiteSE