Skip to main content

Themes and Styles

  • 2 minutes to read

Overview

Diagram themes are predefined sets of diagram item styles that can be applied to a diagram in a single click. Each theme consists of font settings and a set of styles that can be applied to individual diagram items. Styles are a combination of background, foreground and stroke colors used to paint an item.

Diagram themes are encapsulated by DiagramTheme class objects. The static ThemeRegistrator class provides methods to manage the collection of themes.

The DevExpress.Diagram.Core.DiagramThemeColorId enumeration stores identifiers of theme colors. The DiagramTheme.ColorPalette property provides access to the theme’s color scheme.

The DiagramTheme.EffectCollection property provides access to the collection of effects that defines how colors are used in the theme. It returns an object of the DiagramEffectCollection type that has the following properties:

  • DiagramEffectCollection.ThemeEffects - Provides access to the collection of effects that can be applied to shapes and are displayed in the “Theme Styles” ribbon group. This collection contains exactly six elements.
  • DiagramEffectCollection.VariantEffects - Provides access to the collection of effects that can be applied to shapes and are displayed in the “Variant Styles” ribbon group. This collection contains exactly four elements.
  • DiagramEffectCollection.ConnectorEffects - Provides access to the collection of effects that can be applied to connectors. This collection contains exactly three elements.

Item styles are encapsulated by DiagramItemStyle class objects.

The DiagramItem.ThemeStyleId property value identifies the style applied to the item. Identifiers for available shape and connector styles are stored in the DevExpress.Diagram.Core.DiagramShapeStyleId and DevExpress.Diagram.Core.DiagramConnectorStyleId classes correspondingly.

Applying Themes and Styles

End-users can apply a theme by selecting it in the Ribbon‘s Themes group on the Design page. The Shape styles group on the Home page allows end-users to apply styles to the selected items.

Themes Design-time

To apply a theme in code, use the DiagramOptionsView.Theme property. The static DevExpress.Diagram.Core.DiagramThemes class contains themes that are available by default. The ThemeRegistrator.Themes collection stores currently registered themes.