wpf - MVVM中的动画图像

Question

我有一个如下定义的 View 模型的 View

<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时，我想开始播放动画，即要将箭头图像从屏幕顶部移动到底部。
我尝试在网格中定义图像，在样式中定义 Storyboard ，并将datatrigger附加到属性。但这导致整个ui扩展，而不是动画在屏幕上移动。

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

Answer 1

请尝试下一个动画示例(它使用了Image的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将触发“向上移动”动画，因此图像将向上移动。

问候。