×
Namespaces

Variants
Actions
(Difference between revisions)

Tabbed interface with Pivot animation for Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
Depechie (Talk | contribs)
(Depechie -)
 
Depechie (Talk | contribs)
(Depechie -)
Line 36: Line 36:
 
Secondly, the use of such icons as headers is also not common.
 
Secondly, the use of such icons as headers is also not common.
  
So how would you mimic this in your own Windows Phone app?
+
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.  
 
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.
 
Each icon is actually a custom Path control ( more on this below ) that contains XAML data representing the image.
{{Note|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.}}
+
{{Note|To get nice looking icons, just download [http://www.syncfusion.com/downloads/metrostudio Metro Studio from Syncfusion]! Open the program, search for a nice icon and copy paste the generated XAML data into your windows phone project.}}
  
 
== Summary ==
 
== Summary ==

Revision as of 21:53, 16 September 2013

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
Compatibility
Platform(s):
Windows Phone 8
Article
Created: (17 Sep 2013)
Last edited: Depechie (16 Sep 2013)

Contents

Introduction

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.

Detail

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.

Summary

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.

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

×