How to animate "typing" text in SketchFlow?

Question

In Microsoft's Expression Blend 3 SketchFlow application.

How would you go about animating the typing of text, ideally in staged character by character fashion. As if the user is typing it.

An associated flashing cursor would make it perfect, but that's far into the realm of "nice to have".

The keyframe animation system, does not allow you to manipulate the

Common Property > Text

field so therefore it doesn't persist as a recorded change in that keyframe of animation.

I'm looking for either editor steps (using some kind of other control) or even XAML code...

<VisualState>
    <StoryBoard>
        <DoubleAnimationUsingKeyFrame ... >

Answer 1

After blogging about this with a solution involving a wipe animation of a rectangle over a text block, a response blog post with a more advanced solution of using a custom behavior attached to a text block was created.

Creating a 'TypeOnAction' behavior and adding to a TextBlock, will give the desired effect of character by character display, with a customizable appearance rate. Get the full code sample here.

public class TypeOnAction : TriggerAction<TextBlock>
{
    DispatcherTimer timer;
    int len = 1;

    public TypeOnAction()
    {
        timer = new DispatcherTimer();
    }

    protected override void Invoke(object o)
    {
        if (AssociatedObject == null)
            return;

        AssociatedObject.Text = "";
        timer.Interval = TimeSpan.FromSeconds(IntervalInSeconds);
        timer.Tick += new EventHandler(timer_Tick);
        len = 1;
        timer.Start();
    }

    void timer_Tick(object sender, EventArgs e)
    {
        if (len > 0 && len <= TypeOnText.Length)
        {
            AssociatedObject.Text = TypeOnText.Substring(0, len);
            len++;
            timer.Start();
        }
        else
            timer.Stop();
    }

    public string TypeOnText
    {
        get { return (string)GetValue(TypeOnTextProperty); }
        set { SetValue(TypeOnTextProperty, value); }
    }

    public static readonly DependencyProperty TypeOnTextProperty =
        DependencyProperty.Register("TypeOnText", typeof(string), typeof(TypeOnAction), new PropertyMetadata(""));

    public double IntervalInSeconds
    {
        get { return (double)GetValue(IntervalInSecondsProperty); }
        set { SetValue(IntervalInSecondsProperty, value); }
    }

    public static readonly DependencyProperty IntervalInSecondsProperty =
        DependencyProperty.Register("IntervalInSeconds", typeof(double), typeof(TypeOnAction), new PropertyMetadata(0.35));

}