Back to Devexpress

Get Started

wpfthemedesigner-118594-getting-started.md

latest3.2 KB
Original Source

Get Started

  • Jul 05, 2021
  • 4 minutes to read

This topic describes how to change the Microsoft Excel-inspired Office 2019 Colorful theme from blue colors to green.

Create a New Theme

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

  2. Select a base theme and version for your new theme. In this example, we selected the Office 2019 Colorful theme v20.1.3.

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

  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

  2. Select the element

  3. Filter colors

  4. Find similar colors

  5. Change the colors

  6. Find and change other colors

  7. Save all files

Edit XAML Files

This section describes how to find and edit the XAML code for an element.

  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 the XAML code for this element in the CodeView Window.

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

  4. To the right of the Background property, 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 to the XAML code where the SolidColorBrush key 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.

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

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.

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

  4. Run the application.