Edit a theme in XAML

Theme Designer allows you to customize a theme, create or edit templates and styles, and bind palette colors to an element in a XAML file. You can edit source files in the built-in Theme Designer CodeView or an external text editor.

Find an element in XAML

Theme Designer provides the following XAML files navigation approaches:

  • You can use the Solution Explorer window with built-in Search Bar for search and navigation source files. This window allows you to open a XAML file location folder in the Windows File Explorer. You can use this feature to open files in external text editors.

    Solution Window

  • Use the View in XAML tool to find the location of an element in a XAML file. Enable the View in XAML tool, hold Ctrl+Shift and left-click an element in the Preview Window. Theme Designer will highlight the color value in the Code View window.

  • Right-click an item in the Individual Colors window and select the Navigate to XAML to open this element's location in a XAML file.

Change a palette color in a XAML file using the CodeView

Follow this list to change an element's palette colors in XAML files using the Code View window:

  1. Build your theme if it was not built yet.
  2. Use the View in XAML tool to find the location of an element in a XAML file.
  3. The $ sign in the color value means that this color is bound to the theme palette. Type the palette color name after the $ sign to change the color of this element.
  4. Click the Save icon in the Ribbon or use the Ctrl+S keyboard shorcut to save the XAML file. Theme Designer will apply changes to your theme and update the Preview window.

The following animation illustrates how to change an element's palette colors in a XAML file using the Code View window:

View-in-XAML-Gif

Important

Theme elements have the auto-generated cs:id attribute. This attribute is required for update. Do not copy or edit it. Otherwise, this lead to color binding errors in your theme.

Open a theme XAML file in an external text editor

Theme Designer allows you to open theme source files in an external text editor. You can navigate to the XAML file in the Windows File Explorer or use the Solution Explorer window to find its location:

  1. Navigate or find a file in the Solution Explorer;
  2. Right-click it and select the Show In Explorer. Windows File Explorer will open this file location;
  3. Open a file in an external text editor.

Solution Window

Note

Theme Designer will ask you to reload the file(s) if you modify any opened project file(s) in an external application.

Open a theme solution in the Microsoft Visual Studio

You can edit a theme solution in the Microsoft Visual Studio. You can find the theme solution (.sln) file in the Your_Theme_Folder\.td\Sources folder.

Note

Visual Stuido cannot build a Theme Designer theme solution. Use the Theme Designer to build a theme and preview theme changes.