Monday, February 06, 2012
 
   
 
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: #southeastern have once again proved their rolling stock can reach new lows.

    Published Wed, 01 Feb 2012 08:09:05 +0000 by
  2. LordHanson: Checked in at The Cards http://t.co/LANfHukb

    Published Sun, 29 Jan 2012 11:04:51 +0000 by
  3. LordHanson: @BillGates Run for president Bill.

    Published Fri, 27 Jan 2012 08:41:35 +0000 by
  4. LordHanson: @swhelband Again!

    Published Fri, 27 Jan 2012 08:39:44 +0000 by
  5. LordHanson: The update for the Nokia Lumia recently has done wonders for battery life! Good job #Nokia #windowsphone

    Published Fri, 27 Jan 2012 08:36:27 +0000 by
  6. LordHanson: Checked in at Victoria Station http://t.co/L0BJ5smd

    Published Thu, 26 Jan 2012 08:35:41 +0000 by
  7. LordHanson: @pdl_uk VAT No: 924 5933 08 Shoulder again! Dang!

    Published Wed, 25 Jan 2012 21:47:45 +0000 by
  8. LordHanson: @tommyjmquinn I think that would be easier. Next Thursday ok?

    Published Wed, 25 Jan 2012 21:04:46 +0000 by
  9. LordHanson: @tommyjmquinn London bridge doable?

    Published Wed, 25 Jan 2012 20:32:34 +0000 by
  10. LordHanson: @tommyjmquinn so where's the meet?

    Published Wed, 25 Jan 2012 19:04:02 +0000 by
  11. LordHanson: @tommyjmquinn your choice mate. Somewhere easy to get to from Bankside. :-D

    Published Tue, 24 Jan 2012 22:01:20 +0000 by
  12. LordHanson: @tommyjmquinn so Darius, Justin and me confirmed. Thursday good for you? Waiting to hear from Sal.

    Published Tue, 24 Jan 2012 21:47:21 +0000 by
  13. LordHanson: @mark_mann which is illegal I thought!

    Published Tue, 24 Jan 2012 21:46:17 +0000 by
  14. LordHanson: Details on Windows Phone 8 confirms NT kernel http://t.co/5Qg1MILl

    Published Tue, 24 Jan 2012 21:34:11 +0000 by
  15. LordHanson: But next target for framework is #winrt. Need to see if my dependencies like DI, RX, ReactiveUi etc will work. Hmm

    Published Mon, 23 Jan 2012 08:33:16 +0000 by
  16. LordHanson: @pdl_uk hey Phil, how's marathon training going?

    Published Mon, 23 Jan 2012 08:31:37 +0000 by
  17. LordHanson: So I now have a framework for apps which targets .net, Silverlight and windows phone. Thankyou project linker!

    Published Mon, 23 Jan 2012 08:28:08 +0000 by
  18. LordHanson: For some reason dropped twitter for a month. Can't say I missed it really. Maybe I need to broaden my follow list!

    Published Mon, 23 Jan 2012 08:24:44 +0000 by
  19. LordHanson: Soo much hype over SIRI when it came out yet I never see anyone use it and don't know anybody who does either. #apple #sooverhyped

    Published Mon, 23 Jan 2012 08:23:18 +0000 by
  20. LordHanson: #southeastern customer satisfaction survey given to me today. This should be fun! Bit wait......no extremely poor option! Just very poor.

    Published Mon, 23 Jan 2012 08:20:09 +0000 by
Print  
Archive Minimize
Print  
Contact me Minimize
Print  
Microsoft Certs Minimize







Print  
Silverlight News Minimize
Silverlight - Google News
  1. Windows Phone 8 - Silverlight Apps Are Legacy - iProgrammer

    Published Fri, 03 Feb 2012 13:03:27 GMT by
  2. Super Bowl Streaming Fail - StreamingMedia.com

    Published Mon, 06 Feb 2012 05:59:33 GMT by
  3. Delphi Developers Rejoice at Silverlight, FireMonkey and VCL Coming Together ... - San Francisco Chronicle (press release)

    Published Tue, 31 Jan 2012 17:34:58 GMT by
  4. WP7 Upgrades and WP8 - Silverlight or C++ - iProgrammer

    Published Tue, 31 Jan 2012 17:21:58 GMT by
  5. Watch The 2012 Super Bowl Online - SportsGrid

    Published Sun, 05 Feb 2012 23:15:21 GMT by
  6. US viewers can watch Super Bowl on Mac, iOS - Macworld

    Published Sun, 05 Feb 2012 20:22:31 GMT by
  7. Hydra 4 Sharpens Its Teeth, Breathes New Fire - Dr. Dobb's

    Published Sun, 05 Feb 2012 17:25:01 GMT by
  8. Will Silverlight live or die? Microsoft won't say - InfoWorld

    Published Fri, 27 Jan 2012 11:00:46 GMT by
  9. Cablevision Flips Live TV To Laptops With Microsoft Silverlight - Multichannel News

    Published Fri, 27 Jan 2012 17:24:53 GMT by
  10. Do SharePoint & Silverlight Have a Future Together? - CMSWire

    Published Mon, 16 Jan 2012 17:29:27 GMT by
Print