wpfxamlstoryboardeventtriggerdoubleanimation

Button animation into WPF (Storyboard, EventTrigger)


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?


Solution

  • 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>