CODEWITHSUNDEEP
wpfxamlstoryboardeventtriggerdoubleanimation
4est
4est

Reputation: 3168

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?

Upvotes: 1

Views: 1764

Answers (2)

Black Panther
Black Panther

Reputation: 21

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

Upvotes: -1

Vishal Prajapati
Vishal Prajapati

Reputation: 598

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>

Upvotes: 2

Related Questions