IsMouserOver 干扰 WPF 中的 IsSelected

Question

嘿伙计们，我对IsMouserOver和IsSelected触发器有IsSelected 。 我的目标是创建一个动画，改变IsMouserOver ListViewItems的BorderThickness 。 使用EnterActions和ExitActions产生所需的结果，但是，当我尝试同时考虑另一个触发器中的IsSelected属性时，除了BorderThickness每个属性都可以设置。

当我删除整个IsMouseOver触发器时，将在IsSelected设置BorderThickness并正确显示。

<Style TargetType="{x:Type ListViewItem}" x:Key="SubMenuStyles">
    <Setter Property="Height" Value="40"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
                <Border BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Left" 
                    VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">                    
            <Setter Property="BorderBrush" Value="Orange"/>               
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ThicknessAnimation 
   Storyboard.TargetProperty="BorderThickness" From="0,0,0,0" To="10,0,0,0" 
    Duration="0:0:0.5"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ThicknessAnimation 
  Storyboard.TargetProperty="BorderThickness" From="10,0,0,0"  To="0,0,0,0" 
                     Duration="0:0:0.5"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>

        </Trigger>
        <Trigger Property="ListViewItem.IsSelected" Value="True">
            <Setter Property="Background" Value="#233E4F"/>
            <Setter Property="BorderThickness" Value="50,0,0,0"/>
            <Setter Property="BorderBrush" Value="Orange"/>
        </Trigger>          
   </Style.Triggers>
</Style>

Answer 1

问题

您之前遇到的行为如下图所示：

问题是每次鼠标悬停在所选项目上时都会重置橙色边框。

---

我相信您想要实现的是在所选项目上保持固定的 50px 边框，如下所示：

---

解决方案

为了实现这一点，我们需要找到一种方法来仅对未选择的项目（即其中IsSelected="False")执行动画。 这就是MultiTrigger发挥作用的地方。

MultiTrigger s 与“普通” Trigger非常相似，但重要的是，它们不是在仅满足一个条件时Trigger ，而是在满足所有条件时Trigger 。

例如

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True" />
        <Condition Property="IsSelected" Value="False" />
        <!-- More conditions, if you want -->
    </MultiTrigger.Conditions>
    <MultiTrigger.Setters>
        <!-- Will only be set when ALL conditions are fulfilled. -->
    </MultiTrigger.Setters>
    <MultiTrigger.EnterActions>
        <!-- Will also only be executed when ALL conditions are fulfilled -->
    </MultiTrigger.ExitActions>
</MultiTrigger> 

---

代码

所以，在你的情况下，调整你的风格看起来像这样：

<Window.Resources>
    <Style x:Key="SubMenuStyles" TargetType="{x:Type ListViewItem}">
        <Setter Property="Height" Value="40" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="ListViewItem.IsSelected" Value="True">
                <Setter Property="Background" Value="#233E4F" />
                <Setter Property="Foreground" Value="White" />
                <Setter Property="BorderThickness" Value="50,0,0,0" />
                <Setter Property="BorderBrush" Value="Orange" />
            </Trigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="True" />
                    <Condition Property="IsSelected" Value="False" />
                </MultiTrigger.Conditions>
                <MultiTrigger.Setters>
                    <Setter Property="BorderBrush" Value="Orange" />
                </MultiTrigger.Setters>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation Storyboard.TargetProperty="BorderThickness"
                                                From="0,0,0,0"
                                                To="10,0,0,0"
                                                Duration="0:0:0.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.EnterActions>
                <MultiTrigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation Storyboard.TargetProperty="BorderThickness"
                                                From="10,0,0,0"
                                                To="0,0,0,0"
                                                Duration="0:0:0.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.ExitActions>
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Grid>
    <ListView Width="200"
              Height="150"
              Margin="30">
        <ListViewItem Style="{StaticResource SubMenuStyles}">A ListView</ListViewItem>
        <ListViewItem IsSelected="True" Style="{StaticResource SubMenuStyles}">with several</ListViewItem>
        <ListViewItem Style="{StaticResource SubMenuStyles}">items</ListViewItem>
    </ListView>
</Grid>