Revision as of 01:53, 14 November 2013 by Depechie (Talk | contribs)

How to create a toggle image on Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to use visual states to animate an image on the page.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Windows Phone 8
Created: Depechie (29 Oct 2013)
Last edited: Depechie (14 Nov 2013)



A picture is worth a thousand words, but sometimes it can take to much screen real estate. Even so, we still want to give the user of the app an option to view it in its full state!

This article will show you how this can be accomplished by using visual states and a nice animation.


Basically when the user first opens the page containing the text and the image, the image will only be partially visible. This to draw attention to the actual text. But of course the image itself is also meaningful and we want to give the user the ability to open, or close it when he wants. This action can be triggered by tapping the image.

So first we need to set up the initial state of the page, so create a new basic Windows Phone project and add following xaml to the ContentPanel of the MainPage.xaml :

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<Image x:Name="Image" HorizontalAlignment="Left" VerticalAlignment="Top"
Source="/Assets/war_of_the_worlds_doomsday_final.jpg" Opacity="0.495" Height="100" Width="480" Stretch="UniformToFill" Tap="image_Tap"/>
<Image x:Name="IconExpand" Grid.Row="0" Width="40"
Source="/Assets/arrow.expand.png" HorizontalAlignment="Right" VerticalAlignment="Top" IsHitTestVisible="False" />
<ScrollViewer Name="ScrollViewer"
<RichTextBox Name="Article" Margin="12,0,12,0">
<Run FontWeight="Bold" FontSize="22" Text="The Coming of the Martians" />
<LineBreak />
<Run Text="After introductory remarks, the narrative opens in an astronomical observatory at Ottershaw where explosions are seen on the surface of the planet Mars, creating much interest in the scientific community. Later a meteor lands on Horsell Common, near the narrator's home in Woking, Surrey. He is among the first to discover that the object is an artificial cylinder that opens, disgorging Martians who are big and greyish with oily brown skin, the size, perhaps, of a bear, with two large dark-coloured eyes, and a lipless V-shaped mouth surrounded by Gorgon groups of tentacles. The narrator finds them at once vital, intense, inhuman, crippled and monstrous. They briefly emerge, have difficulty in coping with the Earth's atmosphere, and rapidly retreat into the cylinder. A human deputation (which includes the astronomer Ogilvy) approaches the cylinder with a white flag, but the Martians incinerate them and others nearby with a heat-ray before beginning to assemble their machinery. Military forces arrive that night to surround the common, including Maxim guns. The population of Woking and the surrounding villages are reassured by the presence of the military. A tense day begins, with much anticipation of military action by the narrator." />

With that in place you get a page that resembles like the first screenshot above. The image is not fully visible and we've tweaked the opacity to draw less attention to it. There is also a small icon in the top right hand corner, this as a hint to the user that the image can be enlarged. So now we need to add the tap to open animation.

For things like this I tend to use Blend, because it offers a visual interface to define and work with Visual States! So open the project in Blend" and go to the States tab, click on the Add state group icon and name your new group ImageViewGroup Select the newly added state group and click twice on the Add state icon, name those states ClosedState and OpenState.

Also be sure to select the Default transition and click on the EasingFunction icon, this will set the actual visual animation that will be used when switching from one visual state to the other. I've selected the Cubic InOut, but be sure to try out a few that fits your taste! Next, we need to define how long this animation will take. So to the right of the EasingFunction icon, set the amount of seconds you prefer. I've chosen 0.3 seconds, but this also is something you need to test out.

Check this screenshot to verify your settings:
Visual states

Video demo

The media player is loading...


A complete wording demo can be downloaded here: File:ImageSelection.zip

196 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.