Windows8 and Windows8Touch Colors and Fonts
This article will show you how to easily modify Windows8
and Windows8Touch
themes and how to change the font of your application at runtime.
Default Windows8 and Windows8Touch theme colors
The Windows8 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 | |
---|---|---|
MainColor | #FFFFFFFF | |
BasicColor | #FFD6D4D4 | |
MarkerColor | #FF000000 | |
ValidationColor | #FFDE3914 | |
AccentColor | #FF25A0DA | |
StrongColor | #FF767676 |
The same is with Windows8Touch:
Brush name | Brush value | |
---|---|---|
MainColor | #FFFFFFFF | |
ValidationColor | #FFE23907 | |
AccentColor | #FF26A0DA | |
EffectHighColor | #FFFFFFFF | |
EffectLowColor | #FFE1E1E1 | |
HighColor | #FF767676 | |
InvertedColor | #FF000000 | |
InvertedForegroundColor | #FFFFFFFF | |
LowColor | #FFE9E9E9 | |
MainForegroundColor | #FF000000 | |
MediumColor | #FFCCCCCC |
Colorizing the Windows8 and Windows8Touch Themes
When Telerik developed the Windows8 theme, we needed as little as 6 brushes for our controls. Exceptions are the Charts, ScheduleView, etc., which use some additional colors for their chart series, time markers and categories.
All Telerik controls use brushes that are linked to one major singleton object that contains the colors to be used for the Windows8 / Windows8Touch themes. They are public so you can easily modify the colors of the theme at one single point.
You can change the Windows8 / Windows8Touch colors by setting properties as shown in the following example.
Example 1: You can change colors in the Windows8 and Windows8Touch themes by setting the properties of the Palette object.
Changing the palette's default colors
Windows8Palette.Palette.MainColor = Colors.Black;
Windows8Palette.Palette.AccentColor = Colors.Orange;
Windows8Palette.Palette.BasicColor = Colors.DarkGray;
Windows8Palette.Palette.StrongColor = Colors.Gray;
Windows8Palette.Palette.MarkerColor = Colors.LightGray;
Windows8Palette.Palette.ValidationColor = Colors.Red;
...
Windows8TouchPalette.Palette.MainColor = Colors.Black;
Windows8TouchPalette.Palette.AccentColor = Colors.Orange;
Windows8TouchPalette.Palette.ValidationColor = Colors.Red;
Windows8TouchPalette.Palette.EffectHighColor = Colors.Yellow;
Windows8TouchPalette.Palette.EffectLowColor = Colors.Orange;
...
The most important brush, AccentColor
, controls the colors of headers and selected items. The MainColor
brush controls the backgrounds. Other brushes are used at various places but as long as you do not pick the same colors for different brushes, your design will be alright.
Since the PaletteInstance is a DependencyObject, you can also animate the colors at runtime.
Figure 1: Some of the possible looks you will be able to easily achieve.
You can use the following brushes in your application to style your own interface using colors consistent with the Windows8
theme:
AccentBrush
BasicBrush
StrongBrush
MainBrush
MarkerBrush
ValidationBrush
You can also use the following brushes in your application to style your own interface using colors consistent with the Windows8Touch theme:
AccentBrush
EffectHighBrush
EffectLowBrush
HighBrush
InvertedBrush
InvertedForegroundBrush
InvertedGradientBrush
LowBrush
MainBrush
MainForegroundBrush
MainGradientBrush
MediumBrush
ValidationBrush
Using the resources in XAML
<UserControl x:Class="Windows8ThemeColors.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
<Grid x:Name="LayoutRoot" Background="{telerik:Windows8Resource ResourceKey=AccentBrush}">
<Grid.RowDefinitions>
<RowDefinition Height=""/>
<RowDefinition Height=""/>
</Grid.RowDefinitions>
<Button Width="200" Height="40"
Background="{telerik:Windows8Resource ResourceKey=MarkerBrush}"
Foreground="{telerik:Windows8Resource ResourceKey=StrongBrush}"
Content="This is Styled Button"/>
<Button Grid.Row="1" Width="200" Height="40"
Background="{telerik:Windows8TouchResource ResourceKey=ValidationBrush}"
Foreground="{telerik:Windows8TouchResource ResourceKey=InvertedBrush}"
Content="This is Another Styled Button"/>
</Grid>
</UserControl>
Changing Fonts
All Telerik controls use resources that are linked to one major singleton object that contains the FontSize
and FontFamily
properties used for both themes. Those properties are public so you can easily modify those theme resources at one single point. The property for the most commonly used FontSize in both themes is named FontSize and the property for most commonly used FontFamily resource is named FontFamily and it is set to Segoe UI
. Bigger FontSizes are used for headers and footers while smaller FontSizes are used for complex controls such as RibbonView, Gauge, etc.
The following example, shown after the note below, shows these resources and their default values for the Windows8Theme. You can modify each of them based on your needs.
Setting the FontSize and FontFamily properties of the themes' palettes
//Windows8 Resources
Windows8Palette.Palette.FontSizeXS = 10;
Windows8Palette.Palette.FontSizeS = 11;
Windows8Palette.Palette.FontSize = 12;
Windows8Palette.Palette.FontSizeL = 14;
Windows8Palette.Palette.FontSizeXL = 16;
Windows8Palette.Palette.FontSizeXXL = 19;
Windows8Palette.Palette.FontSizeXXXL = 24;
Windows8Palette.Palette.FontFamily = new FontFamily("Segoe UI");
Windows8Palette.Palette.FontFamilyLight = new FontFamily("Segoe UI Light");
Windows8Palette.Palette.FontFamilyStrong = new FontFamily("Segoe UI Semibold");
//Windows8Touch resources
Windows8TouchPalette.Palette.FontSizeS = 10;
Windows8TouchPalette.Palette.FontSize = 12;
Windows8TouchPalette.Palette.FontSizeL = 15;
Windows8TouchPalette.Palette.FontSizeXL = 20;
Windows8TouchPalette.Palette.FontSizeXXL = 24;
Windows8TouchPalette.Palette.FontFamily = new FontFamily("Segoe UI");
Windows8TouchPalette.Palette.FontFamilyLight = new FontFamily("Segoe UI Light");
Windows8TouchPalette.Palette.FontFamilyStrong = new FontFamily("Segoe UI Semibold");
This example shows how you can increase the FontSize of a RadCalendar with the click of a button.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<telerik:RadCalendar x:Name="Calendar" Width="300" Height="250"/>
<telerik:RadButton x:Name="BtnChangeFontSize" Grid.Row="1" Height="30" HorizontalAlignment="Center" Content="Change Font" Click="BtnChangeFontSize_Click_1"/>
</Grid>
public MainPage()
{
StyleManager.ApplicationTheme = new Windows8Theme();
InitializeComponent();
}
private void BtnChangeFontSize_Click_1(object sender, RoutedEventArgs e)
{
Windows8Palette.Palette.FontSize = 22;
Windows8Palette.Palette.FontFamily = new FontFamily("Calibri");
}
Result of clicking the button
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 Windows8Palette
. Its default value is 0.5.
Changing the opacity
Windows8Palette.Palette.DisabledOpacity = 0.2;
Windows8Palette.Palette.DisabledOpacity = 0.2