Edit this page

Office2016Touch Theme

The official R1 2017 release of UI for WPF includes a brand new Office2016Touch theme.

Office2016Touch is a variation of the Office2016 theme, especially created to be suitable for touch interfaces and to provide larger and more easily accessible components. Part of the controls are simply larger, but some of them are redesigned for easier touch manipulation.

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

Differences from Office2016 theme

The Office2016Touch theme is, as the name suggests, very similar to the Office2016 theme but with larger controls and wider spaces for easier interaction. There are several controls that differ significantly and the following figures shows some of them.

Figure 1: RadNumericUpDown

RadNumericUpDown with Office2016Touch theme

Figure 2: RadOutlookBar

RadOutlookBar with Office2016Touch theme

Figure 3: RadRibbonView

RadRibbonView with Office2016Touch theme

Default theme colors

Office2016Touch has one color variation, designed to be easily modified via the exposed colors in the theme palette. The default values of the brushes in the theme are the same as in the Office2016 theme.

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

Palette Brushes

The usage of the theme palette’s brushes is the same as in the Office2016 theme.

Glyphs

The font glyphs we have introduced with the Office2016 theme are built-in the Office2016Touch theme as well. They provide a number of ready-to-use vector icons from the TelerikWebUI font. You can learn more about them and the usage from the Font Glyphs Overview article.

Changing Palette Brushes

Office2016Touch provides as well, what is now standard for our themes, dynamic change of the palette colors responsible for the brushes used in our controls. Their defaults are stated above. This mechanism is used to modify the color variation of the theme.

The general naming convention is: Office2016TouchPalette.Palette.[name]Color is responsible for [name]Brush – e.g. Office2016TouchPalette.Palette.BasicColor sets the color for telerik:Offie2016TouchResource ResourceName=AccentBrush

Changing the colors can be achieved in code behind.

[XAML] Example 1: Setting palette colors

Office2016TouchPalette.Palette.AccentColor = Color.FromRgb(255, 0, 0);

Changing Fonts

When using the Office2016Touch 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 2 shows the default font sizes and families.

[C#] Example 2: Default FontSize and FontFamily

Office2016TouchPalette.Palette.FontSizeS = 10;
Office2016TouchPalette.Palette.FontSize = 12;
Office2016TouchPalette.Palette.FontSizeL = 14;
Office2016TouchPalette.Palette.FontFamily = new FontFamily("Segoe UI");

Examples 3 and 4 shows how to change the default FontFamily from "Segoe UI" to "Calibri" and the FontSize from 12 to 16 on a click of a button:

[XAML] Example 3: Example view definition

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

[C#] Example 4: Changing the theme's FontSize and FontFamily

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

Figure 4: Setting FontSize and FontFamily

Setting FontSize and FontFamily

Changing FocusThickness

A new feature of the Office2016Touch 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 can be easily changed in a similar way as the other palette properties.

[C#] Example 5: Changing the theme's FocusThickness

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

Figure 5: Setting FocusThickness

Setting FocusThickness

Changing CornerRadius

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

[C#] Example 6: Setting corner radius

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

Example 7 shows how to change the default corner radius from 0 to 3:

[C#] Example 7: Changing the default corner radius

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

Figure 6: Setting corner radius

Setting corner radius

ReadOnlyBackgroundBrush and ReadOnlyBorderBrush

In the Office2016Touch theme there are two brushes that define background and border brush for the read-only states of the input controls (RadMaskedInput and TextBox). You can do that via the ReadOnlyBackgroundBrush (default value: #FFFFFFFF) and ReadOnlyBorderBrush (default value: #FFABABAB) properties. They are changed in the same manner as the rest of the palette colors.

Changing DisbledOpacity

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

[XAML] Example 8: Changing the disabled opacity

Office2016TouchPalette.Palette.DisabledOpacity = 0.3;

Figure 7: Setting the disabled opacity

Setting the disabled opacity

See Also