UWP 开发初阶 Chapter 8

07 Jul 2018 in 初阶

ListView 的简单介绍与简单应用

上篇回顾

上次介绍了 Style 和 Resource 在 XAML 中的应用，这些知识在开发后期是相当有用的，并且当你想实时切换主题的时候，ThemeResource 就会派上大用处。

本篇正文

基本介绍

1. 什么是 ListView ？

   简而言之，就是一个列表。ListView 广泛存在与各种开发平台，有过其他平台开发经验的朋友，可以直接跳过介绍啦！不明白的朋友看下面动图：

   

2. 如何在 XAML 中新建一个 ListView ？

   语法如下：

   <ListView>
      
   </ListView>
   

   是不是很简单？是的呢！但是这只是简单 ListView，而其中还没有加入任何东西。我们需要进一步添加 ListViewItem，简单的 ListViewItem 有两种写法，如下：

   • 第一种写法：

     <ListView>
         <ListViewItem Content="This is item 1"/>
     </ListView>
     

   • 第二种写法：

     <ListView>
         <ListViewItem>This is item 1</ListViewItem>
     </ListView>
     

   • 两者效果是一样的，如下图：

     

   • 如果想要新建多个 ListViewItem，只需要在写多个 ListViewItem，举个例子如下图：

     <ListView>
          <ListViewItem Content="This is item 1"/>
          <ListViewItem Content="This is item 2"/>
          <ListViewItem Content="This is item 3"/>
          <ListViewItem Content="This is item 4"/>
          <ListViewItem Content="This is item 5"/>
          <ListViewItem Content="This is item 6"/>
     </ListView>
     

   • 那么效果如下图：

     

3. 如何处理 ListView 中的简单交互？

   • 先在 ListView 里面新建一个事件， 叫做 SelectionChanged，如下：

     <ListView SelectionChanged="ListView_SelectionChanged">
     </ListView>
     

   • 转到事件定义的 C# 文件处。可以看到参数中传入一个类型为 Object 的参数 sender，我们需要通过 as 语句将 sender 转换为 ListView。

     ListView listView = sender as ListView;
     

   • 然后通过以下指令，就可以获得选中的 ListViewItem 的 Index：

     //a will be 0 if select the first item
     //a will be 3 if select the fourth item and so on
     int a = listView.SelectedIndex;
     

常用属性介绍

1. 选择模式

   • （默认）单选：

     SelectionMode="Single"
     

   • 多选：

     SelectionMode="Multiple"
     

     解释：SelectionMode 是 ListView 的一个属性，通过更改这个属性，可以改变 ListView 中的选中方式。第一种，也就是默认的，就是单选。而第二种就是多选。其中还有的模式，大家都可以去试一试。

2. 初始化选中

   上文介绍过 SelectedIndex 在 C# 中的使用方法，而它就是 ListView 的一个属性，因此我们可以直接在 XAML 中设置 SelectedIndex，举个例子，比如 SelectedIndex="0"，那么当你打开软件的时候，会默认帮你选中第一个 ListViewItem。而如果 SelectedIndex="4"，那么就会默认帮你选中第五个 ListViewItem。

其他 ListView 中的简单应用

在很多 XAML 控件中还存在一个叫做 Tag 的东西。直译过来，就是标签。这个标签的作用是什么呢？在一些情况下，它可以实现一些通过 SelectedIndex 和 Name 才能实现的功能。

那么我们举个栗子~ 我们先在 XAML 中给每一个 ListViewItem 写一个 Tag ，如下：

<ListView SelectionChanged="ListView_SelectionChanged">
    <ListViewItem Content="This is item 1" Tag="item1"/>
    <ListViewItem Content="This is item 2" Tag="item2"/>
    <ListViewItem Content="This is item 3" Tag="item3"/>
    <ListViewItem Content="This is item 4" Tag="item4"/>
</ListView>

接下来，我们找到事件定义的地方，我们要根据用户选中不同的 ListViewItem 来做不同的响应。如下：

ListView listView = sender as ListView;
ListViewItem item = listView.SelectedItem as ListViewItem;
switch (item.Tag.ToString())
{
	case "item1":
		//to-do
		break;
            
	case "item2":
		//to-do
		break;

	case "item3":
		//to-do
		break;

	case "item4":
		//to-do
		break;
}

结语

本次比较简单的介绍了一下 ListView，其中还涉及了一些 C# 的知识。如果不熟悉看了这篇觉得 C# 上比较陌生的朋友，建议先去入门一下 C#。在 UWP 开发中，C# 是至关重要的。

好啦！

大家下篇见！