Workspace

This section lists visual elements available in the WPF Theme Designer. The topics are categorized into groups that contain descriptions of elements belonging to a particular section of the application:

The image below illustrates the layout of a Theme Designer's main window

Theme Designer 18.2 Window

The WPF Theme Designer UI consists of the following windows.

The Navigation Window allows you to locate (using built-in search) and select a control to preview. The following image displays the search results for the 'menu' query in preview mode.

navigation-panel.png

Preview Window

The Preview Window displays the selected controls live preview with your theme applied.

preview-panel.png

You can enable the touch version of the theme using the TouchMode button on the ribbon. Use the ribbon's Reload Preview button to restore the default state of the preview.

Color Wheel Window

The Color Wheel window allows you to edit theme colors using a color wheel. The Color Wheel organizes colors by hue or RGB distance into the specified number of groups. This feature allows you to customize color parameters for entire groups instead of doing this for multiple individual colors.

color-wheel-panel.png

Palette Window

The Palette Window displays the current theme's color palette. In this window, you can edit, add, and remove palette colors. Note that the Palette view is available only for the Color Themes. After the Palette Window, the advanced Color Editor Tool is displayed. You can use the Inline Color Picker tool for a quick color change. Refer to the Palette Window topic for more information.

palette-panel.png

Solution Window

The Solution Window displays solution files of an opened theme. This window allows you to navigate and open them in the Theme Designer Code View, or in the Windows File Explorer.

Solution Window

CodeView Window

The CodeView Window allows you to edit templates and styles, and bind palette colors to an element in XAML files.

Code View

Individual Colors Window

The Individual Colors Window displays individual colors for all the UI elements of all the controls. In this view, you can edit individual colors of each element and change color bindings.

individual-colors-panel.png

Output Window

The Output Window displays the building and publishing service notifications.

output-panel.png

How to manage Theme Designer Workspace

Select the ribbon's Views tab and click the required view's icon to control the visibility of each window. Click the Reset Layout button to restore the Theme Designer's default layout. Refer to the Ribbon Commands topic for more information.

ribbon views.png