c# - 如何使用 Storyboard 在 Grid 上应用 RenderTransform.TranslateTransform？

Question

在我的应用程序资源中，我定义了以下 Storyboard:

App.xaml

<Storyboard x:Key="DefaultSB" Name="DefaultSB" x:Shared="false">
    <DoubleAnimation Duration="0:0:1" From="100" To="-100" Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)" />
    <DoubleAnimation Duration="0:0:0.2" From="0" To="1" Storyboard.TargetProperty="Opacity" />
</Storyboard>

在我后面的代码中，我将 Storyboard 应用于网格控件:

Storyboard myStoryboard = (Storyboard)App.Current.Resources["DefaultSB"];
Storyboard.SetTarget(myStoryboard.Children.ElementAt(0) as DoubleAnimation, Editor);
Storyboard.SetTarget(myStoryboard.Children.ElementAt(1) as DoubleAnimation, Editor);
myStoryboard.Begin();

现在 Opacity 发生了变化，但是没有应用 RenderTransform。我还尝试了 (UIElement.RenderTransform).TranslateTransform.Y 但这也不起作用。

如何为 TranslateTransform 设置动画？

Answer 1

对我来说，这个例子很管用。请注意 Grid.RenderTransform:

XAML

<Window.Resources>
    <Storyboard x:Key="TestStoryboard">
        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                         To="0"/>

        <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                         From="0"
                         To="1" />
    </Storyboard>
</Window.Resources>

<Grid Name="MyGrid"
      Background="AliceBlue">

    <Grid.RenderTransform>
        <TranslateTransform X="50" Y="0" />
    </Grid.RenderTransform>

    <Button VerticalAlignment="Top" 
            HorizontalAlignment="Left"
            Margin="10" 
            Content="Click"
            Click="Button_Click" />
</Grid>

代码隐藏

private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard myStoryboard = (Storyboard)this.Resources["TestStoryboard"];
    Storyboard.SetTarget(myStoryboard.Children.ElementAt(0) as DoubleAnimation, MyGrid);
    Storyboard.SetTarget(myStoryboard.Children.ElementAt(1) as DoubleAnimation, MyGrid);
    myStoryboard.Begin();            
} 

更多信息请看:

MSDN: Transforms Overview

编辑

您还可以创建 TranslateTransform 并在代码隐藏中设置 RenderTransform，如下所示:

private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard myStoryboard = (Storyboard)this.Resources["TestStoryboard"];

    TranslateTransform myTranslate = new TranslateTransform();
    myTranslate.X = 50;
    myTranslate.Y = 0; 
    MyGrid.RenderTransform = myTranslate;

    Storyboard.SetTarget(myStoryboard.Children.ElementAt(0) as DoubleAnimation, MyGrid);
    Storyboard.SetTarget(myStoryboard.Children.ElementAt(1) as DoubleAnimation, MyGrid);

    myStoryboard.Begin();            
}