IsMouserOver Вмешательство с IsSelected в WPF

Question

Эй, ребята, у меня проблема с триггерами для IsMouserOver и IsSelected.Моя цель - создать анимацию, которая изменит BorderThickness моего ListViewItems на IsMouserOver.Использование EnterActions и ExitActions дает желаемый результат, однако, когда я пытаюсь учесть также свойство IsSelected в другом триггере, можно установить любое свойство, кроме BorderThickness.

Когда яудалить весь триггер IsMouseOver, BorderThickness будет установлен в IsSelected и будет отображаться правильно.

<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

Проблема

Поведение, с которым вы столкнулись ранее, показано на рисунке ниже:

, где проблема в том, что ваш оранжевый Граница сбрасывается каждый раз, когда мышь находится над выбранным элементом.

---

Я считаю, что вы хотите добиться, чтобы сохранить фиксированную границу 50 пикселей для выбранного элемента, как показанониже:

---

Решение

Чтобы достичь этого, нам нужно найти способ выполнить только анимациюдля предметов, которые не выбраны (т. е. где IsSelected="False"). Это где MultiTrigger с вступают в игру.

MultiTrigger с очень похожи на "нормальный" 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>