How To: Programmatically Create a Panorama Control in Windows Phone

In this tutorial we are going to learn how to programmatically create a dynamic Panorama Control in Windows Phone 7 Application Development. In our earlier series we have seen what Panorama Control and how to use this control (Refer to the article – ) which explains the usage of the control. Here we will see how can we programmatically use the control by providing the required data dynamically which will be very useful while developing applications which involves frequent data manipulations.

Let us see the step by step process on how to use this control in real time developing the Windows phone 7 application. Open Visual Studio 2010 and create a new Silverlight for Windows Phone 7 project with a valid project name as shown in the screen below.

Before start coding we need to add reference to the Microsoft.Phone.Controls by Add reference option and include the name space to the XAML code, also delete the default code from the xaml code as shown in the screen below.

Now let us directly go to the code behind and start writing our code, as here we are going to programmatically bind the control with the required data one by one. As we can see Panorama control has different Headers and Items first let us add required data for the headers and items as shown in the code below.

Code:

private List<string> CreatePanoramaItems(string item)
        {
            List<String> Panoramaitems = null;
            switch (item)
            {
                case "Page1":
                    Panoramaitems = new List<string> { "Page1Item1", "Page1Item2", "Page1Item3"};
                    break;
                case "Page2":
                    Panoramaitems = new List<string> { "Page2Item1", "Page2Item2", "Page2Item3" };
                    break;
                case "Page3":
                    Panoramaitems = new List<string> { "Page3Item1", "Page3Item2", "Page3Item3" };
                    break;
            }
            return Panoramaitems;
        }

        private List<string> CreatePanoramaHeaders()
        {
            return new List<string> { "Page1", "Page2", "Page3" };
        }

Next is to add the load event where on page load we are going to load the dynamic panorama control with the headers and items one by one along with a textblock which is as well dynamically created and added to the Panorama item as shown in the code below.

Code:

private void MainPage_Loaded(object sender, RoutedEventArgs e)
       {
           //Initializing the Panorama Control and Assigning base values
           Panorama panoramactrl = new Panorama();
           panoramactrl.Title = "F5Debug How To";
           panoramactrl.SelectionChanged += panoramaCtrl_SelectionChanged;
          
           //Initializing the Panorama Control Items
           PanoramaItem panoramaCtrlItem = new PanoramaItem();
           panoramaCtrlItem.Header = "Dynamic Panorama";

           //Initializing Textblock to display some text
           TextBlock textBlock = new TextBlock();
           textBlock.TextWrapping = TextWrapping.Wrap;
           textBlock.Text = "F5debug.Net – Building and Debugging the Technology";
           textBlock.FontSize = 20;
           panoramaCtrlItem.Content = textBlock;

           panoramactrl.Items.Add(panoramaCtrlItem);

           foreach (string Eachitems in CreatePanoramaHeaders())
           {
               panoramaCtrlItem = new PanoramaItem();
               panoramaCtrlItem.Header = Eachitems;
               panoramactrl.Items.Add(panoramaCtrlItem);
           }

           this.LayoutRoot.Children.Add(panoramactrl);
       }

       private void panoramaCtrl_SelectionChanged(object sender, SelectionChangedEventArgs e)
       {
           Panorama panoramactrl = (Panorama)sender;
           PanoramaItem panoramaItem = (PanoramaItem)(panoramactrl.SelectedItem);

           if (panoramaItem.Content == null)
           {
               ListBox listBox = new ListBox();
               listBox.ItemsSource = CreatePanoramaItems(panoramaItem.Header.ToString());
               panoramaItem.Content = listBox;
           }
       } 

Complete Code Listing:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace F5debugHowto43
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        private List<string> CreatePanoramaItems(string item)
        {
            List<String> Panoramaitems = null;
            switch (item)
            {
                case "Page1":
                    Panoramaitems = new List<string> { "Page1Item1", "Page1Item2", "Page1Item3"};
                    break;
                case "Page2":
                    Panoramaitems = new List<string> { "Page2Item1", "Page2Item2", "Page2Item3" };
                    break;
                case "Page3":
                    Panoramaitems = new List<string> { "Page3Item1", "Page3Item2", "Page3Item3" };
                    break;
            }
            return Panoramaitems;
        }

        private List<string> CreatePanoramaHeaders()
        {
            return new List<string> { "Page1", "Page2", "Page3" };
        }

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            //Initializing the Panorama Control and Assigning base values
            Panorama panoramactrl = new Panorama();
            panoramactrl.Title = "F5Debug How To";
            panoramactrl.SelectionChanged += panoramaCtrl_SelectionChanged;
           
            //Initializing the Panorama Control Items
            PanoramaItem panoramaCtrlItem = new PanoramaItem();
            panoramaCtrlItem.Header = "Dynamic Panorama";

            //Initializing Textblock to display some text
            TextBlock textBlock = new TextBlock();
            textBlock.TextWrapping = TextWrapping.Wrap;
            textBlock.Text = "F5debug.Net – Building and Debugging the Technology";
            textBlock.FontSize = 20;
            panoramaCtrlItem.Content = textBlock;

            panoramactrl.Items.Add(panoramaCtrlItem);

            foreach (string Eachitems in CreatePanoramaHeaders())
            {
                panoramaCtrlItem = new PanoramaItem();
                panoramaCtrlItem.Header = Eachitems;
                panoramactrl.Items.Add(panoramaCtrlItem);
            }

            this.LayoutRoot.Children.Add(panoramactrl);
        }

        private void panoramaCtrl_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            Panorama panoramactrl = (Panorama)sender;
            PanoramaItem panoramaItem = (PanoramaItem)(panoramactrl.SelectedItem);

            if (panoramaItem.Content == null)
            {
                ListBox listBox = new ListBox();
                listBox.ItemsSource = CreatePanoramaItems(panoramaItem.Header.ToString());
                panoramaItem.Content = listBox;
            }
        }

    }
}

Now we are done with our code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screens below.

Output Screen:

So in this tutorial we have seen how to programmatically load a dynamic Panorama control with customized headers and items, that’s it for today keep looking into my blog to get more updates and how to’s on Windows Phone. Happy Programming!!!