Windows Phone 之下拉菜单ListPicker

默认情况下，Visual Studio的ToolBox里没有任何下拉菜单的控件可供使用，虽然可以手工输入代码使用隐藏的ComboBox来实现下拉菜单,但是显示出来的菜单与Metro UI主题不匹配。Silverlight for Windows Phone Toolkit提供了多个系统默认没有的控件扩展，像AutoCompleteBox,ContextMenu,DatePicker,ListPicker等等，我们下载安装后就可以使用这些控件。

(1)首先，要下载安装Silverlight for Windows Phone Toolkit,地址：http://silverlight.codeplex.com/releases

当然，也可以直接下载Microsoft.Phone.Controls.Toolkit，不用安装，添加到项目引用即可，我就是这样使用的。

(2)点击Project–Add Reference–.Net选项卡，下拉，找到Microsoft.Phone.Controls.Toolkit,双击添加.

这样就可以在XAML代码中使用所有Toolkit中包含的控件了。

(3)接着添加控件：打开相应的XAML,在phone根元素添加命名空间，

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" 

(4)在需要添加ListPicker的地方添加ListPicker代码，需要使用toolkit前缀，如：

<toolkit:ListPicker >
      <toolkit:ListPicker.Header>
          <TextBlock Text="省列表" Foreground="Black"></TextBlock>
      </toolkit:ListPicker.Header>
      <toolkit:ListPickerItem>
          河南省
      </toolkit:ListPickerItem>
      <toolkit:ListPickerItem>
          河北省
      </toolkit:ListPickerItem>
      <toolkit:ListPickerItem>
          安徽省
      </toolkit:ListPickerItem>
</toolkit:ListPicker>

再来看一个绑定的例子吧，这个很重要。。。

（1）ListPicker控件有点类似ListBox，但是开始默认显示的是TextBox的样式，对于数据绑定ItemSource和事件选择发生变化SelectionChanged等，在这里不做介绍了，这里主要想说的是一个可能困惑大家的问题，也就是“2011年8月版mango silverlight toolkit  for windows phone   当中的listpicker  ItemCountThreshold 已经废除”，不能再使用了。 （2）在系统默认<=5个都是不全屏显示的，如果大于5个的话就全屏显示（当展开的ListPicker中项目的数量超过5个时，ListPicker会自动地以整页的模式来显示待选的项目，这样可以有更多的显示空间，在项目的选择上也会更加的方便），在8月份之后呢，这个ItemCountThreshold属性就不见了，换成的是ItemTemplate和FullModeItemTemplate，从字面上面我们可以看出，后面的表示全屏显示的模版。

另外，SelectedIndex设置初始显示值。

我们展示了三种ListPicker控件的使用方法：

//  listpicker  ItemCountThreshold 已经废除.
        // 构造函数
        public MainPage()
        {
            InitializeComponent();
            List<Cities> source = new List<Cities>();
            source.Add(new Cities() { Name = "Madrid", Country = "ES", Language = "Spanish" });
            source.Add(new Cities() { Name = "Las Vegas", Country = "US", Language = "English" });
            source.Add(new Cities() { Name = "London", Country = "UK", Language = "English" });
            source.Add(new Cities() { Name = "Mexico", Country = "MX", Language = "Spanish" });
            source.Add(new Cities() { Name = "Beijing", Country = "CH", Language = "Chinese" });
            source.Add(new Cities() { Name = "NewYork", Country = "MS", Language = "English" });

            this.listPicker.ItemsSource = source;
            this.listPicker2.ItemsSource = source;
            this.listPicker3.ItemsSource = source;

            this.defaultPicker.ItemsSource = new List<string>() {"Madrid","London","Mexico" };

            //this.listPicker.SelectionChanged +=new SelectionChangedEventHandler(listPicker_SelectionChanged);
            this.listPicker3.SelectionChanged += new SelectionChangedEventHandler(listPicker_SelectionChanged);

        }

　　　　　//选项更改事件
        private void listPicker_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            Cities data = (sender as ListPicker).SelectedItem as Cities;
            MessageBox.Show(data.Name);

            //Get the selected ListPickerItem container instance
            ListPickerItem selectedItem = this.listPicker3.ItemContainerGenerator.ContainerFromItem(data) as ListPickerItem;
        }

　　　　　//Button按钮事件
        private void selectBtn_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show((listPicker3.SelectedItem as Cities).Name.ToString());
        }

//第一种：只设置“ItemTemplate”
　　　　　　　　　　<toolkit:ListPicker x:Name="listPicker"
                                　　ItemTemplate="{StaticResource PickerItemTemplate}"
                                    Header="Cities" 

                                    FullModeHeader="Cities"
                                　　CacheMode="BitmapCache" />
　　　　　　　　　　//第二种 只设置“FullModeItemTemplate”
                <toolkit:ListPicker x:Name="listPicker2"
                                    FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}"
                                    Header="Cities"
                                    FullModeHeader="Cities"
                                    CacheMode="BitmapCache"></toolkit:ListPicker>
                <!--正常模式下-->
　　　　　　　　　　//第三种“ItemTemplate”和“FullModeItemTemplate”都设置
                <toolkit:ListPicker x:Name="listPicker3"
                                    ItemTemplate="{StaticResource PickerItemTemplate}"
                                    FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}"
                                    Header="Cities"
                                    FullModeHeader="Cities"
                                    CacheMode="BitmapCache" />
　　　　　　　　　　//Button按钮用来
                <Button x:Name="selectBtn" Height="80" Width="200" Content="SelectItemBtn"
                        Click="selectBtn_Click"></Button>

现在我们，看一下效果，就知道“ItemTemplate”和“FullModeItemTemplate”都表示什么了：

第三种的全屏和第二种的一样，，，

这样，我们都知道了ListPicker的正确使用了，记住，在绑定的时候，如果选项超过5个，要记得同时设置“ItemTemplate”和“FullModeItemTemplate”

ItemTemplate是在开始的模版

FullModeItemTemplate是全屏的模版

今天用ListPicker的时候，又发现了一个问题：

在绑定过ListPicker之后，然后设置其触发事件,代码如下：

public AddCity()
       {
            ProvinceList = new ObservableCollection<Province>();
            InitializeComponent();

            GetProvinces.GetProvinceList(() =>
            {
                ProvinceList = GetProvinces.provinceList;
                this.listPicker1.ItemsSource = ProvinceList;
            });
        }

        private void listPicker1_SelectionChanged_1(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            MessageBox.Show(sender.ToString());
            MessageBox.Show("Province");
            //Province data = (sender as ListPicker).SelectedItem as Province;
            //MessageBox.Show(data.RegionName);
        }

会发现，进入该页面的时候，就会先两次执行listPicker1_SelectionChanged_1这个事件处理程序，这是为什么呢？该怎么修改呢？ 搜索了下这个问题：

其实：this.listPicker1.ItemsSource = ProvinceList; 执行这个绑定语句时就会触发这个事件。没有办法的额。