468,525 Members | 2,196 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Share your developer knowledge by writing an article on Bytes.

Fading Glowy Button for WPF and Silverlight

ThatThatGuy
449 Expert 256MB
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.
Expand|Select|Wrap|Line Numbers
  1. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2.                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  3.  
Now before going into styles we'll introduce this Resource file to our App.xaml
Expand|Select|Wrap|Line Numbers
  1.     <Application.Resources>
  2.         <ResourceDictionary>
  3.             <ResourceDictionary.MergedDictionaries>
  4.                 <ResourceDictionary Source="Resources/Generic.xaml"/>
  5.             </ResourceDictionary.MergedDictionaries>
  6.         </ResourceDictionary>
  7.     </Application.Resources>
  8.  
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
Expand|Select|Wrap|Line Numbers
  1. <Style x:Key="GlowButtonStyle" TargetType="{x:Type Button}"> 
  2.  
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.
Expand|Select|Wrap|Line Numbers
  1. <Setter Property="Button.Foreground" Value="Black"/>
  2.  
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
Expand|Select|Wrap|Line Numbers
  1.         <Setter Property="Template">
  2.             <Setter.Value>
  3.                 <ControlTemplate TargetType="{x:Type Button}" x:Name="ButtonUpControlTemplate">
  4.  
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..
Expand|Select|Wrap|Line Numbers
  1.          <Border x:Name="ButtonBorder" 
  2.                   BorderThickness="1"
  3.                   BorderBrush="Gray">
  4.  
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.
Expand|Select|Wrap|Line Numbers
  1.    <ContentPresenter x:Name="ButtonContentPresenter"
  2.                                 VerticalAlignment="Center"  
  3.                                 HorizontalAlignment="Center"/>
  4.  
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.
Expand|Select|Wrap|Line Numbers
  1.                         <Border.Background>
  2.                             <LinearGradientBrush x:Name="ButtonUp"    StartPoint="0,0" EndPoint="0,1">
  3.                                 <GradientStop Color="WhiteSmoke" Offset="0.1"/>
  4.                                 <GradientStop Color="LightGray" Offset="0.2"/>
  5.                                 <GradientStop Color="White" Offset="0.9"/>
  6.                             </LinearGradientBrush>
  7.                         </Border.Background>
  8.  
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
Expand|Select|Wrap|Line Numbers
  1. </Border>
  2.  
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.
Expand|Select|Wrap|Line Numbers
  1.     <MultiTrigger>
  2.       <MultiTrigger.Conditions>
  3.        <Condition Property="Button.IsMouseOver" Value="True"/>
  4.         </MultiTrigger.Conditions>
  5.  
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...
Expand|Select|Wrap|Line Numbers
  1.          <MultiTrigger.EnterActions>
  2.          <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOver}"/>
  3.             </MultiTrigger.EnterActions>
  4.  
In <MultiTrigger.EnterActions> we start the storyboard for color Animation which references animation resource in the same file.
Expand|Select|Wrap|Line Numbers
  1.     <Storyboard x:Key="ButtonAnimationOver">
  2.             <ParallelTimeline>
  3.                 <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" From ="WhiteSmoke" To="PaleGoldenrod" Duration="0:0:0.50"/>
  4.             <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" From ="LightGray" To="PaleGoldenrod" Duration="0:0:0.50"/>
  5.                 <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" From ="White" To="PaleGoldenrod" Duration="0:0:0.50"/>
  6.             </ParallelTimeline>
  7.     </Storyboard>
  8.  
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
Expand|Select|Wrap|Line Numbers
  1.         <MultiTrigger.ExitActions>
  2.          <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOut}"/>
  3.             </MultiTrigger.ExitActions>
  4.  
and the exit animation
Expand|Select|Wrap|Line Numbers
  1.     <Storyboard x:Key="ButtonAnimationOut">
  2.             <ParallelTimeline>
  3.                 <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To ="WhiteSmoke" From="PaleGoldenrod" Duration="0:0:0.50"/>
  4.             <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="LightGray" From="PaleGoldenrod" Duration="0:0:0.50"/>
  5.                 <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" To="White" From="PaleGoldenrod" Duration="0:0:0.50"/>
  6.             </ParallelTimeline>
  7.     </Storyboard>
  8.  


Now having been the style ready to be applied for our button we go to the button to be styled and apply the style.
Expand|Select|Wrap|Line Numbers
  1.    <Button Content="Button4" Height="42" x:Name="button1" Width="85" Style="{StaticResource GlowButtonStyle}"/>
  2.  
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.
Expand|Select|Wrap|Line Numbers
  1. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2.                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  3.     <!-- Style for application Background-->
  4.     <Style x:Key="ApplicationBackground" TargetType="{x:Type Window}">
  5.         <Setter Property="Control.Background" Value="WhiteSmoke"/>
  6.     </Style>
  7.  
  8.  
  9.  
  10.     <Storyboard x:Key="ButtonAnimationOver">
  11.             <ParallelTimeline>
  12.                 <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" From ="WhiteSmoke" To="PaleGoldenrod" Duration="0:0:0.50"/>
  13.             <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" From ="LightGray" To="PaleGoldenrod" Duration="0:0:0.50"/>
  14.                 <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" From ="White" To="PaleGoldenrod" Duration="0:0:0.50"/>
  15.             </ParallelTimeline>
  16.     </Storyboard>
  17.     <Storyboard x:Key="ButtonAnimationOut">
  18.             <ParallelTimeline>
  19.                 <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To ="WhiteSmoke" From="PaleGoldenrod" Duration="0:0:0.50"/>
  20.             <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="LightGray" From="PaleGoldenrod" Duration="0:0:0.50"/>
  21.                 <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" To="White" From="PaleGoldenrod" Duration="0:0:0.50"/>
  22.             </ParallelTimeline>
  23.     </Storyboard>
  24.  
  25.     <!-- Common Button Style-->
  26.     <Style x:Key="GlowButtonStyle" TargetType="{x:Type Button}"> 
  27.         <Setter Property="Button.Foreground" Value="Black"/>
  28.         <Setter Property="Template">
  29.             <Setter.Value>
  30.                 <ControlTemplate TargetType="{x:Type Button}" x:Name="ButtonUpControlTemplate">
  31.                     <Border x:Name="ButtonBorder" 
  32.                   BorderThickness="1"
  33.                   BorderBrush="Gray">
  34.                         <ContentPresenter x:Name="ButtonContentPresenter"
  35.                                 VerticalAlignment="Center"  
  36.                                 HorizontalAlignment="Center"/>
  37.                         <Border.Background>
  38.                             <LinearGradientBrush x:Name="ButtonUp"    StartPoint="0,0" EndPoint="0,1">
  39.                                 <GradientStop Color="WhiteSmoke" Offset="0.1"/>
  40.                                 <GradientStop Color="LightGray" Offset="0.2"/>
  41.                                 <GradientStop Color="White" Offset="0.9"/>
  42.                             </LinearGradientBrush>
  43.                         </Border.Background>
  44.                     </Border>
  45.                     <ControlTemplate.Triggers>
  46.                         <MultiTrigger>
  47.                             <MultiTrigger.Conditions>
  48.                                 <Condition Property="Button.IsMouseOver" Value="True"/>
  49.                             </MultiTrigger.Conditions>
  50.                             <MultiTrigger.EnterActions>
  51.                                 <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOver}"/>
  52.                             </MultiTrigger.EnterActions>
  53.                             <MultiTrigger.ExitActions>
  54.                                 <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOut}"/>
  55.                             </MultiTrigger.ExitActions>
  56.                         </MultiTrigger>
  57.                     </ControlTemplate.Triggers>
  58.                 </ControlTemplate>
  59.             </Setter.Value>
  60.         </Setter>
  61.     </Style>
  62. </ResourceDictionary>
  63.  
May 28 '10 #1
0 6715

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Faisal Shafiq | last post: by
2 posts views Thread by =?Utf-8?B?Y3JlYXZlczA2MjI=?= | last post: by
3 posts views Thread by =?Utf-8?B?Um9nZXIgTWFydGlu?= | last post: by
13 posts views Thread by =?Utf-8?B?Um9nZXIgTWFydGlu?= | last post: by
reply views Thread by NPC403 | last post: by
1 post views Thread by fmendoza | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.