DataTemplate 多个数据触发到相同的元素和属性

问题描述

如何让多个数据触发器作用于同一个元素和属性?

How can I have multiple data triggers work on the same element and property?

        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding ElementName=RootGrid,Path=IsMouseOver}" Value="True">
                <Setter TargetName="SelectionGrid" Property="Opacity" Value="0.5" />
            </DataTrigger>
            <DataTrigger Binding="{Binding ElementName=RootGrid,Path=IsMouseOver}" Value="False">
                <Setter TargetName="SelectionGrid" Property="Opacity" Value="0.0" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Selected}" Value="True">
                <Setter TargetName="SelectionGrid" Property="Opacity" Value="1.0" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Selected}" Value="False">
                <Setter TargetName="SelectionGrid" Property="Opacity" Value="0" />
            </DataTrigger>
        </DataTemplate.Triggers>

注意我如何定位 SelectionGrid 的 Opacity 属性.我怎样才能达到这个效果?这应该复制 Windows 7 的悬停选择框.因此，当它同时是 Selected 和 IsMouseOver 时，我希望它向我显示 Selected 状态.

Notice how I'm targeting SelectionGrid's Opacity property. How can I achieve this effect? This is supposed to replicate the hover selection box that Windows 7 has. So when it both is Selected and IsMouseOver, I would like it to show me the Selected state.

推荐答案

您可以将 MultiDataTrigger 或 DataTrigger 与 MultiBinding 和一个BooleanOrConverter.

You could use MultiDataTrigger or a DataTrigger with a MultiBinding and a BooleanOrConverter.

但我认为解决您的问题最简单的方法是对 Opacity 使用 MultiBinding 在其中绑定到 Selected 和 IsMouseOver

But I think the easiest solution to your problem is to use a MultiBinding for Opacity where you bind to both Selected and IsMouseOver

<DataTemplate>
    <Grid x:Name="SelectionGrid">
        <Grid.Opacity>
            <MultiBinding Converter="{StaticResource OpacityConverter}">
                <Binding RelativeSource="{RelativeSource Self}" Path="IsMouseOver"/>
                <Binding Path="Selected"/>
            </MultiBinding>
        </Grid.Opacity>
    </Grid>
    <!-- ... -->
</DataTemplate>

在 OpacityConverter 中您决定 Opacity 值

And in the OpacityConverter you decide the Opacity value

public class OpacityConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        bool isMouseOver = (bool)values[0];
        bool selected = (bool)values[1];
        if (selected == true)
        {
            return 1.0;
        }
        else if (isMouseOver == true)
        {
            return 0.5;
        }
        return 0.0;
    }
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

这里是如何使用 DataTrigger 和 MultiDataTrigger

Here is how you can do it with a DataTrigger and MultiDataTrigger

<DataTemplate>
    <Grid x:Name="SelectionGrid"
            Opacity="0"
            Background="Blue">
    </Grid>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=Selected}" Value="True">
            <Setter TargetName="SelectionGrid" Property="Opacity" Value="1.0"/>
        </DataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding ElementName=SelectionGrid, Path=IsMouseOver}" Value="True"/>
                <Condition Binding="{Binding Path=Selected}" Value="False"/>
            </MultiDataTrigger.Conditions>
            <Setter TargetName="SelectionGrid" Property="Opacity" Value="0.5"/>
        </MultiDataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

这篇关于DataTemplate 多个数据触发到相同的元素和属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！