控制DataTrigger ExitActions

Question

我有一个CheckBox (位于图像的上方)，默认情况下它的不透明度设置为0。当IsMouseOver为true时，CheckBox不透明属性从0动画为1，当IsMouseOver为false时，则反转。但是，如果CheckBox IsSelected为真，则不应执行反向动画(即DataTrigger.ExitActions)。也就是说，如果选中CheckBox，它应该保持可见。在我的XAML中，即使选中复选框，复选框也正在消失。

以下是我的XAML：

<CheckBox VerticalAlignment="Center" HorizontalAlignment="Center">
        <CheckBox.Style>
            <Style TargetType="{x:Type CheckBox}">
                <Setter Property="Opacity" Value="0" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=imageGrid, Path=IsMouseOver}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard Timeline.DesiredFrameRate="100">
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="00:00:00.400" />
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard Timeline.DesiredFrameRate="100">
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="00:00:00.400" />
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource Mode=Self}}" Value="true">
                        <Setter Property="Opacity" Value="1" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </CheckBox.Style>
    </CheckBox>

实现@feO2x建议的方式。然而，它并没有像预期的那样起作用。让它在一个简单的应用程序中工作。但是，我打算在ListViewItem中使用该复选框。以下是我的XAML：

<Style x:Key="ThumbView_ItemContainerStyle" TargetType="{x:Type ListViewItem}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Height" Value="175" />
    <Setter Property="Width" Value="125" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
                <Grid Background="Pink" x:Name="mygrid">
                    <Rectangle Name="LBRect" Fill="Transparent" Opacity="0.195" />
                    <Image Name="posterImg" Margin="0,0,0,0" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding Path=ProfilePic}" Height="125" MaxWidth="125" />
                    <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}" VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="CheckBox">
                        <CheckBox.RenderTransform>
                            <ScaleTransform ScaleX="1.1" ScaleY="1.1" />
                        </CheckBox.RenderTransform>

                        <CheckBox.Style>
                            <Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource ThumbViewCheckBoxStyle}">
                                <Setter Property="Opacity" Value="0" />
                                <Style.Triggers>
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}}" Value="False" />
                                            <Condition Binding="{Binding ElementName=CheckBox, Path=IsChecked}" Value="False" />
                                        </MultiDataTrigger.Conditions>
                                        <MultiDataTrigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.0" Duration="0:0:0.4" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </MultiDataTrigger.EnterActions>
                                        <MultiDataTrigger.ExitActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1.0" Duration="0:0:0.4" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </MultiDataTrigger.ExitActions>
                                    </MultiDataTrigger>
                                </Style.Triggers>
                            </Style>
                        </CheckBox.Style>
                    </CheckBox>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

这可以通过设置IMultiValueConverter来实现。将两个绑定传递给它，即IsMouseOver和IsChecked。

变换器

public class MyConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, 
                          CultureInfo culture)
    {
        bool isMouseOver = (bool)values[0];
        bool isChecked = (bool)values[1];

        return isChecked || isMouseOver;
    }

    public object[] ConvertBack(object value, Type[] targetTypes,
                                object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

XAML

<DataTrigger Value="True">
   <DataTrigger.Binding>
      <MultiBinding Converter="{StaticResource MyConverter}">
         <Binding Path="IsMouseOver" ElementName="imageGrid"/>
         <Binding Path="IsChecked" RelativeSource="{RelativeSource Self}"/>
      </MultiBinding>
   </DataTrigger.Binding>
   <!-- Rest same trigger -->
</DataTrigger>

当然，您需要在XAML文件中添加MyValueConverter实例作为资源。

Answer 2

更新2月26日：在您的风格不起作用，您引用错误的复选框。只有在给定目标控件的名称并在当前WPF显像管中可访问的情况下，ElementName才能在绑定中使用(您可以了解XAML命名器这里)。

您应该在绑定中使用一个相对源来正确引用CheckBox：RelativeSource={RelativeSource Self}。下面的ListView样式显示了整个示例：

<Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border Background="{TemplateBinding Background}">
                    <Grid Margin="{TemplateBinding Padding}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="150" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Name}" TextTrimming="CharacterEllipsis" />
                        <CheckBox IsChecked="{Binding IsSelected}" Grid.Column="1">
                            <CheckBox.Style>
                                <Style TargetType="{x:Type CheckBox}">
                                    <Setter Property="Opacity" Value="0.0" />
                                    <Style.Triggers>
                                        <MultiDataTrigger>
                                            <MultiDataTrigger.Conditions>
                                                <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
                                                        Value="False" />
                                                <Condition Binding="{Binding Path=IsChecked, RelativeSource={RelativeSource Self}}"
                                                        Value="False" />
                                            </MultiDataTrigger.Conditions>
                                            <MultiDataTrigger.EnterActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                                        To="0.0" Duration="0:0:0.4" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </MultiDataTrigger.EnterActions>
                                            <MultiDataTrigger.ExitActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                                        To="1.0" Duration="0:0:0.4" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </MultiDataTrigger.ExitActions>
                                        </MultiDataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </CheckBox.Style>
                        </CheckBox>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

您可以从这里 (DropBox链接)下载一个工作示例。

原始答案：您可以在您的样式中使用MultiDataTrigger来完成您想要的行为。请看以下代码：

<CheckBox Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" Content="Check Me" Name="CheckBox">
    <CheckBox.Style>
        <Style TargetType="{x:Type CheckBox}">
            <Setter Property="Opacity" Value="0.0" />
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding ElementName=Rectangle, Path=IsMouseOver}" Value="False" />
                        <Condition Binding="{Binding ElementName=CheckBox, Path=IsChecked}" Value="False" />
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 To="0.0"
                                                 Duration="0:0:0.4"
                                                 BeginTime="0:0:0.5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </MultiDataTrigger.EnterActions>
                    <MultiDataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 To="1.0"
                                                 Duration="0:0:0.4" />
                            </Storyboard>
                        </BeginStoryboard>
                    </MultiDataTrigger.ExitActions>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </CheckBox.Style>
</CheckBox>

MultiDataTrigger用于描述执行enter操作必须满足的两个条件。在这种情况下，我选择矩形的IsMouseOver属性和复选框的IsChecked属性都必须为false。因此，当鼠标位于矩形上时，复选框就会褪色，并在选中时保持可见。

您可以下载我的完整示例这里 (这是一个Dropbox链接)。

希望这能帮到你。如果您有任何问题，请随时留下评论。