編程創建 Windows Phone 的全景應用 (Panorama)

在這個教程中我們將學習如何創建一個包含動態全景控件的 Windows Phone 7 應用程序。關于什么是全景控件請看本文最后的運行截圖。

首先打開 Visual Studip 2010 并創建一個新的 Sliverlight for Windows Phone 7 的項目：

開始編碼之前，我們通過添加引用選項來添加 Microsoft.Phone.Controls 的引用，并在 XAML 代碼中包含命名空間，并刪除 xaml 代碼中的默認內容：

現在讓我們開始編碼。全景空間包含不同的標題和條目：

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

private List CreatePanoramaHeaders()
{
    return new List { "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;
   }
} 

完整代碼列表：

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

        private List CreatePanoramaHeaders()
        {
            return new List { "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;
            }
        }

    }
}

現在我們已經完成了所有的編碼工作，按 F5 直接運行看看效果，如果編譯成功的話會打開 Windows Phone 模擬器，然后你可以看到如下運行結果：

Output Screen:

在這個教程中，我們學習如何編程加載動態的全景控件以及自定義標題和列表項。

Happy Programming!!!

英文原文，OSCHINA原創翻譯