2012-02-20 68 views
1

我正在做一個簡單的動畫,按預期工作,直到我把我的網格放在邊框上。只要我這樣做,然後當我點擊框架時動畫閃爍。我正在嘗試實現一個「滑入」視圖的菜單。我在下面列出了我的代碼。它幾乎就像我的鼠標點擊造成無限的動畫循環。是什麼導致我的動畫閃爍

<Border BorderBrush="YellowGreen" CornerRadius="8" BorderThickness="10" Background="Black"> 
     <Grid MouseLeftButtonDown="DragWindow"> 
      <Grid.Resources> 
        <Style TargetType="Frame" x:Key="GrowingFrameStyle"> 
         <Setter Property="Foreground" Value="#505050"/> 
         <Setter Property="Background" Value="Black" /> 
         <Setter Property="Height" Value="20" /> 
         <Style.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Trigger.EnterActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="LightGray" /> 
              <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color" To="SteelBlue" /> 
              <DoubleAnimation Storyboard.TargetProperty="Height" From="20" To="50" Duration="0:0:.3" /> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.EnterActions> 
           <Trigger.ExitActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="#505050" /> 
              <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color" To="Black" /> 
              <DoubleAnimation Storyboard.TargetProperty="Height" From="50" To="20" Duration="0:0:.3" /> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.ExitActions> 
          </Trigger> 
         </Style.Triggers> 
        </Style> 
      </Grid.Resources> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="50"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="20"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 
      <Label Grid.Row="1" Grid.ColumnSpan="2" Background="Black"/> 
      <Frame Grid.RowSpan="2" Grid.ColumnSpan="2" Background="SlateBlue" VerticalAlignment="Top" Style="{StaticResource GrowingFrameStyle}"/>   
     </Grid> 
    </Border> 

唯一方法在後面的代碼

private void DragWindow(object sender, System.Windows.Input.MouseButtonEventArgs e) 
{ 
    DragMove(); 
} 
+0

我們可能需要看到DragWindow方法 – Phil 2012-02-20 18:33:59

+0

我轉載了這個問題。點擊是一個IsMouseOver重新開始,但不是沒有邊界。我不知道爲什麼。如果您點擊前20名,故事板只會運行一次。如果你點擊底部的20-50,你會得到一個循環。我不知道答案,他們是我作爲評論發佈的原因。 – Paparazzi 2012-02-20 19:10:58

+0

我認爲答案是在事件冒泡的地方。如果在邊界上打開IsHitVisable = false,則不會發生任何事情。我不知道答案,但它表明邊界是偶數序列。 – Paparazzi 2012-02-20 19:16:53

回答

1

它通過點擊Frame的擴展區域造成的。

MouseUp事件似乎正在觸發MouseLeave/MouseEnter事件。 MouseLeave正在觸發動畫以縮小框架,該框架排隊收縮故事板事件,並且MouseEnter正在對動畫進行排隊以擴展框架,該框架排隊展開故事板事件。通過縮小/擴大幀,MouseEnter/MouseLeave會再次被觸發,並且動畫再次運行。這兩個繼續發射,直到你將鼠標移出僅在幀展開時佔據的魔法區域。

可以通過添加BeginTime="00:00:02"到您的故事板,可以添加2秒的延遲查看慢動作的延遲,並且可以通過將其在MouseEnter寫入一行輸出的方法驗證MouseEnter/MouseLeave事件/ MouseLeave幀的事件。

至於修復它,我不確定最好的方法來做到這一點。也許嘗試使用MouseEnter/MouseLeave事件在1秒延遲後手動觸發事件,提供事件仍應該處理。

例如,如果MouseUp事件觸發MouseLeaveMouseEnter事件,那麼MouseLeave應該排隊合攏動畫,但拖延一秒鐘,檢查是否鼠標實際上是在對象上一秒鐘後。如果不是,請取消折疊事件。這將導致MouseLeave事件不激發其動畫,這意味着它不會無限地排列動畫,直到鼠標移出擴展的Frame區域。