Floating FB popout byF5debug

101 How to on Windows Phone – How to #43 – Programmatically create a Panorama Control in Windows Phone

 

In this tutorial we are going to see 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.           [more]

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.

clip_image002

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.

clip_image004

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" };
        }

clip_image006

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;
           }
       }

clip_image008

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:

clip_image010

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!!!

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) -

Chinese Restaurant Supply
Chinese Restaurant Supply
3/8/2014 4:16:33 PM #

Great article! This is the kind of info that are supposed to be shared around the web. Disgrace on Google for no longer positioning this publish higher! Come on over and visit my web site . Thank you =)|

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