使用Blend在ActionState/Transition上使用Silverlight 4設置定時器

Question

我是一個開發人員，他最近下載了Blend的試用版，我試圖去處理不使用CodeBehind來做什麼 - 它非常酷，但是它有相當的學習曲線！

我從這些tuts here開始，並根據我的poker blind timer上的示例在菜單上實施了一些簡單的動畫。我現在想做的是讓菜單轉換隻在20秒後開始 - 即。因此左側的菜單在MouseLeave上消失（請參閱上面的鏈接） - 只有在鼠標離開後20秒纔會完成（如果再次使用MouseOver，則取消）。這會讓菜單停留更長時間，以免偶然誤將鼠標移開。我很肯定它在Blend中非常簡單，但我正在努力尋找任何體面的文檔 - 我會高興地RTFM - 我只需要知道從哪裏開始尋找（我用Google搜索「Blend timer stateaction」沒有喜悅） 。

感謝您的任何提示！

Answer 1

如果我理解正確的話您的問題：

• 當你得到一個鼠標放在你身邊的菜單中輸入事件時，從動畫（如「ShowMenuStoryboard」）。
• 然後，您希望「HideMenuStoryboard」將菜單滑回，但只有在觸發後（通過MouseLeave事件發生）纔開始更改20秒，但如果後續的Mouse Enter事件觸發，則需要取消它。
• 你想要做所有這些都沒有代碼隱藏邏輯。

有2件事情要做。

1. 確保你的故事板只有指定的結束狀態值（不含起始狀態）和

2. 你只需要設置的BeginTime =「0：0：20​​」中的XAML的HideStoryboard例如

   <故事板X：NAME = 「HideMenuStoryboard」 的BeginTime = 「0：0：20​​」 >

我還沒有找到的BeginTime在Expression Blend中編輯的任何位置的屬性，所以這在XAML視圖中完成。這些屬性僅顯示AutoReverse和RepeatBehavior。

這種動畫存在固有的問題，但應該適用於您的示例。持續時間是固定的，所以如果您在開始時觸發相反的動畫，則實際上動畫會更緩慢地移動到最終位置，因爲需要一段固定的時間才能從「當前位置」移動到最終位置。

希望這會有所幫助。下面是帶有菜單菜單的完整示例MainPage.XAML。它僅需要2個故事板和故事板控制行爲：

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
    x:Class="SilverlightApplication1.MainPage" 
    mc:Ignorable="d"> 
    <UserControl.Resources> 
     <Storyboard x:Name="ShowMenuStoryboard"> 
      <DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="stackPanel" d:IsOptimized="True"/> 
     </Storyboard> 
     <Storyboard x:Name="HideMenuStoryboard" BeginTime="0:0:20"> 
      <DoubleAnimation Duration="0:0:0.5" To="-100" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="stackPanel" d:IsOptimized="True"/> 
     </Storyboard> 
    </UserControl.Resources> 

    <Grid x:Name="LayoutRoot" Background="White"> 
     <StackPanel x:Name="stackPanel" HorizontalAlignment="Left" Orientation="Vertical" Width="150" d:LayoutOverrides="Height" RenderTransformOrigin="0.5,0.5" Background="#FF646CE7"> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="MouseLeave"> 
        <ei:ControlStoryboardAction Storyboard="{StaticResource HideMenuStoryboard}"/> 
       </i:EventTrigger> 
       <i:EventTrigger EventName="MouseEnter"> 
        <ei:ControlStoryboardAction Storyboard="{StaticResource ShowMenuStoryboard}"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
      <StackPanel.RenderTransform> 
       <CompositeTransform TranslateX="-100"/> 
      </StackPanel.RenderTransform> 
      <StackPanel.Projection> 
       <PlaneProjection/> 
      </StackPanel.Projection> 
      <TextBlock TextWrapping="Wrap" Text="TextBlock"/> 
      <TextBlock TextWrapping="Wrap" Text="TextBlock"/> 
      <TextBlock TextWrapping="Wrap" Text="TextBlock"/> 
      <TextBlock TextWrapping="Wrap" Text="TextBlock"/> 
      <TextBlock TextWrapping="Wrap" Text="TextBlock"/> 
     </StackPanel> 
    </Grid> 
</UserControl> 

Answer 2

您可以添加一個「假」的故事板，用作第二動畫的觸發器。 您將需要兩個故事板。假和HideMenu。 你需要ControlStoryboardActions來啓動它們中的每一個。 第一個將有一個事件觸發器（鼠標輸出）。 第一個將有一個StoryboardCompleterTrigger鏈接到「假」動畫。