Question

我在image内有一个button，我写了一个animation，当Grow发生时Shrink或IsMouseOver ，但是我不想要按钮本身Grows或Shrinks，但Button中的图片必须为Grow或Shrink。你有什么主意吗？我是你的全部。

这是我的 .XAML

    <Button Margin="355,0,0,0" Width="100" Height="300" Click="Button_Click_1">
        <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.350" To="320" 
                                     Storyboard.TargetProperty="Height" />
                                    <DoubleAnimation Duration="0:0:0.350" 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="300" 
                                     Storyboard.TargetProperty="Height" />
                                    <DoubleAnimation Duration="0:0:0.550" To="100" 
                                     Storyboard.TargetProperty="Width" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

Answer 1

您只需将Style应用于Image，而不是Button。

<Button ...>
    <Image ...>
        <Image.Style>
            <Style TargetType="Image">
                <Style.Triggers>
                    <!-- You get the idea -->

请注意，Image没有Border控件，因此您无法在BorderThickness上使用Image动画，您可以改为应用此动画正如您之前所做的那样Button。

此外，您的Image需要Height才能制作动画。否则，您可以使用From上的DoubleAnimation属性，如下所示：

<DoubleAnimation Duration="0:0:0.350" From="300" To="320" 
                 Storyboard.TargetProperty="Height" />

Answer 2

你必须给图像赋予高度和宽度，否则会得到一个例外。正如迈克所说，不能使用BorderThickness。

<Button>
        <Image Source="Edit.png"  Height="50" Width="50">
            <Image.Style>
                <Style TargetType="Image">
                    <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.350" To="320" Storyboard.TargetProperty="Height" />
                                        <DoubleAnimation Duration="0:0:0.350" 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="300" Storyboard.TargetProperty="Height" />
                                        <DoubleAnimation Duration="0:0:0.550" To="100" Storyboard.TargetProperty="Width" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
    </Button>

Answer 3

或者你可以试试这个

<Button Margin="355,0,0,0" Width="100" Height="300" Click="Button_Click_1">
            <Border Width="50" Height="150">
                <Border.Style>
                    <Style TargetType="Border">
                        <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.350" To="320" 
                                     Storyboard.TargetProperty="Height" />
                                            <DoubleAnimation Duration="0:0:0.350" 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="150" 
                                     Storyboard.TargetProperty="Height" />
                                            <DoubleAnimation Duration="0:0:0.550" To="50" 
                                     Storyboard.TargetProperty="Width" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <Image Source="MyImage.jpg" Stretch="UniformToFill"/>
            </Border>
        </Button>

使用按钮WPF的图像动画

3 个答案: