Using Blend to set a Timer on an ActionState/Transition with Silverlight 4

Question

I'm a developer who has recently downloaded the trial of Blend and I am trying to get to grips with not using CodeBehind to do stuff - it's very cool but it has quite a learning curve!

I started off with these tuts here and implemented some simple animation on the menu as per the example on my poker blind timer. What I want to do now is to make the menu transition only start after 20 seconds - ie. so that the menu on the left that disappears on MouseLeave (see link above) - only does so 20 seconds after the mouse has left (and cancels if they MouseOver again). This will make the menu stay longer in case they mouse off by accident.

I am sure it is really simple in Blend but I am battling to find any decent documentation - I'll happily RTFM - I just need to know where to start looking (I googled "Blend timer stateaction" with no joy).

Thanks for any tips!

Answer 1

If I understand your problem correctly:

• When you get a Mouse Enter event over your side menu, it animates out (e.g. a "ShowMenuStoryboard") .
• You then want a "HideMenuStoryboard" to slide the menu back off, but only commence it's changes 20 seconds after it is triggered (by the MouseLeave event) but it needs to be cancelled if a subsequent Mouse Enter event fires.
• you want to do all this with no code-behind logic.

There are 2 things to do.

1. Make sure your storyboards only specify the end state values (no starting states) and

2. You just need to set BeginTime="0:0:20" in the XAML for the HideStoryboard e.g.

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

I have not found a property anywhere for BeginTime in the Expression blend editor, so this has to be done in the XAML view. The properties shows only AutoReverse and RepeatBehavior.

There is an inherent problem with this kind of animation, but should be OK for your example. The time duration is fixed, so if you trigger the opposite animation while one is commencing it will actually animate more slowly to it's final position as it takes a fixed time to go "from where it currently is" to the final position.

Hope this helps. The complete sample MainPage.XAML with memu menu is below. It only requires the 2 storyboards and Storyboard control behaviors:

<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

You can add a 'fake' story board, that serves as a trigger for the second animation. You will need two story boards. Fake and HideMenu. You need to ControlStoryboardActions to start each of them. The first one will have an event trigger (the Mouse out). The first one will have a StoryboardCompleterTrigger linked to the 'fake' animation.