从网格中心扩展动画

Question

我正在制作一个应用程序，当它打开时它会扩展。 但是它正在从网格的侧面扩展，但我希望它从中心扩展。 这是XAML代码

    <Window.Resources>
        <Storyboard x:Key="ExpandingAnimation">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpandingGrid" Storyboard.TargetProperty="(FrameworkElement.Height)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"></EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"></EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:03" Value="222"></EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

<Grid x:Name="ExpandingGrid"> </Grid>

这是c＃代码

        public MainWindow()
        {
            InitializeComponent();
            Storyboard ExpandingAnime = (Storyboard)TryFindResource("ExpandingAnimation");
            ExpandingAnime.Begin();
        }

这是一个外观的示例。

Answer 1

您可以使用scaletransform并为其scalex和scale> scaley属性进行动画：

<Storyboard x:Key="ExpandingAnimation">
    <Storyboard>
        <DoubleAnimation
            Storyboard.TargetName="MyScaleTransform"
            Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
            From="0" To ="1" Duration="0:0:3"/>
        <DoubleAnimation
            Storyboard.TargetName="MyScaleTransform"
            Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
            From="0" To ="1" Duration="0:0:3"/>
    </Storyboard>
</Storyboard>
...
<Grid x:Name="ExpandingGrid"
              RenderTransformOrigin="0.5,0.5"
              Height="222">
    <Grid.RenderTransform>
        <ScaleTransform x:Name="MyScaleTransform" ScaleX="0" ScaleY ="0" />
    </Grid.RenderTransform>
</Grid>