동일한 클릭 이벤트에서 두 개의 다른 애니메이션 호출하기

Question

현재 버튼을 두 드릴 때 두 개의 다른 애니메이션을 호출해야하는 Surface 애플리케이션에서 작업하고 있습니다.

정확히 어떻게해야합니까? 가능하다면 선언적으로하고 싶습니다. 멀티 트리거를 사용해야합니까?

미리 감사드립니다.

Answer 1

EventTrigger를 사용하여이 작업을 수행 할 수 있습니다.

단추와 애니메이션 대상의 컨테이너의 FrameworkElement.Triggers 속성에서 트리거를 정의 할 수 있습니다. 당신의 목표에 상대 경로가있는 경우

<StackPanel 
     Orientation="Horizontal"> 

     <StackPanel.Triggers> 

      <EventTrigger 
       SourceName="TheButton" 
       RoutedEvent="Button.Click"> 

       <BeginStoryboard> 
        <Storyboard> 
         <ColorAnimation 
          Storyboard.TargetName="LimeRect" 
          Storyboard.TargetProperty="Fill.Color" 
          To="Red" /> 
         <ColorAnimation 
          Storyboard.TargetName="RedRect" 
          Storyboard.TargetProperty="Fill.Color" 
          To="Lime" /> 
        </Storyboard> 
       </BeginStoryboard> 

      </EventTrigger> 

     </StackPanel.Triggers> 


     <Button 
      x:Name="TheButton" 
      Content="Play" /> 

     <Rectangle 
      x:Name="LimeRect" 
      Fill="Lime" 
      Width="50" 
      Height="50" /> 

     <Rectangle 
      x:Name="RedRect" 
      Fill="Red" 
      Width="50" 
      Height="50" /> 

    </StackPanel> 

, 당신은 Storyboard.TargetName="TargetName" 대신 Storyboard.Target="{Binding PathToTarget}"를 사용할 수 있습니다.

편집 : 버튼 자체를 애니메이션하는 경우 오른쪽 버튼으로 트리거를 넣을 수 있습니다,

(주석 참조) 어떤 대상의 이름이 필요하지 않습니다.

예 - ToggleButton의 크기를 애니메이션은 :

<ToggleButton 
     Content="Toggle" 
     Width="50" 
     Height="50"> 

     <ToggleButton.Triggers> 

      <EventTrigger 
       RoutedEvent="ToggleButton.Checked"> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation 
          Duration="00:00:00.2" 
          Storyboard.TargetProperty="Width" 
          To="100" /> 
         <DoubleAnimation 
          Duration="00:00:00.2" 
          Storyboard.TargetProperty="Height" 
          To="100" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 

      <EventTrigger 
       RoutedEvent="ToggleButton.Unchecked"> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation 
          Duration="00:00:00.2" 
          Storyboard.TargetProperty="Width" 
          To="50" /> 
         <DoubleAnimation 
          Duration="00:00:00.2" 
          Storyboard.TargetProperty="Height" 
          To="50" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 

     </ToggleButton.Triggers> 

    </ToggleButton>