# Building Animated Tiles with Rx

DevFeed: [Building Animated Tiles with Rx](<https://devfeed.tech/articles/building-cool-animated-tiles-with-rx-38408.md>)

Original publisher: [Read original article](<https://khmylov.com/2011/11/building-cool-animated-tiles-with-rx/>)

Author: Andrew Khmylov

Published: 2011-11-15T00:00:00Z

Content type: tutorial

Language: en

Sources: [Despite the odds](<https://devfeed.tech/sources/despite-the-odds.md>)

Topics: [Code](<https://devfeed.tech/topics/code.md>), [markup](<https://devfeed.tech/topics/markup.md>), [ui](<https://devfeed.tech/topics/ui.md>), [App](<https://devfeed.tech/topics/app.md>), [procedural flowers](<https://devfeed.tech/topics/procedural-flowers.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [app](<https://devfeed.tech/tags/app.md>), [code](<https://devfeed.tech/tags/code.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [math](<https://devfeed.tech/tags/math.md>), [xaml](<https://devfeed.tech/tags/xaml.md>)

## AI overview

This tutorial explains how to build animated tiles for a Windows Phone 7 project using XAML, a TileControl, and a storyboard. It also shows how an observable sequence creates tiles at intervals and how DispatcherObservable.ObserveOnDispatcher schedules collection updates on the runtime dispatcher.

## Source excerpt

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 x:Name="UserControl" x:Class="AnimatedTilesSample.TileControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" Loaded="OnLoaded" Width="76" Height="76"> <UserControl.Projection> <PlaneProjection RotationY="-180" /> </UserControl.Projection> <UserControl.Resources> <Storyboard x:Key="LoadedStoryboard"> <DoubleAnimation Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="UserControl" To="0" Duration="0:0:0.2" /> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="UIElement.Visibility" Storyboard.TargetName="Text"> <DiscreteObjectKeyFrame KeyTime="0:0:0.1"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}"> <TextBlock x:Name="Text" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed" Style="{StaticResource PhoneTextTitle2Style}" Text="{Binding ., Mode=OneTime}" /> </Grid> </UserControl> 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 m