在這個教程中我們將學習如何創建一個包含動態全景控件的 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!!!