阅读 22

UWP 开发初阶 Chapter 8 - 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"
      复制代码

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

  2. 初始化选中

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

其他 ListView 中的简单应用

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

那么我们举个栗子~ 我们先在 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# 是至关重要的。

好啦!

大家下篇见!

关注下面的标签,发现更多相似文章
评论