How to make dynamically generated tiles in Windows Mobile 7?

This project was inspired by the way how menu in Portal 2 game works. Portal 2 is a first-person puzzle-platform video game developed by Valve Corporation. Really interesting and very well executed. Going back to the subject when I saw Portal 2 menu in action I decided to do something similar in WM7. The whole idea is quite simple:

1. define your area of interest e.g. a whole screen or a part
2. make a screenshot
3. populate WrapPanel with rectangles which contain appropriate parts of the previously created screenshot.
4. hide your area of interest (yourUIElement)
5. start animations
6. perform a transition if needed 

Points 1 and 2

   1:              WriteableBitmap bmp = new WriteableBitmap((int)LayoutRoot.ActualWidth, (int)LayoutRoot.ActualHeight);

   2:              bmp.Render(yourUIElement, null);

   3:              bmp.Invalidate();

   4:              image.Source = bmp;

Point 3 and 5

   1:              for (int j = 0; j < y; j++)

   2:                  for (int i = 0; i < x; i++)

   3:                  {

   4:                      Rectangle rect = new Rectangle();

   5:                      rect.Width = (image.Source as WriteableBitmap).PixelWidth / x;

   6:                      rect.Height = (image.Source as WriteableBitmap).PixelHeight / y;

   7:                      ImageBrush brush = new ImageBrush();

   8:                      brush.AlignmentX = AlignmentX.Left;

   9:                      brush.AlignmentY = AlignmentY.Top;

  10:                      brush.Transform = new TranslateTransform() { X = i * -(image.Source as WriteableBitmap).PixelWidth / x, Y = j * -(image.Source as WriteableBitmap).PixelHeight / y };

  11:                      brush.Stretch = Stretch.None;

  12:                      brush.ImageSource = image.Source;

  13:                      rect.Fill = brush;

  14:                      wrapPanel.Children.Add(rect);

  15:   

  16:                      rect.Projection = new PlaneProjection() { RotationX = 0, RotationY = Forward ? 0 : -90, RotationZ = 0 };

  17:   

  18:                      DoubleAnimation animation = new DoubleAnimation();

  19:                      animation.From = Forward ? 0 : -90;

  20:                      animation.To = Forward ? -90 : 0;

  21:                      animation.Duration = TimeSpan.FromMilliseconds(100);

  22:   

  23:                      Storyboard story = new Storyboard();

  24:                      story.BeginTime = TimeSpan.FromMilliseconds(((i + j)) * 100);

  25:                      Storyboard.SetTarget(animation, rect.Projection);

  26:                      Storyboard.SetTargetProperty(animation, new PropertyPath(PlaneProjection.RotationYProperty));

  27:   

  28:                      story.Begin();

  29:                  }

Point 6

   1:       <toolkit:TransitionService.NavigationInTransition>

   2:          <toolkit:NavigationInTransition>

   3:              <toolkit:NavigationInTransition.Backward>

   4:                  <local:TilesTransition Forward="False"/>

   5:              </toolkit:NavigationInTransition.Backward>

   6:          </toolkit:NavigationInTransition>

   7:      </toolkit:TransitionService.NavigationInTransition>

   8:   

   9:      <toolkit:TransitionService.NavigationOutTransition>

  10:          <toolkit:NavigationOutTransition>

  11:              <toolkit:NavigationOutTransition.Forward>

  12:                  <local:TilesTransition Forward="True"/>

  13:              </toolkit:NavigationOutTransition.Forward>

  14:          </toolkit:NavigationOutTransition>

  15:      </toolkit:TransitionService.NavigationOutTransition>

Useful links:

• http://www.windowsphonegeek.com/articles/wp7-transitions-in-depth--key-concepts-and-api
• http://www.windowsphonegeek.com/articles/wp7-transitions-in-depth--custom-transitions