Question

I have a control template for a button that looks like this:

<ControlTemplate x:Key="CopyButton" TargetType="{x:Type Button}">
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text=">>>>"/>
</ControlTemplate>

How could I go about animating this so that when the mouse is hovering over the button the > arrows “move”. I mean so that the text is something like "> ", ">> ", ">>> ", ">>>>", " >>>", " >>", " >" in a repeat.

Answer 1

You can use a string animation. The result is however not the most professional looking in my opinion.

<Button 
        Name="myAnimatedButton" 
        Width="200"
        Content=">">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <StringAnimationUsingKeyFrames 
                            Storyboard.TargetName="myAnimatedButton" 
                            Storyboard.TargetProperty="(Button.Content)"
                            AutoReverse="True">
                            <DiscreteStringKeyFrame Value=">" KeyTime="0:0:0" />
                            <DiscreteStringKeyFrame Value=">>" KeyTime="0:0:1" />
                            <DiscreteStringKeyFrame Value=">>>" KeyTime="0:0:2" />
                            <DiscreteStringKeyFrame Value=">>>>" KeyTime="0:0:3" />
                            <DiscreteStringKeyFrame Value=" >>>" KeyTime="0:0:4" />
                            <DiscreteStringKeyFrame Value="  >>" KeyTime="0:0:5" />
                            <DiscreteStringKeyFrame Value="   >" KeyTime="0:0:6" />
                        </StringAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>