Floating FB popout byF5debug

Learn Windows Phone 7 Development in 31 Days – Day 9 – Working with Panorama Control in WP7

 

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.       [more]

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.

clip_image002

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.

clip_image004

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.

clip_image006

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:

1

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

2

<controls:Panorama.Background>

3

<ImageBrush ImageSource="Bcg1.jpg"/>

4

</controls:Panorama.Background>

5

</controls:Panorama>

clip_image008

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:

01

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

02

<controls:Panorama.Background>

03

<ImageBrush ImageSource="Bcg1.jpg"/>

04

</controls:Panorama.Background>

05

 

06

PanoramaItem Header="Posts">

07

<Grid/>

08

PanoramaItem>

09

 

10

PanoramaItem Header="Ebook">

11

<Grid/>

12

PanoramaItem>

13

 

14

PanoramaItem Header="Comments">

15

<Grid/>

16

</controls:PanoramaItem>

17

 

18

</controls:Panorama>

clip_image010

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:

01

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

02

<controls:Panorama.Background>

03

<ImageBrush ImageSource="Bcg1.jpg"/>

04

</controls:Panorama.Background>

05

 

06

<controls:PanoramaItem Header="Posts">

07

<Grid>

08

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

09

<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" />

10

</Grid>

11

</controls:PanoramaItem>

12

 

13

<controls:PanoramaItem Header="Ebook">

14

<Grid>

15

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

16

<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" />

17

</Grid>

18

</controls:PanoramaItem>

19

 

20

<controls:PanoramaItem Header="Comments">

21

<Grid>

22

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

23

</Grid>

24

</controls:PanoramaItem>

25

 

26

</controls:Panorama>

clip_image012

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.

clip_image014

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.

clip_image016

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.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Comments (1) -

newasiainconline.com
newasiainconline.com
10/6/2013 7:21:57 PM #

I absolutely love your blog.. Great colors & theme. Did you develop this amazing site yourself? Please reply back as I'm looking to create my own personal website and would love to find out where you got this from or exactly what the theme is named. Thanks!|

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter