按钮动画导入 WPF（Storyboard、EventTrigger）

Question

当鼠标在按钮上时，我有简单的 WPF 按钮动画来改变宽度属性：

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

但是在动画之后，Width 应该回到“60”。怎么做？

Answer 1

试试这个..

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

Answer 2

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

按钮动画导入 WPF（Storyboard、EventTrigger）

Button animation into WPF (Storyboard, EventTrigger)

wpf

xaml

storyboard

eventtrigger

doubleanimation