In my previous article Part 17 - Windows Phone 7 - Panorama Control I discussed about how to use Panorama control. In this article I will discuss on how to use Panorama control programatically. I will also explain how we can lazy load data to PanoramItems in panorama controls.

Step 1: Create a GetPanoramaHeaders method in MainPage.xaml.cs which will return List of panorama header.

private List<string> GetPanoramaHeaders()
{
   return new List<string> {"First Item", "Second Item", "Third Item" };
}

Step 2: Create a method GetPanoramaItems in MainPage.xaml.cs which will return list of PanoramaItems for a particular PanoromaItems of Panorama control.

private List<string> GetPanoramaItems(string item)
{
   List<String> items = null;
   switch (item)
   {
      case "First Item":
         items = new List<string> { "FI1", "FI2", "FI3", "FI4", "FI5" };
         break;
      case "Second Item":
         items = new List<string> { "SI1", "SI2", "SI3", "SI4", "SI5" };
         break;
      case "Third Item":
         items = new List<string> { "TI1", "TI2", "TI3", "TI4", "TI5" };
         break;
   }
   return items;
}

Step 3: In the MainPage_Loaded method we will create Panorama Control and create the number of PanoramaItems based on the List returned by GetPanoramaHeaders method. I have attached SelectionChanged event to Panorama to lazy load the data.

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
   if (!App.ViewModel.IsDataLoaded)
   {
      App.ViewModel.LoadData();

      Panorama panorama = new Panorama();
      panorama.Title = "Test Panorama";
      panorama.SelectionChanged += panorama_SelectionChanged;

      PanoramaItem panoramaItem = new PanoramaItem();
      panoramaItem.Header = "Welcome";

      TextBlock textBlock = new TextBlock();
      textBlock.TextWrapping = TextWrapping.Wrap;
      textBlock.Text = "This is panorama control where you can slide and get the data. This example will demonstrate how to do lazy loading of data in Panorama control as and when you flip. Start the sliding left to test lazy loading.";
      panoramaItem.Content = textBlock;
      panorama.Items.Add(panoramaItem);

      foreach (string item in GetPanoramaHeaders())
      {
         panoramaItem = new PanoramaItem();
         panoramaItem.Header = item;
         panorama.Items.Add(panoramaItem);
      }

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

Step 4: The panorama_SelectionChanged event will be triggered whenever user changes Panorama item. The data related to PanoramaItem will be loaded as and when user visits any PanoramaItems.

To prevent the load of same data again and again in PanoramaItem I have put check of panoramaItem.Content == null. If you always want to bring real time data to Panorama items remove the check of panoramaItem.Content == null.

private void panorama_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
   Panorama panorama = (Panorama)sender;
   PanoramaItem panoramaItem = (PanoramaItem)(panorama.SelectedItem);
   if (panoramaItem.Content == null)
   {
      ListBox listBox = new ListBox();
      listBox.ItemsSource = GetPanoramaItems(panoramaItem.Header.ToString());
      panoramaItem.Content = listBox;
   }
}

This ends the article of dynamic panorama control in Windows Phone 7.