WP7 silverlight toolkit 学习之ListPicker应用

XAML列表控件使用详解及案例

最新推荐文章于 2014-10-17 23:47:00 发布

最新推荐文章于 2014-10-17 23:47:00 发布 · 135 阅读

文章标签：

#ListPicker

本文详细介绍了XAML列表控件的基本使用方法，包括属性设置、绑定方式、选中事件等，并通过两个具体案例展示如何实现列表的全屏模式与自定义模板展示。

案例一：xaml:

<toolkit:ListPicker Height="320"
                                HorizontalAlignment="Left"
                                Margin="48,46,0,0"
                                Name="listPicker1"
                                VerticalAlignment="Top"
                                Width="320"
                                Header="Text1"
                                 SelectionChanged="listPicker1_SelectionChanged">
                <sys:String>Red</sys:String>
                <sys:String>Blue</sys:String>
                <sys:String>Old</sys:String>
            </toolkit:ListPicker>

第一个案例很简单，就是拖进来，然后添加了几个项，当然你也可以在cs add添加，

用这个要注意的是，当数量超过5个的时候，就全屏的模式。有一个属性ItemCountThreshold，设置它的值可以改变这个规则，当ItemCountThreshold="2"时，list中的内容超过2个时，就会以全屏模式显示。如果你的内容比较多，高度设高点，不然就看不到了。SelectedIndex，用来规定当前显示的为所选择List中的第几个，从0开始。

而且要自己手动添加一个命名空间 xmlns:sys="clr-namespace:System;assembly=mscorlib"

案例二：xaml:

<toolkit:ListPicker
                Height="100"
                HorizontalAlignment="Left"
                Margin="48,254,0,0"
                Name="listPicker2"
                VerticalAlignment="Top"
                Width="320"
                ItemsSource="{Binding}"
                FullModeHeader="Colors"
                >
                <toolkit:ListPicker.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Rectangle Fill="{Binding}" Width="24" Height="24"/>
                            <TextBlock Text="{Binding}" Margin="12 0 0 0"/>
                        </StackPanel>
                    </DataTemplate>
                </toolkit:ListPicker.ItemTemplate>
                <toolkit:ListPicker.FullModeItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="16 21 0 20">
                            <Rectangle Fill="{Binding}" Width="50" Height="50"/>
                            <TextBlock Text="{Binding}" Margin="12 10 0 0"/>
                        </StackPanel>
                    </DataTemplate>
                </toolkit:ListPicker.FullModeItemTemplate>
            </toolkit:ListPicker>

第二个是用绑定的方式赋值，一定要设置ItemsSource的值，FullModeHeader也会提示要设置的。这里是绑定一个值，当然你也可以绑定不同的值，比如同时绑定name,sex等等，<toolkit:ListPicker.ItemTemplate>这个列表框看到的内容，<toolkit:ListPicker.FullModeItemTemplate>
这个是你点击后弹出展开的内容模板。

cs:

static readonly string[] AccentColors = { "purple", "blue", "park", "teal", "red", "dark" };

在构造函数中添加this.listPicker2.DataContext=AccentColors;

-------------------------------------------------------------------

这两种方式都是有选中改变事件的。listPicker有两种模式：1.简单列表框2.Full mode 完整页面的列表