The requested page is not available for the requested platform. You are viewing the content for Default platform.

Use a Palette in an Application

  • 3 min to read

This topic describes how to export a palette from the Theme Designer and use it in your application. Palettes allow you to change an application's colors without a Theme Designer theme assembly.

Create a Theme and Change its Colors

Create a new theme. You should choose the theme you want to use in your application as the base theme. For example, select the Office2019Colorful theme as the base theme to use the Office2019Colorful theme in your application.

Note

Refer to the Get Started topic for more information on how to create a theme.

Change the palette colors. You can change theme's palette colors or import a predefined palette. Choose the palette from the Import drop-down list to apply the palette to the current theme.

Import a Predefined Palette

You can see changes to the palette in the Preview window:

Updated Palette Preview

Export a Palette from the Theme Designer

The Theme Designer can export your palette as a class (.cs file). To do this, click the Export ribbon button on the Palette tab.

Export Palette Ribbon Button

Show the exported .cs file content example

// The code sample below describes how to use the palette in an application. Refer to the Palettes topic (https://docs.devexpress.com/WPF/400728) for more information on how to use the palette in an application.

// ATTENTION! Add the DevExress.Xpf.Core.v*.dll and Mono.Cecil.dll references to the application.

using System.Windows.Media;
using DevExpress.Xpf.Core;

namespace CustomApp {
    public class App {
        static App() {
            var palette = new DevExpressThemePalette();
            var theme = Theme.CreateTheme(palette, Theme.Office2016ColorfulSE);
            Theme.RegisterTheme(theme);
            ApplicationThemeHelper.ApplicationThemeName = theme.Name;
        }
    }

    public class DevExpressThemePalette : ThemePalette {
        public NewTheme2ThemePalette() : base("DevExpressPalette") {
            SetColor("Backstage.Button.Background", (Color)ColorConverter.ConvertFromString("#FFFF7200"));
            SetColor("Backstage.Delimiter", (Color)ColorConverter.ConvertFromString("#FFA53F22"));
            SetColor("Backstage.Editor.Background", (Color)ColorConverter.ConvertFromString("#FFFF7200"));
            SetColor("Backstage.HoverBackground", (Color)ColorConverter.ConvertFromString("#FFDA532C"));
            SetColor("Backstage.SelectionBackground", (Color)ColorConverter.ConvertFromString("#FFF99D84"));
            SetColor("Backstage.Window.Background", (Color)ColorConverter.ConvertFromString("#FFFF7200"));
            SetColor("Focused", (Color)ColorConverter.ConvertFromString("#FFA53F22"));
            SetColor("Window.HeaderButton.HoverBackground", (Color)ColorConverter.ConvertFromString("#FFDA532C"));
            SetColor("Window.HeaderButton.SelectionBackground", (Color)ColorConverter.ConvertFromString("#FFF99D84"));
        }
    }
}
Note

The Theme Designer exports the palette .cs file in the Your_Theme_Folder\.td\Publish folder.

Apply the Palette to an Application

To use the .cs file exported from the Theme Designer you should add it to your project. Open your application, right-click the project and select the Add Existing Item in the Add submenu. Select the generated .cs file.

Add the Palette Reference to Your Project

To apply the palette on the application startup, copy the static App() section from the palette .cs file to the App.xaml.cs:


using DevExpress.Xpf.Core;
    ...
public partial class App : Application
{
    static App()
    {
        var palette = new CustomApp.DevExpressThemePalette();
        var theme = Theme.CreateTheme(palette, Theme.Office2016ColorfulSE);
        Theme.RegisterTheme(theme);
        ApplicationThemeHelper.ApplicationThemeName = theme.Name;
    }
}
Note

Refer to the themes topic for more information on how to apply the WPF themes to the application.

See Also