Office2019 Theme

With the R3 2020 release of the UI for WPF suite we have introduced the brand new Office2019 theme. Inspired by the well-known Microsoft Office productivity suite and its latest version, the Office2019 theme is here to help re-creating and delivering that fresh and smooth look and feel to your WPF apps. Explore the Light, Gray and Dark built-in color variations of the Office2019 theme and get off to a flying start with your WPF applications.

Jump to the following topics to learn about the specifics of the theme's palette and features.

Default Theme Colors

The Office2019 Theme is designed to be easily modified via the exposed colors in the theme palette. The default values of the brushes in the theme are listed below.

Brush name Light Gray Dark
AccentBackgroundBrush #106EBE
#106EBE
#106EBE
AccentBorderBrush #106EBE
#106EBE
#106EBE
AccentMouseOverBackgroundBrush #D4E8F8
#D4E8F8
#D4E8F8
AccentMouseOverBorderBrush #2F96ED
#2F96ED
#2F96ED
AccentPressedBackgroundBrush #A1CDED
#A1CDED
#A1CDED
AlternativeBackgroundBrush #F1F1F1
#CBCBCB
#3C3C3C
BaseBackgroundBrush #DFDFDF
#767272
#151515
ButtonBackgroundBrush #E5E5E5
#BFBFBF
#3D3D3D
CheckedForegroundBrush #FFFFFF
#FFFFFF
#FFFFFF
DisabledBackgroundBrush #F1F1F1
#CBCBCB
#3F3E3C
DisabledBorderBrush #D6D6D6
#BEBEBE
#4F4F4F
HeaderBackgroundBrush #106EBE
#106EBE
#106EBE
HeaderForegroundBrush #FFFFFF
#FFFFFF
#FFFFFF
HighlightedForegroundBrush #2F2F2F
#2F2F2F
#2F2F2F
IconBrush #606060
#333333
#A6A6A6
MainBackgroundBrush #FFFFFF
#E2E2E2
#2F2F2F
MainBorderBrush #ACACAC
#A6A6A6
#606060
MainForegroundBrush #000000
#000000
#F1F1F1
MouseOverBackgroundBrush #C8C7C4
#ACACAC
#B3AFAD
PressedBackgroundBrush #B3AFAD
#918E8D
#767676
ReadOnlyBackgroundBrush #FFFFFF
#E2E2E2
#2F2F2F
ReadOnlyBorderBrush #ACACAC
#A6A6A6
#606060
SecondaryBackgroundBrush #D6D5D5
#B6B3B1
#2B2B2B
SecondaryForegroundBrush #000000
#FFFFFF
#F1F1F1
ValidationBrush #E43E00
#E43E00
#E43E00

Figure 1: Theme colors represented in RadOutlookBar

Office2019 theme colors represented in RadOutlookBar

Office2019Palette Properties

Accent Brushes

  • AccentBackgroundBrush: Used for the background of the elements that should have accent - e.g. the background of the toggle button in its checked state.
  • AccentBorderBrush:Used for the border color of the elements that should have accent - e.g. the border color of the toggle button in its checked state.
  • AccentMouseOverBackgroundBrush: Used for the background of the accent elements in their mouse over state (e.g. all buttons except the ones in the RadRibbonView).
  • AccentMouseOverBorderBrush: Used for the border color of the accent elements in their mouse over state (e.g. all buttons except the ones in the RadRibbonView).
  • AccentPressedBackgroundBrush: Used for the background of the accent elements in their pressed state (e.g. all buttons except the ones in the RadRibbonView). Also used for the buttons, toggling dropdown menus (opened state).

Foreground Brushes

  • MainForegroundBrush: This is the default foreground of the theme.
  • SecondaryForegroundBrush: Used for the foreground of the elements, placed over a background that would otherwise require reverting the default foreground - e.g. the BaseBackgroundBrush. It could be used as a default foreground to controls like the MS CheckBox, RadioButton, GroupBox in such scenarios. May also be considered for buttons with IsBackgroundVisible="False".
  • HighlightedForegroundBrush: Used for the foreground of the elements when their parent is highlighted/hovered, pressed or selected/checked and hovered at once.
  • CheckedForegroundBrush: Used for the foreground of the elements when their parent is in its selected/checked state.
  • HeaderForegroundBrush: Used for the foreground of the header elements in a Window-based controls (e.g. RadWindow, RadTabbedWindow, FileDialogs, etc.).
  • IconBrush: Used for the default foreground of the RadGlyph icons.

Base Brushes

  • BaseBackgroundBrush: This is the recommended background to be used as an application background with this theme. It is also used as a background of the RadRichTextBox, RadSpreadsheet and RadPdfViewer controls.
  • MainBackgroundBrush: Used for the background the inputs and other editable elements such as RadAutocompleteBox, the content of their dropdowns/popup menus, and some child control elements like RadTaskBoard’s card, RadTileList’s tile, etc.
  • MainBorderBrush: This is the default border color of all controls.
  • SecondaryBackgroundBrush: Used for the background of non-editable, secondary elements - e.g. the RadCalculator's alternate buttons. Also used for the default background of the RadProgressBar's track and the RadSlider.
  • AlternativeBackgroundBrush: Used for the background of the RadMenu, RadOutlookBar, RadSpreadsheet specific child-controls and the footer background of its dialogs, RadRibbonView's tabs background, RadGridView's panels background (GroupPanel, SearchPanel), alternation rows background, etc.
  • ButtonBackgroundBrush: This is the default background of all buttons.
  • HeaderBackgroundBrush: Used for the background of the header elements in a Window-based controls (e.g. RadWindow, RadTabbedWindow, FileDialogs, etc.).
  • MouseOverBackgroundBrush: Used for the background of the non-accent elements in their mouse over state - e.g. the background of the RadRibbonView's buttons.
  • PressedBackgroundBrush: Used for the background of the non-accent elements in their pressed state - e.g. the background of the RadRibbonView's buttons.

Special State Brushes

  • DisabledBackgroundBrush: Used for the background of the controls in their disabled state.
  • DisabledBorderBrush: Used for the border color of the controls in their disabled state.
  • ReadOnlyBackgroundBrush: Used for the background of the controls in their read-only state.
  • ReadOnlyBorderBrush: Used for the border color of the controls in their read-only state.
  • ValidationBrush: Used for the background/border color of the controls to indicate the validation errors - for the foreground of the invalid control, or as a border for the error tooltip, border for invalid rows and cells.

Other Properties

  • DisabledOpacity: Used for the controls in their disabled state.
  • ReadOnlyOpacity: Used for the controls in their read-only state.
  • FocusThickness: Used for the thickness of the focus border of the buttons. It is of type Thickness and its default value is 2, 2, 2, 2.

Theme Variation Changing

The following example demonstrates the ability to switch between the supported Light, Gray and Dark color palettes by calling the LoadPreset() method as shown below:

Example 1: Changing the color variation of the theme

//default color variation  
Office2019Palette.LoadPreset(Office2019Palette.ColorVariation.Light);    
 
//Gray color variation  
Office2019Palette.LoadPreset(Office2019Palette.ColorVariation.Gray);    
 
//Dark color variation  
Office2019Palette.LoadPreset(Office2019Palette.ColorVariation.Dark);  

Figure 2: Office2019 theme color variations

Office2019 theme colors represented in RadOutlookBar

All variations of the theme are designed with a specific background in mind and it is recommended to use such a background in your application when working with it - it is represented by the theme palette's BaseBackgroundBrush.

Font Family and Font Size

When using the Office2019 theme, the FontSize and FontFamily properties of all components in the application can be dynamically changed the same way as in the Windows8, Windows8Touch, Office2013, VisualStudio2013, Office2016, Green, Material, Fluent,Crystal and VisualStudio2019 themes.

The FontSize and FontFamily properties are public - they can easily be modified at a single point. The most commonly used font size in the theme is with value 12 and can be modified through the Office2019Palette.Palette.FontSize property in the same manner as in the other themes that support a theme palette.

The default font used in the theme is Segoe UI.

For complex scenarios it is strongly recommend to set the FontSize properties only before the application is initialized.

Example 2 shows the default font sizes and families.

Example 2: Default FontSize

Office2019Palette.Palette.FontSize = 12; 
Office2019Palette.Palette.FontSizeS = 13; 
Office2019Palette.Palette.FontSizeM = 14; 
Office2019Palette.Palette.FontSizeL = 16; 
Example 3 shows how to change the default FontFamily from "Segoe UI" to "Calibri Italic" and the FontSize from 12 to 18.

Example 3: Changing the theme's FontSize and FontFamily

private void OnButtonChangeFontSizeClick(object sender, RoutedEventArgs e) 
{ 
    Office2019Palette.Palette.FontSize = 18; 
    Office2019Palette.Palette.FontFamily = new FontFamily("Calibri Italic"); 
} 

Figure 3: Setting FontSize and FontFamily

RadCalendar with modified FontSize and FontFamily

Glyphs

The Office2019 Theme also uses the Telerik Web UI font glyphs by default. The RadGlyph provides a lightweight, flexible and design-time-friendly implementation of our glyph font.

You can read more about the RadGlyph in the RadGlyph Overview article and about the range of the font glyphs in the Font Glyphs Overview article.

Theme Helper

The ThemeHelper class that comes with the R3 2019 release is used in the Office2019 theme. It exposes a set of attached properties and can be used to directly modify the appearance of a specific basic control without the need to alter its control template.

Example 3 shows a RadToggleButton control with modified brushes for its different states through the ThemeHelper class:

Example 3: Set RadToggleButton's visual appearance through the ThemeHelper class

<telerik:RadToggleButton Content="RadToggleButton"  
                         Margin="10" 
                         xmlns:helpers="clr-namespace:Telerik.Windows.Controls.Theming.Helpers;assembly=Telerik.Windows.Controls" 
                         helpers:ThemeHelper.MouseOverBrush="{telerik:Office2019Resource ResourceKey=AccentMouseOverBrush}" 
                         helpers:ThemeHelper.PressedBrush="{telerik:Office2019Resource ResourceKey=ValidationBrush}" 
                         helpers:ThemeHelper.CheckedBrush="{telerik:Office2019Resource ResourceKey=AccentMainBrush}"/> 

Figure 3: Appearance of the RadToggleButton in the different states

RadToggleButton States

Changing Opacity

If you need to change the opacity of the disabled and read-only elements, you can easily do so by using the DisabledOpacity and ReadOnlyOpacity properties of the Office2019Palette. The default values are 0.3 and 0.6 respectively.

Example 4: Changing the opacity

Office2019Palette.Palette.DisabledOpacity = 0.5; 
Office2019Palette.Palette.ReadOnlyOpacity = 0.5; 

See Also

In this article
Not finding the help you need? Improve this article