Question

我有一个如下定义的viewmodel的视图

<DataTemplate DataType="{x:Type local:TestViewModel}">
    <Grid>                
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
            <Button Name="btnStart" Command="{Binding Start}" Margin="5,0,5,0" />
            <Button Name="btnCancel" Command="{Binding Cancel}" Margin="5,0,5,0" />
        </StackPanel>
    </Grid>
</DataTemplate>

所以当我点击startButton时，我想开始动画，即我想将箭头图像从我的screent顶部移动到底部。我尝试在网格中定义图像，在样式中定义故事板并将datatrigger附加到属性。但这会导致整个UI扩展而不是动画在屏幕上移动。

我希望动画移动到我的stackPanel上。我该怎么做？

Answer 1

我会使用Canvas并通过更改Image / Canvas.Left - 值来动画Canvas.Top。

Canvas与StackPanel不同，它不会受到孩子们自己布局的影响。缺点是，如果需要StackPanel坐标的动画，则必须找到StackPanel的坐标。

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
    <Canvas>
        <Image ... />
    </Canvas>
    <Button  Name="btnStart" Command="{Binding Start}"  Margin="5,0,5,0" ></Button>
    <Button Name="btnCancel" Command="{Binding Cancel}" Margin="5,0,5,0"></Button>
</StackPanel>

Answer 2

如何使用TranslateTransform为Image制作动画？将其与UIElement.RenderTransform属性一起使用，您不会影响视图其余部分的布局。

WPF转换的更多信息： https://msdn.microsoft.com/en-us/library/ms750596(v=vs.100).aspx

WPF动画的一般概述： https://msdn.microsoft.com/en-us/library/ms752312(v=vs.100).aspx

Answer 3

请尝试下一个动画示例（它使用了图像的TranslateTransform）：

<Grid x:Name="AnimationAreaRootGrid">
        <Image x:Name="Image" HorizontalAlignment="Left" VerticalAlignment="Top" Source="Res/Koala.jpg" Width="50" Height="50" RenderTransformOrigin="1.0,1.0">
            <Image.RenderTransform>
                <TranslateTransform />
            </Image.RenderTransform>
        </Image>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom" >
            <Button Name="btnStart" Content="Animate Down" Margin="5,0,5,0">
                <Button.Resources>
                    <Storyboard x:Key="DownMovingStoryBoardKey" Storyboard.TargetName="Image">
                        <!--From - the animation start point-->
                        <!--From - the animation end point-->
                        <DoubleAnimation Storyboard.TargetProperty="(Control.RenderTransform).(TranslateTransform.Y)"
                                     From="0"
                                     To="250"
                                     Duration="0:0:1" />
                    </Storyboard>
                </Button.Resources>
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource DownMovingStoryBoardKey}"/> 
                    </EventTrigger>
                </Button.Triggers>
            </Button>
            <Button Name="btnCancel"  Margin="5,0,5,0" Content="Animate Up">
                <Button.Resources>
                    <Storyboard x:Key="UpMovingStoryBoardKey" Storyboard.TargetName="Image">
                        <!--From - the animation start point-->
                        <!--From - the animation end point-->
                        <DoubleAnimation Storyboard.TargetProperty="(Control.RenderTransform).(TranslateTransform.Y)"
                                     From="250"
                                     To="0"
                                     Duration="0:0:1" />
                    </Storyboard>
                </Button.Resources>
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource UpMovingStoryBoardKey}"/>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </StackPanel>
    </Grid>

<强>说明

单击btnStart将触发向下移动动画，以便将图像向下移动。
单击btnCancel将触发向上移动动画，以便图像向上移动。

问候。

MVVM中的动画图像

3 个答案: