CODEWITHSUNDEEP
wpfxamlanimation
Valkyry
Valkyry

Reputation: 147

Image Animation with a Button WPF

I have an image within a button, I've wrote an animation that leads to Grow or Shrink When IsMouseOver Occurs, However I dont want the button itself Grows or Shrinks but the Image within the Button has to Grow or Shrink. Do you have any idea? I am all yours.

here is my .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>

Upvotes: 0

Views: 1537

Answers (3)

Vivek Saurav
Vivek Saurav

Reputation: 2275

Or you could try this 

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

Upvotes: 1

lerner1225
lerner1225

Reputation: 902

You have to give Height and Width to Image, else will get an Exception. As Mike said can't use 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>

Upvotes: 1

Mike Eason
Mike Eason

Reputation: 9713

You can simply apply the Style to the Image instead of the Button.

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

Note that Image does not have a Border control, therefore you can't use the BorderThickness animation on the Image, you can instead apply this animation on the Button as you were doing before.

Also, your Image will require a Height in order to animate. Otherwise, you can use the From property on the DoubleAnimation like this:

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

Upvotes: 3

Related Questions