(五)手把手教你写天气预报程序:ApplicationBar的使用和ListPicker的数据绑定

时间:2021-03-10 19:35:53

这一节,我们要做的是把设置界面写好。不好以为那么容易,因为涉及到ListPicker的数据绑定,而且数据是从数据库里面查询获取的,所以并不是拖连个控件就可以完成的事,不过,拖控件不是件好事,要尽量避免。

那么开始吧。首先,先把设置界面添加进来。工程----添加---新建项---window phone protrait page---命名为“SetPage.xaml"---添加。
  接下来要做的是要从MainPage导航到SetPage。那么怎么做呢?
我的方法是在ApplicationBar放置一个Button来用作导航到SetPage的入口。
那么,来释放ApplicationBar出来吧。看下图,其实微软早已为我们写好了ApplicationBar了。只要去掉注释就行了。原来自动生成的ApplicationBar带有2个Icon按钮,和两个下拉菜单按钮。我们暂时只需要一个按钮就行了。
 

(五)手把手教你写天气预报程序:ApplicationBar的使用和ListPicker的数据绑定

修改如下:

(五)手把手教你写天气预报程序:ApplicationBar的使用和ListPicker的数据绑定

运行,是不是发现那个按钮没有显示图标。。因为那个图标路径是不对的。
现在到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)。接着,运行。是否已经看到图标了呢。。。

(五)手把手教你写天气预报程序:ApplicationBar的使用和ListPicker的数据绑定


看上图,是否发现图标是出来了。但是原来显示很正常的内容就少了挺多被挡住了呢。。
那么怎么能够看到被挡住的内容呢,我们给界面加个滚动就可以了。ScrollViewer就上场了。
在MainPage里面给ContentPanel添加ScrollViewer。
如下:

(五)手把手教你写天气预报程序:ApplicationBar的使用和ListPicker的数据绑定

注意:ScrollViewer的Height属性是指显示的高度,不是这个viewer所有的长度。如果弄这个值过大,会导致你一拖下去就回弹,下面的内容就不容易看清楚了。
  点击运行。是不是拖下去能够正常看到了呢。
接下来,要给ApplicationBar的iconButton添加点击事件。添加方法都挺多的。一种就是选择这个Button。然后查看属性面板--选择事件--在Click上面双击----完成.
我倒喜欢另一种快捷方式。是手敲代码方式。在代码框上面敲击c+tab+tab.
敲击"C"出现这样:(五)手把手教你写天气预报程序:ApplicationBar的使用和ListPicker的数据绑定 后”TAB“

(五)手把手教你写天气预报程序:ApplicationBar的使用和ListPicker的数据绑定

续"TAB”。

(五)手把手教你写天气预报程序:ApplicationBar的使用和ListPicker的数据绑定

完成了事件生成,然后在上面右键。选择导航到事件处理程序。这样就导航到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了。如下图:

(五)手把手教你写天气预报程序:ApplicationBar的使用和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事件。

(五)手把手教你写天气预报程序:ApplicationBar的使用和ListPicker的数据绑定

现在添加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