• WPF 之 MultiBinding(多路 Binding)(四)


    一、前言

    ​ 有时候 UI 需要显示的信息由不止一个数据来源决定,这时候就需要使用 MultiBinding ,即多路 Binding。

    ​ MultiBinding 与 Binding 一样均以 BindingBase 为基类,因此,能使用 Binding 的地方都能够使用 MultiBinding。

    二、MultiBinding 的使用

    ​ 例如,我们有如下需求:

    1. ​ 第1、2个 TextBox 输入用户名,要求内容一致;
    2. ​ 第3、4个 TextBox 输入邮箱,要求内容一致;
    3. ​ 当满足以上两个条件的时候,Button 显示可用。

    ​ 我们首先需要对 Button 的 MultiBinding 的 Convert 属性赋值一个转化规则,该规则类需继承 IMultiValueConverter 接口,具体规则如下:

     public class LoginMultiValueConverter : IMultiValueConverter
        {
            public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
            {
                if ((values.Cast<string>().Any(text => string.IsNullOrEmpty(text)) == false) 
                    && values[0].ToString()==values[1].ToString() && values[2].ToString()==values[3].ToString())
                {
                    return Visibility.Visible;
                }
    
                return Visibility.Collapsed;
            }
    
            public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }
    

    ​ 在 UI 上,对 Button 的 MultiBinding 进行赋值如下:

    <Window x:Class="UI.Window4"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:UI"
            mc:Ignorable="d"
            Title="Window4" Height="400" Width="500">
        <Window.Resources>
            <local:LoginMultiValueConverter x:Key="LMC"></local:LoginMultiValueConverter>
        </Window.Resources>
        <UniformGrid Rows="5" Margin="10">
            <TextBox x:Name="t1" Margin="5" VerticalContentAlignment="Center" ></TextBox>
            <TextBox x:Name="t2" Margin="5" VerticalContentAlignment="Center" ></TextBox>
            <TextBox x:Name="t3" Margin="5" VerticalContentAlignment="Center" ></TextBox>
            <TextBox x:Name="t4" Margin="5" VerticalContentAlignment="Center" ></TextBox>
            <Button  Margin="5" Content="Login" >
                <Button.Visibility>
                    <!--MultiBinding 对子级 Binding 的添加顺序是敏感的,因为这个顺序决定了汇集到 Converter 里数据的顺序-->
                    <MultiBinding Mode="OneWay" Converter="{StaticResource LMC}">
                        <Binding ElementName="t1" Path="Text"></Binding>
                        <Binding ElementName="t2" Path="Text"></Binding>
                        <Binding ElementName="t3" Path="Text"></Binding>
                        <Binding ElementName="t4" Path="Text"></Binding>
                    </MultiBinding>
                </Button.Visibility>
            </Button>
        </UniformGrid>
    </Window>
    
    

    实现效果如下,当 满足以上条件后,Button 按钮才会显示:

    image-20210205175308252

  • 相关阅读:
    react-document-title
    react-router
    redux-saga 异步流
    redux
    redux-thunk
    react-router-redux
    [翻译] ClockView 时钟
    [翻译] MZTimerLabel 用作秒表或者倒计时
    [翻译] MCProgressView 使用自定义图片做进度显示
    [翻译] ADPopupView 触摸弹出视窗
  • 原文地址:https://www.cnblogs.com/dongweian/p/14379150.html
Copyright © 2020-2023  润新知