I have a small WP7 project called Summarize. It is a fun math-based game (check it out for free).

It has a nice effect of loading tiles. Several people has asked me how I have done it, so in this post I will cover how to build something similar on your own.

Let’s start with building the UI. We have the toolkit’s WrapPanel inside the ItemsControl and a simple TileControl with TextBlock displaying the tile number.

TileControl.xaml markup:

<UserControl.Projection> </UserControl.Projection> <UserControl.Resources> <DiscreteObjectKeyFrame.Value> Visible </DiscreteObjectKeyFrame.Value> </UserControl.Resources>

In the code-behind we start the animation when the tile is loaded:

private void OnLoaded(object sender, RoutedEventArgs e) { var sb = Resources["LoadedStoryboard"] as Storyboard; if (sb != null) { sb.Begin(); } }

MainPage.xaml markup:

<phone:PhoneApplicationPage x:Class="AnimatedTilesSample.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" xmlns:local="clr-namespace:AnimatedTilesSample" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" > <ItemsControl.ItemsPanel> <toolkit:WrapPanel Orientation="Horizontal"/> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <local:TileControl Margin="2"/> </ItemsControl.ItemTemplate>