Grid를 클릭하면 MouseLeave 애니메이션이 변경됩니다.

Question

WPF의 경우, 보이는 부분의 하단에 부분적으로 눈에 띄는 눈금이 있습니다. 마우스를 올리면 위로 움직이고 그리드의 모든 내용이 표시됩니다. 마우스가 그리드를 떠나면 다시 아래로 슬라이드됩니다. 정보를 포함하고 사용자가 업데이트 할 수있는 표에 콤보 및 텍스트 상자가 있습니다.

그리드의 아무 곳이나 클릭하면 MouseLeave 애니메이션이 더 이상 작동하지 않게됩니다 (마우스를 놓아도 그리드가 유지됩니다).

필자는 원하는대로 동작하도록 애니메이션을 구현하기 위해 두 가지 다른 방법을 구현했지만 지금까지는 아무런 운이 없었습니다.

구현 1 :

`<Grid x:Name="PopupAnimation" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="30"> 
      <Grid.Triggers> 
       <EventTrigger RoutedEvent="MouseEnter"> 
        <BeginStoryboard Name="MouseOn"> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetProperty="Height" From="30" To="90" Duration="0:0:.15"/> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
       <EventTrigger RoutedEvent="MouseLeave"> 
        <BeginStoryboard Name="MouseOff"> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetProperty="Height" From="90" To="30" Duration="0:0:0.15"/> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
       <EventTrigger RoutedEvent="MouseLeftButtonDown"> 
        <StopStoryboard BeginStoryboardName="MouseOff" /> 
       </EventTrigger> 
      </Grid.Triggers> 

`

구현 2 :

<Grid> 
     <Grid.Style> 
      <Style TargetType="Grid"> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Trigger.EnterActions> 
          <BeginStoryboard Name="MouseOn"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetProperty="Height" From="30" To="90" Duration="0:0:.15"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.EnterActions> 
         <Trigger.ExitActions> 
          <BeginStoryboard Name="MouseOff"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetProperty="Height" From="90" To="30" Duration="0:0:0.15"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.ExitActions> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </Grid.Style> 
    </Grid> 

이 중 하나가 올바른 길을 가고 있습니까? 애니메이션을 비활성화 (및 활성화)하려면 어떻게합니까?

Answer 1

그리드의 아무 곳이나 클릭하면 MouseLeave 애니메이션이 더 이상 작동하지 않게됩니다 (마우스를 놓아도 그리드가 유지됩니다).

대신, 스타일로 상하 운동을 실행하는 문제의 모든 이벤트에 등록하고, mouse enter 및 mouse leave의 이벤트와 코드 숨김에서 스토리 보드를 실행하지 마십시오.

마지막 이벤트 인 그리드 클릭 이벤트의 코드에서 mouse leave 이벤트가 읽을 부울 플래그를 설정하고 스토리 보드를 실행하지 못하도록합니다. 여기

---

내가 스토리 보드에 대해 당신에게 아이디어를 제공하기 위해 코드 숨김에 /에서 창 밖을 이동해야 코드 :

if (moveRight) 
{ 
    (Resources["MoveToOpen"] as Storyboard)?.Begin(this, false); 
    (Resources["FlipArrowClose"] as Storyboard)?.Begin(this, false); 
} 
else 
{ 
    if (closeWindow == false) 
    { 
     (Resources["MoveToClose"] as Storyboard)?.Begin(this, false); 
     (Resources["FlipArrowOpen"] as Storyboard)?.Begin(this, false); 
    } 
}