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