Everything Silverlight, and more!

I had trouble with someone's Silverlight site... I dropped my buddy Tim Heuer an email and asked him if it was me or what... he said it was me... sigh...

I still disagree, but as this progressed, Tim offered up that there is a problem folks are reporting that I appeared to be on the edge of... so I figured what the heck, let's help!

After an email exchange last night, we realized I needed .NET 3.5 SP1 installed.. oops... so I tried that and it pooted...hmmm

Tim says "Oh if you have VS2008 on there, you need the whole install" ... now that's where I should have heard John McLain from Die Hard: " Come out to the coast, we'll get together, have a few laughs...", but I didn't.

So, I at least knew there was an order to all this and just having uninstalled all my Silverlight on Sunday night, I was a local knowledge expert on doing that, so I did it again. I then pulled down the ISO image for the full boat SP1 and promptly forgot how I've executed them in the past. So I found an exe to d/l and did that, ran it, and it was taking a long time, and it was already about 11:55pm, so I left it running and went to bed.

Got up at 5:20 this morning and the install had puked and died... yuck, yuck, yuck... it died because a log file was not created... seems like everything important happened but a log... shrug...so I went out to my MSDN subscription site and downloaded the ISO image from there, and then spent too much time remembering how to run ISO images. Cranked that up and proceeded to get ready for leaving for work.

It puked and died as well... sigh--same problem... good thing I'm a Microsoft fan boy or I could be getting pissed by this point :)

So... it was time to leave... the system appeared to be in who knows what state, certainly no Silverlight onboard, and no work accomplished last night. THAT is when the line from Die Hard came to mind... along with a couple others as well :)

So I guess tonight I'll run it yet one more time so I can send Tim a log -- didn't think to do that this morning -- then I'm going to try to clean any drek off from the aborted installs, and get Silverlight back on there... unless of course we try other attempts to get things loaded in which case anything could happen!

Gotta love it...

I’m incredibly pleased to say that we have implemented a comments section for each tutorial, just as we do for each video

Please leave your comments and I will subscribe to the comments list and try to respond as quickly as possible (if your comment goes unanswered for a while, don’t hesitate to send me mail: jliberty@microsoft.com

NB: I’ve heard loud and clear that you want to see more advanced topics covered; they are on the way. The current plan calls for a tutorial in September and one in October and then to look at the frequency; either staying at once a month or bumping it up to twice a month. I’m traveling for some of September so will let you know shortly after that.

Thanks!

The Microsoft Windows 7 Team has started the discussion about the upcoming release of Windows... known for now as Windows7.

This blog is a good entry point for those interested in being the first to know about this exciting new release of Windows.

Enjoy it... Oh and feel free to participate in the discussion ...

Blog: Engineering Windows 7

Joel Reyes

In this second part of my interview, Keith Elder and Chris Woodruff to talk about all things Silverlight. This episode gets deeper in to the good and bad of Silverlight 2 development today.

© 2008 Shawn Wildermuth. All Rights Reserved.
Add Comment | digg this

Looking for free introductory training on the .NET 3.5 SP1 & ASP.NET MVC?  Head over to Jonathan Carter's blog to get all the details on the .NET 3.5 Enhancements Training Kit RTM.  What will you find?  Information and links to download a kit that has presentations, demos, and labs covering what's new in ASP.NET AJAX, ASP.NET Routing, ASP.NET MVC, ASP.NET Dynamic Data, ADO.NET Data Services, ADO.NET Entity Framework, WCF, and Visual Studio 2008 SP1.  If you've seen any of my 3.5 SP1 or my older "ASP.NET Futures" presentations, then you are already familiar with some of the content in the kit.  I used an early release of the kit as the foundation for some of my demos.  The kit has come a long way since I used it.  I skimmed through everything last week.  There is lots of good content in here!

-Marc

In addition to releasing the .NET Framework 3.5 SP1 last week, which included a number of improvements to WPF, the WPF Codeplex site went public.  This site is the home for the WPF Toolkit and WPF Futures.

From the site:

"The WPF Toolkit is a collection of WPF features and components that are being made available outside of the normal .NET Framework ship cycle. The WPF Toolkit not only allows users to get new functionality more quickly, but allows an efficient means for giving feedback to the product team. Many of the features will be released with full source code as well.  The Toolkit Roadmap outlines some of the upcoming features we have planned."

"WPF Futures includes sample controls and features, many of which are being considered for the Toolkit. Check out the Futures Roadmap to see some of the features we have planned."

The first CTP of the WPF Toolkit includes the new WPF Datagrid.  Future releases will include a DatePicker/Calendar and more.  Jaime Rodriguez already has 3 posts on the Datagrid:

dabbling around the new WPF datagrid (part 1)

datagrid (part 2) -- Show me some code

Datagrid (part3): styling

While I am at it, Jaime has a nice little "cheat-sheet to some of the WPF 3.5 SP1 features" at http://blogs.msdn.com/jaimer/archive/2008/08/15/cheat-sheet-to-some-of-the-wpf-3-5-sp1-features.aspx. 

-Marc

John O'Brien, a Windows Live Developer MVP, has been cranking out samples of how to use the Virtual Earth ASP.NET Control.  He's also blogging over at www.liveside.net now.  His latest post is titled Server Side Clustering and comes complete with videos!  John has also created a site where you can see his samples live and download all the samples at http://veasp.soulsolutions.com.au/.  He's organized the samples in a similar fashion to the Virtual Earth Interactive SDK.  If you are leaning towards using the Virtual Earth ASP.NET Control, then you'd be silly not to check this stuff out!

-Marc

In much of the writing about animation in Silverlight, one question that seems to  recurs is this: why bother with a linear key-frame animation if it is less intuitive and more complex than a simple from-to animation

Let’s back up and examine that for just a second.

Linear Interpolation

Linear Interpolation means that if you instruct the animation to start at position 0 and move to position 200 over 4 seconds, then you know that it will be at position 100 at 2 seconds, (half way there in half the time) and at position 50 at 1 second (1/4 of the way in 1/4 of the time) and at position 25 at 1/2 second. That is, the distance is covered evenly over the allotted time.

It turns out that there are two types of animation in Silverlight that use linear interpolation: simple from-to animation, and Linear Keyframe animation.

From-To Animation

From-to animation just says “Take this value and change its value from x to y over this much time”.  For example, you might write

<DoubleAnimation Storyboard.TargetName=”TT1” Storyboard.TargetProperty=”X”
From=”0” To=”500” Duration=”0:0:2” />

DoubleAnimation means that you’re going to create an animation by changing some value that is expressed as a Double (that is a number that might have a fraction).

The Target is named TT1 (in this case it is a Transform but it could be a shape, etc.)  The property on that target is X (in this case the X position in an (X,Y) point.  Then you see the From value (0) and the To value (500) and the Duration (2 seconds) which means that you’re going to change that property (x) from 0 to 500 over 2 seconds.

A From To Example

Suppose you want to move a rectangle from the upper left to the lower right of your control, and you’re writing the Xaml by hand. One very easy way to do so is to use From-to animation (specifically, a DoubleAnimation that targets the Rectangle’s TranslateTransform X and Y). You might end up with a Page.xaml that looks like this:

   1: <UserControl x:Class="BlogAnimationExample.Page"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

   4:     Width="600" Height="800">

   5:     <UserControl.Resources>

   6:         <Storyboard x:Name="FT1">

   7:             <DoubleAnimation 

   8:             Storyboard.TargetName="TT1"

   9:             Storyboard.TargetProperty="X"

  10:             From="0" To="500" Duration="0:0:2" />

  11:             <DoubleAnimation 

  12:             Storyboard.TargetName="TT1"

  13:             Storyboard.TargetProperty="Y"

  14:             From="0" To="700" Duration="0:0:2" />

  15:         </Storyboard>

  16:  

  17:     </UserControl.Resources>

  18:     <Grid x:Name="LayoutRoot" Background="White"  >

  19:         <Rectangle x:Name="rect1" 

  20:             HorizontalAlignment="Left" 

  21:             VerticalAlignment="Top"

  22:             Margin="10,0,0,0" 

  23:             Stroke="#FFFF0000" 

  24:             Width="200" Height="60">

  25:             <Rectangle.RenderTransform>

  26:                 <TransformGroup>

  27:                     <TranslateTransform x:Name="TT1"  />

  28:                 </TransformGroup>

  29:             </Rectangle.RenderTransform>

  30:         </Rectangle>

  31:     </Grid>

  32: </UserControl>

You need something to kick that off, so modify Page.xaml.cs as follows:

   1: public Page()

   2: {

   3:    InitializeComponent();

   4:    Loaded += new RoutedEventHandler( Page_Loaded );

   5: }

   6:  

   7: void Page_Loaded( object sender, RoutedEventArgs e )

   8: {

   9:    FT1.Begin();

  10: }

Now the animation will begin as soon as the page loads.

Adding a Wrinkle

That works fine, but what if instead of having the rectangle drift to the lower right on an angle, what you’d like is for the rectangle to go straight down, then to the right and then return home on the angle?

If you look at our story board you can see that it is combining the first DoubleAnimation that moves to the right with the second animation that moves down to create a single path that moves down and to the right at the same time. What is needed is three story boards!

   1: <UserControl.Resources>

   2:     <Storyboard x:Name="FT1">

   3:         <!--Move down-->

   4:         <DoubleAnimation 

   5:         Storyboard.TargetName="TT1"

   6:         Storyboard.TargetProperty="Y"

   7:         From="0" To="700" Duration="0:0:2" />

   8:      </Storyboard>

   9:     <Storyboard x:Name="FT2">

  10:         <!--Move right-->

  11:         <DoubleAnimation 

  12:         Storyboard.TargetName="TT1"

  13:         Storyboard.TargetProperty="X"

  14:         From="0" To="500" Duration="0:0:2" />

  15:     </Storyboard>

  16:     <Storyboard x:Name="FT3">

  17:         <!--Move home-->

  18:         <DoubleAnimation 

  19:         Storyboard.TargetName="TT1"

  20:         Storyboard.TargetProperty="X"

  21:         From="500" To="0" Duration="0:0:2" />

  22:         <DoubleAnimation

  23:         Storyboard.TargetName="TT1"

  24:         Storyboard.TargetProperty="Y"

  25:         From="700" To="0" Duration="0:0:2" />

  26:     </Storyboard>

  27: </UserControl.Resources>

The first storyboard moves down (and not to the right), the second moves right, and the third moves both on both the x and y axis to move home. Unfortunately, you’re not done. Because of multi-tasking you can’t just launch these; you have to make sure that FT1 has completed before you start FT2, and that must complete in turn before you launch FT3.

Fortunately, there is a completed event for storyboards, so it isn’t all that difficult:

   1: public Page()

   2: {

   3:    InitializeComponent();

   4:    Loaded += new RoutedEventHandler( Page_Loaded );

   5:    FT1.Completed += new EventHandler( FT1_Completed );

   6:    FT2.Completed += new EventHandler( FT2_Completed );

   7: }

   8:  

   9: void FT2_Completed( object sender, EventArgs e )

  10: {

  11:    FT3.Begin();

  12: }

  13:  

  14: void FT1_Completed( object sender, EventArgs e )

  15: {

  16:    FT2.Begin();

  17: }

  18:  

  19: void Page_Loaded( object sender, RoutedEventArgs e )

  20: {

  21:    FT1.Begin();

  22: }

It isn’t pretty, but it works.

Using Keyframes

Keyframes give you a good bit more control at the cost of a little more complexity. With Keyframes you state a series of time/value pairs.

So rather than just saying here’s my start value and my end value and how much time you have you say at time 0 the value is 0 and at time 1 second it is 120 and at time 1.27 seconds it is 195 and at time 2 seconds it is 400.

You can have as many time elements as you want, and they don’t have to be evenly spaced. While the system will create a linear interpolation between the values you supply, you do not have to space your explicitly named values evenly. So it is perfectly legitimate to tell the shape to move 50 units in the first second, 200 units in the next two seconds and 500 units in the fourth second.

That extra power allows you to solve the problem above with a single storyboard:

   1: <UserControl.Resources>

   2:     <Storyboard x:Name="StoryBoard1" >

   3:         <DoubleAnimationUsingKeyFrames 

   4:         Storyboard.TargetName="TT1"

   5:         Storyboard.TargetProperty="X">

   6:             <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />

   7:             <LinearDoubleKeyFrame KeyTime="0:0:2" Value="0" />

   8:             <LinearDoubleKeyFrame KeyTime="0:0:4" Value="500" />

   9:             <LinearDoubleKeyFrame KeyTime="0:0:6" Value="0" />

  10:         </DoubleAnimationUsingKeyFrames>

  11:         <DoubleAnimationUsingKeyFrames 

  12:         Storyboard.TargetName="TT1"

  13:         Storyboard.TargetProperty="Y">

  14:             <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />

  15:             <LinearDoubleKeyFrame KeyTime="0:0:2" Value="700" />

  16:             <LinearDoubleKeyFrame KeyTime="0:0:4" Value="700" />

  17:             <LinearDoubleKeyFrame KeyTime="0:0:6" Value="0" />

  18:         </DoubleAnimationUsingKeyFrames>

  19:     </Storyboard>

  20: </UserControl.Resources>

  21: <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="false

  22:     <Rectangle x:Name="rect1" 

  23:     HorizontalAlignment="Left" 

  24:     VerticalAlignment="Top" 

  25:     Margin="10,0,0,10" 

  26:     Stroke="#FFFF0000" 

  27:     Width="200" 

  28:     Height="60" >

  29:         <Rectangle.RenderTransform>

  30:             <TransformGroup>

  31:                 <ScaleTransform   />

  32:                 <RotateTransform  />

  33:                 <TranslateTransform x:Name="TT1"  />

  34:             </TransformGroup>

  35:         </Rectangle.RenderTransform>

  36:     </Rectangle>

  37: </Grid>

Because the keyframe allows me to hold the Y value in place after I move it, I can wait there while I move right, creating my own synchronization as needed without creating multiple storyboards, and giving a much cleaner, easier to understand and maintain animation.

More on this soon.