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>

                    <DataTemplate>

                        <StackPanel Orientation="Horizontal">

                            <Rectangle Fill="{Binding}" Width="40" Height="40" Margin="10, 10, 10, 10"/>

                            <TextBlock Text="{Binding}" VerticalAlignment="Center"/>

                        </StackPanel>

                    </DataTemplate>

                </toolkit:ListPicker.FullModeItemTemplate>

                <toolkit:ListPicker.ItemTemplate>

                    <DataTemplate>

                        <StackPanel Orientation="Horizontal">

                            <Rectangle Fill="{Binding}" Width="40" Height="40" Margin="10, 10, 10, 10"/>

                            <TextBlock Text="{Binding}" VerticalAlignment="Center"/>

                        </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