Working With Panorama Control in Windows Phone 7

Introduction:

In this article we are going to see a very interesting Panorama Control in Windows Phone 7. 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 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.

Panorama control can be added and configured directly from the XAML code or we can do it programmatically. Panorama control is layered in to 4 layers as shown 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.

Ok its time for the demo, let us see the step by step process on how to create a Panorama control application and add some content to see the rich user experience.

Steps:

Open Visual Studio 2010 and create a new Silverlight for Windows Phone 7 Application with a valid project name as shown in the screen below.

Now we can see a beautiful interface with the default design and the background as shown in the screen below. We will customize the application design one by one in our next steps.

First let us delete the default values and add the PanoramaItems and the data bindings one by one. Do to the same go to the XAML code and select the tag PanoramaItem> we can see 2 items, just select the complete code and delete the same. We can now see the screen looks empty as shown in the screen below.

Now change the Panorama control Title and the background, to do the same go to the XAML code and change the Title to F5Debug and to change the background let us add a new background to the project solution and map the path to the ImageBrush tag as shown in the code below. Once we are done with the above 2 changes we can see our screen looks like below screen.

XAML Code

<controls:Panorama Title="f5debug wp7 tutorials">
<controls:Panorama.Background>
<ImageBrush ImageSource="Bcg1.jpg"/>
</controls:Panorama.Background>
</controls:Panorama>

Now we need to add the PanoramaItems to the control, to do that we need to add the below code with the listing of data as per the requirement. Here we have added 3 PanoramaItems (Posts, Ebook and Comments) and a default grid on which we will be adding our controls to show to the end user. Once we added the 3 items we can see our screen looks like below and code will be as shown in the below listing.

XAML Code

<controls:Panorama Title="f5debug wp7 tutorials">

 <controls:Panorama.Background>

 <ImageBrush ImageSource="Bcg1.jpg"/>

 </controls:Panorama.Background>

 <controls:PanoramaItem Header"Posts">

   <Grid/>

 </controls:PanoramaItem>

 <controls:PanoramaItem Header"Ebooks">

   <Grid/>

 </controls:PanoramaItem>

 <controls:PanoramaItem Header"Comments">

   <Grid/>

 </controls:PanoramaItem>

</controls:Panorama>

 

 

Now we need to add some controls to each of the items to show some information to the end users. To add the controls just we can drag and drop from the tool box or by directly wiring on to the XAML Code. Let us do some customization to get a good user experience with the controls as shown in the XAML Code below. Once we are done with our code we can see the screen looks like below.

XAML Code

 

<controls:Panorama Title="f5debug wp7 tutorials">

        <controls:Panorama.Background>

            <ImageBrush ImageSource="Bcg1.jpg"/>

        </controls:Panorama.Background>

        <controls:PanoramaItem Header="Posts">

         <Grid>

          <Image Height="174" Source="f5Image.jpg" HorizontalAlignment="Left" Margin="78,47,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="254" />

          <TextBlock Height="164" HorizontalAlignment="Left" Margin="22,275,0,0" TextWrapping="Wrap" Name="textBlock1" Text="This is the F5debug blog posts sections,             You can get    the latest post updates here!!!" VerticalAlignment="Top" Width="369" />

            </Grid>

        </controls:PanoramaItem>

 

        <controls:PanoramaItem Header="Ebook">

            <Grid>

                <Image Height="310" Source="ssis-cover-page.jpg" HorizontalAlignment="Left" Margin="79,25,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="258" />

                <TextBlock Height="92" HorizontalAlignment="Left" Margin="28,367,0,0" TextWrapping="Wrap" Name="textBlock2" Text="SQL Server Integration Services (SSIS) – Step by Step Tutorial Version 2.0" VerticalAlignment="Top" Width="351" />

            </Grid>

        </controls:PanoramaItem>

 

        <controls:PanoramaItem Header="Comments">

            <Grid>

                <TextBlock Height="206" FontSize="40" HorizontalAlignment="Left" Margin="82,121,0,0" TextWrapping="Wrap" Name="textBlock3" Text="F5debug Comments Section" VerticalAlignment="Top" Width="273" />

            </Grid>

        </controls:PanoramaItem>
</controls:Panorama>

 

 

Now we are done with our design and the coding section, to test our application press F5 directly from the keyboard or Build and Execute from the Visual Studio IDE tool bar and we can see the application loaded into the Windows Phone 7 Emulator as shown in the screen below.

 

 

Now scroll the screen horizontally and we can see the second Panorama item will be seen to the user, this basically avoids loading of multiple pages which requires single user interaction as shown in the screen below.

Conclusion

So in this article we have seen how to use the Panorama Control and design a rich user interface by adding the items and changing the background to have a unique interface.Thanks for reading my article. If you like my blog and if you are interested in getting the latest updates on new articles, kindly follow me through one of these options.