按钮动画 WPF答案

【问题标题】：Button Animation WPF按钮动画 WPF
【发布时间】：2015-11-16 07:45:10
【问题描述】：

您好，我正在尝试在button 上创建animation，它确实增加了IsMouseOver 上的width 和height，但是，当IsMouseOver 为false 时，它不会返回用动画回到原来的地方。

这是我的 .XAML

<Grid>
    <Button Margin="355,0,0,0" Width="100" Height="300">
        <Image Source="img/blue.jpg" />
        <Button.Style>
            <Style TargetType="Button">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ThicknessAnimation Duration="0:0:0.250" To="0" 
                                    Storyboard.TargetProperty="BorderThickness" />
                                    <DoubleAnimation Duration="0:0:0.550" To="320" 
                                    Storyboard.TargetProperty="Height" />
                                    <DoubleAnimation Duration="0:0:0.550" To="120" 
                                    Storyboard.TargetProperty="Width" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ThicknessAnimation Duration="0:0:0.250" To="0" 
                                    Storyboard.TargetProperty="BorderThickness" />
                                    <DoubleAnimation Duration="0:0:0.550" To="300" 
                                    Storyboard.TargetProperty="Height" />
                                    <DoubleAnimation Duration="0:0:0.550" To="100" 
                                    Storyboard.TargetProperty="Width" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
</Grid>

【问题讨论】：

标签： wpf xaml animation

【解决方案1】：

你应该像这样将动画放到Trigger.ExitActions。

<Button.Style>
    <Style TargetType="Button">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation Duration="0:0:0.250" To="0" 
                                                            Storyboard.TargetProperty="BorderThickness" />
                            <DoubleAnimation Duration="0:0:0.550" To="120" 
                                                            Storyboard.TargetProperty="Height" />
                            <DoubleAnimation Duration="0:0:0.550" To="120" 
                                                            Storyboard.TargetProperty="Width" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation Duration="0:0:0.250" To="0" 
                                                            Storyboard.TargetProperty="BorderThickness" />
                            <DoubleAnimation Duration="0:0:0.550" To="100" 
                                                            Storyboard.TargetProperty="Height" />
                            <DoubleAnimation Duration="0:0:0.550" To="100" 
                                                            Storyboard.TargetProperty="Width" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</Button.Style>

【讨论】：

像一个魅力一样工作，我还有一个问题，它是否可能只从左侧生长？
如果按钮被放置在Grid容器中并且它的属性设置为HorizontalAlignment="Left" Margin="10,0,0,0"是可能的