Saturday, September 04, 2010
 
   
 
Welcome to my site

First let me say thanks for stopping by my site. My name is David Hanson-Graville and I am a IT consultant working in the UK. Let me make it clear, I am passionate about technology and specifically .net and its various forms. I've programmed in a range of langages, but I can say, I am now at my happiest when coding with c#. I hope my blog is an enjoyable & educational read and please feel free to email me at David.Hanson@OnTheBlog.net if you have any questions. 

Silverlight 2: Control Templating & The Visual State Manager - PART 1 Minimize
Location: BlogsOnTheBlog    
Posted by: David Hanson Thu, 24 Jul 2008 21:48:24 GMT

In this blog I wanted to provide a simple overview of some of the features provided as part of the June 2.5 Blend preview  and Silverlight 2 Beta 2.  Two of the key features that have been made available as part of this release is the ability to easily template controls in order to create your own custom skins as well as the new Visual State Manager which helps aid int the development of animations.

So lets get started. The first thing we want to do is have a look at how easy it is to create custom templates for controls using the June preview of Blend. We are going to create a simple Silverlight Application using the default project template provided by Blend. (Shown below)

Once Blend has created our project we need to create some very simple XAML. As this example is going to be VERY simple all we need to do is drag a textbox onto our design surface. Below shows the XAML of our form once this has been done.

<UserControl
       x:Class="VSMDemo.Page"
       Width="640" Height="480">
 
       <Grid x:Name="LayoutRoot" Background="White" >
              <TextBox Height="23"
Margin="139,147,159,0"
VerticalAlignment="Top"
Text="TextBox" TextWrapping="Wrap"/>
       Grid>
UserControl>

Now that we have our basic XAML together we can start looking at the new templating support in Blend. If you select the textbox by using the document outline and right clicking you will now be presented with the following option.

Choosing the "Edit a Copy" will present you with the following dialog. Blend now offers you the choice to create a new style resource in a number of locations. For the purpose of the tutorial just take the default settings, this should create the style resource within our current document. 

Whats really cool is that Blend will automatically take you into a design mode for editing the template.From here I made a few changes to the default template. My XAML looks like this after my changes.

 

 

<Style x:Key="TextBoxStyle1" TargetType="TextBox">
                     <Setter Property="Template">
                           <Setter.Value>
                                  <ControlTemplate TargetType="TextBox">
                                         <Grid x:Name="RootElement">
                                                <Grid.Resources>
                                                       <Storyboard x:Key="Normal State">
                                                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                                     <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                                              DoubleAnimationUsingKeyFrames>
                                                       Storyboard>
                                                       <Storyboard x:Key="Focused State">
                                                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                                     <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                                              DoubleAnimationUsingKeyFrames>
                                                       Storyboard>
                                                Grid.Resources>
                                               
                                                <Border CornerRadius="5,5,5,5" BorderBrush="Gainsboro" BorderThickness="2,2,2,2">
                                                       <Border.Background>
                                                              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                     <GradientStop Color="#FFF8F5F5"/>
                                                                     <GradientStop Color="#FFCFE8FC" Offset="1"/>
                                                              LinearGradientBrush>
                                                       Border.Background>
                                                       <ScrollViewer Padding="{TemplateBinding Padding}" Margin="3,3,3,3" BorderThickness="0" x:Name="ContentElement"/>
                                                Border>
                                                <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="False" Opacity="0" StrokeThickness="2" RadiusX="1" RadiusY="1">
                                                       <Rectangle.Stroke>
                                                              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                     <GradientStop Color="#FFA9B9C5" Offset="0"/>
                                                                     <GradientStop Color="#FF668499" Offset="0.325"/>
                                                                     <GradientStop Color="#FF244E6D" Offset="0.325"/>
                                                                     <GradientStop Color="#FF4F7189" Offset="1"/>
                                                              LinearGradientBrush>
                                                       Rectangle.Stroke>
                                                Rectangle>
                                         Grid>
                                  ControlTemplate>
                           Setter.Value>
                     Setter>
              Style>

The elements highlighted in yellow reflect the changes I have made to the default template. If we run our application at this point we can see what our template looks like.

So now you can see just how easy it is to create our own control skins within Blend. In part 2 we will extend this example to show you the new VisualStateManager which greatly increases our productivity when creating cool looking animations.

Part 2 

Permalink |  Trackback

Comments (5)   Add Comment
Silverlight 2: Control Templating & The Visual State Manager - PART 2    By TrackBack on Thu, 24 Jul 2008 21:45:03 GMT
In my previous post we took a quick look at some of the support blend offers for skinning controls in Silverlight 2. Within only a few minutes we were able to take an existing textbox control and exte ...
# The Thinker

Silverlight 2: Control Templating & The Visual State Manager - PART 2    By TrackBack on Thu, 24 Jul 2008 21:45:03 GMT
In my previous post we took a quick look at some of the support blend offers for skinning controls in Silverlight 2. Within only a few minutes we were able to take an existing textbox control and exte ...
# The Thinker

Silverlight 2: Control Templating & The Visual State Manager - PART 1    By TrackBack on Thu, 24 Jul 2008 21:46:51 GMT
In this blog I wanted to provide a simple overview of some of the features provided as part of the June 2.5 Blend preview  and Silverlight 2 Beta 2.  Two of the key features that have been m ...
# The Thinker

Silverlight 2: Control Templating & The Visual State Manager - PART 2    By TrackBack on Mon, 28 Jul 2008 09:02:56 GMT
In my previous post we took a quick look at some of the support blend offers for skinning controls in Silverlight 2. Within only a few minutes we were able to take an existing textbox control and exte ...
# The Thinker

Silverlight 2: Control Templating & The Visual State Manager - PART 2    By TrackBack on Mon, 28 Jul 2008 09:02:56 GMT
In my previous post we took a quick look at some of the support blend offers for skinning controls in Silverlight 2. Within only a few minutes we were able to take an existing textbox control and exte ...
# The Thinker


Your name:
Title:
Comment:
Security Code
Enter the code shown above in the box below
Add Comment   Cancel 
Tweets Minimize
Twitter / LordHanson
  1. LordHanson: Experienced .net dev in sydney for next 5 months if anyone needs me. CV on request just tweet me.

    Published Sun, 29 Aug 2010 05:41:05 +0000 by
  2. LordHanson: Flash on iPad....nice. http://www.tipb.com/2010/07/04/frash-android-flash-ported-ipad/

    Published Sun, 04 Jul 2010 22:07:55 +0000 by
  3. LordHanson: Anyone noticed that when typing on your iPhone it sounds like your holding a gieger counter?

    Published Sun, 04 Jul 2010 22:05:28 +0000 by
  4. LordHanson: Missing wacko's music... What's happened to the album he was working on before he died?

    Published Fri, 25 Jun 2010 23:01:45 +0000 by
  5. LordHanson: New version of Connectify cannot recognise my active Internet connection! Had to roll back to previous version! #fail

    Published Fri, 25 Jun 2010 22:54:54 +0000 by
  6. LordHanson: vuvuzela blowing spoils the world cup! Fact!

    Published Mon, 14 Jun 2010 05:08:43 +0000 by
  7. LordHanson: About http://www.theaustralian.com.au/business/news/us-competition-regulators-to-investigate-apple/story-e6frg90x-1225878779986

    Published Mon, 14 Jun 2010 00:04:45 +0000 by
  8. LordHanson: In the camper van and a storm is coming.....How exciting.

    Published Sun, 25 Apr 2010 04:39:48 +0000 by
  9. LordHanson: My vaio p is doing well while travelling. 3g Internet, HD movies, digital tv, photo editing, wifi router for iPods and much more. Love it

    Published Wed, 10 Mar 2010 10:29:19 +0000 by
  10. LordHanson: Ok so I need to stay techie while away from a computer for a year. Anyone got any ideas.

    Published Mon, 22 Feb 2010 12:31:09 +0000 by
  11. LordHanson: Sitting in YHA Glebe Sydney waiting for the movie night to start

    Published Thu, 18 Feb 2010 08:13:10 +0000 by
  12. LordHanson: Madness today. We only booked our return tickets to bangkok on the wrong day! Luckily we managed to change them!

    Published Wed, 10 Feb 2010 15:54:37 +0000 by
  13. LordHanson: HTML5 the future? http://bit.ly/6yf9Bu

    Published Tue, 09 Feb 2010 13:43:48 +0000 by
  14. LordHanson: Last night in Bangkok! Good fun!

    Published Thu, 04 Feb 2010 18:09:38 +0000 by
  15. LordHanson: @trampussandal Dad? lol

    Published Thu, 04 Feb 2010 05:26:39 +0000 by
  16. LordHanson: Im sitting in a coffee shop in my home town of epsom thinking... Man the day has finally arrived. I can feel the stress lifting.

    Published Mon, 01 Feb 2010 09:05:13 +0000 by
  17. LordHanson: So what excuse will apple use to not allow flash or silverlight to run on the ipad this time I wonder.

    Published Fri, 29 Jan 2010 19:07:46 +0000 by
  18. LordHanson: Yay just manage to upgrade from vista ultimate to windows 7 enterprise by using the registry hack trick. No reinstalls.

    Published Wed, 27 Jan 2010 07:18:07 +0000 by
  19. LordHanson: @swhelband Sure am...http://bit.ly/aZ6Xvd

    Published Tue, 26 Jan 2010 19:05:18 +0000 by
  20. LordHanson: I finished work today in prep for travelling. I must admit as i left the office i felt a little emotional. Sign of a good job with great ...

    Published Tue, 26 Jan 2010 17:48:49 +0000 by
Print  
Archive Minimize
Print  
Contact me Minimize
Print  
Microsoft Certs Minimize







Print  
Silverlight News Minimize
Silverlight - Google News
  1. Microsoft buffs Silverlight for HTML5 video contest - Register

    Published Thu, 02 Sep 2010 20:01:56 GMT+00:00 by
  2. Download Silverlight 4 SDK and Tools for Visual Studio 2010 - Softpedia

    Published Fri, 03 Sep 2010 10:07:34 GMT+00:00 by
  3. Microsoft: Silverlight capabilities exceed those of HTML5 - PC World Magazine

    Published Sat, 04 Sep 2010 05:44:51 GMT+00:00 by
  4. Wanna scan the universe? Just open Windows - Economic Times

    Published Sat, 04 Sep 2010 11:58:46 GMT+00:00 by
  5. Microsoft releases Windows Phone 7 to manufacturing - Wikinews

    Published Sat, 04 Sep 2010 03:33:21 GMT+00:00 by
  6. Raymark Announces Next Generation Of Retail Software Solutions Developed On ... - Retail Solutions Online (press release)

    Published Fri, 03 Sep 2010 05:00:28 GMT+00:00 by
  7. Microsoft issues record Patch Tuesday updates - ZDNet UK

    Published Wed, 11 Aug 2010 08:42:04 GMT+00:00 by
  8. Microsoft trips on Visual Studio Lightswitch - Register

    Published Thu, 26 Aug 2010 05:03:07 GMT+00:00 by
  9. Silverlight 4 and Silverlight 3 Documentation Overlapping - Softpedia

    Published Tue, 24 Aug 2010 08:23:26 GMT+00:00 by
  10. Microsoft: Silverlight still has a future in an HTML 5 world - ZDNet (blog)

    Published Thu, 02 Sep 2010 18:07:26 GMT+00:00 by
Print