阅读 13

UWP 开发初阶 Chapter 12 - 控件之间的数据绑定

上篇回顾

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

本篇正文

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

数据绑定的模式(mode)

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

  • 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)

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

  1. .xaml 文件中新建 TextBoxTextBlock,这里不详解,看代码理解:

    **解释:**其中 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:BindBinding 的本质区别其实在于,x:Bind 的绑定行为是在编译时进行的,而 Binding 是在软件运行时(runtime) 进行的。因此两者用法上的差别还是存在的。其实两个通过一定的方法都能实现相同的功能,但是操作上可能需要花些时间。

好啦!下篇见!

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