Tutorial of the Day 1: Creating your first WP7 Panorama Application

When creating Mobile application, one may find the screen is too small to display all the information you want to show. Toggle to change the page is one of the solution, but it is not grand and userfriendly at all. With Windows Phone 7, you can create a application with Panorama Controls, sample is like this.

How to do this? It is very simple.

First create a new project, and then one of the project type in Silverlight for Windows Phone is “Windows Phone Panorama Application”

What is the difference between an Panorama Application and the Windows Phone one? The main difference is Panorama Controls are built automatically inside the Grid of the Panorama Application. Actually, you can create your custom one in Windows Phone Application.

After that you will see the result is like this.

and the code is

Here, for each panorama item will create a page-like view, you can change the “page” with left or right sliding.

For the content inside the menus, as you can see from the code, it is binded with some data.

 

From this, we know that the data context is binded with the MainViewModelSampleData.xaml

You can change the content inside to create the Panorama Items with your own content.

In the Mainpage.xaml code, you change the background image or color to your favourite one by the line

P.S.The sample is using Listbox to create a menu. Apart from using listbox, you can also use StackPanel.

Finally, thanks for reading this tutorial.

Tomorrow, I will have a tutorial on Binding Items to the Controls which may also help you in creating an excellent Application.

Advertisements

5 thoughts on “Tutorial of the Day 1: Creating your first WP7 Panorama Application

  1. How do you change the panorama page dynamically? SelectedIndex is read-only and I can’t see any other method or property to do this – confused!

    Reply
    • I dont understand what do you mean by change panorama page dynamically.
      And which selectedIndex are you referring to?

      Reply
  2. How can I make title static means stay on screen even after user swipe to next second item and change title font? Can we use SQLCe/lite rather than xaml? what type of dataaccess methods are available?

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s