Introduction

In this article we will see how to change the default RadWindow theme from Telerik in Silverlight. In this example we would modify the Windows 8 theme for the RadWindow control.

Before and After

Here’s how before and after view of the RadWIndow would look like in Telerik’s Windows 8 theme.

Image may be NSFW.
Clik here to view.

Things you need

Before you start doing it, here are the things you need to have.

1. Telerik Silverlight Theme Source
2. Microsoft Expression Blend + Sketchflow Preview for Visual Studio 2012 (Optional if you are good in XAML)

Style Location

Make sure you are choosing the Windows 8 theme.

The RadWindow style for Telerik Windows 8 theme is located in “Telerik.Windows.Controls.Navigation.xaml”

Search for “RadWindowStyle” in the xaml which should be of type “telerikNavigation:RadWindow” and you would be navigated to the style location.

The Template for RadWindow would be in a ControlTemplate with key as “RadWindowTemplate”. Here is the location where you could change the style.

Modifying the Style

As per the image, we would be having Rounded Corners in the RadWindow. The following xaml for the control template would help you understand the design.

<ControlTemplate x:Key="RadWindowTemplate"


TargetType="telerikNavigation:RadWindow">

<Grid x:Name="LayoutRoot">

<Grid.RowDefinitions>

<RowDefinition Height="40" />

<RowDefinition />

</Grid.RowDefinitions>

<Border Grid.RowSpan="2"

BorderBrush="LightGray"

BorderThickness="1"

CornerRadius="8">

</Border>

<Border Grid.RowSpan="2"

BorderBrush="#FF707070"

BorderThickness="0,0,0,1"

CornerRadius="8" />

<Grid>

<Border BorderThickness="1,1,1,0"

CornerRadius="8,8,0,0"

Background="#FFE6E6E6"

BorderBrush="LightGray">

<Grid x:Name="Header">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Thumb x:Name="titleThumb"

Grid.ColumnSpan="2"

Style="{StaticResource WindowResizeThumbStyle}" />

<Grid Grid.Column="0"

Margin="0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<ContentPresenter x:Name="IconContent"

Grid.Column="0"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Margin="2"

Content="{TemplateBinding Icon}"

ContentTemplate="{TemplateBinding IconTemplate}" />

<ContentControl x:Name="HeaderContent"

Grid.Column="1"

Foreground="#FF686868"

FontFamily="Segoe UI"

FontWeight="Bold"

FontSize="16"

IsTabStop="False"

Margin="8,0,0,0"

HorizontalAlignment="Stretch"

VerticalAlignment="Center"

HorizontalContentAlignment="Stretch"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}" />

</Grid>

<Border x:Name="PART_HeaderButtonsBorder"

VerticalAlignment="Top"

HorizontalAlignment="Right"

Grid.Column="1"

Margin="8">

<StackPanel x:Name="HeaderButtons"

Grid.Column="1"

Orientation="Horizontal"

Margin="0 0 3 0">

<telerik:RadButton x:Name="PART_MinimizeButton"

Command="telerik:WindowCommands.Minimize"

Style="{StaticResource WindowButtonStyle}"

Visibility="{Binding IsEnabled, RelativeSource={RelativeSource Self}, Converter={StaticResource BooleanToVisibilityConverter}}">

<Path Fill="DarkGray"

Data="M0,0 L10,0 L10,2 L0,2 z"

Height="2"

Width="10"

VerticalAlignment="Bottom"

Margin="0 0 0 8" />

</telerik:RadButton>

<telerik:RadButton x:Name="PART_RestoreButton"

Command="telerik:WindowCommands.Restore"

Style="{StaticResource WindowButtonStyle}"

Visibility="{Binding IsEnabled, RelativeSource={RelativeSource Self}, Converter={StaticResource BooleanToVisibilityConverter}}">

<Path Fill="DarkGray"

Width="10"

Height="10"

Data="M0,2.0009768 L8,2.0009768 L8,10.000977 L0,10.000977 z M1.0026064,0 L10.000999,0.015881581 L10.000999,9.0009928 L9.0009499,9.0010004 L9.0006638,1.0009757 L0.98699945,0.99989343 z" />

</telerik:RadButton>

<telerik:RadButton x:Name="PART_MaximizeButton"

Command="telerik:WindowCommands.Maximize"

Style="{StaticResource WindowButtonStyle}"

Visibility="{Binding IsEnabled, RelativeSource={RelativeSource Self}, Converter={StaticResource BooleanToVisibilityConverter}}">

<Path Data="M1,1 L9,1 L9,9 L1,9 z"

Stroke="DarkGray"

StrokeThickness="2"

Width="10"

Height="10" />

</telerik:RadButton>

<telerik:RadButton x:Name="PART_CloseButton"

Command="telerik:WindowCommands.Close"

Style="{StaticResource WindowButtonStyle}"

Visibility="{Binding IsEnabled, RelativeSource={RelativeSource Self}, Converter={StaticResource BooleanToVisibilityConverter}}">

<Path Width="16"

Height="16"

Stretch="Fill"

Fill="DarkGray"

Data="F1 M 17,14L 24,21L 30.9999,14.0001L 33.9999,17.0001L 27,24L 33.9999,31L 31,34L 24,27L 17,34L 14,31L 21,24L 14,17L 17,14 Z " />

</telerik:RadButton>

</StackPanel>

</Border>

</Grid>

</Border>

</Grid>

<Border x:Name="ContentOuterBorder"

Grid.Row="1"

Margin="8">

<ContentPresenter x:Name="ContentElement"

Margin="{TemplateBinding Padding}"

Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}" />

</Border>

</Grid>

</ControlTemplate>

Hope this article helps. See you soon with other controls.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.