使用Storyboard.TargetProperty ="高度"对图像进行DoubleAnimation

时间:2014-12-06 19:43:58

标签: c# xaml windows-phone windows-phone-8.1

我已阅读How can I make an Image grow in size (give the illusion of selection) through a WPF animation?,并尝试使用DoubleAnimation更改图片的高度但不起作用。

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

这是button_clicked函数:

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

[编辑]:因为Johan Falk的回答我用Windows Phone Silverlight工具包尝试了上面的代码并且它有效。所以解决方案是使用Windows Phone Silverlight。

1 个答案:

答案 0 :(得分:2)

您的代码中只有一个小错误,通过设置Stretch="None"您不允许图像向任何方向伸展,因此始终保持其原始大小。将Stretch更改为例如Uniform,它应该有效。

以下是我用来验证它的示例代码:

<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();
}