Button animation into WPF (Storyboard, EventTrigger)

1
votes

I have simple WPF button animation to change Width property when mouse is on button:

<Button Width="100" Height="60" Content="Click Me" x:Name="Button1">    
            <Button.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width" To="200" Duration="0:0:0:1" ></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>            
</Button>

But after the animation, Width should get back to "60". How to do that?

2
wpfxamlstoryboardeventtriggerdoubleanimation
Write another trigger with animation that sets the width To=60. Event is called MouseLeave. – XAMlMAX

2 Answers

2
votes

Try this..

<Button Width="100" Height="60" Content="Click Me" x:Name="Button1">
        <Button.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Width" To="200" Duration="0:0:0:1" ></DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Width" To="100" Duration="0:0:0:1" ></DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>

    </Button>
-1
votes
<EventTrigger RoutedEvent="Mouse.PreviewMouseDown">
    <EventTrigger.Actions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation
                    Duration="0:0:0.3"
                    Storyboard.TargetProperty="MaxHeight"
                To="280"
                 />
        </Storyboard>
        </BeginStoryboard>
    </EventTrigger.Actions>
</EventTrigger>
    <EventTrigger RoutedEvent="Mouse.MouseLeave">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Duration="0:0:0:1"
                        Storyboard.TargetProperty="MaxHeight" To="75" />
        </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>