简述

官方对List view和Grid view的描述是：

The feature-rich ListView and GridView controls work out of box. They require no customization, but they can be customized easily. Each has its own built-in UI and UX and is designed to display nearly any type of collection as is.

翻译过来也就说，这两个容器功能非常丰富，他们不需要定制，但自定义内容也很简单。每一个都有自己内置的UI和UX，并且能被用以表现所有类型集合。

UI的排布是X、Y轴的布局，那么纵向列表和网格确实能表达几乎所有集合这话并非不妥。

另外，列表和网格还具有“相同样式不同数据的重复子件”的特殊重复性，这意味着，其往往是和数据强绑定的。

设计者只需要关注其子件样式即可。

绑定数据和手动添加数据

ListView和GridView使用属性itemsSource来绑定数据，或者通过在标签内添加item来添加数据。

但是二者是相互冲突的。

列表和网格的优先级是[itemsSource > items]，这意味着当绑定数据后，手动添加在XAML的item将会被忽视。

如何绑定数据：

<ListView itemsSource="{x:Bind ViewModel.Datas} />

布局

默认的，ListView使用ItemsStackPanel作为布局容器；GridView则默认使用ItemsWrapGrid。

相信两个名字并不让人陌生。

自然，他们的布局容器是可以自定义的。

但是自定义之前，官方有提到一点注意事项：

If you change ItemsPanel, do not disable virtualization. Both ItemsStackPanel and ItemsWrapGrid support virtualization, so these classes are safe to use. If you use any other panel, you might disable virtualization and slow the performance of the list view. For more info, see the list view articles under Performance.

翻译过来就是，当你改变ItemsPanel（也就是布局容器，或者子件面板）的时候，不要关闭虚拟化。无论是栈面板还是行面板，都是支持虚拟化的，都是可以安全的使用的。而当你使用其他的面板的时候，你可以关闭虚拟化来减少这些视图的性能损耗。

再翻译一下就是：这两个容器是安全的！你没有必要特地关闭虚拟化！但是你也可以在任何情况下关闭虚拟化来达到降低性能损耗的目的！

以ListView为例。

1）改变StackPanel的布局方向为水平

<ListView Height="80">
      <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

2）滚动条设置

可以通过修改ListView的ScrollViewer属性来自定义滚动条的状态。

• ScrollViewer.HorizontalScrollMode：水平滚动条启动或关闭（Disable, Enable)
• ScrollViewer.HorizontalScrollBarVisibility：水平滚动条的可见（Auto，Disable，Hidden，Visible）
• ScrollViewer.VerticalScrollMode：垂直的
• ScrollViewer.VerticalScrollBarVisibility：垂直的

<ListView Height="60"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Strawberry</x:String>
</ListView>

在设置ListView为水平布局的时候，可以通过限定listview的宽度来使得滚动功能可用。

交互：选中和点击

ListView具有两个属性：SelectionMode、IsItemClickEnable

开发者通过修改SelectionMode属性来改变List的选中模式。

None：无选中样式，列表为只读状态。

Single：只能选中一个。Ctrl+点击可以取消选中；选中事件触发时，能得到一个SelectedItem，且SelectedIndex有效。如果没有选中，则前者是Null，后者是-1。此外，如果手动设置一个不在数据中的item，那么其会被忽视，SelectedItem仍然为null。而如果设置一个SeletedIndex超过了数据的最大索引，那么会抛出ArgumentException异常。

Multiple：多选；Shift+点击可以范围多选；使用SelectedItems获取选中项。他和SeletedIndex、SeletedItem是同步的。另外，SeletedItem和eSeletedIndex是第一个选中的项。

Extended：拓展的；基本同Multiple。

当SelectionMode不为None且IsItemClickEnable不为False，那么“选中”和“点击”都会触发事件。

触发顺序是先触发点击事件，再触发选中事件。

如果点击事件需要另一个页面的加载后才能捕捉到，那么点击事件不会触发，子件不会被选中。

如何添加选中事件:

<ListView x:Name="listView1" SelectionMode="Multiple"
          SelectionChanged="ListView1_SelectionChanged">
</ListView>

然后在cs中定义事件方法void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)；

如何添加点击事件:

<ListView SelectionMode="None"
          IsItemClickEnabled="True"
          ItemClick="ListView1_ItemClick">
</ListView>

然后在cs中定义事件方法：
void ListView1_ItemClick(object sender, ItemClickEventArgs e)

选择API

在代码中，可以通过API对ListView进行操作：

var listview = new ListView();
...
// 全选
listview.SelectAll();

// 范围选择
listview.SelectRange(new ItemIndexRange(0, (uint)listview.Items.Count));

// 范围取消选择
listview.DeselectRange(new ItemIndexRange(0, (uint)listview.Items.Count));

参考内容

Microsoft 设计文档