Go Back   TechArena Community > Software > Tips & Tweaks
Become a Member!
Forgot your username/password?
Register Tags Active Topics RSS Search Mark Forums Read

Sponsored Links



How to create Template button in Silverlight 2

Tips & Tweaks


Reply
 
Thread Tools Search this Thread
  #1  
Old 05-08-2010
Member
 
Join Date: Feb 2008
Posts: 121
How to create Template button in Silverlight 2
  

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.
Code:
< Grid   x : Name = " RootElement " > < / Grid >
Now we'll put a little color, namely a blue border and a blue gradient background.
Code:
 < 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
Code:
< Button   Width = " 155 "   Height = " 50 "   Content = " Bouton   Style   Word   2007 "
Style = " {StaticResource   ButtonRectangle} "
VerticalAlignment = " Center "
FontFamily = " Verdana "   FontSize = " 12 "   / >

Reply With Quote
  #2  
Old 05-08-2010
Member
 
Join Date: Feb 2008
Posts: 121
Re: How to create Template button in Silverlight 2

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.
Code:
< 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.
Reply With Quote
  #3  
Old 05-08-2010
Member
 
Join Date: Feb 2008
Posts: 121
Re: How to create Template button in Silverlight 2

The state management with templates, is through VisualStateManager, so we must use it. We begin by adding the namespace
Code:
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
We now add the tags necessary:
Code:
< 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.
Code:
< 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.
Reply With Quote
Reply

  TechArena Community > Software > Tips & Tweaks
Tags: , , , , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "How to create Template button in Silverlight 2"
Thread Thread Starter Forum Replies Last Post
How to create a template of template Harmony60 Software Development 3 21-11-2009 04:17 PM
Add a menu button to SMF custom template parvathy Software Development 3 12-09-2009 01:35 PM
Silverlight project template on Visual web developer 2008 Chain-SmokeR Software Development 3 27-07-2009 01:41 PM
How to Create a Template in Word Maagh Windows Software 3 25-06-2009 09:28 PM
How to create template in outlook 2003 Techguru01 Tips & Tweaks 1 14-02-2009 10:09 AM


All times are GMT +5.5. The time now is 03:25 PM.