In this article we will discuss about how to develop panorama application for Windows Phone 7. Panorama is a compiling control of windows phone 7.
What is panorama?
Lets us know about Panorama, Its mean capturing a series of images to create a pictures wider than, in a single image by "Stitching" the photographs together.
Why panorama’s view?
Panoramic experiences offer a unique way to view data, controls and services by using a long horizontal canvas that extends beyond the confines of the screen.
Objective of this application is to display my friend’s data and it will show my different –different social networks (like Google+, Facebook, LinkedIn and Twitter) friends list on the panorama screen.
Let’s come to the application development part, here we go.
In this post I will show you how to create a panorama application in Windows Phone 7. This post illustrates the following steps:
Step:-1 Open Visual Studio 2010 Ultimate or Express for Windows Phone from the Start menu.
Step:-2 Create a new project by selecting the File menu and click on New Project.
Step:-3 New Project dialog window will be displayed. Expand the Visual C# templates, and then select the Silverlight for Windows Phone templates –> Select “Windows Phone Application” and enter the project name.
Step:-4 New project will be created with MainPage.xaml page and it will be opened in the Visual Studio2010 IDE. Now right-click on project in Solution Explorer and click on Add then click on New Item. Select Windows Phone Panorama Page.
And now enter your desired name of panorama page (in this project I have used default name of PanoramaPage1.xaml) and click on Add bottom. PanoramaPage1 will come up with the default background image. And keep this page in view directory.
Step:-5 add an image (I have used PanoramaBackground.png) to display panorama page background. After add this image it will automatically become a resource image of the application. To check the build action select the PanoramaBackground.png image and press F4 key and see Build Action property is Resource only.
Step:-6 now set the panorama control’s background. See below xaml code snippet.
Then you are able to view background image at design time in IDE see below picture.
Important: You must be aware about how to use resource files in the Windows Phone 7 application. See here
Note: For the time being I have used some static data. To display the data, I have used MVVM (Model View ViewModel) pattern (MVVM pattern we will discussed later in this series).
Step:-7 To display, friends pictures on the panorama control I have added different – different social network friend’s pictures in this application and set Build Action type Content instead of Resource to all pictures property.
Step: -8 create a generic class to access the all social networks friend’s data like (name, details and imagepath) I have created an ItemViewModel class which will responsible to provide friend’s data to view. This class basically derived with an INotifyPropertyChanged interface and it is implemented an event name is PropertyChangedEventHandler; and this event call by each property.
Step: - 9 create a PanoramaViewModel class to store the static data; the purpose of this class View-Model is responsible for exposing the data objects from the Model in such a way that those objects are easily managed and consumed. Here I have added some static data of different -2 social network’s friend.
See below code snippet:
Step: -10 code is ready to integrate with the panorama UI control, now we have to add required Panorama Items under the panorama control. For this application I have added 5 panorama items for index of social networks, Google+, Facebook, Linkedin and Twitter. See blow xaml code snippet.
Step: - 11 double click on Panorama Application Button and write code in code behind use below code snippet for navigate the panorama page.
Important: Need to assign DataContext in the PanoramaPage1 constructor. The
DataContext allow a property that serves as a simple means of accessing individual instances of the ItemViewModel class through a collection declared to be of type ObservableCollection <ItemViewModel>.
Step:-12 Now run the application using F5 button and navigate the panorama application.
Download Article and Code here
Thank you for your time.