Flippin’ User Controls with Virtual Backsides …



A few people have asked what controls were used in the ‘Live Tile News’ app to create the ‘Flipping Live Tiles’ that feature on each page (If you haven’t tried this app yet then each page has a number of two sided tiles which can be flipped over with an upward – or downward, flick of the thumb).




The basic control is made up of a couple of standard list box controls for each panorama item page:

image(Click to enlarge)

Each ListBox is then populated with enough items to fill 1 screen (ie x2 – 1 for each side of the tile).  For this I used a user control but a template would work just as well.  The key to the flipping functionality is the transformation element, which sits on the root grid of the UserControl:


The “Rotator” element is manipulated by a couple of storyboards which site in the XAML immediately previous to the above:

image(Click to enlarge)

With the engineering in place all that is required now is to identify the gestures and trigger the storyboards and image switching as required:

NB The gestures are listened for using the ManipulationCompleted events which I set up in the constructor:

The Event handler that handles all the listbox manipulation events then has the responsibility of identifying the type of manipulation that has taken place by checking the relevant X & Y coordinates:

image(Click to enlarge)

If a ‘flip’ action is detected then, after setting a progressively slower storyboard start time dependent on the usercontrols’ (BBCTile) position within the ListBox, the user control’s  “StoryFlip” Storyboard action is triggered. 

NB Note that when this first storyboard action has completed the tile has travelled 90 degrees to the user and apears at that point to be invisible – the image on the tile is then switched before calling the second storyboard (Named “StoryFlipBack”) which finishes the rotation and shows the ‘virtual backside’ of the UserControl.

NB I am not convinced that the staggered start time has any real impact on the effectiveness on the transition.  At the time of writing I feel there is still opportunity to enhance the flipping effect such that it appears more natural!

In a future post I will look at the additional gesture that allows each tile to be added as a ‘Live Tile’ to the home screen.

The following Apps make use of this effect:

2 thoughts on “Flippin’ User Controls with Virtual Backsides …

  1. Pingback: Flippin’ User Controls with Virtual Backsides « Silverlight News

  2. Pingback: Flippin’ User Controls with Virtual Backsides

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>