In this tutorial we are going to see more interesting control which is called Panorama control in Windows Phone 8. Panorama controls are used to slide through a big content without having to completely hide the previous contents, we can consider of sliding through a horizontal page with different contents and blocks. We can use this Panorama control to show rich user interface by dividing the contents to different blocks and assigning to different items horizontally which we can slide through and access the data.
Panorama control which is basically a long horizontal canvas uses a PanoramaItem as a container to host the content and controls such as links, grids, lists etc. With this control we can casually browse back and forth the page with the content explorer easily for the end users to manage the views. Panorama control comes in with an in built support for touch interaction and navigation that can be implemented with any special gestures functionality in the application which we are developing as it will be enabled by default.
Let us see the step by step approach on how to use this control in a Windows Phone 8 application development. We have a new template that is available for this Panorama control usage which can be seen in the Visual Studio 2012 IDE template listing.
Open Visual Studio 2012 IDE in administrator mode and select a new Project and browse through the Windows Phone template and select Windows Phone Panorama App as shown in the screen below.
Now we can see the project created with a list of default files and folders that are basically required to run the application as shown in the screen below. By using this template we have some default application data that will also be loaded on to the application. If required we can delete the data and use our own data to use it across the application. If we need to use the Panorama control in a normal application without these predefined data then we can use the Blank template and add the Panorama control.
As we know, Panorama controls are used to browse back and forth the page items with in the specified content block to get rich user experience. The Panorama control is the base one which can contain PanoramaItem controls which will host individual contents. Basically we will be having only one Panorama control with in which we can have multiple PanoramaItem to have contents blocked one by one which can be viewed by sliding it back and forth.
In the XAML code, let us see the different elements that are available with the Panorama control, we can see the control is divided into 4 different layers as below.
- Background - This is the base layer, the background of the panorama control.
- Title - This is the top layer used to display the title of the page.
- Header - This layer is used to display the Panorama Item block title.
- Content - This layer will be used to show the Panorama Item content.
Build and Execute the application by simply pressing F5 from the keyboard directly and we can see the application will be opened in the Emulator as shown in the screen below.
So in this article we have seen how to use the Panorama Control application that can be made simple by using the inbuilt template that is available while creating the project in Visual Studio 2012 Integrated Development Environment.