Creating WP7 Pivot and Panorama Pages

Pivot and Panorama pages make for a great main page for your Windows Phone 7 (WP7). These pages allow you to provide various levels of swiping left and right to provide more capabilities to a single page. The simplest way to take advantage of WP7 Pivot and Panorma Pages is to create a project using the Windows Phone Pivot Application or Windows Phone Panorama Application templates; however, to really understand these pages you need to understand how these page work in order to fully utilize them.

Pivot Pages

The pivot page is similar to using tab on other platforms. It essentially allows you to provide multiple views within a single page. The user can easily navigate between these views by swiping left or right. It is a very natural UI that is very useful for data centric applications. The different views are a very natural way to allow the user to filter data or view similar lists, which makes sense for data intensive apps. To insert a Pivot control into a page you need to understand a couple of elements. The root element of the pivot control is as follows:

<controls:Pivot Title="Page Title">
</controls:Pivot>

As you can see the one item you need to define at the Pivot control level is the title. This title is essentially the title of the page provided you plan to use Pivot control to fill the page. Within the opening/closing Pivot control tags you will need to include one or more Pivot Items. Each pivot item is defined by the pivot defined by the following tag:

<controls:PivotItem Header="first">
</controls:PivotItem>

The Pivot Item defines an individual view within the Pivot control. The one attribute you need to provide for each PivotItem is the Header, which essentially defines the tab name. Next you will want to populate the PivotItem with the content you want to display. The most common control to be included within a PivotItem is a ListBox control; however, you can put just about anything within a PivotItem. The important thing to note is that the PivotItem width is limited to the screen size.

Panorama Page

The Panorama Page is somewhat similar to the Pivot Page; however, PanoramaItems are not bound to the screen width. The Panorama control allows you to create a user interface, which uses the horizontal tab style, but can be far more flexible and immersive. The Panorama control is often configured to use a background image, which scrolls at a slightly different speed from the foreground producing a 2d effect. To get started we first need to create a Panorma control as defined by the following tags:

<controls:Panorama Title="my application">
</controls:Panorama>

As you can see you can also define the Title of the Panorama control in the root element. Items within a Panorama are defined similar to those of a Pivot control as shown below.

<controls:PanoramaItem Header="header title">
</controls:PanoramaItem>

The definition of a Panorama Item is similar to a Pivot Item in that it includes the Header for the item. Within the Panorama Item you then would need to include whatever controls you want to display within this item. And similar to the Pivot Item it is common to use List Boxes; however, the Panorama includes a couple of features that allow you to expand upon the user interface.

Conclusion

Both the Pivot and Panorama pages provide you with the user interface components necessary to use as main user interface for your application. The Pivot seems to work best for data centric applications such as Email or list based. The Panorama provides similar capabilities; however, since it allows for items to span pages you can use it to display wider information such as Photos or a grid of photos. Both controls provide the capabilities necessary to support your application as the main user interface.



About the Author

Chris Bennett

Chris Bennett is a Manager with Crowe Horwath LLP in the Indianapolis office. He can be reached at chris.bennett@crowehorwath.com.

Related Articles

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • The first phase of API management was about realizing the business value of APIs. This next wave of API management enables the hyper-connected enterprise to drive and scale their businesses as API models become more complex and sophisticated. Today, real world product launches begin with an API program and strategy in mind. This API-first approach to development will only continue to increase, driven by an increasingly interconnected web of devices, organizations, and people. To support this rapid growth, …

  • As mobile devices have pushed their way into the enterprise, they have brought cloud apps along with them. This app explosion means account passwords are multiplying, which exposes corporate data and leads to help desk calls from frustrated users. This paper will discover how IT can improve user productivity, gain visibility and control over SaaS and mobile apps, and stop password sprawl. Download this white paper to learn: How you can leverage your existing AD to manage app access. Key capabilities to …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds