C#学习——数据绑定与Converter的设置

前言

最近在学习UWP，所以肯定得过数据绑定这一关，自己查文档看教程也是吃了很多的苦头。所以现在把自己的一点经验分享出来。这次先讲个比较简单的数据绑定吧。

实践

1. 首先创个新的project起名test。在MainPage.xaml中创建一个简单的CheckBox和一个TextBlock。这次的目的就是要达成勾选CheckBox显示TextBlock的内容，取消勾选则隐藏内容的效果。

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    <CheckBox x:Name="check_box" HorizontalAlignment="Center" Margin="0, 0, 100, 0" />    <TextBlock Text="Binding Test" VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap" /></Grid>

2. 接下来就要考虑绑定的问题了。想法很简单，就是把CheckBox的IsChecked属性和TextBlock的Opacity属性绑定。
   此处参考微软的深入了解数据绑定：

如果你希望基于 Boolean 属性值控制 UI 元素的可见性，或者希望 UI 元素显示为某种颜色（这是数字值的范围或趋势函数），亦或是希望在需要字符串的 UI 元素属性中显示日期/时间值，则需要将值从一种类型转化为另一种类型。 存在这样的情形：其正确的解决方案是从绑定源类公开其他正确类型的属性，并在此处让转换逻辑保持封装和可测试。 但是，当你拥有大量源和目标属性或这两者的大型组合时，上述方案既不灵活也不可扩展。 在这种情况下，你有以下几个选项：
如果使用 {x:Bind}，则你可以直接绑定到函数以执行该转换。
或者可以指定一个值转换器，该转换器是一个旨在执行转换的对象。

这里我采用值转换器的方法。

在项目中新建一个Converter文件夹，在文件夹中新建.cs文件，取名为BoolToOpacityConverter.cs。
代码如下：

namespace test.Converter{    //  继承自值转换器 IValueConverter    //  这个函数要求必须有2个函数: Convert 和 ConvertBack    //  由这两个函数可以解决双向的转换    public class BoolToOpacityConverter : IValueConverter    {        public object Convert(object value, Type targetType, object parameter, string language)        {            if (value is Boolean && (bool)value)    //  value为绑定一端传入的值            {                return 1.0;            }            return 0.0;        }        //  本次实验只需从bool转换成opacity，不会反过来转换，因此直接抛异常就行        //  如果转换模式是Two Way, 此函数应有返回值        public object ConvertBack(object value, Type targetType, object parameter, string language)        {            throw new NotImplementedException();        }    }}

之后在MainPage.xaml中添加如下代码：

<!-- 在最开始的地方添加cv命名空间 --><Page    x：Class="test.MainPage"    xmlns:cv="using:test.Converter"    ……    >

<!-- 为Converter在Page中实例化 --><!-- 如果绑定对象在UserControl中，则将Page.Resources改成UserControl.Resources -->    <Page.Resources>        <cv:BoolToOpacityConverter x:Key="BTOConverter" />    </Page.Resources>

这样一来我们的Converter就可以作为MainPage里的静态资源来用啦，名称是BTOConverter.
再将CheckBox和TextBlock的代码稍作添加:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">        <CheckBox x:Name="check_box" HorizontalAlignment="Center" Margin="0, 0, 100, 0" />        <TextBlock Text="Binding Test" VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap" Opacity="{Binding Path=IsChecked,ElementName=check_box, Converter={StaticResource BTOConverter}, Mode=OneWay}" /></Grid>

x86位或者x64位启动，就发现两项已经绑定上啦！

（下次再讲讲{x:Bind}和{Binding}，还有MVVM架构下的数据绑定