How to Create a Custom Theme for Shapes in DiagramDesignerControl

  • 3 minutes to read

Shapes in the DiagramControl are colored according to the applied theme. To create a custom theme, add a resource dictionary with a DevExpress.Diagram.Core.Themes.Theme element to your application.

Each theme should contain a color palette. To specify a color palette, add the DevExpress.Diagram.Core.Themes.ColorPalette element into the DevExpress.Diagram.Core.Themes.Theme.

To specify how colors are used in a theme, set the Theme.Effects property. This property accepts the DevExpress.Diagram.Core.Themes.EffectCollection object that defines colors shown in the following gallery:

UntitledWithShadow

DevExpress.Diagram.Core.Themes.EffectCollection has the following properties:

  • ThemeEffects - Specifies colors in the "Theme Styles" group.
  • VariantEffects - Specifies colors in the "Variant Styles" group. When a shape is created its default color scheme is taken from this group.
  • ConnectorEffects - Specifies connector colors.

To register a custom theme, use the ThemeRegistrator.RegisterThemes method.

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxdiag="http://schemas.devexpress.com/winfx/2008/xaml/diagram" 
        dx:ThemeManager.ThemeName="MetropolisLight"
        x:Class="CustomShapeThemes.MainWindow"
        Title="MainWindow" Height="700" Width="1100">
    <Grid>

        <dxdiag:DiagramDesignerControl SelectedStencils="BasicShapes, BasicFlowchartShapes" Name="diagramControl"/>

    </Grid>
</Window>