按钮动画WPF

时间:2015-11-16 07:45:10

标签: wpf xaml animation

您好我试图在animation上制作button,它会增加width上的heightIsMouseOver,但是,当IsMouseOver 1}}是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>

1 个答案:

答案 0 :(得分:3)

你应该像这样将动画放到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>