Change Telerik Windows 8 Theme for RadButton Style in Silverlight


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.

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

Advertisements