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
- Default theme colors
- Palette Brushes
- Glyphs
- Changing Palette Brushes
- Changing Fonts
- Changing FocusThickness
- Changing CornerRadius
- ReadOnlyBackgroundBrush and ReadOnlyBorderBrush
- Changing DisbledOpacity
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
Figure 2: RadOutlookBar
Figure 3: RadRibbonView
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.
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.
Example 2: Default FontSize and FontFamily
Office2016TouchPalette.Palette.FontSizeS = 12;
Office2016TouchPalette.Palette.FontSize = 14;
Office2016TouchPalette.Palette.FontSizeL = 16;
Office2016TouchPalette.Palette.FontFamily = new FontFamily("Segoe UI");
Example 3: Example view definition
<StackPanel>
<telerik:RadCalendar HorizontalAlignment="Center" />
<telerik:RadButton Content="Change Font" Click="OnButtonChangeFontSizeClick" />
</StackPanel>
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
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.
Example 5: Changing the theme's FocusThickness
Office2016TouchPalette.Palette.FocusThickness = new Thickness(1);
Figure 5: 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.
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: 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
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 the Office2016TouchPalette. The default value of the property is 0.5.
Example 8: Changing the disabled opacity
Office2016TouchPalette.Palette.DisabledOpacity = 0.3;
Figure 7: Setting the disabled opacity
