UWP 开发初阶 Chapter 11

17 Jul 2018 in 初阶

更进一步了解数据绑定：绑定自定义类型数据

上篇回顾

上篇简单介绍了 x:Bind 在绑定简单类型数据时的应用与操作。上篇绑定的数据为 String 类型，并不复杂，因此理解起来其实并不是特别困难。

本片正文

这篇我们来讲述一下如何进行绑定更复杂的数据，比如自定义的类型的数据。

准备工作

我预先写了两个类，第一个类定义了一个类型叫做 User，第二个类用于在数据绑定的时候获取我们想要的 ObservableCollection。大家自己看一下，理解一下。

这里便于教程方便，因此没有严格封装属性，并且代码以明晰为主，而不是简洁，见谅~

第一个类
第二个类
解释：在 UserManager 里面，我新建了一个叫做 users 的 ObservableCollection。其中 CryptographicBuffer.GenerateRandomNumber() 这一函数用于生成一个随机数，大家了解一下即可~ vipStatus 根据是否是 3 的倍数来取布尔值。

准备工作就绪！开工！

转到 MainPage.xaml.cs 文件，声明一个类型为 ObservableCollection 的变量，并且在构建函数中初始化它，详细代码如下：
转到 MainPage.xaml 文件，新建一个 ListView，并绑定数据源，如下图：
然后如下图，写入 ItemTemplate 和 DataTemplate
解释：DataTemplate 是我们第一次引入。按照名字来看，就是数据模板。那什么是数据模板呢？就是在这个模板内我们可以加入更多的 XAML 控件，来显示不同的数据。不理解的话，继续往下看吧！看到全篇后，应该就容易理解多了！
接下来，我们需要告诉编译器，我们绑定的数据的类型。比如我们刚才在 ListView 中绑定的数据的类型是 ObservableCollection<User>，那么这时候，我们的数据就是 User。声明方式如下：
```
<DataTemplate x:DataType="local:User">
                      
</DataTemplate>
```
解释：local:User 中的 local 类似于 C# 文件中的 namespace，而这个 local，在我们创建 .xaml 文件的时候，vs 就自动帮我们引用了，引用的是根目录。因为我的 User 的类文件是新建在根目录的，所以直接使用 local 即可。
然后，我们就要在 DataTemplate 里面构建模板了，如下图：
解释：看起来长长一串，其实我们之前都讲过，就是基本的 XAML 布局。可以看出，我将一个 Grid 分成了两行两列，里面分别放入了不同的控件，来展示 User 里面的四个不同的属性。
好啦！运行一下，看看效果如何，如下：
结果正如我们想要的，但是你会发现一个问题。我们之前将两列等分了，但是控件还是挤在了左边。这是因为默认的 ListViewItem 里面都是从左往右堆叠的。我们可以通过一些办法来更改，如下：
最后我们再运行一下，便一切到位啦！