背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue

原文:背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue

[源码下载]

背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue

作者：webabcd

介绍
背水一战 Windows 10 之 绑定

• 与 Element 绑定
• 与 Indexer 绑定
• TargetNullValue - 当绑定数据为 null 时显示的值
• FallbackValue - 当绑定失败时显示的值

示例
1、演示如何与 Element 绑定
Bind/BindingElement.xaml

<Page
    x:Class="Windows10.Bind.BindingElement"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Bind"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--
                本例用于演示如何与 Element 绑定，以及 OneTime, OneWay, TwoWay 的区别
            -->

            <!--
                OneTime 方式绑定元素
            -->
            <TextBox Text="{Binding ElementName=txtOneTime, Path=Text, Mode=OneTime}" />
            <TextBox Name="txtOneTime" Text="OneTime" Margin="0 10 0 0" />

            <!--
                OneWay 方式绑定元素（OneWay 是默认方式）
            -->
            <TextBox Text="{Binding ElementName=txtOneWay, Path=Text, Mode=OneWay}" Margin="0 30 0 0" />
            <TextBox Name="txtOneWay" Text="OneWay" Margin="0 10 0 0" />

            <!--
                TwoWay 方式绑定元素（同时演示一下 Binding 标记的另一种写法，就是直接把 Path 指定的路径放到 Binding 的后面）
            -->
            <TextBox Text="{Binding Text, ElementName=txtTwoWay, Mode=TwoWay}" Margin="0 30 0 0" />
            <TextBox Name="txtTwoWay" Text="TwoWay" Margin="0 10 0 0" />

            <!--
                TwoWay 方式绑定元素（在 C# 端指定 Binding 对象的方式一）
            -->
            <TextBox Name="textBox1" Margin="0 30 0 0" />
            <TextBox Name="textBox2" Text="TwoWay" Margin="0 10 0 0" />

            <!--
                TwoWay 方式绑定元素（在 C# 端指定 Binding 对象的方式二）
            -->
            <TextBox Name="textBox3" Margin="0 30 0 0" />
            <TextBox Name="textBox4" Text="TwoWay" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

Bind/BindingElement.xaml.cs

/*
 * 演示如何与 Element 绑定
 */

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;

namespace Windows10.Bind
{
    public sealed partial class BindingElement : Page
    {
        public BindingElement()
        {
            this.InitializeComponent();

            SetBindingDemo1();
            SetBindingDemo2();
        }

        // 在 C# 端做绑定（方式一）
        private void SetBindingDemo1()
        {
            // 实例化 Binding 对象
            Binding binding = new Binding()
            {
                ElementName = nameof(textBox2),
                Path = new PropertyPath(nameof(TextBox.Text)),
                Mode = BindingMode.TwoWay // 默认是 OneWay 的
            };

            // 将目标对象的目标属性与指定的 Binding 对象关联
            BindingOperations.SetBinding(textBox1, TextBox.TextProperty, binding);
        }

        // 在 C# 端做绑定（方式二）
        private void SetBindingDemo2()
        {
            // 实例化 Binding 对象
            Binding binding = new Binding()
            {
                ElementName = nameof(textBox4),
                Path = new PropertyPath(nameof(TextBox.Text)),
                Mode = BindingMode.TwoWay // 默认是 OneWay 的
            };

            // 将目标对象的目标属性与指定的 Binding 对象关联
            textBox3.SetBinding(TextBox.TextProperty, binding);
        }
    }
}

2、演示如何与 Indexer 绑定
Bind/BindingIndexer.xaml

<Page
    x:Class="Windows10.Bind.BindingIndexer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Bind"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--演示如何绑定集合中的某个元素-->
            <TextBlock Name="textBlock" Text="{Binding Path=[3]}" />

            <!--演示如何绑定集合中的某个对象的某个属性-->
            <TextBlock Name="textBlock2" Text="{Binding Path=[5].Name}" Margin="0 10 0 0" />

            <!--演示如何绑定 string 类型的索引器-->
            <TextBlock Name="textBlock3" Text="{Binding Path=[webabcd]}" Margin="0 10 0 0" />

            <!--演示如何绑定字典表中指定 key 的数据-->
            <TextBlock Name="textBlock4" Text="{Binding Path=[hello]}" Margin="0 10 0 0" />

            <!--演示如何在 C# 端绑定索引器-->
            <TextBox Name="textBox" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

Bind/BindingIndexer.xaml.cs

/*
 * 演示如何与 Indexer 绑定
 */

using System;
using System.Collections.Generic;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows10.Common;

namespace Windows10.Bind
{
    public sealed partial class BindingIndexer : Page
    {
        public BindingIndexer()
        {
            this.InitializeComponent();

            this.Loaded += BindingIndexer_Loaded;

            BindingDemo();
        }

        private void BindingIndexer_Loaded(object sender, RoutedEventArgs e)
        {
            // 用于演示如何绑定集合中的某个元素
            List<string> list = new List<string>();
            for (int i = 0; i < 10; i++)
            {
                list.Add("索引：" + i.ToString());
            }
            textBlock.DataContext = list;

            // 用于演示如何绑定集合中的某个对象的某个属性
            textBlock2.DataContext = TestData.GetEmployees();

            // 用于演示如何绑定 string 类型的索引器
            textBlock3.DataContext = this;

            // 用于演示如何绑定字典表中指定 key 的数据
            Dictionary<string, string> dic = new Dictionary<string, string>() { { "hello", "hello webabcd" } };
            textBlock4.DataContext = dic;
        }

        // 自定义一个索引器
        public object this[string indexer]
        {
            get
            {
                return "string: " + indexer;
            }
        }

        // 在 C# 端绑定索引器
        private void BindingDemo()
        {
            textBox.DataContext = this;

            // 实例化 Binding 对象
            Binding binding = new Binding()
            {
               Path = new PropertyPath("[wanglei]")
            };

            // 将目标对象的目标属性与指定的 Binding 对象关联
            BindingOperations.SetBinding(textBox, TextBox.TextProperty, binding);

            /*
             * 注：经测试在 TextBox 做如上绑定是正常的。但是如果在 TextBlock 做如上绑定则运行时报错 Attempted to read or write protected memory. This is often an indication that other memory is corrupt. 不知道为什么
             */
        }
    }
}

3、演示 Binding 中的 TargetNullValue 和 FallbackValue 的用法
Bind/TargetNullValueFallbackValue.xaml

<Page
    x:Class="Windows10.Bind.TargetNullValueFallbackValue"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Bind"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="10 0 10 10">

            <!--
                FallbackValue - 当绑定失败时显示的值
            -->
            <TextBlock Name="textBlock1" Text="{Binding Path=MyName, FallbackValue='绑定失败时的默认值'}" Margin="5" />

            <!--
                TargetNullValue - 当绑定数据为 null 时显示的值
            -->
            <TextBlock Name="textBlock2" Text="{Binding Path=MyName, TargetNullValue='绑定数据的返回值为 null'}" Margin="5" />

        </StackPanel>
    </Grid>
</Page>

Bind/TargetNullValueFallbackValue.xaml.cs

/*
 * 演示 Binding 中的 TargetNullValue 和 FallbackValue 的用法
 */

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace Windows10.Bind
{
    public sealed partial class TargetNullValueFallbackValue : Page
    {
        public TargetNullValueFallbackValue()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // 为 textBlock2 提供数据上下文
            textBlock2.DataContext = this;

            /*
            // 实例化 Binding 对象
            Binding binding = new Binding()
            {
                Path = new PropertyPath("Name"),
                TargetNullValue = "TargetNullValue",
                FallbackValue = "FallbackValue"
            };

            // 将目标对象的目标属性与指定的 Binding 对象关联
            BindingOperations.SetBinding(textBlock2, TextBox.TextProperty, binding);
            */
        }

        public string MyName { get; set; } = null;
    }
}

OK
[源码下载]