How to Create Panorama Application in Windows Phone

Common Definition

A panorama is any wide-angle view or representation of a physical space, whether in painting, drawing, photography, film, or a three-dimensional model.

In this article I will show how to create a Panorama application in Windows Phone and for this I am using Microsoft Visual Studio Express 2012 for Windows Phone.

So let’s start the work.

Step 1: Create a new project named PanoramaApp and click the "OK" button.



Step 2: Select the Operating System Version or Platform of Windows Phone that you want to target your project for and click the "OK" button.

Note: In this article I am using Windows Phone OS 8.0.



Step 3: Your MainPage.xaml that is the Default Page that will look like this as collapsing all the "Panorama Items".



Step 4: Add 4 images to the Assets Folder where one will be for the Background of the page (you can also use the default image) and the rest will be used for each "Panorama Item".


Step 5: Change the Image name of the Panorama Control via the "ImageSource" property and you can check it via design mode.



Step 6: After expanding the first "Panporama Item" Tag, comment all the code or delete the code to write your own code. Do the same thing with the rest of the "Panporama Item" Tags.



Step 7: Add some code to all the "Panorama Item" tags that contain a grid via a Grid tag with some controls:

• Image Tag with height, margin (position of Control) and call of the image that exists in the Assets Folder via Source property.
   
• TextBlock Tag with Text, FontSize, Foreground and Margin (position of Control) property.

Panorama Item 1

                <Grid>
                 <Image Height="174" Source="Assets\img1.png" 
                           Margin="29,49,31,291" />
                <TextBlock Text="This is first Image" FontSize="20"
                  Foreground="White"  Margin="50,256,115,177"></TextBlock>
                </Grid>



Panorama Item 2

<Grid>
    <Image  Height="174" Source="Assets\img2.png" 
            Margin="29,49,31,291" />
    <TextBlock Text="This is Second Image" FontSize="20"
    Foreground="White" Margin="50,256,112,219"></TextBlock>
</Grid>



Panorama Item 3

<Grid>

    <Image  Height="174" Source="Assets\img3.png" 

            Margin="29,49,31,291" />

    <TextBlock Text="This is third Image" FontSize="20"

    Foreground="White" Margin="50,256,112,219"></TextBlock></Grid>



Step 8: Run the application and swipe the page to check all the Panorama Items.