Forums

HOW-TO: Styles, Themes and Control Templates
Last Post 13 Mar 2016 02:48 PM by Filip Dušek. 17 Replies.
Printer Friendly
  •  
  •  
  •  
  •  
  •  
Sort:
PrevPrev NextNext
You are not authorized to post a reply.
Author Messages
Filip DušekUser is Offline
Advanced Member
Advanced Member
Posts:674


--
22 Sep 2014 07:30 PM
    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 - http://emptykeys.com/EmptyKeysUI/ht...ceKeys.htm
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 07:43 PM
    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
    
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 07:48 PM
    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.
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 07:54 PM
    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
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 08:14 PM
    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.
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 08:18 PM
    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.
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 08:25 PM
    ListBox style is using these resources:

    CommonResourceKeys.ItemTextColorKey
    CommonResourceKeys.ItemBackgroundHoverBrushKey
    CommonResourceKeys.ItemTextHoverColorKey
    CommonResourceKeys.ItemTextSelectedColorKey
    CommonResourceKeys.ItemSelectedBrushKey
    
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 08:32 PM
    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
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 08:36 PM
    Root style (for UIRoot element) is using these resources:

    CommonResourceKeys.RootBackgroundBrushKey
    CommonResourceKeys.RootTextColorKey
    
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 08:39 PM
    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
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 08:41 PM
    Slider style is using these resources:

    CommonResourceKeys.SliderTrackBackgroundBrushKey
    CommonResourceKeys.SliderThumbBrushKey
    


    There is one name part in control template - PART_Track.
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 08:43 PM
    Tab Control style is using these resources:

    CommonResourceKeys.TabItemBackgroundBrushKey
    CommonResourceKeys.TabItemBorderBrushKey
    CommonResourceKeys.ItemBackgroundHoverBrushKey
    CommonResourceKeys.ItemTextHoverColorKey
    CommonResourceKeys.ItemTextSelectedColorKey
    CommonResourceKeys.ItemSelectedBrushKey
    CommonResourceKeys.TabItemHeaderTextColorKey
    CommonResourceKeys.TabControlBorderBrushKey
    
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 08:49 PM
    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
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 08:51 PM
    Tool Tip style is using these resources:

    CommonResourceKeys.ToolTipBackgroundBrushKey
    CommonResourceKeys.ToolTipBorderBrushKey
    CommonResourceKeys.ToolTipTextColorKey
    
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    22 Sep 2014 08:58 PM
    Window style is using these resources:

    CommonResourceKeys.WindowBackgroundBrushKey
    CommonResourceKeys.WindowBorderBrushKey
    CommonResourceKeys.WindowTextColorKey
    CommonResourceKeys.WindowActiveBrushKey
    CommonResourceKeys.ItemTextSelectedColorKey
    
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    13 Mar 2016 02:46 PM
    Radio Button style is using these resource keys:

    CommonResourceKeys.RadioButtonTextColorKey
    CommonResourceKeys.RadioButtonBorderFocusedBrushKey
    CommonResourceKeys.RadioButtonCheckedBrushKey
    CommonResourceKeys.RadioButtonBackgroundHoverBrushKey
    CommonResourceKeys.RadioButtonTextHoverColorKey
    CommonResourceKeys.RadioButtonBorderBrushKey
    CommonResourceKeys.RadioButtonBackgroundBrushKey
    
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    13 Mar 2016 02:48 PM
    Chart style is using these resource keys:

    CommonResourceKeys.ChartBackgroundBrushKey
    CommonResourceKeys.ChartTextColorKey
    CommonResourceKeys.ChartAxisBrushKey
    CommonResourceKeys.ChartCursorLinesBrushKey
    CommonResourceKeys.ChartAxisInterlacedBrushKey
    
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    13 Mar 2016 02:48 PM
    GroupBox style is using these resource keys:

    CommonResourceKeys.GroupBoxBorderBrushKey
    CommonResourceKeys.GroupBoxTextColorKey
    
    You are not authorized to post a reply.