Over a million developers have joined DZone.

Page Layouts in Windows Phone 7

· Mobile Zone

There are several options for Developers in Windows Phone 7 for creating the different layouts ofa page.  The usage of these layouts depends on what exactly the developer wants and the requirements demand.

These layouts include

  1. Normal Full screen layout
  2. List
  3. Panoramic Page layout
  4. Pivot layout

1. Normal Full Screen layout is the simplest one that fits to the task when the user wants to have all the controls within the single screen .

This layout is very useful when a summary of the required item needs to be provided.

The simple example of this layout is in the usage in the Calculator App and the Converter App that come with WP7 ( Converter found in HTC Mozart 7 ) .

2. List

When more items need to be displayed on a screen, then using this layout is more appropriate.
This layout contains a  vertical scroll list. The ideal example of this layout is in the usage of the Messaging / Calls Details. The Call Details lists out all the Incoming and Outgoing calls.

When the list is large, one may also consider having a search / filter box.

3. Panoramic

This is also known as a hub . An typical example of this layout is the People hub, Contacts hub etc.

4. Pivot

This is somewhat similar to the Panoramic layout that supports scrolling left and right, but the main difference is that it supports a kind of View and Details / Sub view.

The example of this layout is the Pictures page which includes different functionalities on pictures like sorting / viewing favourite pictures .

Topics:

Published at DZone with permission of Senthil Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}