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开始。
最后通过在相应按钮事件时获得所选的项!通过以下方法获得
Class ci = (Class)listPicker1.SelectedItem;
注*:Class为在向listPicker1绑定数据时所使用的类名,通过调用SelectedItem,返回一个object对象。再强制转为对应的子类!
接着就可以使用 ci.属性。获得所要的值;
textBlock1.Text = ci.name;