Skip to content

HOW TO: Styles, Themes and Control Templates

Jump to bottom
Empty Keys edited this page May 8, 2018 · 1 revision

All the important classes for styles, themes and control templates are in namespace EmptyKeys.UserInterface.Themes. Each control has it's own class:

  • ButtonStyle
  • ChartStyle
  • CheckBoxStyle
  • ComboBoxStyle
  • DataGridStyle
  • ExpanderStyle
  • GroupBoxStyle
  • ListBoxStyle
  • NumericTextBoxStyle
  • PasswordBoxStyle
  • ProgressBarStyle
  • RadioButtonStyle
  • RepeatButtonStyle
  • RootStyle
  • ScrollBarStyle
  • ScrollViewerStyle
  • SliderStyle
  • TabControlStyle
  • TextBoxStyle
  • ToggleButtonStyle
  • ToolTipStyle
  • TreeViewStyle
  • UserControlStyle
  • VirtualKeyboardStyle
  • WindowStyle

There are usually 2 methods in style class. One for creating default style with default control template and the other for creating default control template only. There can be more than two for controls like TabControl, ListBox etc. Each style is using resources for colors or brushes (see more info in next posts).

There are 3 classes with themes:

  • Dark
  • EmptyKeysTheme
  • Light

If you want to create your own theme, you have to create resource dictionary with all the colors, brushes, styles and control templates. For that you can use CommonHelpers.CreateStyles method, which will create all the styles and control template, but without color/brush resources. That way you just have to create those and add them to resource dictionary. There are few localization resources (button labels for message box). You can call CommonHelpers.CreateLocalizationResources to create them. All the resource keys for brushes are in class CommonResourceKeys.

Button, Repeate Button and Toggle Button styles is using these resources:

CommonResourceKeys.ButtonBackgroundBrushKey CommonResourceKeys.ButtonBorderBrushKey CommonResourceKeys.ButtonTextColorKey CommonResourceKeys.ButtonTextDisabledColorKey CommonResourceKeys.ButtonBackgroundPressedBrushKey CommonResourceKeys.ButtonBorderPressedBrushKey CommonResourceKeys.ButtonTextPressedColorKey CommonResourceKeys.ButtonBackgroundHoverBrushKey CommonResourceKeys.ButtonBorderHoverBrushKey CommonResourceKeys.ButtonTextHoverColorKey CommonResourceKeys.ButtonBackgroundFocusedBrushKey CommonResourceKeys.ButtonBorderFocusedBrushKey CommonResourceKeys.ButtonTextFocusedColorKey

CheckBox style is using these resources:

CommonResourceKeys.CheckBoxTextColorKey CommonResourceKeys.CheckBoxBorderBrushKey CommonResourceKeys.CheckBoxBackgroundBrushKey CommonResourceKeys.CheckImageBrushKey CommonResourceKeys.ThirdStateCheckBoxBrushKey CommonResourceKeys.CheckBoxBackgroundHoverBrushKey

There are 2 named parts in control template - PART_CheckBoxRectangle and PART_CheckMark.

ComboBox style is using these resources:

CommonResourceKeys.ComboBoxBorderHoverBrushKey CommonResourceKeys.ComboBoxItemHoverBrushKey CommonResourceKeys.ComboBoxItemHoverColorKey CommonResourceKeys.ComboBoxBackgroundBrushKey CommonResourceKeys.ComboBoxBorderBrushKey CommonResourceKeys.ComboBoxTextColorKey CommonResourceKeys.ComboBoxArrowDownBrushKey CommonResourceKeys.ComboBoxTextDisabledColorKey CommonResourceKeys.ComboBoxItemHighlightedBrushKey CommonResourceKeys.ComboBoxPopupBorderBrushKey

There are 3 named parts in control template - PART_EditableTextBox, PART_Button and PART_Popup

DataGrid style is using these resources:

CommonResourceKeys.DataGridRowBackgroundBrushKey CommonResourceKeys.DataGridRowForegroundColorKey CommonResourceKeys.DataGridRowBorderBrushKey CommonResourceKeys.DataGridRowBackgroundSelectedBrushKey CommonResourceKeys.DataGridRowForegroundSelectedColorKey CommonResourceKeys.DataGridRowBackgroundHoverBrushKey CommonResourceKeys.DataGridRowForegroundColorKey CommonResourceKeys.DataGridHeaderBackgroundBrushKey CommonResourceKeys.DataGridHeaderForegroundColorKey CommonResourceKeys.DataGridHeaderBackgroundPressedBrushKey CommonResourceKeys.DataGridHeaderForegroundPressedColorKey CommonResourceKeys.DataGridHeaderBackgroundHoverBrushKey CommonResourceKeys.DataGridHeaderForegroundHoverColorKey

DataGrid control template has 3 named parts - PART_HeadersScrollViewer, PART_ColumnHeaderPresenter and PART_DataScrollViewer.

Expander style is using these resources:

CommonResourceKeys.ExpanderButtonBackgroundBrushKey CommonResourceKeys.ExpanderButtonBorderBrushKey CommonResourceKeys.ExpanderButtonTextColorKey CommonResourceKeys.ExpanderArrowRightBrushKey CommonResourceKeys.ExpanderButtonTextDisabledColorKey CommonResourceKeys.ExpanderArrowDownBrushKey CommonResourceKeys.ExpanderButtonBackgroundHoverBrushKey, CommonResourceKeys.ExpanderButtonBorderHoverBrushKey CommonResourceKeys.ExpanderButtonTextHoverColorKey

There are 2 named parts in control template - PART_ContentRow and PART_ExpanderContent.

ListBox style is using these resources:

CommonResourceKeys.ItemTextColorKey CommonResourceKeys.ItemBackgroundHoverBrushKey CommonResourceKeys.ItemTextHoverColorKey CommonResourceKeys.ItemTextSelectedColorKey CommonResourceKeys.ItemSelectedBrushKey

ProgressBar style is using these resources:

CommonResourceKeys.ProgressBarBackgroundBrushKey CommonResourceKeys.ProgressBarForegroundColorKey

There are 3 named parts in control template - PART_ProgressBar, PART_Track and PART_Indicator

Root style (for UIRoot element) is using these resources:

CommonResourceKeys.RootBackgroundBrushKey CommonResourceKeys.RootTextColorKey

ScrollBar style is using these resources:

CommonResourceKeys.ArrowUpBrushKey CommonResourceKeys.ArrowDownBrushKey CommonResourceKeys.ArrowLeftBrushKey CommonResourceKeys.ArrowRightBrushKey CommonResourceKeys.ScrollBarThumbHoverBackgroundKey CommonResourceKeys.ScrollBarThumbBorderBrushKey CommonResourceKeys.ScrollBarThumbHoverBackgroundKey

There is one named part in control template - PART_Track

Slider style is using these resources:

CommonResourceKeys.SliderTrackBackgroundBrushKey CommonResourceKeys.SliderThumbBrushKey

There is one name part in control template - PART_Track.

Tab Control style is using these resources:

CommonResourceKeys.TabItemBackgroundBrushKey CommonResourceKeys.TabItemBorderBrushKey CommonResourceKeys.ItemBackgroundHoverBrushKey CommonResourceKeys.ItemTextHoverColorKey CommonResourceKeys.ItemTextSelectedColorKey CommonResourceKeys.ItemSelectedBrushKey CommonResourceKeys.TabItemHeaderTextColorKey CommonResourceKeys.TabControlBorderBrushKey

Text Box and Numeric Text Box styles are using these resources:

CommonResourceKeys.TextBoxBackgroundBrushKey CommonResourceKeys.TextBoxBorderBrushKey CommonResourceKeys.TextBoxTextColorKey CommonResourceKeys.TextBoxTextDisabledColorKey CommonResourceKeys.TextBoxFocusedBrushKey

There are 2 named parts in control template - PART_Border and PART_ContentHost

Tool Tip style is using these resources:

CommonResourceKeys.ToolTipBackgroundBrushKey CommonResourceKeys.ToolTipBorderBrushKey CommonResourceKeys.ToolTipTextColorKey

Window style is using these resources:

CommonResourceKeys.WindowBackgroundBrushKey CommonResourceKeys.WindowBorderBrushKey CommonResourceKeys.WindowTextColorKey CommonResourceKeys.WindowActiveBrushKey CommonResourceKeys.ItemTextSelectedColorKey

Radio Button style is using these resource keys:

CommonResourceKeys.RadioButtonTextColorKey CommonResourceKeys.RadioButtonBorderFocusedBrushKey CommonResourceKeys.RadioButtonCheckedBrushKey CommonResourceKeys.RadioButtonBackgroundHoverBrushKey CommonResourceKeys.RadioButtonTextHoverColorKey CommonResourceKeys.RadioButtonBorderBrushKey CommonResourceKeys.RadioButtonBackgroundBrushKey

Chart style is using these resource keys:

CommonResourceKeys.ChartBackgroundBrushKey CommonResourceKeys.ChartTextColorKey CommonResourceKeys.ChartAxisBrushKey CommonResourceKeys.ChartCursorLinesBrushKey CommonResourceKeys.ChartAxisInterlacedBrushKey

GroupBox style is using these resource keys:

CommonResourceKeys.GroupBoxBorderBrushKey CommonResourceKeys.GroupBoxTextColorKey

Clone this wiki locally