将CSS动画转换为WPF动画

我有这个CSS规则

/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content 
{
   transform: scale(0.7);
   opacity: 0;
   transition: all 0.3s;
}

摘自演示Nifty Modal Window Effects

当我在wf应用程序中显示模式对话框时，我希望具有相同的效果。该对话框不是窗口，而是具有高z顺序的UIElement。

由于我不知道对话框的大小，因此它应该以不透明度设置为零开始，并缩小到70％。

这是设置网格的开始状态和动画的情节提要的代码。

Grid x:Name="MyGrid" Opacity="0">
  <Grid.RenderTransform>
    <ScaleTransform ScaleX="0.7" ScaleY="0.7"/>
    RenderTransformOrigin="0.5,0.5"
   </Grid.RenderTransform>
  <Grid.Triggers>
    <EventTrigger RoutedEvent="Grid.Loaded">
       <BeginStoryboard Storyboard="{StaticResource ModalDialogStoryboard}"/>
    </EventTrigger>
  </Grid.Triggers>
</Grid>

故事板的代码

<Storyboard x:Key="ModalDialogStoryboard" RepeatBehavior="Forever" AutoReverse="True">
    <DoubleAnimation 
        From="0" 
        To="1" 
        Duration="0:0:02" 
        Storyboard.TargetName="MyGrid" 
        Storyboard.TargetProperty="Opacity"
         />
    <SizeAnimation To=""></SizeAnimation>
</Storyboard>

不透明度起作用，但是我找不到将网格缩放回100％的方法。

为什么CSS比XAML更强大？我希望好仙子能在XAML上撒些魔力

好的，这是可行的，并且看起来完全像CSS规则。对话框的内容被删除以使其简短。现在，我只需要找到一种放置样式的方法，就可以将其应用于任何UI元素。

UserControl x:Class="AnimationTest.Dialog"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         mc:Ignorable="d"
         RenderTransformOrigin="0.5,0.5"
         Opacity="0"
         x:Name="ModalDialogControl"
         Width="600" Height="400">
<UserControl.Resources>
    <Storyboard x:Key="ModalDialogStoryboard">
        <DoubleAnimation
                From="0"
                To="1"
                Duration="0:0:0.3"
                Storyboard.TargetName="ModalDialogControl"
                Storyboard.TargetProperty="Opacity" />
        <DoubleAnimation
                Storyboard.TargetName="ModalDialogControlScaleTransform"
                Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                To="1" Duration="0:0:0.3" />
        <DoubleAnimation
                Storyboard.TargetName="ModalDialogControlScaleTransform"
                Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                To="1"  Duration="0:0:0.3" />
    </Storyboard>
</UserControl.Resources>
<UserControl.RenderTransform>
    <ScaleTransform ScaleX="0.7" ScaleY="0.7" x:Name="ModalDialogControlScaleTransform" />
</UserControl.RenderTransform>
<UserControl.Triggers>
    <EventTrigger RoutedEvent="UserControl.Loaded">
        <BeginStoryboard Storyboard="{StaticResource ModalDialogStoryboard}" />
    </EventTrigger>
</UserControl.Triggers>

在朋友的帮助下

<UserControl.Resources>
    <Style x:Key="FadeInAndScaleUpStyle" TargetType="{x:Type FrameworkElement}">
        <Setter Property="Opacity" Value="0"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform ScaleX="0.7" ScaleY="0.7" />
            </Setter.Value>
        </Setter>
        <Style.Triggers >
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation To="1" Duration="0:0:0.3" Storyboard.TargetProperty="Opacity"/>
                        <DoubleAnimation To="1" Duration="0:0:0.3" Storyboard.TargetProperty="RenderTransform.ScaleX"/>
                        <DoubleAnimation To="1" Duration="0:0:0.3" Storyboard.TargetProperty="RenderTransform.ScaleY"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>