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>