Application resource reference

Styles defined in the application can be re-used in the Xaml of add-ins in order to ensure add-in appearance and behaviour is consistent with the existing application. Below is a list of the style declarations you can apply to the specified types of WPF control, with illustrations of the styling as applied in the application when set to Light and Dark application themes.

For more information on re-using application styles in add-ins, see Using application resources in add-ins.

Widget control styles

These styles can be applied to controls which are used in widgets. They will automatically react to changes in the theme and text size settings chosen by the user in the application.

Button:

Style= "{StaticResource ThemedButtonStyle}"

TextBox:

Style="{StaticResource ThemedTextBoxStyle}"

PasswordBox:

Style ="{ StaticResource ThemedPasswordBoxStyle }"

Checkbox:

Style="{StaticResource ThemedNoAnimationCheckboxStyle}"

ComboBox:

Style="{StaticResource ThemedComboBoxStyle}"

ListBox:

Style="{StaticResource ThemedListBoxStyle}"

ListBoxItem: for list items with separator lines

ItemContainerStyle="{StaticResource ThemedSeparatorLineListBoxItemStyle}"

ItemContainerStyle="{StaticResource ThemedSeparatorLineNoSelectionListBoxItemStyle}"

ItemContainerStyle="{StaticResource ThemedSeparatorLineNoSelectionNoHoverListBoxItemStyle}"

ListBoxItem: for list items with no separator line

ItemContainerStyle="{StaticResource ThemedNoSelectionListBoxItemStyle}"

ItemContainerStyle="{StaticResource ThemedNoSelectionNoHoverListBoxItemStyle}"

TreeView:

Style="{StaticResource ThemedTreeViewStyle}"

TreeViewItem styles:

ItemContainerStyle ="{ StaticResource ThemedTreeViewItemStyle }"

ScrollViewer:

Template="{StaticResource ThemedScrollViewerControlTemplate}"

Widget text styles

These styles can be applied to the specific type of text controls used in widgets. They will automatically react to changes in the theme and text size settings chosen by the user in the application.

TextBlock: for No Features / No Data messages in widgets

Style ="{ DynamicResource NoItemsTextStyle }"

Foreground="{DynamicResource ThemedSecondaryTextBrush}"

TextBlock: for display name captions at the top of widgets

Style="{StaticResource DisplayNameStyle}"

TextBlock: for description text at the bottom of widgets

Style="{StaticResource WidgetDescriptionStyle}"

TextBlock: for larger text blocks shown in a widget

Style="{StaticResource ThemedMediumTextBlockStyle}"

Note:

This style does not apply application theme to the Foreground of the TextBlock control, and can therefore be used in both widgets and dialog boxes. You can use the ThemedForegroundBrush in addition to this style in order to apply the appropriate color brush to the text of the TextBlock.

Widget font sizes

These resources can be applied to the FontSize property of controls in widgets. They will automatically react to changes in the Text Size settings chosen by the user in the application.

For standard text:

FontSize="{DynamicResource ThemedTextSize}"

For larger heading text:

FontSize="{DynamicResource ThemedMediumTextSize }"

Widget Brushes

Brush: for themed foreground brushes

Foreground="{DynamicResource ThemedForegroundBrush}"

Brush: for themed foreground brushes for secondary, less prominent, text

Foreground="{DynamicResource ThemedSecondaryTextBrush}"

Brush: for themed widget background brushes

Background="{DynamicResource ThemedBackgroundBrush}"

Brush: for default accent brush used by widgets, for example separator lines in a widget or control

Value="{DynamicResource ThemedAccentBrush}"

Map tool control styles

These styles can be applied to controls which are used in widgets. They will automatically react to changes in the theme and text size settings chosen by the user in the application.

Button: for buttons shown on a map toolbar (1)

Style="{StaticResource ToolbarButtonStyle}"

ToggleButton: for toggle buttons shown on a map toolbar (2)

Style="{StaticResource ToolbarToggleButtonStyle}"

ToggleButton: for toggle buttons with drop-down list shown on a map toolbar (3)

Style="{StaticResource ToolbarDropDownToggleButtonStyle}"

TextBox: for text boxes shown on a map toolbar

Style="{StaticResource ThemedTextBoxStyle}"

Border: border for drop-down control shown on a map toolbar

Style="{StaticResource MenuDropdownBorderStyle}"

Button: for Done buttons shown on a map toolbar (1) (same style as used within a widget)

Style="{StaticResource ThemedButtonStyle}"

ComboBox: for combo boxes shown on a map toolbar (2) (same style as used within a widget)

Style="{StaticResource ThemedComboBoxStyle}"

Button: for Cancel buttons shown on a map toolbar

Style="{StaticResource ToolbarCancelButtonStyle}"

ListBox: (same styles as used within a widget)

Style="{StaticResource ThemedListBoxStyle}"

ListBoxItem: (same styles as used within a widget)

ItemContainerStyle="{StaticResource ThemedSeparatorLineListBoxItemStyle}"

ItemContainerStyle="{StaticResource ThemedNoSelectionListBoxItemStyle}"

ItemContainerStyle="{StaticResource ThemedNoSelectionNoHoverListBoxItemStyle}"

ItemContainerStyle="{StaticResource ThemedSeparatorLineNoSelectionListBoxItemStyle}"

ItemContainerStyle="{StaticResource ThemedSeparatorLineNoSelectionNoHoverListBoxItemStyle}"

TreeView: (same styles as used within a widget)

Style="{StaticResource ThemedTreeViewStyle}"

TreeViewItem: (same styles as used within a widget)

ItemContainerStyle ="{ StaticResource ThemedTreeViewItemStyle }"

Dialog Styles

These styles can be applied to dialog windows or the controls in them. They look the same regardless of theme or text size application settings, as application theming should not be applied to configuration dialog boxes.

Window: for non-sizable dialog boxes

Style="{StaticResource ModalDialogWindowStyle}"

Window: for sizable dialog boxes

Style="{StaticResource SizableModalDialogWindowStyle}

TextBlock: for general text shown in dialog boxes

Style="{StaticResource DialogPromptTextBlockStyle}"

TextBlock: for dialog box heading text (1)

Style="{StaticResource LargeTextBlockStyle}"

TextBlock: for dialog box sub-heading text (2)

Style="{StaticResource MediumTextBlockStyle}"

TextBlock: for dialog box setting label text (3)

Style="{StaticResource SettingLabelStyle}"

Rectangle: for horizontal separator bars in dialog boxes (4)

Style="{StaticResource HorizontalAccentRectangleStyle}"

Rectangle: for vertical separator bars in dialog boxes (6)

Style="{StaticResource VerticalAccentRectangleStyle}"

Rectangle: for horizontal separator bars in dialog boxes (4)

Border: border style for a dialog box footer section (5)

Style="{StaticResource DialogFooterBorderStyle}"

Button: for OK and Cancel buttons in dialog box footer section (7)

Style="{StaticResource DialogOKCancelButtonStyle}"

TabItem: for tab items in dialog boxes (1)

Style="{StaticResource ConfigurationTabItemStyle}"

Checkbox: for checkboxes in dialog boxes (2)

Style="{StaticResource NoAnimationCheckboxStyle}"

Dialog Brushes

The following brush can be applied to dialog boxes. This brush looks the same regardless of the application theme setting.

Brush: for dialog box backgrounds

Background ="{ DynamicResource DialogBackgroundBrush }"