编程创建 Windows Phone 的全景应用 (Panorama)

jopen 12年前

在这个教程中我们将学习如何创建一个包含动态全景控件的 Windows Phone 7 应用程序。关于什么是全景控件请看本文最后的运行截图。

首先打开 Visual Studip 2010 并创建一个新的 Sliverlight for Windows Phone 7 的项目:

编程创建 Windows Phone 的全景应用 (Panorama)

开始编码之前,我们通过添加引用选项来添加 Microsoft.Phone.Controls 的引用,并在 XAML 代码中包含命名空间,并删除 xaml 代码中的默认内容:

编程创建 Windows Phone 的全景应用 (Panorama)

现在让我们开始编码。全景空间包含不同的标题和条目:

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

编程创建 Windows Phone 的全景应用 (Panorama)

接下来是添加装载事件,当页面加载时我们要装载动态的全景控件,并自定义标题和列表项:

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

编程创建 Windows Phone 的全景应用 (Panorama)

完整代码列表:

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:

编程创建 Windows Phone 的全景应用 (Panorama)

在这个教程中,我们学习如何编程加载动态的全景控件以及自定义标题和列表项。

Happy Programming!!!

英文原文,OSCHINA原创翻译