Creating Button Style at Runtime

Loading

Creating Button Style at Runtime

Creating a Button Style at Runtime in Silverlight 3

In this post, I will show how to apply a style at runtime to a button.

Creating the style:

You can create the style by two ways. If you are good in xaml coding then you can create it in Visual Studio. The simple one is to create a sample project in expression blend and use the "Edit Template" feature o create the style.

How To?

While creating the button style in expression blend you need to be careful with the options.

The Name(key) option is the key given to the style. Internally the framework link the styles with this key. It will be unique per one application or user control depending what you choose in the "define in" option. If you choose the "this document " option then the style will be available only in the current user control. If you want to use the style to your whole project, then select the "Application" option. For this post I will choose Application.

The Style:

<Application.Resources>

<Style x:Key="ButtonStyle1" TargetType="Button">

<Setter Property="Background" Value="#FF1F3B53"/>

<Setter Property="Foreground" Value="#FF000000"/>

<Setter Property="Padding" Value="3"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="BorderBrush">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFA3AEB9" Offset="0"/>

<GradientStop Color="#FF8399A9" Offset="0.375"/>

<GradientStop Color="#FF718597" Offset="0.375"/>

<GradientStop Color="#FF617584" Offset="1"/>

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Button">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">

<SplineDoubleKeyFrame KeyTime="0" Value="1"/>

</DoubleAnimationUsingKeyFrames>

<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">

<SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>

</ColorAnimationUsingKeyFrames>

<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">

<SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>

</ColorAnimationUsingKeyFrames>

<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">

<SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>

</ColorAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

<ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">

<SplineColorKeyFrame KeyTime="0" Value="#FF6DBDD1"/>

</ColorAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">

<SplineDoubleKeyFrame KeyTime="0" Value="1"/>

</DoubleAnimationUsingKeyFrames>

<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">

<SplineColorKeyFrame KeyTime="0" Value="#D8FFFFFF"/>

</ColorAnimationUsingKeyFrames>

<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">

<SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/>

</ColorAnimationUsingKeyFrames>

<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">

<SplineColorKeyFrame KeyTime="0" Value="#8CFFFFFF"/>

</ColorAnimationUsingKeyFrames>

<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">

<SplineColorKeyFrame KeyTime="0" Value="#3FFFFFFF"/>

</ColorAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled"/>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">

<SplineDoubleKeyFrame KeyTime="0" Value="1"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unfocused"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="Background" Background="White" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">

<Grid Margin="1" Background="{TemplateBinding Background}">

<Border x:Name="BackgroundAnimation" Opacity="0" Background="#FF448DCA"/>

<Rectangle x:Name="BackgroundGradient">

<Rectangle.Fill>

<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">

<GradientStop Color="#FFFFFFFF" Offset="0"/>

<GradientStop Color="#F9FFFFFF" Offset="0.375"/>

<GradientStop Color="#E5FFFFFF" Offset="0.625"/>

<GradientStop Color="#C6FFFFFF" Offset="1"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Grid>

</Border>

<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0"/>

<Image Source="Excel.png" Stretch="Fill"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Application.Resources>

If you go through this xaml, you will see the style is created under Application.Resources and ready to be used for any .xaml file in the project.

Applying in runtime:

There are two ways of applying this style. If you are creating a button compile time, then in the xaml you can apply the style like this :

<Button x:Name="btnSubmit" Style="{StaticResources ButtonStyle1}"/>

But if you have to create a button runtime and want to have the same look and feel then this approach is not worth. I saw my team mate creating the button then making its visibility as collapsed and then in the code making it visible. But that is not the correct procedure. You can do something like this:

Button btn = new Button();

btn.Style = Application.Current.Resources["ButtonStyle1"] as Style;

btn.HorizontalAlignment = HorizontalAlignment.Left;

LayoutRoot.Children.Add(btn);

Here you can use the style from the Application.Current.Resources which is a dictionary. J. Then adding it to the correct parent. I am adding to the LayOutRoot here.

Thanks.