Introduction
In previous article, we had seen how to change RadButton style in Windows 8 Theme in Silverlight. There might be requirements where you need to have multi-color buttons. In this article we would see how to use them in a single Telerik Windows 8 Theme.
How it would look like?
Here is how it would look like, if we have three RadButton styles in a single UI.
Modifying the Style
In the previous post we know the location of the RadButton style. We need to keep two more RadButton styles with different names. Let’s say “RadButtonStyleGray” and “RadButtonStyleGreen“. The following XAML are for the respective styles.
<!--RadButtonStyle - Gray-->
<Style x:Key="RadButtonStyleGray"
TargetType="telerik:RadButton">
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="BorderBrush"
Value="{StaticResource BasicBrush}" />
<Setter Property="Background"
Value="{StaticResource MainBrush}" />
<Setter Property="Foreground"
Value="{StaticResource MarkerBrush}" />
<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="#FFC3C3C3"
BorderBrush="#FFC3C3C3" />
<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>
<!--RadButtonStyle - Green-->
<Style x:Key="RadButtonStyleGreen"
TargetType="telerik:RadButton">
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="BorderBrush"
Value="{StaticResource BasicBrush}" />
<Setter Property="Background"
Value="{StaticResource MainBrush}" />
<Setter Property="Foreground"
Value="{StaticResource MarkerBrush}" />
<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="#FF99B86A"
BorderBrush="#FF99B86A" />
<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>
Add Theme File to Project
You need to add the modified Telerik theme file to the project. Refer the modified file in App.xaml Resource Dictionaries.
Adding Style to RadButtons
While adding style to RadButtons, you need to specify the style as required.
Hope this article helps. See you soon with other controls.
Filed under: Silverlight 4, Silverlight 5, Telerik Tagged: RadButton, Silverlight, Telerik, Theme
