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


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

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

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

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

 
01 private List<string> CreatePanoramaItems(string item)
02 {
03     List<String> Panoramaitems = null;
04     switch (item)
05     {
06     case "Page1":
07         Panoramaitems = new List<string> { "Page1Item1", "Page1Item2", "Page1Item3"};
08         break;
09     case "Page2":
10         Panoramaitems = new List<string> { "Page2Item1", "Page2Item2", "Page2Item3" };
11         break;
12     case "Page3":
13         Panoramaitems = new List<string> { "Page3Item1", "Page3Item2", "Page3Item3" };
14         break;
15     }
16     return Panoramaitems;
17 }
18   
19 private List<string> CreatePanoramaHeaders()
20 {
21     return new List<string> { "Page1", "Page2", "Page3" };
22 }

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

 
01 private void MainPage_Loaded(object sender, RoutedEventArgs e)
02 {
03    //Initializing the Panorama Control and Assigning base values
04    Panorama panoramactrl = new Panorama();
05    panoramactrl.Title = "F5Debug How To";
06    panoramactrl.SelectionChanged += panoramaCtrl_SelectionChanged;
07     
08    //Initializing the Panorama Control Items
09    PanoramaItem panoramaCtrlItem = new PanoramaItem();
10    panoramaCtrlItem.Header = "Dynamic Panorama";
11   
12    //Initializing Textblock to display some text
13    TextBlock textBlock = new TextBlock();
14    textBlock.TextWrapping = TextWrapping.Wrap;
15    textBlock.Text = "F5debug.Net – Building and Debugging the Technology";
16    textBlock.FontSize = 20;
17    panoramaCtrlItem.Content = textBlock;
18   
19    panoramactrl.Items.Add(panoramaCtrlItem);
20   
21    foreach (string Eachitems in CreatePanoramaHeaders())
22    {
23        panoramaCtrlItem = new PanoramaItem();
24        panoramaCtrlItem.Header = Eachitems;
25        panoramactrl.Items.Add(panoramaCtrlItem);
26    }
27   
28    this.LayoutRoot.Children.Add(panoramactrl);
29 }
30   
31 private void panoramaCtrl_SelectionChanged(object sender, SelectionChangedEventArgs e)
32 {
33    Panorama panoramactrl = (Panorama)sender;
34    PanoramaItem panoramaItem = (PanoramaItem)(panoramactrl.SelectedItem);
35   
36    if (panoramaItem.Content == null)
37    {
38        ListBox listBox = new ListBox();
39        listBox.ItemsSource = CreatePanoramaItems(panoramaItem.Header.ToString());
40        panoramaItem.Content = listBox;
41    }
42 }

完整代码列表：

 
01 using System;
02 using System.Collections.Generic;
03 using System.Linq;
04 using System.Net;
05 using System.Windows;
06 using System.Windows.Controls;
07 using System.Windows.Documents;
08 using System.Windows.Input;
09 using System.Windows.Media;
10 using System.Windows.Media.Animation;
11 using System.Windows.Shapes;
12 using Microsoft.Phone.Controls;
13   
14 namespace F5debugHowto43
15 {
16     public partial class MainPage : PhoneApplicationPage
17     {
18         // Constructor
19         public MainPage()
20         {
21             InitializeComponent();
22             this.Loaded += new RoutedEventHandler(MainPage_Loaded);
23         }
24   
25         private List<string> CreatePanoramaItems(string item)
26         {
27             List<String> Panoramaitems = null;
28             switch (item)
29             {
30                 case "Page1":
31                     Panoramaitems = new List<string> { "Page1Item1", "Page1Item2", "Page1Item3"};
32                     break;
33                 case "Page2":
34                     Panoramaitems = new List<string> { "Page2Item1", "Page2Item2", "Page2Item3" };
35                     break;
36                 case "Page3":
37                     Panoramaitems = new List<string> { "Page3Item1", "Page3Item2", "Page3Item3" };
38                     break;
39             }
40             return Panoramaitems;
41         }
42   
43         private List<string> CreatePanoramaHeaders()
44         {
45             return new List<string> { "Page1", "Page2", "Page3" };
46         }
47   
48         private void MainPage_Loaded(object sender, RoutedEventArgs e)
49         {
50             //Initializing the Panorama Control and Assigning base values
51             Panorama panoramactrl = new Panorama();
52             panoramactrl.Title = "F5Debug How To";
53             panoramactrl.SelectionChanged += panoramaCtrl_SelectionChanged;
54              
55             //Initializing the Panorama Control Items
56             PanoramaItem panoramaCtrlItem = new PanoramaItem();
57             panoramaCtrlItem.Header = "Dynamic Panorama";
58   
59             //Initializing Textblock to display some text
60             TextBlock textBlock = new TextBlock();
61             textBlock.TextWrapping = TextWrapping.Wrap;
62             textBlock.Text = "F5debug.Net – Building and Debugging the Technology";
63             textBlock.FontSize = 20;
64             panoramaCtrlItem.Content = textBlock;
65   
66             panoramactrl.Items.Add(panoramaCtrlItem);
67   
68             foreach (string Eachitems in CreatePanoramaHeaders())
69             {
70                 panoramaCtrlItem = new PanoramaItem();
71                 panoramaCtrlItem.Header = Eachitems;
72                 panoramactrl.Items.Add(panoramaCtrlItem);
73             }
74   
75             this.LayoutRoot.Children.Add(panoramactrl);
76         }
77   
78         private void panoramaCtrl_SelectionChanged(object sender, SelectionChangedEventArgs e)
79         {
80             Panorama panoramactrl = (Panorama)sender;
81             PanoramaItem panoramaItem = (PanoramaItem)(panoramactrl.SelectedItem);
82   
83             if (panoramaItem.Content == null)
84             {
85                 ListBox listBox = new ListBox();
86                 listBox.ItemsSource = CreatePanoramaItems(panoramaItem.Header.ToString());
87                 panoramaItem.Content = listBox;
88             }
89         }
90   
91     }
92 }

现在我们已经完成了所有的编码工作，按 F5 直接运行看看效果，如果编译成功的话会打开 Windows Phone 模拟器，然后你可以看到如下运行结果：

Output Screen:

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

Happy Programming!!!

相关内容