Tuesday, December 27, 2011

How to get all Media Library pictures name in Windows Phone 7.

PictureCollection pc = new MediaLibrary().Pictures;

foreach (Picture item in pc)




Saturday, December 24, 2011

UriMapping in Windows Phone 7

In this article we are discussing about UriMapping concept in Windows Phone 7. As your application grows you will probably have to use folders and perhaps subfolders in order to keep the project structure easy to follow.

The navigation system within a Windows Phone 7 application allows you to use UriMapping to convert a short URI into the full path of the XAML page within your project. UriMapping is a mechanism; that allows us to implement developer friendly navigation between Windows Phone 7 applications.

What is UriMapping?

UriMapping is an alias of physical path of views in WP7 project, which allows developer to mapped entire views using UriMapper class object. It helps developer to modify the project structure and without making any changes in the navigation code.

To developer friendly term, Uri-Mapping mechanism is used to hide the actual (physical of a file path) navigation structure of application and it also provides easy way to pass data through parameters to the pages by using query string between one page to another page.

Let’s take an example for the same; in this case we have created three xaml pages like (Facebook.xaml, PramValues.xaml, Twitter.xaml).

In this project structure we have one UI directory to keep all views. See below picture.


There are some basic steps to achieve this functionality in the project.

Step-1: Create an instance of UriMapper class object in App.xaml.cs class and add URI mapping items in Constructor for the Application object. And now add UriMapper object to PhoneApplicationFrame’s object RootFrame’s property UriMapper. See below code snippet for the same.

public App()
// Global handler for uncaught exceptions. 
       UnhandledException += Application_UnhandledException;
       // Standard Silverlight initialization
       // Phone-specific initialization
// URI Mapping 
var appNavigationMapper = new UriMapper();
appNavigationMapper.UriMappings.Add(CreateUriMapping("Twitter", "/UIs/Twitter.xaml"));
appNavigationMapper.UriMappings.Add(CreateUriMapping("About/{value}/{value1}", "/UIs/PramValues.xaml?id={value}&name={value1}"));
RootFrame.UriMapper = appNavigationMapper;
// Show graphics profiling information while debugging.
if (System.Diagnostics.Debugger.IsAttached)
// Display the current frame rate counters.
Application.Current.Host.Settings.EnableFrameRateCounter = true;
// Show the areas of the app that are being redrawn in each frame.
//Application.Current.Host.Settings.EnableRedrawRegions = true;
// Enable non-production analysis visualization mode, 
// which shows areas of a page that are handed off to GPU with a colored overlay.
//Application.Current.Host.Settings.EnableCacheVisualization = true;
// Disable the application idle detection by setting the UserIdleDetectionMode property of the
// application's PhoneApplicationService object to Disabled.
// Caution:- Use this under debug mode only. Application that disables user idle detection will continue to run
// and consume battery power when the user is not using the phone.
PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Disabled;

Step-2: Now we are developing UI (user interface) for accessing the particular UI using UriMapping mechanism. In this example I have added three buttons for like Twitter, Facebook and Param(s) to call the specific UI with an action of appropriate command button. Here is UI design with xaml code.

<Grid x:Name="LayoutRoot" Background="Transparent">
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Uri Mapper" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Twitter" Height="72" HorizontalAlignment="Left" Margin="40,68,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" Background="#FFEB3636"></Button>
            <Button Content="Facebook" Height="72" HorizontalAlignment="Left" Margin="240,209,0,0" Name="button2" VerticalAlignment="Top" Width="160" Click="button2_Click" Background="#FFEB3636"></Button>
            <Button Content="Param(s)" Height="72" HorizontalAlignment="Left" Margin="42,365,0,0" Name="button3" VerticalAlignment="Top" Width="160" Click="button3_Click" Background="#FFEB3636" />

Step-3: At the end we will call the URI mapping using NavigationService.Navigate() method. In this example I have created a generic method for calling specific UI call by specific alias of UriMapping name as we mentioned in the App.xaml.cs class constructor. See below code snippet.

private void DoNavigate(string NavigatePageName)
    this.NavigationService.Navigate(new Uri(NavigatePageName, UriKind.Relative));
private void button1_Click(object sender, RoutedEventArgs e)
private void button2_Click(object sender, RoutedEventArgs e)
private void button3_Click(object sender, RoutedEventArgs e)
     DoNavigate("About/2/pavan"); // With two parameters

The Following code shows an example of Uri mapping process. When user pass “About/2/pavan” it will be navigated to relative address “/About/2/pavan” which is a fake address. That fake address is mapped by “About/{value}/{value1}” to “/UIs/PramValues.xaml?id={value}&name={value1}”

How to get Query string values in Navigated Page.

Using NavigationContext is used to retrieve the specific value about the passing by the parameters. See below code for the same.

void PramValues_Loaded(object sender, RoutedEventArgs e)
   // Method - 1
   textBlock1.Text = string.Format("Id= {0}", NavigationContext.QueryString["id"]);
   textBlock2.Text = string.Format("Name= {0}",NavigationContext.QueryString["name"]);
   // Method - 2
   var values = NavigationContext.QueryString.ToArray();
   foreach (var item in values)
      System.Diagnostics.Debug.WriteLine("Key : " + item.Key + "  " + "Value : " + item.Value);

Step-4: Press F5 to execute the application.

~ Happy Coding Smile

Source Code

Saturday, October 8, 2011

How to make a call in Windows Phone 7



In this article, I am going to describe how to make a call in windows phone 7 using managed API.

Objective of this article to make a call programmatically, sometimes application has specific requirement to make a phone call from application; in that scenario we can take the leverage of Microsoft managed API Microsoft.Phone.Tasks (namespace) allows to access PhoneCallTask API to make a call in windows phone.

Basically PhoneCallTask API allows an application to launch the Phone application. Use this to allow users to make a phone call from your application.

Let’s take an example to make a phone call from application. Add a Button to the default XAML which is gifted by MS Visual Studio when you start a new Windows Phone 7 Silverlight application. See the below xaml here.


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <Button Content="Phone Call" Height="82" HorizontalAlignment="Left" Margin="140,234,0,0" Name="btnCall" VerticalAlignment="Top" Width="auto" Click="btnCall_Click" />

XAML will generate the UI (user interface) that look like see below screen.


Now initialize the PhoneCallTask task object in the constructor of page, to avoid the memory overhead so I initialized in the constructor.

PhoneCallTask phoneTask = null;
// Constructor
public MainPage()
    phoneTask = new PhoneCallTask();            

The PhoneCallTask class contains two core properties like DisplayName, PhoneNumber and one show method, which allows us to shows the phone application. To make an actual call though the application.

Now double click the button control and click event handler got added to button control object. In the button click event set the display name and phone number which you want to make a call. And calls a *Show()* method of phone task object. See below mentioned code snippet.

private void btnCall_Click(object sender, RoutedEventArgs e)
  phoneTask.DisplayName = "Pavan Pareta";
  phoneTask.PhoneNumber = "+911234567890"; // put your desired phone number here

Now the application is get ready to execute. When the user clicks on the button, phone dial will appear the phone user has to click the on *call* button then only we can make a call.

See blow screenshots


Download source code here.

Thank you for your time.

Sunday, September 25, 2011

Text to speech in windows phone 7

How to use cloud-based Microsoft Translator Service in windows phone 7 to translate text to speech.

In this article I am going to explain how we can take the leverage of cloud to solve the problem for Text to Speech translation. It’s pretty simple to archive such kind of functionality in windows phone 7 using Bing API. Here I will show how we can retrieve a list of languages supported by Microsoft Translator for the Speech API and speak the user’s input text.

First of all we must obtain a valid Bing API AppID, lets follow the below steps.

Step -1 Open below mentioned url to register your application. And follow the instructions to obtain a valid Bing API AppID.


Step-2 Enter required information and obtain a valid Bing API AppID.


Once you register your application now we will be moving ahead with the windows phone 7 application developments and invoke the cloud service.

Step-3 Create a windows phone 7 application project.


Step-4 To add web reference of the Microsoft Translator Service, we need to add a service reference to Windows Phone project. Right - click the Windows Phone Project in solution explorer, and choose Add Service Reference. Please see below pictures for the same.





Step-5 Now adds a panorama page to windows phone 7 project.


Step-6 creates a UI as per application requirement see below xaml code snippet. Here I have added three panorama items.

<Grid x:Name="LayoutRoot">
<controls:Panorama Title="text to speech" Name="panoSpeech" Foreground="Blue" FontFamily="Comic Sans MS">
<!--Panorama item one-->
<controls:PanoramaItem Header="Language(s)" Foreground="Plum" FontFamily="DengXian" FontSize="72">
<StackPanel Orientation="Horizontal">
<DataTemplate x:Key="LanguageTemplate">
<TextBlock Foreground="White" Margin="0,0,0,0" Text="{Binding Name}" />
<ListBox HorizontalAlignment="Left" ItemTemplate="{StaticResource LanguageTemplate}" Margin="20,10,0,20" Name="ListLanguages" Width="441">

<!--Panorama item two-->
<controls:PanoramaItem Header="Speech" Foreground="Yellow">
<StackPanel Orientation="Vertical" Margin="20,0,0,0">
<TextBox Name="TextToSpeachText" Text="This Pavan Pareta, Microsoft Most Value able proffesional. He has written an application for windows phone 7" TextWrapping="Wrap" Height="350" />
<Button Content="S p e a k" Height="90" Margin="0,30,0,0" Name="btnSpeak" Width="338" Click="btnSpeak_Click" />

<!--Panorama item three-->
<controls:PanoramaItem Header="Speak" Foreground="Violet">
<StackPanel Orientation="Vertical">
<Image Height="auto" Name="image1" Stretch="None" Width="auto" Margin="50 60 80 0" Source="/speak.jpg" />

Step-7 Fist Panorama item used to develop for retrieving supported speech languages. To retrieve the supported language we need to call web service method “GetLanguagesForSpeakAsync”. The GetLanguagesForSpeak method only returns the language codes, for example, en for English and fr for French etc. see blow UI and code snippet.


GetLanguagesForSpeakAsync takes two methods like AppID and object.

void MainPage_Loaded(object sender, RoutedEventArgs e)
var objTranslator = new ServiceReference1.LanguageServiceClient();
objTranslator.GetLanguagesForSpeakCompleted += new EventHandler<GetLanguagesForSpeakCompletedEventArgs>(translator_GetLanguagesForSpeakCompleted);
objTranslator.GetLanguagesForSpeakAsync(AppId, objTranslator);
catch (Exception ex)

void translator_GetLanguagesForSpeakCompleted(object sender, GetLanguagesForSpeakCompletedEventArgs e)
var objTranslator = e.UserState as ServiceReference1.LanguageServiceClient;
objTranslator.GetLanguageNamesCompleted += new EventHandler<GetLanguageNamesCompletedEventArgs>(translator_GetLanguageNamesCompleted);
objTranslator.GetLanguageNamesAsync(AppId, "en", e.Result, e.Result);

void translator_GetLanguageNamesCompleted(object sender, GetLanguageNamesCompletedEventArgs e)
var codes = e.UserState as ObservableCollection<string>;
var names = e.Result;
var languagesData = (from code in codes
let cindex = codes.IndexOf(code)
from name in names
let nindex = names.IndexOf(name)
where cindex == nindex
select new TranslatorLanguage()
Name = name,
Code = code
this.Dispatcher.BeginInvoke(() =>
this.ListLanguages.ItemsSource = languagesData;

Step-8 Second Panorama item used to develop for speak text using SpeakAsync method takes four string parameters like AppId, SpeechText, SpeechLanguage, format. See below UI and code snippet.


private void btnSpeak_Click(object sender, RoutedEventArgs e)
var languageCode = "en";
var language = this.ListLanguages.SelectedItem as TranslatorLanguage;
if (language != null)
languageCode = language.Code;
var objTranslator = new ServiceReference1.LanguageServiceClient();
objTranslator.SpeakCompleted += translator_SpeakCompleted;
objTranslator.SpeakAsync(AppId, this.TextToSpeachText.Text, languageCode, "audio/wav");

panoSpeech.DefaultItem = panoSpeech.Items[(int)2];


void translator_SpeakCompleted(object sender, ServiceReference1.SpeakCompletedEventArgs e)
var client = new WebClient();
client.OpenReadCompleted += ((s, args) =>
SoundEffect se = SoundEffect.FromStream(args.Result);
client.OpenReadAsync(new Uri(e.Result));

Step-9 Now builds the application and executes it.


Download source code here

Thank you for your time.

Thursday, August 11, 2011

Microsoft Monday Morning on Windows Phone 7 (Mango)

It was my pleasure to speak at Microsoft Monday Morning at 8 August about Windows Phone 7 (Mango - APIs). This session was awesome, I introduced Windows Phone Mango APIs and demonstrated new WP7 mango APIs, so I want share this session's PPT and Demo source code with you, please let feel free to download it, and have look about Windows Phone Mango APIs glance and take the leverage of WP7 Mango APIs.

Here is PPT & Demo's Source Code.

1) Download PPT

2) Download Source Code

Yours feedback always welcome..

Thank you for your time to visit my blog.

Wednesday, July 6, 2011

Wow, I am an MVP right now !

It’s a fantastic day of my life, when I received a mail from Microsoft “Congratulations 2011 Microsoft MVP!”

I am really super happy today and would like to share my happiness with you I am awarded for Microsoft MVP award for Device Development. And I am proud of it.

The Microsoft mail from the mentioning the following:

Dear Pavan Pareta,

Congratulations! We are pleased to present you with the 2011 Microsoft® MVP Award! This award is given to exceptional technical community leaders who actively share their high quality, real world expertise with others. We appreciate your outstanding contributions in Device Application Development technical communities during the past year.

Another one mail from Abhishek Kant he is a MVP Lead – South Asia

Dear Pavan

Congratulations on getting awarded as an MVP for contributing to the technical communities!

Microsoft has given me super biggest surprise of my life. Microsoft has awarded me as Microsoft Most Valuable Professional Award. This is one of the proudest movements of my life.

I would like to give a special Thanks to Microsoft India MVP Lead Mr. Abhishek Kant for this recognition. I will also give special thanks to Mr. Kunal Chowdhury and Mr. Dhananjay Kumar for their nomination and support.

Thanks to Microsoft.

Sunday, June 5, 2011

Create a Panorama Application for Windows Phone 7 – [Part-6]


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.

   1: <controls:Panorama.Background>
   2:     <ImageBrush ImageSource="/WP_PanoramaApp;component/PanoramaBackground.png"/>
   3: </controls:Panorama.Background>

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.

   1: public class ItemViewModel : INotifyPropertyChanged
   2: {
   3:     private string _name;
   4:     private string _imagePath;
   5:     private string _details;
   7:     public string Name
   8:     {
   9:         get { return _name; }
  10:         set
  11:             {
  12:                 if (value != _name)
  13:                 {
  14:                     _name = value;
  15:                     NotifyPropertyChanged("Name");
  16:                 }
  17:             }
  18:     }
  20:     public string ImagePath
  21:     {
  22:         get { return _imagePath; }
  23:         set
  24:         {
  25:             if (value != _imagePath)
  26:             {
  27:                 _imagePath = value;
  28:                 NotifyPropertyChanged("ImagePath");
  29:             }
  30:         }
  31:     }
  33:     public string Details
  34:     {
  35:         get { return _details; }
  36:         set
  37:         {
  38:             if (value != _details)
  39:             {
  40:                 _details = value;
  41:                 NotifyPropertyChanged("Details");
  42:             }
  43:         }
  44:     }
  46:     #region INotifyPropertyChanged Members
  48:     public event PropertyChangedEventHandler PropertyChanged;
  50:     private void NotifyPropertyChanged(String propertyName)
  51:     {
  52:         PropertyChangedEventHandler handler = PropertyChanged;
  53:         if (null != handler)
  54:         {
  55:             handler(this, new PropertyChangedEventArgs(propertyName));
  56:         }
  57:     }
  58:     #endregion
  59: }

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:

   1: public class PanoramaViewModel
   2: {
   4:     public PanoramaViewModel()
   5:     {
   6:         this.Items = new ObservableCollection<ItemViewModel>();
   7:         this.GooglePlusItems = new ObservableCollection<ItemViewModel>();
   8:         this.FacebookItems = new ObservableCollection<ItemViewModel>();
   9:         this.LinkedIn = new ObservableCollection<ItemViewModel>();
  10:         this.Twitter = new ObservableCollection<ItemViewModel>();
  11:     }
  13:     /// <summary>
  14:     /// A collection for ItemViewModel objects.
  15:     /// </summary>
  16:     public ObservableCollection<ItemViewModel> Items { get; private set; }
  18:     public bool IsDataLoaded {get; private set; }
  20:     /// <summary>
  21:     /// Creates and adds a few ItemViewModel objects into the Items collection.
  22:     /// </summary>
  23:     public void LoadData()
  24:     {
  25:         // Sample data; here you can replace with real data
  26:         this.Items.Add(new ItemViewModel() { Name = "Google+", ImagePath = 
  27:         "/Networks/Facebook/1.jpg", Details = "" });
  28:         this.Items.Add(new ItemViewModel() { Name = "Facebook", ImagePath = 
  29:         "/Networks/Facebook/2.jpg", Details = "" });
  30:         this.Items.Add(new ItemViewModel() { Name = "LinkedIn", ImagePath = 
  31:         "/Networks/Facebook/3.jpg", Details = "" });
  32:         this.Items.Add(new ItemViewModel() { Name = "Twitter", ImagePath = 
  33:         "/Networks/Facebook/4.jpg", Details = "" });
  34:         this.IsDataLoaded = true;
  35:     }
  37:     /// <summary>
  38:     /// A collection for ItemViewModel objects.
  39:     /// </summary>
  40:     public ObservableCollection<ItemViewModel> GooglePlusItems { get; private set; }
  42:     /// <summary>
  43:     /// Creates and adds a few ItemViewModel objects into the Items collection.
  44:     /// </summary>
  45:     public void LoadGooglePlusData()
  46:     {
  47:         // Sample data; replace with real data
  48:         this.GooglePlusItems.Add(new ItemViewModel() { Name = "Pinal Dave", ImagePath = "/Networks/GoolgePlus/1.jpg", Details = "MVP" });
  49:         this.GooglePlusItems.Add(new ItemViewModel() { Name = "Abhishek Kumar", ImagePath = "/Networks/GoolgePlus/2.jpg", Details = "SSE" });
  50:         this.GooglePlusItems.Add(new ItemViewModel() { Name = "Gaurav Arora", ImagePath = "/Networks/GoolgePlus/3.jpg", Details = "MVP" });
  51:         this.GooglePlusItems.Add(new ItemViewModel() { Name = "Sachin Kapse", ImagePath = "/Networks/GoolgePlus/4.jpg", Details = "SSE" });
  52:         this.GooglePlusItems.Add(new ItemViewModel() { Name = "Mitesh", ImagePath = "/Networks/GoolgePlus/5.jpg", Details = "SSE" });
  53:         this.IsDataLoaded = true;
  54:     }
  56:     /// <summary>
  57:     /// A collection for ItemViewModel objects.
  58:     /// </summary>
  59:     public ObservableCollection<ItemViewModel> FacebookItems { get; private set; }
  61:     /// <summary>
  62:     /// Creates and adds a few ItemViewModel objects into the Items collection.
  63:     /// </summary>
  64:     public void LoadFacebookData()
  65:     {
  66:         // Sample data; replace with real data
  67:         this.FacebookItems.Add(new ItemViewModel() { Name = "Vinod Kumar", ImagePath = "/Networks/Facebook/6.jpg", Details = "MVP" });
  68:         this.FacebookItems.Add(new ItemViewModel() { Name = "Dhananjay Kumar", ImagePath = "/Networks/Facebook/1.jpg", Details = "MVP" });
  69:         this.FacebookItems.Add(new ItemViewModel() { Name = "Kunal Chowdhury", ImagePath = "/Networks/Facebook/2.jpg", Details = "MVP" });
  70:         this.FacebookItems.Add(new ItemViewModel() { Name = "Malleswar", ImagePath = "/Networks/Facebook/7.jpg", Details = "MVP" });
  71:         this.FacebookItems.Add(new ItemViewModel() { Name = "Mohsin", ImagePath = "/Networks/Facebook/3.jpg", Details = "SSE" });
  72:         this.FacebookItems.Add(new ItemViewModel() { Name = "Sawkat Ali", ImagePath = "/Networks/Facebook/4.jpg", Details = "SSE" });
  73:         this.FacebookItems.Add(new ItemViewModel() { Name = "Karan Singh", ImagePath = "/Networks/Facebook/5.jpg", Details = "SSE" });
  74:         this.IsDataLoaded = true;
  75:     }
  77:     /// <summary>
  78:     /// A collection for ItemViewModel objects.
  79:     /// </summary>
  80:     public ObservableCollection<ItemViewModel> LinkedIn { get; private set; }
  83:     /// <summary>
  84:     /// Creates and adds a few ItemViewModel objects into the Items collection.
  85:     /// </summary>
  86:     public void LoadLinkedInData()
  87:     {
  88:         // Sample data; replace with real data
  89:         this.LinkedIn.Add(new ItemViewModel() { Name = "Daniel Vaughan", ImagePath = "/Networks/LinkedIn/1.jpg", Details = "MVP" });
  90:         this.LinkedIn.Add(new ItemViewModel() { Name = "Pavan Pareta", ImagePath = "/Networks/LinkedIn/2.jpg", Details = "MVP" });
  91:         this.LinkedIn.Add(new ItemViewModel() { Name = "Boryana Miloshevska", ImagePath = "/Networks/LinkedIn/3.jpg", Details = "MVP" });
  92:         this.LinkedIn.Add(new ItemViewModel() { Name = "Dhananjay Kumar", ImagePath = "/Networks/LinkedIn/4.jpg", Details = "MVP" });
  93:         this.LinkedIn.Add(new ItemViewModel() { Name = "Laurent Bugnion", ImagePath = "/Networks/LinkedIn/5.jpg", Details = "MVP" });
  94:         this.IsDataLoaded = true;
  95:     }
  97:     /// <summary>
  98:     /// A collection for ItemViewModel objects.
  99:     /// </summary>
 100:     public ObservableCollection<ItemViewModel> Twitter { get; private set; }
 102:     /// <summary>
 103:     /// Creates and adds a few ItemViewModel objects into the Items collection.
 104:     /// </summary>
 105:     public void LoadTwitterData()
 106:     {
 107:         // Sample data; replace with real data
 108:         this.Twitter.Add(new ItemViewModel() { Name = "Vesko Kolev", ImagePath = "/Networks/Twitter/0.jpg", Details = "SSE" });
 109:         this.Twitter.Add(new ItemViewModel() { Name = "Joel Ivory Johnson", ImagePath = "/Networks/Twitter/1.jpg", Details = "MVP" });
 110:         this.Twitter.Add(new ItemViewModel() { Name = "Rajesh Rao", ImagePath = "/Networks/Twitter/2.jpg", Details = "iPhone Dev Expert" });
 111:         this.Twitter.Add(new ItemViewModel() { Name = "Harish Ranganathan", ImagePath = "/Networks/Twitter/3.jpg", Details = "Evangelist, Microsoft India" });
 112:         this.Twitter.Add(new ItemViewModel() { Name = "Jouni Miettunen", ImagePath = "/Networks/Twitter/4.jpg", Details = "MVP" });
 113:         this.Twitter.Add(new ItemViewModel() { Name = "Babina Sebastian", ImagePath = "/Networks/Twitter/5.jpg", Details = "..." });
 114:         this.Twitter.Add(new ItemViewModel() { Name = "Rahul", ImagePath = "/Networks/Twitter/6.jpg", Details = "Teacher" });
 115:         this.Twitter.Add(new ItemViewModel() { Name = "Anand", ImagePath = "/Networks/Twitter/7.jpg", Details = "Teacher" });
 116:         this.Twitter.Add(new ItemViewModel() { Name = "Daniel Vaughan", ImagePath = "/Networks/Twitter/8.png", Details = "MVP" });
 117:         this.Twitter.Add(new ItemViewModel() { Name = "Ashish", ImagePath = "/Networks/Twitter/9.jpg", Details = "Lead" });
 118:         this.Twitter.Add(new ItemViewModel() { Name = "Paul Diston", ImagePath = "/Networks/Twitter/10.jpg", Details = "SSE" });
 119:         this.IsDataLoaded = true;
 120:     }
 121: }

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.

   1: <controls:Panorama x:Name="pnrmNetwork" Title="my friend(s)">
   3:     <controls:Panorama.Background>
   4:         <ImageBrush ImageSource="/WP_PanoramaApp;component/PanoramaBackground.png"/>
   5:     </controls:Panorama.Background>
   6:             <!--Panorama item one-->
   7:             <controls:PanoramaItem Header="My Networks" Foreground="Blue">
   8:                 <!--Double line list with text wrapping-->
   9:                 <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}">
  10:                     <ListBox.ItemTemplate>
  11:                         <DataTemplate>
  12:                             <StackPanel Margin="0,0,0,5" Width="432" Height="78">
  13:                                 <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
  14:                             </StackPanel>
  15:                         </DataTemplate>
  16:                     </ListBox.ItemTemplate>
  17:                 </ListBox>
  18:             </controls:PanoramaItem>
  20:             <!--Panorama item two (Google+)-->
  21:             <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
  22:             <controls:PanoramaItem Header="Goolge+" Foreground="Crimson">
  23:                 <!--Double line list with image placeholder and text wrapping-->
  24:                 <ListBox Margin="0,0,-12,0" ItemsSource="{Binding GooglePlusItems}">
  25:                     <ListBox.ItemTemplate>
  26:                         <DataTemplate>
  27:                             <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
  28:                                 <Image Width="100" Height="100" Source="{Binding ImagePath}"></Image>
  29:                                 <StackPanel Width="311">
  30:                                     <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
  31:                                     <TextBlock Text="{Binding Details}" TextWrapping="NoWrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
  32:                                 </StackPanel>
  33:                             </StackPanel>
  34:                         </DataTemplate>
  35:                     </ListBox.ItemTemplate>
  36:                 </ListBox>
  37:             </controls:PanoramaItem>
  39:             <!--Panorama item three (LinkedIn)-->
  40:             <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
  41:             <controls:PanoramaItem Header="LinkedIn" Foreground="SpringGreen">
  42:                 <!--Double line list with image placeholder and text wrapping-->
  43:                 <ListBox Margin="0,0,-12,0" ItemsSource="{Binding LinkedIn}">
  44:                     <ListBox.ItemTemplate>
  45:                         <DataTemplate>
  46:                             <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
  47:                                 <Image Width="100" Height="100" Source="{Binding ImagePath}"></Image>
  48:                                 <!--Replace rectangle with image-->
  49:                                 <StackPanel Width="311">
  50:                                     <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
  51:                                     <TextBlock Text="{Binding Details}" TextWrapping="NoWrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
  52:                                 </StackPanel>
  53:                             </StackPanel>
  54:                         </DataTemplate>
  55:                     </ListBox.ItemTemplate>
  56:                 </ListBox>
  57:             </controls:PanoramaItem>
  59:             <!--Panorama item four (Twitter)-->
  60:             <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
  61:             <controls:PanoramaItem Header="Twitter" Foreground="Coral">
  62:                 <!--Double line list with image placeholder and text wrapping-->
  63:                 <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Twitter}">
  64:                     <ListBox.ItemTemplate>
  65:                         <DataTemplate>
  66:                             <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
  67:                                 <!--Replace rectangle with image-->
  68:                                 <Image Width="100" Height="100" Source="{Binding ImagePath}"></Image>
  69:                                 <StackPanel Width="311">
  70:                                     <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
  71:                                     <TextBlock Text="{Binding Details}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
  72:                                 </StackPanel>
  73:                             </StackPanel>
  74:                         </DataTemplate>
  75:                     </ListBox.ItemTemplate>
  76:                 </ListBox>
  77:             </controls:PanoramaItem>
  79:             <!--Panorama item five (Facebook)-->
  80:             <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
  81:             <controls:PanoramaItem Header="Facebook" Foreground="Aquamarine">
  82:                 <!--Double line list with image placeholder and text wrapping-->
  83:                 <ListBox Margin="0,0,-12,0" ItemsSource="{Binding FacebookItems}">
  84:                     <ListBox.ItemTemplate>
  85:                         <DataTemplate>
  86:                             <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
  87:                                 <!--Replace rectangle with image-->
  88:                                 <Image Width="100" Height="100" Source="{Binding ImagePath}"></Image>
  89:                                 <StackPanel Width="311">
  90:                                     <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
  91:                                     <TextBlock Text="{Binding Details}" TextWrapping="NoWrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
  92:                                 </StackPanel>
  93:                             </StackPanel>
  94:                         </DataTemplate>
  95:                     </ListBox.ItemTemplate>
  96:                 </ListBox>
  98:         </controls:PanoramaItem>
 100: </controls:Panorama>


Step: - 11 double click on Panorama Application Button and write code in code behind use below code snippet for navigate the panorama page.

   1: private void btnPanoramaApplication(object sender, RoutedEventArgs e)
   2: {
   3:     this.NavigationService.Navigate(new Uri("/views/PanoramaPage1.xaml", 
   4:     UriKind.Relative));
   5: }

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.