从网格中心展开动画

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和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>