How to spice up "text input" in SketchFlow?

In Microsoft Expression Blend 3 SketchFlow app.

How would you go around your text input animation , ideally in character phased in character. It's like the user is typing it.

The associated blinking cursor will make it perfect, but it's far in the "nice to have" realm.

Keyframe animation system prevents you from manipulating

General Property> Text

therefore, it is not saved as a recorded change at that animation keyframe.

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

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

      

+2


source to share


1 answer


After blogging about this with a solution involving a clear rectangle animation above the text block, a blog post with a more advanced solution was created using custom behavior attached to the text block.

Creating a TypeOnAction behavior and adding it to the TextBlock will give the desired character effect to render the character with a configurable appearance rate. Get the complete sample code 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));

}

      

+3


source







All Articles