Getting Started

This topic describes how to create a custom theme based on the Office 2016 Colorful SE theme with the look-and-feel of an MS Excel application. In this topic, we will change the theme's blue contrast colors to green.

OfficeWord2Excel.png

Create a new Theme

  1. Run the Theme Designer. Open the Get Started Tab and select Create a New Theme.

    ThemeDesigner

  2. Select a base theme and version for your new theme. In this example, we select the Office 2016 Colorful SE theme and 18.2.3 version.

    SelectOffice2016SeColor.png

  3. Specify the theme name (Colorful_Excel in this tutorial) and location.

    SetTheName

  4. Click Create.

The Theme Designer clones the Office 2016 Colorful SE theme and places the copy in the specified directory.

Edit a Theme

  1. Set up preview

    Click Build to enable preview. Select a control to preview.

    Build.png

    The Theme Designer allows you to see how the new theme is applied to all the standard and DevExpress controls.

    The Navigation window allows you to select the required control to preview.

    Navigation.png

    In this tutorial, we use the Spreadsheet control to preview changes.

  2. Change colors

    In the palette tab, select all the blue colors and change them to green. You can edit them in HSB color mode and change the H (hue) value to 147.

    colorEdit.png

    Refer to the WPF Theme Designer Tools for more information about advanced color editing tools.

  3. XAML files editing

    Use the View in XAML tool to find an element location in XAML. Click the ribbon icon or use the Ctrl+D shortcut to enable this tool.

    Point to an element, hold down the Ctrl+Shift keys combination and click an element. Theme Designer will open this element's XAML code in the Code View window.

    Set the BorderThickness to 2 and the BorderBrush to $Border. Save the XAML file to apply changes.

    editing-border

Note

Refer to the Edit Theme in XAML topic for more information about theme editing in XAML files.

Save and Publish Your Theme

Save your modified theme and click Publish.

Create-theme-publish

The Theme Designer builds your theme and prompts you to open the output directory with the built .DLL and .PDB files.

msgBox.png

Click Yes to open the output directory with your built theme assembly.

Apply a new Theme to an Application

Follow the steps below to apply this theme to an application.

  1. Run Microsoft Visual Studio and open a WPF solution to which you wish to apply the theme.
  2. Add a reference to the theme assembly in this solution. To do this, right-click References in the Solution Explorer and select Add Reference. In the Browse section, locate the assembly built in the previous step.

    AddReference.png

    SelectReferenceAssembly.png

  3. Add the following code to the App.xaml.cs file.

    static App() {
        var theme = new Theme("Colorful_Excel");
        theme.AssemblyName = "DevExpress.Xpf.Themes.Colorful_Excel.v18.2";
        Theme.RegisterTheme(theme);
        ApplicationThemeHelper.ApplicationThemeName = "Colorful_Excel";
    }
    
  4. Run the application to see the result.