CODEWITHSUNDEEP
c#xamlwindows-phonewindows-phone-8.1
ju ho
ju ho

Reputation: 328

DoubleAnimation for image with Storyboard.TargetProperty="Height"

I have read How can I make an Image grow in size (give the illusion of selection) through a WPF animation? and tried to change the height of an image with a DoubleAnimation but it does not work.

<Image Name="image" Height="100" Source="http://www.online-image-editor.com/styles/2013/images/example_image.png" Stretch="None">
        <Image.Resources>
            <Storyboard x:Name="show">
                <DoubleAnimation
                    Storyboard.TargetName="image"
                    Storyboard.TargetProperty="Height"
                     From="100" To="400" Duration="0:0:1"
                    />
            </Storyboard>
        </Image.Resources>
    </Image>
    <Button Content="image stretch" Click="button_clicked" />

This is the button_clicked function:

private void button_clicked(object sender, RoutedEventArgs e)
{
    show.Begin();
}

[edit]: Because Johan Falk´s answer I tried the above code with the Windows Phone Silverlight toolkit and it works. So the solution is to use Windows Phone Silverlight.

Upvotes: 1

Views: 1584

Answers (1)

Johan Falk
Johan Falk

Reputation: 4359

You just have a small error in your code, by setting Stretch="None" you don't allow the image to stretch in any direction, hence Always keeping its original size. Change Stretch to for example Uniform and it should work.

Here is the sample code I used to verify it with:

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Image Source="/Assets/ApplicationIcon.png" x:Name="testImage" Stretch="Uniform">
        <Image.Resources>
            <Storyboard x:Name="Animation">
                <DoubleAnimation Storyboard.TargetName="testImage" Storyboard.TargetProperty="Height" From="100" To="200" Duration="0:0:1" />
            </Storyboard>
        </Image.Resources>
    </Image>
    <Button Content="Expand image" Grid.Row="1" Click="Button_Click"></Button>
</StackPanel>

private void Button_Click(object sender, RoutedEventArgs e)
{
    Animation.Begin();
}

Upvotes: 2

Related Questions