0

我是一名开发人员，最近下载了 Blend 的试用版，我正在尝试不使用 CodeBehind 来做事——它非常酷，但它有相当长的学习曲线！

我从这些tuts开始，并根据我的扑克盲人计时器上的示例在菜单上实现了一些简单的动画。我现在要做的是让菜单转换仅在 20 秒后开始 - 即。以便在 MouseLeave 上消失的左侧菜单（请参见上面的链接） - 仅在鼠标离开 20 秒后才会消失（如果它们再次 MouseOver 则取消）。这将使菜单停留更长时间，以防他们意外鼠标关闭。

我确信它在 Blend 中真的很简单，但我正在努力寻找任何像样的文档 - 我很乐意 RTFM - 我只需要知道从哪里开始寻找（我在谷歌上搜索了“Blend timer stateaction”，没有任何乐趣）。

感谢您的任何提示！

4

2 回答 2

1

如果我正确理解您的问题：

  • 当您在侧边菜单上获得 Mouse Enter 事件时，它会显示动画（例如“ShowMenuStoryboard”）。
  • 然后，您希望“HideMenuStoryboard”将菜单向后滑动，但仅在触发（由 MouseLeave 事件）触发 20 秒后才开始更改，但如果随后的 Mouse Enter 事件触发，则需要将其取消。
  • 你想在没有代码隐藏逻辑的情况下完成这一切。

有 2 件事要做。

  1. 确保您的故事板仅指定结束状态值（无起始状态）和

  2. 您只需要在 XAML 中为 HideStoryboard 设置 BeginTime="0:0:20" 例如

    <Storyboard x:Name="HideMenuStoryboard" BeginTime="0:0:20" >

我在表达式混合编辑器中的任何地方都没有找到 BeginTime 的属性，因此必须在 XAML 视图中完成。属性仅显示 AutoReverse 和 RepeatBehavior。

这种动画存在固有问题，但对于您的示例应该没问题。持续时间是固定的，所以如果你在一个开始时触发相反的动画，它实际上会更慢地动画到它的最终位置，因为它需要一个固定的时间才能“从它当前的位置”到最终位置。

希望这可以帮助。下面是带有 memu 菜单的完整示例 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>
于 2010-08-18T11:57:48.980 回答
0

您可以添加一个“假”故事板，作为第二个动画的触发器。您将需要两个故事板。假和隐藏菜单。您需要 ControlStoryboardActions 来启动它们中的每一个。第一个将有一个事件触发器（鼠标移出）。第一个将有一个 StoryboardCompleterTrigger 链接到“假”动画。

于 2010-08-18T12:23:52.667 回答