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:
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:
With the engineering in place all that is required now is to identify the gestures and trigger the storyboards and image switching as required:
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:
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:
- Live Tile News (free – ad supported)
- Live Tile News (No Ads, small donation)
- Live Tile Browser
- News in Pictures
- Sport in Tiles I
- Sport in Tiles II