Silverlight Fancy Button Controls

In this article we will check out how to create fancy buttons in Silverlight. We will creating a Elastic Button i.e. a button with an Elastic effect.

In this article we would see how we can apply an elastic effect to the Silverlight Buttons.

Let me give you a picture of how the Button should look like:



Below is the Style which I am trying to apply to the button

I added few states in the VisualStateManager. To know more about the VisualStateManager please check out this link http://msdn.microsoft.com/en-us/library/system.windows.
visualstatemanager(v=vs.95).aspx

Below is how I have used the VisualStateManager.

  <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.2" To="Normal"/>
                                        <VisualTransition From="Pressed" GeneratedDuration="0:0:0.1" To="MouseOver"/>
                                        <VisualTransition From="Pressed" GeneratedDuration="0:0:0.1" To="Normal"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Disabled"/>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Grid">
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.9"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Grid">
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.9"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                         <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.1" To="1.023" Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.RadiusY)" Storyboard.TargetName="Rectangle" d:IsOptimized="True"/>
                                                <DoubleAnimation Duration="0:0:0.1" To="0.914" Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.RadiusX)" Storyboard.TargetName="Rectangle" d:IsOptimized="True"/>
                                         </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

Notice the Pressed State :

<VisualState x:Name="Pressed">
                                         <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.1" To="1.023" Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.RadiusY)" Storyboard.TargetName="Rectangle" d:IsOptimized="True"/>
                                                <DoubleAnimation Duration="0:0:0.1" To="0.914" Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.RadiusX)" Storyboard.TargetName="Rectangle" d:IsOptimized="True"/>
                                         </Storyboard>
                                    </VisualState>


There is a Double Animation, that I have created, targeting the Radius of the Rectangle.

I want to create a shadow effect for the Button as shown below:



I achieved that by creating an ellipse. The XAML is shown below:

<Ellipse Opacity="0.495" StrokeThickness="0" Height="17" VerticalAlignment="Bottom">
                                <Ellipse.Effect>
                                    <BlurEffect/>
                                </Ellipse.Effect>
                                <Ellipse.Fill>
                                    <RadialGradientBrush RadiusY="0.46" RadiusX="0.46" GradientOrigin="0.475,0.5">
                                        <GradientStop Color="#FF6A6A6A" Offset="0"/>
                                        <GradientStop Color="#006A6A6A" Offset="0.863"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>

And then Finally the rectangle which would Represent the Button is shown below :

   <Rectangle Margin="30,0,31,8" RadiusY="21" RadiusX="21" Fill="#FF454444" Opacity="0.25">
                                <Rectangle.Effect>
                                    <BlurEffect/>
                                </Rectangle.Effect>
                            </Rectangle>
                            <Rectangle Margin="31,1,32,9" RadiusY="21" RadiusX="21">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.502,1.261" StartPoint="0.5,0">
                                        <GradientStop Color="#FFE8EDF1"/>
                                        <GradientStop Color="White" Offset="0.836"/>
                                        <GradientStop Color="#FFE8EDF1" Offset="0.757"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="Rectangle" Margin="31,1,32,9" RadiusY="21" RadiusX="21">
                                <Rectangle.Fill>
                                    <RadialGradientBrush RadiusY="0.411" RadiusX="0.641" Center="0.496,0.048" GradientOrigin="0.496,0.048">
                                        <GradientStop Color="White" Offset="0"/>
                                        <GradientStop Color="#00E8EDF1" Offset="1"/>
                                        <GradientStop Color="#7CE8EDF1" Offset="0.681"/>
                                    </RadialGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>

How to use the Style?

The XAML for using the Style on the Button is shown below:

<Button Content="Silverlight" HorizontalAlignment="Left" Height="97" Margin="8,35,0,0" Style="{StaticResource ElasticButtonStyle}" VerticalAlignment="Top" Width="150"/>

Please find the source code attached.