WPF ListBoxItem 스타일 애니메이션

Question

내 목록 상자에 새로운 스타일을 사용하고 있지만 문제가 발생했습니다. 목록 상자의 항목 위로 마우스를 가져 가면 내 애니메이션은 내가 봤던 것뿐만 아니라 모든 항목에서 실행됩니다. 나는 인터넷에서 찾고 있었지만, 여러 가지 방법으로이 일을하는 것처럼 보이지만 그들 중 누구도 나를 위해이 문제를 해결하지 못한다.

<Color x:Key="BorderColor" A="255" R="216" G="217" B="220" /> 
<Color x:Key="ForegroundColor" A="255" R="40" G="40" B="40" /> 
<Color x:Key="BackgroundColor" A="255" R="240" G="241" B="241" /> 

<SolidColorBrush x:Key="BorderBrush" Color="{StaticResource BorderColor}" /> 
<SolidColorBrush x:Key="ForegroundBrush" Color="{StaticResource ForegroundColor}" />   
<SolidColorBrush x:Key="BackgroundBrush" Color="{StaticResource BackgroundColor}" /> 

<Color x:Key="Color_Red" A="255" R="235" G="103" B="103" /> 

<Style x:Key="Test" TargetType="{x:Type ListBoxItem}"> 
    <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" /> 
    <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ListBoxItem"> 
       <Border x:Name="Border" Background="{StaticResource BackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" BorderThickness="0,0,0,3" CornerRadius="0" Margin="0,0,2,3" Padding="0" SnapsToDevicePixels="true"> 
        <Grid Height="Auto" Width="Auto"> 
         <ContentPresenter Margin="3,3,0,0" VerticalAlignment="Top" /> 
        </Grid> 
       </Border> 
       <ControlTemplate.Triggers> 
        <EventTrigger RoutedEvent="ListBoxItem.MouseEnter"> 
         <EventTrigger.Actions> 
          <BeginStoryboard> 
           <Storyboard> 
            <ColorAnimation Duration="0:0:0.5" 
                Storyboard.TargetName="Border" 
                Storyboard.TargetProperty="BorderBrush.Color" To="{StaticResource Color_Red}" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger.Actions> 
        </EventTrigger> 
        <EventTrigger RoutedEvent="ListBoxItem.MouseLeave"> 
         <EventTrigger.Actions> 
          <BeginStoryboard> 
           <Storyboard FillBehavior="Stop"> 
            <ColorAnimation Duration="0:0:0.3" 
                Storyboard.TargetName="Border" 
                Storyboard.TargetProperty="BorderBrush.Color" To="{StaticResource BorderColor}" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger.Actions> 
        </EventTrigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

어떤 도움을 크게 감상 할 수있다, 나는

가 감사합니다 ... 잠시 동안이에 갇혀!

Answer 1

내 머리 꼭대기에서 테두리 색 대신 리소스에 애니메이션을 적용한다고 생각하고 경계 선언을 변경해보십시오.

<Border x:Name="Border" Background="{StaticResource BackgroundBrush}" BorderThickness="0,0,0,3" CornerRadius="0" Margin="0,0,2,3" Padding="0" SnapsToDevicePixels="true"> 
    <Border.Style> 
     <Style TargetType="{x:Type Border}"> 
      <Setter Property="BorderBrush" Value="{StaticResource BorderBrush}"/> 
     </Style> 
    </Border.Style> 
    <Grid Height="Auto" Width="Auto"> 
     <ContentPresenter Margin="3,3,0,0" VerticalAlignment="Top" /> 
    </Grid> 
</Border> 

기본적으로 경계선에서 테두리 브러시를 제거하고 아래의 스타일 설정기에 넣습니다.