Silverlight toolkit 中ListPicker控件的用法

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

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

                            <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

总结

以上是内存溢出为你收集整理的Silverlight toolkit 中ListPicker控件的用法全部内容，希望文章能够帮你解决Silverlight toolkit 中ListPicker控件的用法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。