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> 

Result of the used resources

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

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.

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 

See Also

• Setting a Theme (Using Implicit Styles)