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.
See Style-1 here.
Before and After
Here’s how before and after view of the RadWIndow would look like in Telerik’s Windows 8 theme.
Things you need
Before you start doing it, here are the things you need to have.
- Telerik Silverlight Theme Source
- 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
We need to modify two styles here. The first one is the Button styles (close, minimize, restore, maximize). And the RadWindow Style.
<!-- WindowButtonStyle -->
<Style x:Key="WindowButtonStyle"
TargetType="telerik:RadButton">
<Setter Property="Padding"
Value="{StaticResource WindowButtonPadding}" />
<Setter Property="Margin"
Value="{StaticResource WindowButtonMargin}" />
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Content"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Content"
Storyboard.TargetProperty="Opacity"
To="0.3" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Content"
Storyboard.TargetProperty="Opacity"
To="0.7" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse Stroke="#FF686868"
StrokeThickness="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="25"
Height="25" />
<ContentPresenter x:Name="Content"
Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The following RadButton Style key “WindowButtonStyle” is the modified Button Style. In the following style an ellipse is added just before the ContentPresenter.
<!-- RadWindowTemplate -->
<ControlTemplate x:Key="RadWindowTemplate"
TargetType="telerikNavigation:RadWindow">
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
<VisualStateGroup x:Name="DragStates">
<VisualState x:Name="NotDragging" />
<VisualState x:Name="Dragging" />
<VisualState x:Name="Resizing" />
</VisualStateGroup>
<VisualStateGroup x:Name="WindowStates">
<VisualState x:Name="NormalWindow" />
<VisualState x:Name="Maximized">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="WindowOuterBorder"
Storyboard.TargetProperty="BorderThickness">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentOuterBorder"
Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButtons"
Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Minimized">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButtons"
Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Left</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="VerticalAlignment">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<VerticalAlignment>Top</VerticalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="WindowOuterBorder"
Grid.RowSpan="2"
BorderBrush="#4A000000"
BorderThickness="10"
CornerRadius="3"
Background="#4A000000">
<Border CornerRadius="5"
Padding="5"
Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"
MinHeight="75" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="Header"
Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Thumb x:Name="titleThumb"
Grid.ColumnSpan="2"
Style="{StaticResource WindowResizeThumbStyle}" />
<Grid Grid.Column="0"
Margin="30 0 30 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 Light"
FontWeight="Bold"
FontSize="24"
IsTabStop="False"
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">
<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="{StaticResource MainBrush}"
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="{StaticResource MainBrush}"
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="{StaticResource MainBrush}"
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 Data="M1,1 L9,9 M1.0000687,9.0000982 L9.0000687,1.0000986"
Stroke="#FF686868"
StrokeThickness="2"
Width="10"
Height="10" />
</telerik:RadButton>
</StackPanel>
</Border>
</Grid>
<Border x:Name="ContentOuterBorder"
Grid.Row="1"
Margin="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="ContentElement"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</Border>
</Grid>
</Border>
</Border>
</Grid>
</ControlTemplate>
Hope this article helps. See you soon with other controls.
Filed under: Silverlight 4, Silverlight 5, Telerik, Visual Studio 2012 Tagged: Expression Blend, Modified Theme, Silverlight, Telerik, Theme, Windows 8
