Edit this page

Office2016 Theme

The official R3 2016 release of UI for WPF includes a brand new Office2016 theme.

The following topic explains the specifics of the theme's palette and features.

Default theme colors

The Office2016 has one color variation, but it 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 Brush value
MainBrush #FFFFFFFF
PrimaryBrush #FFE6E6E6
ComplementaryBrush #FFE1E1E1
AlternativeBrush #FFF1F1F1
BasicBrush #FFABABAB
MarkerBrush #FF444444
MarkerInvertedBrush #FFF9F9F9
IconBrush #FF444444
ValidationBrush #FFE81123
AccentBrush #FF2A579A
AccentMouseOverBrush #FF3E6DB6
AccentPressedBrush #FF19478A
AccentFocusedBrush #FF88C3FF
MouseOverBrush #FFC5C5C5
PressedBrush #FFAEAEAE
SelectedBrush #FFEBEBEB
ReadOnlyBackgroundBrush #FFFFFFFF
ReadOnlyBorderBrush #FFABABAB

Office2016 Palette Brushes

Below you can find more details about each brush and where it is usually applied.

  • MainBrush: This brush is white by default and it is mainly used as background of the controls.
  • MarkerBrush: This brush is dark by default and it is used as foregound color.
  • MarkerInvertedBrush: This brush is a light color by default and it is mostly used as foreground color while you interact with the control. If the control has accent interaction states, we apply the brush for better contrast.

The Office2016 palette provides both accent and non-accent brushes for the different interaction states.

The accent brushes are by default deep blue brushes and are used to highlight input and interaction elements - e.g. buttons.

  • AccentBrush: This is the main accent brush and it is used mainly for headers and interaction feedback.
  • AccentMouseOverBrush: This brush is brighter shade of blue and it is used for controls in accent-colored mouse over state.
  • AccentPressedBrush: This is the darkest shade of blue and it is used for controls in accent-colored pressed state.

The non-accent brushes are different shades of grey by default and are used for interaction feedback in secondary input or navigation elements and other components which do not need accenting – e.g. RadListBox, buttons in RadRibbonView.

  • MouseOverBrush: This is the non-accent brush for the background of the control while in mouse over state.
  • PressedBrush: This is the non-accent brush for the background of the control while in pressed state.
  • SelectedBrush: This is the non-accent brush for the background of the control while in selected state.
  • AccentFocusedBrush: This brush is light blue and it's the default brush for the focused visual and rarely for any other interaction.
  • ValidatonBrush: This brush is red by default and it is used for failed validation where such is applicable in our controls.

There are several brushes used as background color other than the MainBrush.

  • PrimaryBrush: This brush is used as a background of the input controls in disabled state.
  • AlternativeBrush: This brush is used as an alternative background – i.e. for popups or if we want to distinguish one element from another and for more complex controls – RadRichTextBox, RadImageEditor, RadTabControlItem.
  • ComplementaryBrush: This is used for background of components in more complex controls or their states. For example in RadOutlookBar, RadPanelBar, RadTreeView.

There are two read-only brushes in the Office2016 palette:

  • ReadOnlyBackgroundBrush: This brush is white by default and it is used as a background brush of the controls while in read-only state.
  • ReadOnlyBorderBrush: This brush is light gray by default and it is used as a border brush of the controls while in read-only state.
  • BasicBrush: This brush is grey and it is used as the default border brush of the controls while in normal state.
  • IconBrush: This brush is black by default and it is used for glyphs and paths.

Figure 1: Theme colors

Changing Fonts

When using the Office2016 theme you can dynamically change the FontSize and FontFamily properties of all components in the application the same way as you do in Windows8, Windows8Touch, Office2013, VisualStudio2013, and Green themes.

The FontSize and FontFamily properties are public so you can easily modify the theme resources at a single point. The most commonly used font size in the theme is named FontSize and its default value is 12.

For complex scenarios we strongly recommend setting the FontSize property only initially before the application is initialized. Also, we recommend values between 11px and 19px for it.

Example 1 shows the default font sizes and families.

Example 1: Default FontSize and FontFamily

Office2016Palette.Palette.FontSizeS = 10;
Office2016Palette.Palette.FontSize = 12;
Office2016Palette.Palette.FontSizeL = 14;
Office2016Palette.Palette.FontFamily = new FontFamily(“Segoe UI”);

The Examples 2 and 3 shows how to change the default FontFamily from "Segoe UI" to "Times New Roman" and the FontSize from 12 to 14 on a click of a button.

Example 2: Example view definition

<StackPanel>
    <telerik:RadCalendar HorizontalAlignment="Center" />
    <telerik:RadButton Content="Change Font" Click=" OnButtonChangeFontSizeClick " HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0 5 0 0"/>
</StackPanel>


Example 3: Changing the theme's FontSize and FontFamily

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

Figure 2: Setting FontSize and FontFamily

Glyphs

With Office2016 theme we are introducing a new approach to add icons and icon-like images. Instead of images or paths we are using a font of glyphs by default. The TelerikWebUI font provides over 400 scalable vector glyphs that are available for use to our clients. We have chosen this approach because it provides a number of advantages and benefits.

  • The glyphs are vector paths which are easily scalable without loss of quality.

  • There is a wide range of different beautiful built-in glyphs to choose from.

  • They are easily colored – since they are text shapes. It is achieved by setting a Foreground color, which allows their usage in scenarios where the background of the control changes between light and dark color in different interaction states – e.g. buttons.

  • They are all contained in the small font file and available for use with the inclusion of the Telerik.Windows.Controls assembly and merging the needed resource dictionary for easier referencing.

  • They are available for use in any of our themes, when the needed resources are included. They are not specific for the Office2016 theme.

Since each glyph’s string value is ambiguous and not related to its shape, we are providing a resource dictionary with key-value pairs for easier usage and referencing in projects. It also provides compatibility for future inclusions of new glyphs as it is updated to any shifts in the string values of the existing glyphs with no need to change the references in the projects.

Example 4: Adding the ResourceDictionary with the glyphs

<ResourceDictionary Source="/Telerik.Windows.Controls;component/Themes/FontResources.xaml"/> 

Example 5: Using glyphs

<TextBlock FontFamily=”{StaticResource TelerikWebUI}”
           Foreground=”{telerik:Office2016Resource ResourceKey=IconBrush}”
           Text=”{StaticResource GlyphHeart}”                          
           FontWeight=”Normal” 
           FontSize=”16” />

Figure 3: Heart glyph

You can read more about the usage of the new glyph's feature and see the available glyphs in this article.

Changing FocusThickness

A new feature of the Office2016 theme’s palette is the FocusThickness property. It defines the thickness of the buttons’ focus border. As our design is inspired by the Microsoft Office, the focus border of the buttons is thicker than the one of the other controls and elements. By default the FocusThickness is set to 2, but it is easily changeable in a similar way to the other palette properties.

Example 6: Setting focus border thickness

Office2016Palette.Palette.FocusThickness = new Thickness(1);

Figure 4: Setting the focus border thickness

Changing CornerRadius

The Office2016 theme exposes an easy way to modify the corner radius of many elements in your application. You can use the corner radius properties of the palette. By default all radius values are 0.

Example 7: Setting corner radius

Office2016Palette.Palette.CornerRadius = new CornerRadius(0,0,0,0);
Office2016Palette.Palette.CornerRadiusTop = new CornerRadius(0,0,0,0);
Office2016Palette.Palette.CornerRadiusBottom = new CornerRadius(0,0,0,0);
Office2016Palette.Palette.CornerRadiusLeft = new CornerRadius(0,0,0,0);
Office2016Palette.Palette.CornerRadiusRight = new CornerRadius(0,0,0,0);

Example 8 shows how to change the default corner radius from 0 to 2.

Example 8: Changing the default corner radius

Office2016Palette.Palette.CornerRadius = new CornerRadius(2); 
Office2016Palette.Palette.CornerRadiusBottom = new CornerRadius(0, 0, 2, 2);
Office2016Palette.Palette.CornerRadiusLeft = new CornerRadius(2, 0, 0, 2);
Office2016Palette.Palette.CornerRadiusRight = new CornerRadius(0, 2, 2, 0);
Office2016Palette.Palette.CornerRadiusTop = new CornerRadius(2, 2, 0, 0);

Figure 5: Setting the corner radius

ReadOnlyBackgroundBrush and ReadOnlyBorderBrush

You can now easily change the read-only background and border brush of all text input controls (Syste.Windows.TextBox, RadDateTimePicker, RadMaskedInput and RadWatermarkTextBox) using the ReadOnlyBackgroundColor and ReadOnlyBorderColor properties of Office2016Palette.

Example 9: Setting the read-only colors

Office2016Palette.Palette.ReadOnlyBackgroundColor = (Color)ColorConverter.ConvertFromString("#FFFBDD");
Office2016Palette.Palette.ReadOnlyBorderColor = (Color)ColorConverter.ConvertFromString("#5F5F5F");

Changing DisabledOpacity

If you need to change the opacity of disabled elements, you can easily do it via the DisabledOpacity property of Office2016Palette. The default value of the property is 0.5.

Example 10: Setting the disabled opacity

Office2016Palette.Palette.DisabledOpacity = 0.3;

Figure 6: Setting the disabled opacity

See Also