這一節，我們要做的是把設置界面寫好。不好以為那么容易，因為涉及到ListPicker的數據綁定，而且數據是從數據庫里面查詢獲取的，所以並不是拖連個控件就可以完成的事，不過，拖控件不是件好事，要盡量避免。
那么開始吧。首先，先把設置界面添加進來。工程----添加---新建項---window phone protrait page---命名為“SetPage.xaml"---添加。
接下來要做的是要從MainPage導航到SetPage。那么怎么做呢？
我的方法是在ApplicationBar放置一個Button來用作導航到SetPage的入口。
那么，來釋放ApplicationBar出來吧。看下圖，其實微軟早已為我們寫好了ApplicationBar了。只要去掉注釋就行了。原來自動生成的ApplicationBar帶有2個Icon按鈕，和兩個下拉菜單按鈕。我們暫時只需要一個按鈕就行了。
運行，是不是發現那個按鈕沒有顯示圖標。。因為那個圖標路徑是不對的。
現在到SDK的安裝目錄把圖標弄出來吧。到C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\dark（C為SDK安裝目錄）下。找到appbar.feature.settings.rest.png。復制。然后到解決方案資源管理器，在工程上右鍵---添加---新建文件夾---命名為Icons----在Icons文件夾上面右鍵--粘貼。
然后修改ApplicationBar上的代碼為：
<shell:ApplicationBarIconButton IconUri="/Icons/appbar.feature.settings.rest.png" Text="設置"/>
現在還有一個重要的事情要做的是修改Icon的文件生成屬性。操作方法：解決方案資源管理器選中那個Settings圖標文件---屬性---生成操作---改為：內容（Content）。接着，運行。是否已經看到圖標了呢。。。
看上圖，是否發現圖標是出來了。但是原來顯示很正常的內容就少了挺多被擋住了呢。。
那么怎么能夠看到被擋住的內容呢，我們給界面加個滾動就可以了。ScrollViewer就上場了。
在MainPage里面給ContentPanel添加ScrollViewer。
如下：
注意：ScrollViewer的Height屬性是指顯示的高度，不是這個viewer所有的長度。如果弄這個值過大，會導致你一拖下去就回彈，下面的內容就不容易看清楚了。
點擊運行。是不是拖下去能夠正常看到了呢。
接下來，要給ApplicationBar的iconButton添加點擊事件。添加方法都挺多的。一種就是選擇這個Button。然后查看屬性面板--選擇事件--在Click上面雙擊----完成.
我倒喜歡另一種快捷方式。是手敲代碼方式。在代碼框上面敲擊c+tab+tab.
敲擊"C"出現這樣：
然
后”TAB“
然
后”TAB“
繼
續"TAB”。
在上面添加代碼：
private void ApplicationBarIconButton_Click(object sender, EventArgs e) { NavigationService.Navigate(new Uri("/WeatherForecast;component/SetPage.xaml", UriKind.Relative)); }
點擊運行。是不是發現現在點擊那個IconButton可以導航到SetPage頁面了呢。
接下來就做SetPage的布局。這里要使用到ListPicker。這個是silverlight for window phone toolkit提供的。沒有安裝的話到這里下載安裝：http://silverlight.codeplex.com/releases/view/55034
轉到SetPage.xaml頁面，在ContentPanel添加代碼。
要先添加tookit的命名空間，但是那行代碼太長，我不喜歡敲，那么就來拖一把控件吧。拖一次編譯器就給我們引入了命名空間（你會在第一行發現引用），就下次就不用再拖了。拖控件很不好，這里展示一下技巧。
查看工具箱--找下是否有ListPicker控件（一般來說第一次使用的時候是沒有的）--發現沒有，在工具箱右鍵---選擇項--
找到ListPicker，勾上--確定。然后你就能在工具箱上發現ListPicker了。如下圖：
下面是SetPage的布局代碼：
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <RowDefinition Height="100"/> <RowDefinition Height="100"/> <RowDefinition Height="100"/> <RowDefinition Height="100"/> </Grid.RowDefinitions> <TextBlock Text="省份：" Grid.Row="0" FontSize="40" HorizontalAlignment="Left" VerticalAlignment="Bottom"/> <toolkit:ListPicker x:Name="provincelp" Grid.Row="1" SelectionChanged="province_SelectionChanged" /> <TextBlock Text="城市：" Grid.Row="2" FontSize="40" HorizontalAlignment="Left" VerticalAlignment="Bottom"/> <toolkit:ListPicker x:Name="citylp" Grid.Row="3" SelectionChanged="city_SelectionChanged"/> </Grid>
先給Provincelp添加一個SelectionChange事件。
由於這個中央氣象台我收集到的省份較少。我就直接寫成是String數組，沒有從數據庫里面查詢數據。
代碼如下：
string[] prov = { "北京", "上海", "天津", "重慶", "黑龍江", "吉林", "遼寧", "內蒙古", "河北", "山西", "陝西" }; private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { //給省份的listpicker綁定數據 provincelp.ItemsSource = prov; } private void provincelp_SelectionChanged(object sender, SelectionChangedEventArgs e) { ListPicker lp = sender as ListPicker; string p = lp.SelectedItem.ToString(); cityDataBind(p); } /// <summary> /// 由當前選擇的省份給city的ListPicker綁定數據 /// </summary> /// <returns></returns> void cityDataBind(String prov) { IList<CityInfoTable> list = null; using (CityDataContext db = new CityDataContext(CityDataContext.connectionString)) { IQueryable<CityInfoTable> queries = from c in db.CityInfos where c.Province == prov select c; list = queries.ToList(); } List<String> l = new List<string>(); foreach (var item in list) { l.Add(item.CityName); } citylp.ItemsSource = l; }
運行，成功！
好了，到這里，這節就算是結束了。
這節工程代碼下載：chapter5