To achieve this effect, our initial approach was to hardcode a string of storyboard XAML. This animation was then inserted as a canvas resource and played to animate the tile movement. Programmatically, we would insert into a string of XAML the appropriate X and Y coordinates for each tiles final destination. Here is an example of what our original approach looked like.

1
2
3
4
5
6
7
8
9
10
11
12
13

xaml += "<Storyboard xmlns=\http://schemas.microsoft.com/client/2007\";
    xaml +=" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" x:Name=\"";
    xaml += storyboardName + "\" Storyboard.TargetName=\"" + element.Name + "\" > ";
  xaml += "  <DoubleAnimation Storyboard.TargetProperty=\"(Canvas.Left)\" To=\"" ;
  xaml += currentX + "\" Duration=\"0:0:0.25\" />";
  xaml += " <DoubleAnimation Storyboard.TargetProperty=\"(Canvas.Top)\"  To=\"";
  xaml +=  currentY + "\" Duration=\"0:0:0.25\" />";
xaml += "</Storyboard>";
 
  Storyboard storyboard = (Storyboard)XamlReader.Load(xaml);
 _parentCanvas.Resources.Add(storyboard);
 storyboard.Begin();
….

Even though this approach met our visual need, we felt it was a poor use of XAML and made tweaking the animation of each tile very difficult. Thanks to some great suggestions from a mentor at Microsoft, we came up with a much more flexible approach.

Instead of programmatically loading custom storyboard XAML into the resource collection, we created a single storyboard and added it as a canvas resource within the “tile.xaml“. This approach allowed us to use Blend to visualize the animation and manipulate its parameters until we got the desired easing and visual effect.

If you examine “tile.xaml there are a few things worth explaining. First, each “SplineDoubleKeyFrame” element has been given a “x:Name”. This name will be used to locate the appropriate “SplineDoubleKeyFrame” used to set the tiles destination X and Y “value”. Second, each “DoubleAnimationUsingKeyFrames” element is targeting the “parentCanvas”. In our tile class the top most canvas is named “parentCanvas”. This is significant, because it allows us to animate the entire tile element regardless of the number of visual elements nested within the UserControls XAML.

To facilitate the process of manipulating each “SplineDoubleKeyFrame” we have created the following helper function and placed it within our tile class.

1
2
3
4
5
6
7
8
9

public void SetSplineXandY(string sbName, string keyFrameXName, double x, string keyFrameYName, double y)
{
    Storyboard sb = _parentCanvas.Resources.FindName(sbName) as Storyboard;
    SplineDoubleKeyFrame sdkY = sb.Children[0].FindName(keyFrameYName) as SplineDoubleKeyFrame;
    sdkY.Value = y;
 
    SplineDoubleKeyFrame sdkX = sb.Children[0].FindName(keyFrameXName) as SplineDoubleKeyFrame;
    sdkX.Value = x;
 }

As we populate the grid with tiles, we call “SetSplineXandY” to modify the appropriate X and Y coordinates prior ton playing the storyboard. Here is a snip of that code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

foreach (Tile element in Children)
  {
  _Iteration++;
  if (currentX + element.Width + marginX * 2 > panelWidth)
  {
   // move to next line
    currentX = 0 + marginX;
    currentY = nextRowY + marginY;
  }
  Storyboard sb = element.ParentCanvas.Resources.FindName("TileAnimation") as Storyboard;
  //this is moving it immediatly to the correct Y
  element.SetValue(Canvas.TopProperty, currentY);
  element.SetValue(Canvas.LeftProperty, -150);
  sb.Completed += new EventHandler(TransitionIn_Completed);
  element.SetSplineXandY("TileAnimation", "keyFrameX", (currentX+150), "keyFrameY", 0.0);
  sb.Begin();
  _TransitionsInOut.Add(sb);
 
  // calculate offset for the next row
  nextRowY = Math.Max(nextRowY, currentY + element.Height + (marginY * 2));
 
  // calculate position for the next element
  currentX += element.Width + (marginX * 2);                  
}

Since we are executing a series of asynchronous storyboards it is beneficial to have a way to identify that all of the animations have completed. Individually, each storyboard fires a “Completed” event when it is finished. Attaching to this event combined with a collection of executed storyboards references we can determine when all storyboard are done playing.

That’s it. Click here to download a sample project that demonstrates this technique.

After catching up on some overdue sleep, I can say that although it was extremely intense (only 20 hours of sleep this past week), it was an incredible experience. My teammates Scott McAndrew and Craig Budwitz were amazing, and I am extremely happy with our Silverlight 1.1 prototype.

LA 2007 Design Problem:

You and your team have just been hired by a consortium representing all of the major Movie and Television studios. Your team constitutes the Office of the President of Products. You are responsible for determining the product strategy for this consortium. While your authority is considerable, it is not absolute.

You must pitch your product solution to the Board of Directors, also known as the Judges.

The media industry is facing an unprecedented set of challenges today. Digital distribution, a dramatic reduction in traditional advertising, the rise of social networks such as MySpace and Facebook and other factors have all combined to force a fundamental rethinking of the entertainment industry.

Your job is to:

• Find new ways to monetize the deep catalog of content that the consortium has. You should specifically be thinking beyond simply pay per download, subscriptions or advertising
• Look for new ways to create fans of our content. Sites like MySpace and Facebook (among others) have shown us that social networks are powerful tools. Figure out how to exploit the principles of social networking, integrate into existing networks, or both
• Look for ways to exploit the Long Tail. The consortium has a fantastic amount of old content that’s very valuable to many people. Figure out how to best help our users find existing content, discover other content, and share this with friends
• Figure out the device & platform landscape. Between iTunes, the iPod, Zune, Media Center, UnBox, Xbox Live, Joost, and everything else, it’s difficult to understand the overall experience system for our users. Explore creating your own, partnering, or both

As you can see from the design problem, it is very deep. Executing on each of these points in a working Silverlight prototype, in a mere 3.5 days, is an impossible task. Terralever put forth a strong effort, here is a series of captures from our working prototype.

Sometime next week I will post a link to the live prototype as well as some posts on Silverlight 1.1 techniques we used to build the appliction.

The regional teams have been selected and Terralever was selected.  To get prepared Scott, Craig and Myself will be attending two days of training in Los Angeles on Microsoft Expression Blend, WPF and Silverlight.  On December 3rd the Terralever team will be given a design problem and will have 3 days to come up with a solution.  On the fourth day we will return to Los Angeles and present our design to a panel of judges.  The winners will compete at the finals in Austin March 8th 2007 at this years SxSW conference.