绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue
介绍
背水一战 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" />
</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();
this.Loaded += BindingElement_Loaded;
}
// 在 C# 端做绑定
private void BindingElement_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
// 实例化 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);
}
}
}
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;
}
}
