How to create Template button in Silverlight 2

[Tweaker]

Sponsored Links

To illustrate this concept, we will customize a button control. To achieve all that is template, your best friend is undoubtedly the MSDN. Indeed you will find on the latter on behalf of various states (MouseOver for example a button), and examples. We'll start with the visual of our button. Our root element will be named RootElement.

< Grid   x : Name = " RootElement " > < / Grid >

Now we'll put a little color, namely a blue border and a blue gradient background.

 < Grid   x : Name = " RootElement " > 
< Border   x : Name = " VisualElement "   Width = " {TemplateBinding   Width} "   Height = " {TemplateBinding   Height} "   CornerRadius = " 4 "   BorderThickness = " 1 " > 
< Border.BorderBrush > 
< SolidColorBrush   Color = " #FF9BB7E0 " / > < / Border.BorderBrush > < Border.Background > 
< LinearGradientBrush   EndPoint = " 0.5,1 "   StartPoint = " 0.5,0 " > < GradientStop   x : Name = " Color1 "   Color = " #FFC8DBEE "   Offset = " 0.260 " / > < GradientStop   x : Name = " Color2 "   Color = " #FF84AFE6 "   Offset = " 0.530 " / > 
< GradientStop   x : Name = " Color3 "   Color = " #FFC8DBEE "   Offset = " 0.80 " / > < / LinearGradientBrush > 
< / Border . Background > < / Border > < / Grid >

Here is the result of our button with this code for now

< Button   Width = " 155 "   Height = " 50 "   Content = " Bouton   Style   Word   2007 "
Style = " {StaticResource   ButtonRectangle} "
VerticalAlignment = " Center "
FontFamily = " Verdana "   FontSize = " 12 "   / >

[Tweaker]

We'll just add an object type ContentPresenter, whose contents will bind on the content of our button, in other words, everything that is in the Content property (text, control ...) of our button will be represented in our ContentPresenter.

< Grid   x : Name = " RootElement " > 
< Border   x : Name = " VisualElement "   
Width = " {TemplateBinding   Width} "   
Height = " {TemplateBinding   Height} "   
CornerRadius = " 4 "   BorderThickness = " 1 " > 
< Border.BorderBrush > 
< SolidColorBrush   Color = " #FF9BB7E0 " / > 
< / Border.BorderBrush > < Border . Background > 
< LinearGradientBrush   EndPoint = " 0.5,1 "   StartPoint = " 0.5,0 " > < GradientStop   x : Name = " Color1 "   Color = " #FFC8DBEE "   Offset = " 0.260 " / > 
< GradientStop   x : Name = " Color2 "   Color = " #FF84AFE6 "   Offset = " 0.530 " / > 
< GradientStop   x : Name = " Color3 "   Color = " #FFC8DBEE "   Offset = " 0.80 " / > < / LinearGradientBrush > < / Border . Background > 
< ContentPresenter   Content = " {TemplateBinding   Content} "
ContentTemplate = " {TemplateBinding   ContentTemplate} "
FontFamily = " {TemplateBinding   FontFamily} "
FontSize = " {TemplateBinding   FontSize} "
FontStretch = " {TemplateBinding   FontStretch} "
FontStyle = " {TemplateBinding   FontStyle} "
FontWeight = " {TemplateBinding   FontWeight} "
Foreground = " Black "
Padding = " {TemplateBinding   Padding} "
TextAlignment = " {TemplateBinding   TextAlignment} "
TextDecorations = " {TemplateBinding   TextDecorations} "
TextWrapping = " {TemplateBinding   TextWrapping} "
VerticalContentAlignment = " Center "
HorizontalContentAlignment = " Center "
Margin = " 0 "   / > < / Border > < / Grid >

It remains a problem: when you move your mouse over or even clicked on it nothing happens at all. For that we will now specify its behavior.

[Tweaker]

The state management with templates, is through VisualStateManager, so we must use it. We begin by adding the namespace

xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

We now add the tags necessary:

< Grid   x : Name = " RootElement " > 
< vsm : VisualStateManager . VisualStateGroups > 
< vsm : VisualStateGroup   x : Name = " CommonStates " > 
< / vsm : VisualStateGroup > 
< / vsm : VisualStateManager . VisualStateGroups > [...] 
< / Grid >

Let's start with the MouseOver state.

< Grid   x : Name = " RootElement " > 
< vsm : VisualStateManager . VisualStateGroups > 
< vsm : VisualStateGroup   x : Name = " CommonStates " > 
< vsm : VisualState   x : Name = " MouseOver " > 
< Storyboard > < ColorAnimationUsingKeyFrames   Storyboard . TargetName = " Color1 "   Storyboard . TargetProperty = " Color " > 
< DiscreteColorKeyFrame   KeyTime = " 0:0:0 "   Value = " #FFFDF2CA "   / >
 < / ColorAnimationUsingKeyFrames > < ColorAnimationUsingKeyFrames   Storyboard . TargetName = " Color2 "   Storyboard . TargetProperty = " Color " > 
< DiscreteColorKeyFrame   KeyTime = " 0:0:0 "   Value = " #FFFFD048 "   / >
 < / ColorAnimationUsingKeyFrames > 
< ColorAnimationUsingKeyFrames   Storyboard . TargetName = " Color3 "   Storyboard . TargetProperty = " Color " > 
< DiscreteColorKeyFrame   KeyTime = " 0:0:0 "   Value = " #FFFDF2CA "   / > < / ColorAnimationUsingKeyFrames > 
< / Storyboard > 
< / vsm : VisualState > 
< vsm : VisualState   x : Name = " Disabled "   / > 
< / vsm : VisualStateGroup > 
< / vsm : VisualStateManager . VisualStateGroups > < / Grid >

As you can see this is extremely simple, just declare a VisualState and to associate with the property x: Name the name of the state to which it is to be associated. Then just put a Storyboard for our animation. And now, now when the user pass the mouse button on the blue gradient background will change to orange gradient.