Themes

• Apr 30, 2019
• 3 minutes to read

Note

DevExpress WPF Themes Compete List of DevExpress WPF Themes

How to apply DevExpress Themes to an application

You can use the following approaches to apply DevExpress Themes to an application:

• Open the Smart Tag and select the Application Theme to apply a theme at design time.

  

• Add a theme name to the config file and call the ApplicationThemeHelper.UpdateApplicationThemeName method at the application startup.

  XAML

  <userSettings>
          <DXThemeManager>
              <setting name="ApplicationThemeName" serializeAs="String">
                  <value>VS2017Light</value>
              </setting>
          </DXThemeManager>
      </userSettings>
  

• Set the ApplicationThemeHelper.ApplicationThemeName property to a theme name in code at the application startup.

  C#

  public partial class App : Application {
      protected override void OnStartup(StartupEventArgs e) {
          DevExpress.Xpf.Core.ApplicationThemeHelper.ApplicationThemeName = 
              DevExpress.Xpf.Core.Theme.MetropolisLightName;
          base.OnStartup(e);
      }
  }
  

  VB.NET

  Class Application
      Protected Overrides Sub OnStartup(e As StartupEventArgs)
          DevExpress.Xpf.Core.ApplicationThemeHelper.ApplicationThemeName = _ 
              DevExpress.Xpf.Core.Theme.MetropolisLightName
          MyBase.OnStartup(e)
      End Sub 
  End Class
  

How to apply DevExpress Themes to a container

Use the attached ThemeManager.ThemeName property to apply a theme to a container and its child elements.

XAML

<Window ...
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    dx:ThemeManager.ThemeName="Office2016White">
    ...
</Window>

How to reset applied DevExpress Themes

Use the following approaches to disable a DevExpress theme:

Note

The base theme (DeepBlue) is used when you disable a theme.

• Click the button:

  

• Set the ApplicationThemeHelper.UseLegacyDefaultTheme property to true at the application startup.

  C#

  using DevExpress.Xpf.Core;
  ....
      public partial class App : Application {
          protected override void OnStartup(StartupEventArgs e) {
              ApplicationThemeHelper.UseLegacyDefaultTheme = true;
              base.OnStartup(e);
          }
      }
  

• Set a theme name to None in the config file.

  XAML

  <userSettings>
      <DXThemeManager>
          <setting name="ApplicationThemeName" serializeAs="String">
                  <value>None</value>
          </setting>
      </DXThemeManager>
  </userSettings>
  

• Set the ApplicationThemeHelper.ApplicationThemeName property to DevExpress.Xpf.Core.Theme.NoneName at application startup.

C#

using DevExpress.Xpf.Core;
....
    public partial class App : Application {
        protected override void OnStartup(StartupEventArgs e) {
            DevExpress.Xpf.Core.ApplicationThemeHelper.ApplicationThemeName = 
            DevExpress.Xpf.Core.Theme.NoneName;
            base.OnStartup(e);
        }
    }

VB.NET

Imports DevExpress.Xpf.Core

Public Partial Class App
    Inherits Application

    Protected Overrides Sub OnStartup(ByVal e As StartupEventArgs)
        DevExpress.Xpf.Core.ApplicationThemeHelper.ApplicationThemeName = DevExpress.Xpf.Core.Theme.NoneName
        MyBase.OnStartup(e)
    End Sub
End Class

How to reset applied DevExpress Themes to a container

Set the attached ThemeManager.ThemeName property to None to reset an applied theme to a container and its child elements.

XAML

<Window ...
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    dx:ThemeManager.ThemeName="None">
    ...
</Window>

Native Controls Support

DevExpress Themes allows you to paint native WPF controls. Apply a DevExpress Theme to your application to paint native WPF controls in the same style as DevExpress controls.

Show supported native WPF controls list

• System.Windows.Button
• System.Windows.CheckBox
• System.Windows.ComboBox
• System.Windows.ComboBoxItem
• System.Windows.Expander
• System.Windows.GridSplitter
• System.Windows.GroupBox
• System.Windows.Label
• System.Windows.ListBox
• System.Windows.ListBoxItem
• System.Windows.Page
• System.Windows.ProgressBar
• System.Windows.RadioButton
• System.Windows.Controls.Primitives.ScrollBar
• System.Windows.ScrollViewer
• System.Windows.Separator
• System.Windows.Slider
• System.Windows.TabControl
• System.Windows.TabItem
• System.Windows.TextBox
• System.Windows.Tooltip
• System.Windows.TreeView
• System.Windows.TreeViewItem

You can click the button to disable a native control’s theme:

Office Touch Themes

Append ‘;Touch’ to a theme name to apply a touch-friendly variation of the theme.

XAML

xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    dx:ThemeManager.ThemeName="Office2013;Touch"

The following touch-friendly themes are available:

• Touchline Dark
• Office2013
• Office2013DarkGray
• Office2013LightGray
• Office2016White
• Office2016Black
• Office2016Colorful
• Office2016DarkGraySE
• Office2016ColorfulSE
• Office2016BlackSE
• Office2016WhiteSE

Color Themes vs Classic Themes

In the Classic WPF Themes, you should specify elements’ colors individually when you need to set the color for multiple elements.

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. You can use the WPF Theme Designer tool to edit color themes.

DevExpress WPF Controls are shipped with the following color themes:

• Office 2016 SE themes:

  • Black
  • Colorful
  • Dark Gray
  • White

• Visual Studio 2017 themes:

  • Blue
  • Dark
  • Light