Revision as of 21:53, 16 September 2013 by Depechie (Talk | contribs)

Tabbed interface with Pivot animation for Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

Delete instructional text in italic

This article explains how to create a pivot control that has path controls for it's headers. Most know example of this feature, is the official Twitter app on Windows Phone.

Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Windows Phone 8
Created: (17 Sep 2013)
Last edited: Depechie (16 Sep 2013)



This article explains how to create a pivot control that has path controls for it's headers. These path controls contain XAML data to represent images, the most know example of this usage can be found in the official Twitter app on Windows Phone.


If you would take a look at the official Twitter app on Windows Phone, you will see that there is a set of image icons on top that correspond to the active content body below. The behaviour of the app would suggest this is a normal pivot control, but 2 things are different from the normal implementation.

First you will notice that all the icons stay in view, even while switching through each pivot content. This is not the normal behaviour of the pivot, normally the headers will flow outside the boundary of the normal page. Secondly, the use of such icons as headers is also not common.

So how would you mimic this in your own Windows Phone app? Let's begin... Create a new windows phone app and in the MainPage.xaml add a ListBox called ImageBar. This imagebar will host our 4 icons who will act as our pivot headers. Each icon is actually a custom Path control ( more on this below ) that contains XAML data representing the image.

Note.pngNote: To get nice looking icons, just download Metro Studio from Syncfusion! Open the program, search for a nice icon and copy paste the generated XAML data into your windows phone project.


Remove Category:Draft when the page is complete or near complete

The "platform categories" will be displayed here in preview only - Copy paste relevant categories into text here

Version Hint

Windows Phone: [[Category:Windows Phone]]
[[Category:Windows Phone 7.5]]
[[Category:Windows Phone 8]]

Nokia Asha: [[Category:Nokia Asha]]
[[Category:Nokia Asha Platform 1.0]]

Series 40: [[Category:Series 40]]
[[Category:Series 40 1st Edition]] [[Category:Series 40 2nd Edition]]
[[Category:Series 40 3rd Edition (initial release)]] [[Category:Series 40 3rd Edition FP1]] [[Category:Series 40 3rd Edition FP2]]
[[Category:Series 40 5th Edition (initial release)]] [[Category:Series 40 5th Edition FP1]]
[[Category:Series 40 6th Edition (initial release)]] [[Category:Series 40 6th Edition FP1]] [[Category:Series 40 Developer Platform 1.0]] [[Category:Series 40 Developer Platform 1.1]] [[Category:Series 40 Developer Platform 2.0]]

Symbian: [[Category:Symbian]]
[[Category:S60 1st Edition]] [[Category:S60 2nd Edition (initial release)]] [[Category:S60 2nd Edition FP1]] [[Category:S60 2nd Edition FP2]] [[Category:S60 2nd Edition FP3]]
[[Category:S60 3rd Edition (initial release)]] [[Category:S60 3rd Edition FP1]] [[Category:S60 3rd Edition FP2]]
[[Category:S60 5th Edition]]
[[Category:Symbian^3]] [[Category:Symbian Anna]] [[Category:Nokia Belle]]

Add categories below using category selector.

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