使用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链接到“假”动画。