WPF 이벤트 트리거 변경 기타 UI 요소

Question

ItemTemplate을 사용하는 XAML에 ListBox을 정의했습니다. ItemTemplate 안에 Image를 넣었습니다. 마우스가 나는 내가 ItemsPanelTemplate 내부에 정의 된 WrapPanel에 그 이미지 높이 및에 스토리 보드를 시작하고자하는 이미지를 입력

<ListBox.ItemTemplate> 
<ListBox.ItemsPanel> 
<ItemsPanelTemplate> 
    <WrapPanel x:Name="itmTempPanel" IsItemsHost="True" ItemWidth="60" ItemHeight="60" Width="{Binding ElementName=lstFilesDropped, Path=Width}"/> 
</ItemsPanelTemplate> 
</ListBox.ItemsPanel> 
... 
<Image> 
<Image.Triggers> 
    <EventTrigger RoutedEvent="MouseEnter"> 
    <BeginStoryboard> 
    <Storyboard> 
    <DoubleAnimation Storyboard.TargetProperty="Height" To="71" Duration="0:0:0.3" /> 
    <DoubleAnimation Storyboard.TargetName="itmTempPanel" Storyboard.TargetProperty="Height" To="71"  Duration="0:0:0.3" /> 
    </Storyboard> 
    </BeginStoryboard> 
    </EventTrigger> 
</Image.Triggers> 
</Image> 
</ListBox.ItemTemplate> 

.

마우스를이 이미지에 입력하면 다음 예외가 발생합니다. " 'itmTempPanel'이름을 'System.Windows.Controls.Image'의 이름 범위에서 찾을 수 없습니다."

스토리 보드를 시작하는 요소에서 다른 요소 속성을 어떻게 변경합니까?

도움 주셔서 감사합니다.

Answer 1

해결 방법에는 두 가지가 있습니다. 첫 번째는 {x:Reference} WPF 용 .NET 4.0의 기능을 사용하고 있습니다. 응용 프로그램이 .NET 4.0을 대상으로하는 경우이 방법을 따라야합니다. 아이디어는 Storyboard.Target을 애니메이션하려는 개체로 설정하는 것입니다 (이 경우 WrapPanel). Storyboard.Target에 Binding을 사용할 수 있지만 Storyboard (또는 Timeline)이 FrameworkElement (또는 FrameworkContentElement)가 아니기 때문에 또는 ElementName을 사용하여 바인딩 소스를 설정할 수는 없습니다. 원본을 지정하는 유일한 방법은 Source 속성을 설정하는 것입니다. 그러나 우리는 일반적으로 이것을 StaticResource 또는 DynamicResource으로 설정하거나 직접 (요소 구문을 사용하여) 설정할 수 있습니다. 다행히 {x:Reference}이 .NET 4.0에 도입되었으며 이는 XAML 내부의 명명 된 객체를 참조하는 데 도움이 될 수 있습니다 (작동 방식은 ElementName과 같지 않음). 두 번째 방법은 DataTrigger에 기초

<DoubleAnimation Storyboard.Target="{Binding Source={x:Reference itmTempPanel}}" 
       Storyboard.TargetProperty="Height" 
       To="71" Duration="0:0:0.3" />  

: 여기서, 첫 번째 방법에 대한 코드이다. 그러나이 트리거는 Image이 아니며 정확히 WrapPanel입니다. 그러나 이제 ElementName을 사용하여 트리거 소스를 Image에 바인딩 할 수 있습니다. 따라서이 방법은 {x:Reference}이 지원되지 않을 때 사용할 수 있습니다. 당신이

<WrapPanel x:Name="itmTempPanel" IsItemsHost="True" ItemWidth="60" ItemHeight="60" 
      Width="{Binding ElementName=lstFilesDropped, Path=Width}"> 
    <WrapPanel.Style> 
    <Style TargetType="WrapPanel"> 
     <Style.Triggers> 
      <DataTrigger Binding="{Binding IsMouseOver,ElementName=image}" 
         Value="True"> 
       <DataTrigger.EnterActions> 
       <BeginStoryboard> 
        <Storyboard> 
        <DoubleAnimation Storyboard.TargetProperty="Height" 
             To="71" Duration="0:0:0.3" /> 
        </Storyboard> 
       </BeginStoryboard> 
       </DataTrigger.EnterActions> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 
    </WrapPanel.Style> 
</WrapPanel> 

<Image Name="image"> 
    <Image.Triggers> 
    <EventTrigger RoutedEvent="MouseEnter"> 
     <BeginStoryboard> 
     <Storyboard> 
      <DoubleAnimation Storyboard.TargetProperty="Height" To="71" 
          Duration="0:0:0.3" />  
     </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 
    </Image.Triggers> 
</Image> 

주 (예 : image 같이) Image 이름을 지정합니다. WrapPanel에 대한 <DoubleAnimation>이 제거되었습니다. EventTrigger을 사용하는 대신 IsMouseOver 속성을 청취하여 DataTrigger을 사용했습니다. IsMouseOver이 거짓 일 때 DataTrigger.ExitActions을 지정하여 애니메이션을 시작하도록 지정할 수도 있습니다 (MouseLeave과 동일).