Office2013 Theme
The official Q3 2013 release of UI for WPF brought a brand new external theme with a flat modern UI and three color variations – White
, Light Gray
, Dark Gray
.
The following topic explains the specifics of the theme's color variations and the available font options.
Theme Variations
The following are the supported color variations of the Office2013 theme
White
—White color theme palette. This is also the default variation of the theme.LightGray
—Light gray theme palette.DarkGray
—Dark gray theme palette.
This is how the ColorVariation
enumeration looks:
/// <summary>
/// Represents theme color variations.
/// </summary>
public enum ColorVariation
{
/// <summary>
/// Represents Dark Gray Office2013 theme palette.
/// </summary>
DarkGray,
/// <summary>
/// Represents Light Gray Office2013 theme palette.
/// </summary>
LightGray,
/// <summary>
/// Represents the default White Office2013 theme palette.
/// </summary>
White
}
Theme Variation Changing
When using NoXAML
assemblies in an application you should merge the necessary resource dictionaries from the corresponding theme assembly (in this case - Telerik.Windows.Themes.Office2013.dll
). Alternitevely, you can merge the resource dictionaries as *.xaml files in your application (in case there is no reference to the theme assembly) in an appropriate place in your project (i.e. App.xaml). For more information about implicit styles refer to this article.
The Office2013 Theme
offers a very intuitive and easy way to change its color variation. You can change the variation by using the LoadPreset
method of Office2013Palette
in the entry point of your application. You just have to pass to the method the desired color variation as a parameter.
For example, if you want to set the DarkGray
color variation, you should have the following code-block in your application:
public MainWindow()
{
Office2013Palette.LoadPreset(Office2013Palette.ColorVariation.DarkGray);
InitializeComponent();
}
The
DarkGray
variation of the theme is designed with a dark background in mind and it is recommended to use such a background in your application when choosing it.
Office2013 Palette brushes and colors
Brush name | White | Light Gray | Dark Gray | |||
---|---|---|---|---|---|---|
AccentMain | FF0072C6 | FF0072C6 | FF0072C6 | |||
Accent | FF0072C6 | FF0072C6 | FF444444 | |||
Main | FFFFFFFF | FFFFFFFF | FFFFFFFF | |||
Inverted | FF000000 | FF000000 | FF000000 | |||
Basic | FFFDFDFD | FFFDFDFD | FFFDFDFD | |||
Strong | FF767676 | FF767676 | FF767676 | |||
Validation | FFFF0000 | FFFF0000 | FFFF0000 | |||
LowLightMain | FFF1F1F1 | FFF1F1F1 | FFF1F1F1 | |||
LowLight | FFFFFFFF | FFF1F1F1 | FFE5E5E5 | |||
LowDark | FFFFFFFF | FFFAFAFA | FFF3F3F3 | |||
MediumLight | FFE1E1E1 | FFE1E1E1 | FFE1E1E1 | |||
MediumDark | FFC6C6C6 | FFC6C6C6 | FFC6C6C6 | |||
HighLight | FFD4D4D4 | FFC6C6C6 | FFABABAB | |||
HighDark | FFABABAB | FFABABAB | FFABABAB | |||
EffectLow | 33FFFFFF | 33FFFFFF | FF0072C6 | |||
EffectHigh | 33000000 | 33000000 | 800072C6 | |||
EffectAccentLow | 330072C6 | 330072C6 | 330072C6 | |||
EffectAccentHigh | 800072C6 | 800072C6 | 800072C6 |
Changing Fonts
The official Q1 2015 release of Telerik UI for WPF introduced features that allow you to dynamically change the FontSize
and FontFamily
properties of all components in the application for the Office2013 theme.
All Telerik controls use resources that are linked to one major singleton object that contains the FontSize and FontFamily properties used for the Office2013 theme. These properties are public so you can easily modify the theme resources at one single point. The most commonly used FontSize in the theme is named FontSizeL
and its default value is 15. The bigger font sizes are used for headers and footers while smaller ones are used inside complex controls such as RadRibbonView
, RadGauge
, RadGanttView
, etc. As for the FontFamily - there is only one FontFamily resource which is named FontFamily and it is set to Calibri
.
Please note that for complex scenarios we strongly recommend setting font size only initially before the application is initialized. We recommend font sizes between 11px and 19px for the FontSize property.
All the available FontSizes and FontFamily as well as their default values:
Office2013Palette.Palette.FontSizeXXS = 10;
Office2013Palette.Palette.FontSizeXS = 12;
Office2013Palette.Palette.FontSizeS = 13;
Office2013Palette.Palette.FontSize = 14;
Office2013Palette.Palette.FontSizeL = 15;
Office2013Palette.Palette.FontSizeXL = 16;
Office2013Palette.Palette.FontFamily = new FontFamily("Calibri");
-
Office2013Palette.Palette.FontSizeXXS
is used:- GridViewNewRow in Telerik.Windows.Controls.GridView
-
Office2013Palette.Palette.FontSizeXL
is used:- ExpressionEditor in Telerik.Windows.Controls.Expressions
- WizzardPage in Telerik.Windows.Controls.Navigation
- ScheduleView's MonthView items in Telerik.Windows.Controls.ScheduleView
As the following example shows, you can change the default FontFamily from "Calibri" to "MonoType Corsiva" and the FontSize from 15 to 16 on a click of a button:
<StackPanel>
<telerik:RadCalendar x:Name="Calendar" Width="250" Height="250" Margin="4 10"/>
<telerik:RadButton HorizontalAlignment="Center" Content="Change Font" Click="OnButtonChangeFontSizeClick" />
</StackPanel>
private void OnButtonChangeFontSizeClick(object sender, RoutedEventArgs e)
{
Office2013Palette.Palette.FontSizeL = 24;
Office2013Palette.Palette.FontSizeS = 16;
Office2013Palette.Palette.FontFamily = new FontFamily("MonoType Corsiva");
}
Changing Opacity
If you need to change the opacity of the disabled elements, you can now easily do so by using the DisabledOpacity
property of the Office2013Palette
. Its default value is 0.3.
Changing the opacity
Office2013Palette.Palette.DisabledOpacity = 0.5;
Office2013Palette.Palette.DisabledOpacity = 0.5
Merging Modified Palette Resources With StyleManager Theming Approach
When modifying fonts, colors, or other resources from the Office2013Palette
and StyleManager
is used as theming mechanism, the theme's ResourceDictionary
needs to be merged in App.xaml file to apply the changes.
Merging the theme's ResourceDictionary in App.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<telerik:Office2013ResourceDictionary/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>