Get Started

  • 4 minutes to read

This topic describes how to change the Microsoft Excel-inspired Office 2019 Colorful theme's blue 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 your new theme's version and base theme. In this example, we selected the Office 2019 Colorful theme v20.1.3.

    SelectOffice2019Color.png

  3. Specify a theme's name (Colorful_Excel) and path. The new theme name should be different from the base theme name.

    SetTheName

  4. Click Create.

The Theme Designer copies the Office 2019 Colorful base theme and adds it to the specified directory.

Edit a Theme

  1. Set up preview

    The Theme Designer allows you to preview DevExpress and standard controls with your theme applied.

    Click Build or use F6 to build the theme.

    Build.png

    Select the Spreadsheet with Ribbon in the Navigation window to preview the theme.

    Navigation.png

  2. Select the element

    Enable the Inspect Element tool in the ribbon or use Ctrl+D, hold down Ctrl+Shift, and click the Ribbon header to select the element.

  3. Filter colors

    Use the ribbon icon or Ctrl+E to enable the Filter Colors tool and display only the selected element's colors.

  4. Find similar colors

    Copy the Backstage.Window.Background color value, disable the Filter Colors tool, and paste the copied color value in the Palette Window's search box. When you paste the color in the search box, the palette window displays only palette colors with the same value.

  5. Change the colors

    To the right of the palette color value, click the color value and select the Color Picker tool. Pick the Excel's accent color. The Color Picker tool copies the picked color to the clipboard. Use the value copied to the clipboard for all palette colors in the search results.

  6. Find and change other colors

    Disable search in the Palette window. Repeat steps 4 and 5 for the Backstage.Delimeter, Backstage.HoverBackground, and Backstage.SelectionBackground palette colors. Pick the Excel colors from the following elements:

  7. Save all files

    Use the Ctrl+Shift+S or the Save All icon to save all changes.

Edit XAML Files

This section describes how to find and edit an element's XAML code.

  1. Open the SplashScreen preview in the Navigation window.

  2. Enable the Inspect Element tool, hold down Ctrl+Shift, and click the SplashScreen's progress bar. The Theme Designer opens this element's XAML code in the CodeView Window.

  3. Open the Properties Window to see the selected element's properties. To the right of the the TextElement.Foreground property, click the Inherited link to navigate to the template where the property is specified.

  4. On the Background property's right, click the Style link to open the XAML file where the property is defined.

  5. In the CodeView Window, Click the ProgressBarBackgroundBrush static resource and use F12 to navigate the XAML code where the key's SolidColorBrush is specified. Change the Color value to $HoverBackground and the ProgressBarBorderBrush's Color to $Focused.

  6. Click the the SplashScreen.xaml tab to return to the SplashScreen.xaml file. Click the Template property's ProgressBarTemplate static resource, use F12, and change the BorderThickness value to 1 to display the progress bar's border. Use Ctrl+S to save the XAML file.

  7. Use F6 to build the theme. Now, your changes are applied to the theme.

NOTE

Refer to the Edit Theme in XAML topic for more information on how to edit themes in XAML files.

Save and Publish

Click Publish to create a theme assembly file.

Create-theme-publish

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

Create-theme-publish

Apply the Theme to an Application

  1. Run Visual Studio and open a WPF application.
  2. Add a reference to the theme's .DLL assembly.

    AddReference.png

    SelectReferenceAssembly.png

    TIP

    You can use this method to apply a custom theme to a .NET Core 3.0 application.

  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.v20.1";
        Theme.RegisterTheme(theme);
        ApplicationThemeHelper.ApplicationThemeName = "Colorful_Excel";
    }
    
  4. Run the application.