如何使用Storyboard在网格上应用RenderTransform.TranslateTransform?

时间:2014-03-25 09:40:11

标签: c# wpf animation

在我的应用程序资源中,我定义了以下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设置动画?

1 个答案:

答案 0 :(得分:11)

对我来说,这个例子有效。请注意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>

Code-behind

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

<强> Edit

您也可以在代码隐藏中创建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();            
}