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 Example 1.

Example 1: You can change colors in the Windows8 and Windows8Touch themes by setting the properties of the Palette object.

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

Example 2 shows how to use the resources to achieve the style of the buttons in Figure 2.

<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> 

Figure 2 shows the result of styling your own interface (Example 2).

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.

Example 3, 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.

Example 3: Setting FontSize and FontFamily properties to use in Windows8 and Windows8Touch themes.

//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"); 

The Q1 2013 release of Telerik UI Silverlight introduced features that allow you to dynamically change the FontSize and FontFamily properties of all components for Windows8 and Windows8Touch themes. As Example 4 shows, you can change the default FontFamily from "Segoe" to "Calibri" and the FontSize from 12 to 22 on a click of a button.

Example 4: 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"); 
} 

Figure 3 shows a comparison of the application before and after the button is clicked.

Figure 3: You can click a button to change FontSize.

See Also

• Setting a Theme (Using Implicit Styles)