Results 1 to 3 of 3

Thread: How to create Template button in Silverlight 2

  1. #1
    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 "   / >

  2. #2
    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.

  3. #3
    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.

Similar Threads

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •