Introduction
In this article we will see how to change the default RadButton theme from Telerik in Silverlight. In this example we would modify the Windows 8 theme for the RadButton control.
Before and After
Here’s how before and after view of the RadButton 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 RadButton style for Telerik Windows 8 theme is located in “Telerik.Windows.Controls.xaml“
Search for “RadButtonStyle” in the xaml which should be of type “telerik:RadButton” and you would be navigated to the style location.
Modifying the Style
To modify the original style to the target style, the Background, Foreground, and the Rounded Corner should be affected. Here is the XAML of the modified RadButton style.
<Style x:Key="RadButtonStyle"
TargetType="telerik:RadButton">
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="BorderBrush"
Value="{StaticResource BasicBrush}" />
<Setter Property="Background"
Value="{StaticResource MainBrush}" />
<Setter Property="Foreground"
Value="White" />
<Setter Property="FontFamily"
Value="Segoe UI" />
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Padding"
Value="3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CommonStatesWrapper"
Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="00:00:00.050"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation To="-1"
Duration="0:0:0"
Storyboard.TargetName="Content"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Opacity"
To="0.5" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="Content"
Storyboard.TargetProperty="Opacity"
To="0.3" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStatesGroup">
<VisualState x:Name="Unfocused1">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00.150">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"
Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="00:00:00.150"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Focused1">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"
Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="00:00:00.115"
Value="0.2" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BackgroundVisibility">
<VisualState x:Name="BackgroundHidden">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="BackgroundVisible" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates" />
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="4"
Background="#FFE47F72"
BorderBrush="#FFE47F72" />
<ContentPresenter x:Name="Content"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
<ContentPresenter.RenderTransform>
<TranslateTransform />
</ContentPresenter.RenderTransform>
</ContentPresenter>
<!-- Focus -->
<Border x:Name="CommonStatesWrapper">
<Border x:Name="FocusVisual"
Visibility="Collapsed"
Opacity="0"
BorderThickness="1"
BorderBrush="{StaticResource MarkerBrush}"
CornerRadius="4" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Hope this article helps. See you soon with other controls.
Filed under: Silverlight 4, Silverlight 5, Telerik Tagged: RadButton, Silverlight, Telerik, Theme, Windows 8, Xaml
