背水一战 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" />

        </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;
    }
}

OK
[源码下载]

时间: 2024-10-10 13:58:35

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

背水一战 Windows 10 (19) - 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 绑定 TemplateBinding 绑定 与 RelativeSource 绑定 与 StaticResource 绑定 示例1.演示 TemplateBinding 的用法Bind/TemplateBindingDemo.xaml <Page x:Class="Windows10.Bind.TemplateBindingDemo" xmlns="http://schemas.microsof

背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 绑定 通过 Binding 绑定对象 通过 x:Bind 绑定对象 通过 Binding 绑定集合 通过 x:Bind 绑定集合 示例1.演示如何通过 Binding 绑定对象Bind/BindingModel.xaml <Page x:Class="Windows10.Bind.BindingModel" xmlns="http://schemas.microsoft.com/winfx/20

背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 绑定 DataContextChanged - FrameworkElement 的 DataContext 发生变化时触发的事件 UpdateSourceTrigger - 数据更新的触发方式 对绑定的数据做自定义转换 示例1.演示 DataContextChanged 的用法Bind/DataContextChanged.xaml <Page x:Class="Windows10.Bind.DataContex

背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout

原文:背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹出类) FlyoutBase Flyout MenuFlyout 示例1.FlyoutBase(基类) 的示例Controls/FlyoutControl/FlyoutBaseDemo.xaml <Page x:Class="Windows10.Controls.FlyoutC

背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox

原文:背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(选择类) Selector ComboBox 示例1.Selector(基类) 的示例Controls/SelectionControl/SelectorDemo.xaml <Page x:Class="Windows10.Controls.SelectionControl.SelectorDemo&q

背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton

原文:背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(按钮类) ButtonBase Button HyperlinkButton RepeatButton ToggleButton AppBarButto

背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null

原文:背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 XAML x:DeferLoadStrategy="Lazy" - 用于指定一个 UIElement 为一个延迟加载元素 x:Null - null 示例1.x:DeferLoadStrategy 通过 FindName 加载Xaml/DeferLoadStrategy/Demo1.xaml

背水一战 Windows 10 (24) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现,通过非 ButtonBase 触发命令

原文:背水一战 Windows 10 (24) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现,通过非 ButtonBase 触发命令 [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 MVVM(Model-View-ViewModel) 通过 Binding 或 x:Bind 结合 Command 实现,通过非 ButtonBase 触发命令 示例1.ModelMVVM/Model/Product.cs /* * Model 层的实

背水一战 Windows 10 (58) - 控件(集合类): ListViewBase - ListView, GridView

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类 - ListViewBase) ListView GridView 示例1.ListView 的示例Controls/CollectionControl/ListViewBaseDemo/ListViewDemo.xaml <Page x:Class="Windows10.Controls.CollectionControl.ListViewDemo" xmlns="http://