An integral part of our proof-of-concept for the Phizzpop design challenge was a grid of tiles that represented a variety of TV shows and Movies. Transitioning from screen to screen we needed to repopulate this grid with a new set of tiles based on search criteria and filters. To improve the effect of repopulating the grid, we wanted to animate each tile as it was moved into its final position. Nothing crazy was desired, just a simple movement from the left, easing into its final position.

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.

Today Microsoft announced that it will be hosting a Visual Studio Install Fest at the Tempe Center for the arts on  December 20th 2007.  Here is what Microsoft has to say about it.

The end of the year brings about a time of celebration. It is a time to embrace friends, family and the RTM of Visual Studio 2008 and Fx 3.5. Please join us at our holiday installfest to celebrate on December 20, 2007 at 7:00 PM. The fest will be hosted at the beautiful Tempe Center for the Arts. We will have food drinks, demos and some great giveaways. Best of all, every attendee will receive a fully licensed release version of VS 2008 (to be mailed at a later date).

Date: Thursday, December 20, 2007 7:00 PM Arizona 
Location:  700 W Rio Salado Parkway Tempe Arizona 85281 United States
Click here to Register

Eye-fi is a magical orange SD memory card that will not only store 2GB worth of pictures, it’ll upload them to your computer, and to Flickr, Facebook, Picasa (or 14 others) wirelessly, invisibly, automatically! I have to get one of these things. Imagine how cool it would be to be taking photos and have then sent directly to your media PC. Its $100 but looks like it would be worth every penny.

After 4 incredibly intense days, Microsoft’s Phizzpop LA design challenge is complete and Cynergy Systems is the winner. Congratulation’s Cynergy!  I was certainly disappointed that we did not win, but with only 7 minutes to present your strategy, design and concept everyone had a chance to win.

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.