UWP 开发初阶 Chapter 12

20 Jul 2018 in 初阶

控件之间的数据绑定

上篇回顾

前面两篇都讲了 Data Binding（数据绑定）的应用，先是对于 ListView 的简单数据绑定，然后是更为复杂的、自定义类型的数据绑定。

本篇正文

今天我们继续来讲数据绑定。今天将补充一些之前遗漏的知识点，并且讲一下控件之间的数据绑定。

数据绑定的模式（mode）

先前的文章中遗漏了关于数据绑定模式的介绍。数据绑定其实分为三种模式，分别是 OneTime，OneWay，TwoWay。

• OneTime 表示一次性的绑定。也就是说当你编译的时候，编译器完成了你所要求的绑定以后，便不再进行新的绑定。也就是说，即便绑定的数据改变了，UI 上也不会发生变化。
• OneWay 表示单向的数据绑定，比如一个 <TextBlock Text={x:Bind sampleStr, mode="OneWay"}/>，其中将 Text 属性和名为 sampleStr 的变量绑定在一起，同时这时的模式是 OneWay 的，那么这时候当 sampleStr 变化时，就会反映到 UI 上。
• TwoWay 当然就表示双向的数据绑定了。如果理解了单向绑定了，那么这个也很好理解。我在这里就不做过多的讲解，因为今天也会提到。

不同绑定方式的默认绑定模式

• x:Bind 如果不写明 mode="..." ，那么默认是 OneTime 的
• Binding 如果不注明，那么默认是 OneWay 的

实现控件之间的绑定 （Element Data Binding）

今天，我们来实现一下控件之间的绑定。这里以 TextBox 和 TextBlock 为例子，实现在 TextBox 内写字，TextBlock 中实时显示相应的文字。

1. 在 .xaml 文件中新建 TextBox 和 TextBlock，这里不详解，看代码理解：

   

   解释：其中 TextBox 要给它一个 Name，我们绑定的时候会用到 Name。图中的代码中 TextBox 并没有加上 TextWrapping 的属性，记得自己操作的时候设置为 Wrap。

2. 然后在 TextBlock 中绑定 Text 属性，代码如下：

   <TextBlock Text="{Binding ElementName=MyTextBox, Path=Text}"/>
   

   解释：这里使用了 Binding 而非 x:Bind，因为 x:Bind 不能简单的实现。使用 x:Bind 的话，即便设置为 OneWay，仍需要一些特殊的处理。这里就不做详细介绍啦！其中 ElementName 后面就是我们要绑定的控件的名字，Path 后面就是需要绑定的相对应的属性。

3. 运行一下！效果如下！

   

实现控件之间的双向绑定（不完美）

下面简单介绍一下，控件之间的双向绑定。这里是简单介绍，因此效果不是最理想的。更合理的方式，需要引入 DataContext 的概念，下次有机会再讲。

1. 在 .xaml 文件中建立两个 TextBox ，并进行如下的绑定：

   

2. 运行一下，效果如下：

   

   解释：不难发现，这里面并不是我们真正想要的结果。在第一个 TextBox 中输入的结果，并不能立刻显示到右侧的 TextBox。其实一般情况下，双向绑定也并不推荐直接在控件之间使用，而应该多个控件同时双向绑定至 .xaml.cs 中的数据。因此这里只是简单的介绍。

结语

今天就讲到这儿。x:Bind 和 Binding 的本质区别其实在于，x:Bind 的绑定行为是在编译时进行的，而 Binding 是在软件运行时（runtime) 进行的。因此两者用法上的差别还是存在的。其实两个通过一定的方法都能实现相同的功能，但是操作上可能需要花些时间。

好啦！下篇见！