Revision as of 02:18, 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
Tested with
Devices(s): Nokia Lumia 820
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 the user to have the ability to open, or close it when he wants to. This action can be triggered by tapping the image.

So first we need to set up the initial state of the page, 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.4" 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 the Visual states screenshot to verify your settings

Visual states

Now select the OpenState line an be sure to notice that Blend tells you that OpenState state recording is on in the middle on the MainPage.xaml tab. In the Objects and Timeline tab, open up the ContentPanel and select the Image. When the Image is selected, change it's Height to 250 in the Properties tab on the right, also change the Opacity to 100%. Click on the IconExpand and set it's Opacity to 0%

Note.pngNote: We are tweaking the Opacity on the IconExpand and not the Visibility, because the Opacity will have a smoother transition

Check the OpenState settings screenshot to verify your settings

OpenState settings

For the ClosedState we do something similar, so select it in Blend and again open the ContentPanel. Select the Image and set it's Opacity back to the original value 40%. That's all for this state, so you can now save everything and close Blend.

There is only one more thing left to do and that is trigger the change from one state to the other, when the user taps the image! So open the project again in Visual Studio and open the code behind of the MainPage.xaml. In here add the following code underneath the constructor:

private bool _isOpen = false;
private void image_Tap(object sender, System.Windows.Input.GestureEventArgs e)
if (_isOpen)
VisualStateManager.GoToState(this, "ClosedState", true);
_isOpen = false;
VisualStateManager.GoToState(this, "OpenState", true);
_isOpen = true;

We are using the Template:Code that is build in the Windows Phone sdk to go to the correct state when the user has tapped on the image. We also need to keep track what state we are in to go to the other one.

With this all in place you get a nice visual animation when the user taps the image, to open or close it.

Video demo

The media player is loading...


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

171 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.