I have received a number of emails asking when Silverlight will ship; and I’ve promised to look into it for a number of folks who very much need to know. Here is what I found out…
While the incredible success of the use of Silverlight in facilitating the viewing of the Olympics and the Democratic convention speak to the solidity of Silverlight 2 and to the very high standards we’ve set, we’re not quite ready to make any announcements. (sorry).
Please be assured that we totally understand how much you need to know the date, but as has been true all along, when we announce a date we want it to be a date you can count on, and we are working hard on getting you that date as soon as we possibly can.
Where Has Liberty Gone?
While I have you, let me apologize for the recent slow down in information coming from Liberty Central. I was on vacation for much of August (and, as many of you know, dealing with family “stuff”) and I’ll be “out of office” for much of September: I’m in Redmond this week, and will be in England and Ireland from the 14th to the 25th (Remix, Bristol, Dublin and Ulster).
Once I return, I hope to ramp up a significant set of more advanced videos, supplemented by tutorials, web-casts, and blog posts, and then venture into a couple new approaches. The goal will be to meet the needs of those of you who want to go beyond the fundamentals, while still ensuring that the “on ramps” to Silverlight are kept in good condition as programmers arrive. I have a long list of advanced topics from your suggestions and from talking with folks here, and Tim and I are looking at a lot of cool ways to get that information out.
In the meantime, please be sure to catch my next webcast on September 10: Creating Skinnable Custom Controls.
I had a great time discussing Silverlight with Craig Shoemaker on his PodCast Pixel8.
Craig is a terrific interviewer; well informed, passionate, smart, Microsoft MVP, ASP Insider, developer, podcaster, blogger, co-author of Beginning ASP.NET with AJAX, and very good at letting me blather on and then jumping in to get me back on track.
I highly recommend subscribing both to Pixel8 and to Craig’s independent PolymorphicPodcast
I had a lot of fun in this interview in which we focused in on what’s hot in the Silverlight Developer community; what do folks want to know, how are we going to meet those needs.
I’m very proud and excited to announce that I’ve been invited to be a monthly guest on the Sparkling Client Silverlight Podcast. Details to follow very soon, but our initial shows include a discussion of Templates on September 23rd and of Databinding on October 28.
You can find out more about the show, its hosts and their previous podcasts on the Sparkling Client Home Page.
Due to a family emergency I had to postpone today’s Webcast, and I apologize for the inconvenience. I did want to assure you that we have already rescheduled, that we will record the Webcast, and that I will be recording a series of How Do I videos on custom controls as well.
Thank you for your patience.
I’m very pleased to announce that the Silverlight Tutorials are now available in Japanese with more on the way soon. (All tutorials in VB and C# soon as well)
-Jesse
A personal note on two threads coming together.
In 2004 I watched Senator Barack Obama give the Keynote speech to the Democratic National Convention and two weeks later I placed an Obama for President bumper sticker on my car that generated smiles, “if only…” comments and quite a few chuckles.
In 2007 I attended Mix and within a very short time gave up a dozen years as an independent consultant to join Microsoft as Silverlight Community PM.
This morning, I had the incredible pleasure of watching Obama’s keynote again, this time using Silverlight technology, which as you probably know is the enabling technology for the DNC 08 web site.
Obviously the decision as to who leads our nation is far more important than the decision as to which technology we choose, but participating, in whatever small capacity in both threads, has been (and very much continues to be) a blast.
Back in June I posted a blog entry on how to get started with Silverlight; it seems it is time to update that as the world changes very quickly and we have many new resources. Each of us has our own way of learning, but here is my suggested path through the information, mixing tutorials and videos with a healthy dose of hands on!
Step One – Get Only What You Need At First
First, go to the Get Started page, but don’t download everything in site. There’s always time to come back; start by getting just the links shown here:
Next, Click on Learn on the menu at the top of the page (or click here) and watch or download Video #1, The Silverlight Install Experience.
You’ll want to be sure that you have installed the Silverlight tools for Visual Studio properly, and I would go ahead and install Expression Blend as well.
If you have little .NET experience and no WPF or Silverlight experience, then you may want to pause here and get some basic background. In that case, I suggest (a) Taking a look at some showcase applications to see what Silverlight can do, and then perhaps read through this old, but still useful overview of Silverlight
If you are already a .NET programmer, read (or download) the first Tutorial: Silverlight Controls and be sure to work your way through the programming (source code is available in both C# and VB.NET and the tutorial itself will be in both languages very soon.
Then be sure to watch the following videos on the fundamentals (click on the image to go to the video)
Careful! You’ll want to watch #33 Templates without VSM before you watch #32 Templates and VSM.
Videos and Tutorials
The User Controls tutorial matches up with the Keyboard and the User Control video.
Tutorial 5, Expression Blend for Developers is a solid foundation for the second half of the videos shown that use Blend (starting with Introducing Blend to Silverlight Developers and Intensive Silverlight Programming and Expression Blend)
The Styles and Templates tutorial is a very good match with the two videos on Templates
We have three tutorials on Data:
and these match up well with the many videos on databinding and data manipulation.
Once you’ve worked your way this far, you’ll be all set to explore on your own as you’ll have all the fundamentals under your belt and a bit more.
Enjoy! And don’t forget, the forums are a great place to get your questions answered quickly.
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!
In much of the writing about animation in Silverlight, one question that seems to recur 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.
I haven’t really written much about transforms in a long while. We looked at them in depth during the Silverlight 1.0 time frame and then more or less took them for granted ever since.
It may be time for a review – perhaps a quick video (it’s on my list!). In the meantime, here’s a quick peak into some of what we say about Transforms in our forthcoming book, [footnote 1]
A Transform is just a change
A transform is just an instruction in Xaml to change the object in a particular way, and wouldn’t be interesting, except that you can have that change happen to your object either when that object is in a “state” (e.g., mouseOver) or as part of an animation (“move from here to there and get twice as big over the next 5 seconds”). In that case, the ability to specify all that in Xaml (as opposed to code) really is quite interesting.
Playing With Transforms
To see some of this in action, create a project in Expression Blend and create four rows and 2 columns of approximately equal size (or, if like me, you have OCD, put the design surface in split mode and set the column and row sizes exactly.
Once you’re done admiring your grid, draw a circle in the upper left cell (hold the shift key while you draw an ellipse.) In the properties window set its name to Circle1 and set its Width and Height to 90, its alignments to center and its margins to zero. Fill it with a nice blue. Then make 3 more circles, filling the upper two rows, giving each circle its own color.
Fill the bottom two rows with rectangles sized 120 by 80, also centered in each cell with no margin. Take a moment to name the circles Circle1, Circle2, etc. and the rectangles Rect1, Rect2, etc. and give them each a distinct color.
When you are done, your grid should look more or less like this,
Click on the first circle (you can click on Circle1 in the Objects and Timeline window) and open the Transform tab in the Properties window. Notice that the Transform Window has six tabs, if you hover over each in turn they are identified as
- · Translate
- · Rotate
- · Scale
- · Skew
- · Center Point
- · Flip
Translate
A TranslateTransform moves the object. Set the X value to 225 and the Y value to 125. Suddenly your circle is visiting with the red circle that was down and to the right. You have “translated” its 0,0 position to a new position in the grid.
Rotate
No surprise what this does. Click on the rectangle in the lower left corner and then click on the rotate tab. You are prompted to enter an angle; enter the value 45 and watch the rectangle swivel 45 degrees as shown here
Scale
As you would expect, scale lets you grow or shrink an object. Let’s set the scale of the green rectangle to 1.5 and of the purple rectangle to .5, and finally, let’s set the yellow rectangle’s X scale to 1.5 and its Y scale to .5. Finally, let’s scale the X and Y of the purple circle up by 1.5 but with the green, let’s scale the X up by 1.5 but leave the Y alone. The result is shown here,
Restore
Before we look at Skew translations we need to restore the circles and rectangles to their original sizes and shapes. To do so, click each shape in turn and then look at the RenderTransform label in the Transform window. You’ll see a small white dot indicating that the object has been transformed. Click on that dot as shown here,
This will bring up the Advanced Property Options Dialog, the first choice of which is Reset; click on this to reset all the transforms for this object. Do this for each of the shapes in turn; they will each be restored to their starting size, shape and orientation.
Skew
A skew changes the lines of an objects along its x or y axis and can either distort the apparent slope of an object (e.g., turning a square into a parallelogram) or can even simulate three dimensions.
Replace the rectangles with 80 by 80 squares. Let’s skew the first (left-most) one by setting its X value to 45 and its Center (the next tab to the right) to 0,0.
You can combine skewing on one axis with changing the center to give the illusion of an object bisecting the surface of the plane. Click on the middle square and set its Y skew to 45° (thus turning the skewed figure on its side) and also set its center to 0.5, 0.5;
Hope that is helpful
---------------
[footnote 1 – this is just an excerpt from unedited text, placed here not to push the book but to provide what I hope will be helpful information. The book is mentioned only because the material is copyright 2008 O'Reilly Media ]
When I wasn’t looking this Website/Mindware got a lot better. Visual Thesaurus is an on-line subscription tool (~$3/month) that you can also buy as a desktop utility, that allows you to put in a word and see its related words visually. I put in play and got back a blizzard of related words,
(Click on the image to see it full size)
Each node can be clicked on to find out what everything radiating from that node shares in common. For example, travel, locomote, go and move all radiate from a common node. Clicking on that brings up a definition that all four share, and an example sentence,
What relationships are shown in the diagram is dictated by your settings (as is font size, line size and many other aspects of the diagram),
You can see that this goes well beyond just synonyms.
The node colors are keyed to the definition chart (thus, the green that tied together the four words above is listed in the verbs section, and all the verb nodes in the entire diagram are defined there as well.
You can reverse the action and find a definition under verb and that will light up the node and thus show you the words associated with it.
Of course, if you click on a word, that word becomes the focus of a new set of associations, allowing you to progress from Play –> Contend –> Debate –>Argument –>Variable->Symbol to Star…
This can be either incredibly rewarding for your writing, or a tremendous time-sink. But it is wonderfully responsive and great fun.
I admit it, this has little to do with Silverlight per se, but it is such a useful utility, and I use it so much all day (including when I’m programming) that I thought I’d share it with you, at least briefly.
Every time you copy anything to the clip board, it is captured to ClipTrack (though you can create white and black lists to change that behavior). You can find things in chronological order, alphabetical order, by when they were clipped,by when they were pasted, by type (image, text, web, etc.) or you can create folders (favorites, project based, whatever). You can look at web pages in html view, text view or web