Fading Glowy Button for WPF and Silverlight

[ThatThatGuy]

This tutorial is intended to enlighten the power of XAML to build rich applications for Windows(WPF), Web(Silverlight) & Browser(XBAP). I will explain to you about building attractiveFading Glow Buttons by using pure XAML. With XAML we don't necessarily need to build a user or a custom control for a fancy looking control. Instead we use styles, the same as CSS applied to Web Controls.

For this we'll be creating a Resource Dictionary. A Resource Dictionary is a file which contains Styles for Controls (like .css files). We define Resource Dictionaries for the sake of reusability. Although, It's not neccessary for you to create a Resource Dictionary for applying styles. You may write application level styles in App.xaml or Window or Page level styles in their respective xaml sources.

You may add a ResourceDictionary file by Adding a new Reosurce Dictionary from Project menu.
By default your Resource Dictionary file will contain the following markup.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 

Now before going into styles we'll introduce this Resource file to our App.xaml

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Generic.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
 

As you can see in the above markup under the <Application.Resources> we need to Merge resource files that will be used in the application. I've kept all resource files under Resources folder, you may specify your own.

After doing this lets get back to defining styles. This is where we gonna be defining styles for the button. Now, defining Fading glowy Styles for a button takes quite a bit of a XAML markup.

So I'll be explaining each phase part by part.

Phase 1: Approach towards styles

<Style x:Key="GlowButtonStyle" TargetType="{x:Type Button}"> 
 

At first we'll be defining a Style like this where we specify the accessible name of the style GlowButtonStyle and the the type of control we're targeting i.e. Button.

Then i specify the the text color of the button.

<Setter Property="Button.Foreground" Value="Black"/>
 

To change the entire look and feel of the button and creating our own look and feel, we need to override the default temaplte and define a new template. That's what the most of the code is all about.

We'll be setting the new template under the control's template property

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}" x:Name="ButtonUpControlTemplate">
 

In the above markup we are setting a new template for the control, all the code is under the <ControlTemplate> markup.

Now, with nothing as a template the button will be simply invisible on the window..

Phase 2: Giving a background to the Empty Button

For this we create a light border around the button to make it appear..

         <Border x:Name="ButtonBorder" 
                  BorderThickness="1"
                  BorderBrush="Gray">
 

Now for the gradient part we have to paint the background gradient for the button in te border background..

After giving it a border we need provide for content settings for the button as in the Text to be held inside the button.

   <ContentPresenter x:Name="ButtonContentPresenter"
                                VerticalAlignment="Center"  
                                HorizontalAlignment="Center"/>
 

ContentPresenter manages the Content Alignment and informs the empty button Canvas that it has to hold some content inside it. Without specifying ContentPresenter you will not be able to see ant content embedded inside the button.

Now about filling the control background.

                        <Border.Background>
                            <LinearGradientBrush x:Name="ButtonUp"    StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="WhiteSmoke" Offset="0.1"/>
                                <GradientStop Color="LightGray" Offset="0.2"/>
                                <GradientStop Color="White" Offset="0.9"/>
                            </LinearGradientBrush>
                        </Border.Background>
 

You specify your gradient fill settings in Border.Background as a part of the button background. Here I've defined a LinearGradientBrush with some better looking gradient stops and also specifying the StartPoint as origin of the gradient and EndPoint as End of the gradient.

and then finally close the Border with </Border> tag

</Border>
 

Phase 3: Arrange for Animated Glowy Effects

Under this i'll be explaining you the animation part which makes the button glowy on mouse hover and back to normal on mouse leave.

Animated effects are best suitable to a button when mouse is over it or when mouse is clicked.
Now, to handle animation on mouse hover we need to write markup for that under <ControlTemplate.Triggers> markup.

    <MultiTrigger>
      <MultiTrigger.Conditions>
       <Condition Property="Button.IsMouseOver" Value="True"/>
        </MultiTrigger.Conditions>
 

For specifying on which trigger to take the specified action we need to specfiy the trigger conditon under <MultiTrigger.Conditions> markup.

Herein we check for the property of the Button. If mouse is hovered over it and if the property value satisfies the condition. Then we write the code for the animation as under...

         <MultiTrigger.EnterActions>
         <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOver}"/>
            </MultiTrigger.EnterActions>
 

In <MultiTrigger.EnterActions> we start the storyboard for color Animation which references animation resource in the same file.

    <Storyboard x:Key="ButtonAnimationOver">
            <ParallelTimeline>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" From ="WhiteSmoke" To="PaleGoldenrod" Duration="0:0:0.50"/>
            <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" From ="LightGray" To="PaleGoldenrod" Duration="0:0:0.50"/>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" From ="White" To="PaleGoldenrod" Duration="0:0:0.50"/>
            </ParallelTimeline>
    </Storyboard>
 

This StoryBoard plays ColorAnimation which changes the current gradient colors of the button to PaleGoldenRed Color over a period of time specified in the Duration Property.

And when the mouse has left the control focus we write the ExitActions for the effect as below

        <MultiTrigger.ExitActions>
         <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOut}"/>
            </MultiTrigger.ExitActions>
 

and the exit animation

    <Storyboard x:Key="ButtonAnimationOut">
            <ParallelTimeline>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To ="WhiteSmoke" From="PaleGoldenrod" Duration="0:0:0.50"/>
            <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="LightGray" From="PaleGoldenrod" Duration="0:0:0.50"/>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" To="White" From="PaleGoldenrod" Duration="0:0:0.50"/>
            </ParallelTimeline>
    </Storyboard>
 

Now having been the style ready to be applied for our button we go to the button to be styled and apply the style.

   <Button Content="Button4" Height="42" x:Name="button1" Width="85" Style="{StaticResource GlowButtonStyle}"/>
 

We specify the style name for the button in Style Property and that's all you need to style the button to a Fading Glowy Button.

Here's the full Resource Dictionary code.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- Style for application Background-->
    <Style x:Key="ApplicationBackground" TargetType="{x:Type Window}">
        <Setter Property="Control.Background" Value="WhiteSmoke"/>
    </Style>
 
 
 
    <Storyboard x:Key="ButtonAnimationOver">
            <ParallelTimeline>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" From ="WhiteSmoke" To="PaleGoldenrod" Duration="0:0:0.50"/>
            <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" From ="LightGray" To="PaleGoldenrod" Duration="0:0:0.50"/>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" From ="White" To="PaleGoldenrod" Duration="0:0:0.50"/>
            </ParallelTimeline>
    </Storyboard>
    <Storyboard x:Key="ButtonAnimationOut">
            <ParallelTimeline>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To ="WhiteSmoke" From="PaleGoldenrod" Duration="0:0:0.50"/>
            <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="LightGray" From="PaleGoldenrod" Duration="0:0:0.50"/>
                <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" To="White" From="PaleGoldenrod" Duration="0:0:0.50"/>
            </ParallelTimeline>
    </Storyboard>
 
    <!-- Common Button Style-->
    <Style x:Key="GlowButtonStyle" TargetType="{x:Type Button}"> 
        <Setter Property="Button.Foreground" Value="Black"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}" x:Name="ButtonUpControlTemplate">
                    <Border x:Name="ButtonBorder" 
                  BorderThickness="1"
                  BorderBrush="Gray">
                        <ContentPresenter x:Name="ButtonContentPresenter"
                                VerticalAlignment="Center"  
                                HorizontalAlignment="Center"/>
                        <Border.Background>
                            <LinearGradientBrush x:Name="ButtonUp"    StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="WhiteSmoke" Offset="0.1"/>
                                <GradientStop Color="LightGray" Offset="0.2"/>
                                <GradientStop Color="White" Offset="0.9"/>
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Button.IsMouseOver" Value="True"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOver}"/>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOut}"/>
                            </MultiTrigger.ExitActions>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>