WPF中的按钮动画（故事板，EventTrigger）答案

【问题标题】：Button animation into WPF (Storyboard, EventTrigger)WPF中的按钮动画（故事板，EventTrigger）
【发布时间】：2018-02-09 01:00:25
【问题描述】：

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

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

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

【问题讨论】：

编写另一个带有动画的触发器，将宽度设置为 To=60。事件被称为MouseLeave。

标签： wpf xaml storyboard eventtrigger doubleanimation

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：