<WP7>（五）手把手教你写天气预报程序：ApplicationBar的使用和ListPicker的数据绑定

这一节，我们要做的是把设置界面写好。不好以为那么容易，因为涉及到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”。

完成了事件生成，然后在上面右键。选择导航到事件处理程序。这样就导航到MainPage.xaml.cs了。

在上面添加代码：

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事件。

现在添加SetPage的Loaded事件，在Loaded事件要添加ListPicker的数据绑定。

由于这个中央气象台我收集到的省份较少。我就直接写成是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

 

继续学习：<WP7>（六）手把手教你写天气预报程序：使用Isolatedstorage保存设置