Wpf 控制数据触发器退出

我有一个复选框（位于图像上方），默认情况下其不透明度设置为0。当IsMouseOver为true时，复选框不透明度属性将从0设置为1，当IsMouseOver为false时，复选框不透明度属性将反转。但是，如果复选框IsSelected为true，则不应执行反向动画（即DataTrigger.ExitActions）。i、 如果选中复选框，则该复选框应保持可见。在我的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>

<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>

按照@feO2x建议的方式实施。然而，它并没有像预期的那样工作。让它在一个简单的应用程序中工作。但是，我打算在ListViewItem中使用复选框。以下是我的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>

<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>

---

2月26日更新：在您的风格不起作用的情况下，您以错误的方式引用复选框

ElementName

仅当为目标控件指定了名称并且可以在当前WPF XAML名称范围内访问时，才能在绑定中使用（您可以了解XAML名称范围）

您应该在绑定中使用相对源来正确引用复选框：

RelativeSource={relativesourceself}

。以下

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>

MultiDataTrigger

用于描述执行enter操作必须满足的两个条件。在这种情况下，我选择矩形的

IsMouseOver

属性以及复选框的

IsChecked

属性都必须为false。因此，当鼠标位于矩形上方时，复选框将淡入，并且在选中时保持可见

您可以下载我的完整示例（这是一个Dropbox链接）

希望这对你有帮助。如果您有任何问题，请随时发表评论。

这可以通过适当的方式实现。将两个绑定传递给它，即

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();
    }
}

<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：

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();
    }
}

<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

实例作为资源。

我在一个简单的应用程序中得到了您的建议。但是，当我在appln中使用它时，复选框被放置在ListViewItem中，它不能按预期工作。请看一看新发布的XAML。嗨@Rohit Vats，你能解释一下为什么DataTrigger实现没有按预期工作吗。我实施了feO2x建议。我已经编辑了我的问题以包含新的xaml实现。我接受答案。虽然我想要一个没有转换器的仅XAML的解决方案@Rohit VatsWhat关于我的解决方案，它实际上只是XAML？嘿，Lucifer，我更新了我的答案，以反映您对

列表视图

控件模板中的

复选框

样式的关注。很抱歉花了这么长时间，但最近几天我一直很忙。