【WPF】MultiDataTrigger使用实例

前言

在Windows记事本，Word等文档编辑器中，默认保存按钮是置灰不可用的，只有在修改了文档之后，保存按钮才使能可用。最近的工作中遇到这样一个场景，有一个用户信息输入框，只有在用户信息项全部输入且没有非法输入时，保存按钮使能。这里在WPF中通过MultiDataTrigger实现了一个简化实例。

一、窗口界面

二、程序实现过程

只有在至少选择一个性别后，Save按钮使能，首先想到的是将保存按钮的IsEnable属性与三个RadioButton的IsChecked属性作一个关联，这里使用MultiDataTrigger作为触发器设置保存按钮的样式，代码如下：

<Style TargetType="{x:Type Button}"
       BasedOn="{StaticResource {x:Type Button}}">
    <Setter Property="IsEnabled" Value="True"/>
    <Style.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
            	//在满足所有的RadioButton均未Checked时，按钮不可用，否则按钮恢复为默认使能状态
                <Condition Binding="{Binding ElementName=Rad1, Path=IsChecked}" Value="false" />
                <Condition Binding="{Binding ElementName=Rad2, Path=IsChecked}" Value="false" />
                <Condition Binding="{Binding ElementName=Rad3, Path=IsChecked}" Value="false" />
            </MultiDataTrigger.Conditions>
            <Setter Property="IsEnabled" Value="False" />
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

在需要只输入性别信息时，这种实现没有问题。如果还需要输入姓名，生日等信息，性别部分需要作为一个单独的Condition，此时考虑将性别条件值传递给其父控件的Tag属性（当然可以为任何其它控件），作为保存按钮Style中的一个触发条件，代码如下：

<Window x:Class="MultiThreadDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="210" Width="350">
    <Window.Resources>
        <Style TargetType="{x:Type StackPanel}">
            <Setter Property="Tag" Value="false"/>
            <Style.Triggers>
                <MultiDataTrigger>
                	//这里将三个性别控件的条件值传递给它们父控件StackPanel的Tag属性
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding ElementName=Rad1, Path=IsChecked}" Value="false"/>
                        <Condition Binding="{Binding ElementName=Rad2, Path=IsChecked}" Value="false"/>
                        <Condition Binding="{Binding ElementName=Rad3, Path=IsChecked}" Value="false"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Tag" Value="true"/>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="{x:Type Button}"
               BasedOn="{StaticResource {x:Type Button}}">
            <Setter Property="IsEnabled" Value="false"/>
            <Style.Triggers>
                <MultiDataTrigger>
	                //这里除性别外，添加了一个姓名输入框触发条件
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding ElementName=NameTextBox, 
                        		   Path=(Validation.HasError)}" Value="false"/>
                        <Condition Binding="{Binding ElementName=GenderPanel, 
                        		   Path=Tag}" Value="false"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="IsEnabled" Value="true"/>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        //用来显示GenderPanel控件的Tag属性值
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Label Content="GenderPanel Tag value: " HorizontalAlignment="Right" VerticalContentAlignment="Center"/>
            <TextBox Text="{Binding ElementName=stackpanel, Path=Tag}" Height="30" Width="90" 
                 HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>    
        </StackPanel>
        <Border Grid.Row="1" BorderBrush="Aquamarine" BorderThickness="1">
            <StackPanel x:Name="GenderPanel" Orientation="Horizontal" HorizontalAlignment="Center">
                <RadioButton Content="Male" Height="20" Width="60" x:Name="Rad1" Margin="20"/>
                <RadioButton Content="Female"  Height="20" Width="60" x:Name="Rad2" Margin="20"/>
                <RadioButton Content="Other" Height="20" Width="60" x:Name="Rad3" Margin="20"/>
            </StackPanel>
        </Border>
        <Button Content="Save" Grid.Row="2" Height="30" Width="90"/>
    </Grid>
</Window>

通过上述方法实现了Save按钮的使能，且能够扩展使能的触发条件。

---