Silverlight toolkit 中ListPicker控件的用法

ListPicker控件，从外形上看有点像ComboBox，主要的功能也是可以在多个项目中来选择一个项目，如下图，在平常状态下，看到的是跟一般的文字框相同(如图1)，而展开后就会出现项目列表(如图2)。

图1 ListPicker控件显示图2 ListPicker控件展开时

下面我们来看一下这个例子的具体实现。步骤很简单，首先，需要将ListPicker控件添加到MainPage中去。设置ListPicker的属性：

<toolkit:ListPicker Header="Default" Height="229" Name="defaultPicker" Width="414" />

从上边的代码可以看到，Header在控件中的显示位置。

在MainPage.xaml.cs文件中添加代码：

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

这里添加的就是要填充到ListPicker中的内容。

这两步完成之后，运行后的效果就如图上所示。

关于第二步代码的添加，还有另外的两种方法：

1．使用ListPicker.Items.Add方法

this.defaultPicker.Items.Add("London");

this.defaultPicker.Items.Add("China");

this.defaultPicker.Items.Add("Mexico");

2．将这部分的实现放在MainPage.xaml中去

xmlns:sys="clr-namespace:System;assembly=mscorlib"

<toolkit:ListPicker Header="Default" Height="229" Name="defaultPicker" Width="414">

<sys:String>London</sys:String>

<sys:String>China</sys:String>

<sys:String>Mexico</sys:String>

</toolkit:ListPicker>

这里需要注意的是，在放置ListPicker控件时，需要将下方拉大些，留下足够的空间来显示列表中的内容，否则list中内容无法显示或显示不全。

当展开的ListPicker中项目的数量超过5个时，ListPicker会自动地以整页的模式来显示待选的项目，这样可以有更多的显示空间，在项目的选择上也会更加的方便。

下面我们来实现一个颜色选择的ListPicker。List的显示，除了文字外，前边加上对应的颜色矩形框。

首先，添加ListPicker控件到界面，设置FullModeItemTemplate，ItemTemplate属性。

<toolkit:ListPicker Header="Full ListPicker" Height="217" Name="listPicker1" Width="410" ItemsSource="{Binding}">

<toolkit:ListPicker.FullModeItemTemplate>

</StackPanel>

</DataTemplate>

</toolkit:ListPicker.FullModeItemTemplate>

<toolkit:ListPicker.ItemTemplate>

</StackPanel>

</DataTemplate>

</toolkit:ListPicker.ItemTemplate>

</toolkit:ListPicker>

其次，建立一个表示颜色的字符串数组：

static readonly string[] AccentColors = { "magenta","purple","teal","lime","brown","pink","orange","blue","red","green" };

this.listPicker1.DataContext = AccentColors;

这样，运行程序，效果如下图：

这里默认的超过5项时全屏的模式，有一个属性ItemCountThreshold，设置它的值可以改变这个规则，当ItemCountThreshold="2"时，list中的内容超过2个时，就会以全屏模式显示。

Selectedindex，用来规定当前显示的为所选择List中的第几个，从0开始。

其它更为详细的属性和事件，请参考:

http://www.windowsphonegeek.com/articles/listpicker-for-wp7-in-depth