调整 WPF UserControl 的大小而不让所有子级“跳来跳去”答案

【问题标题】：Resize WPF UserControl without all children "jumping around"调整 WPF UserControl 的大小而不让所有子级“跳来跳去”
【发布时间】：2011-07-03 01:26:30
【问题描述】：

有没有办法调整 WPF UserControl 的大小以使子控件不会翻来覆去？

我有这个故事板：

<Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="MyUserControl" To="145" From="0" Duration="0:0:1" />
</Storyboard>

这很好用；它将我的控制从高度零到高度 145 - 问题是随着高度属性的变化，我怀疑里面的所有子控件都开始跳来跳去，因为它们的 HorizontalAlignment 和 VerticalAlighment 属性。有没有办法在动画完成之前禁用它？

我正在尝试创建这个 UserControl “滑入”视图的错觉——所以如果我要解决这个问题，我愿意接受其他方法。

【问题讨论】：

标签： .net wpf user-interface animation storyboard

【解决方案1】：

一切都在“跳跃”，因为每次更改控件的Height 时，所有包含控件都会根据新的可用空间重新定位。

要达到预期的效果，您应该使用RenderTransform 而不是更改控件的实际Height。

您可以这样做。首先，在您的控件上添加ScaleTransform 作为RenderTransform 属性的值：

<MyUserControl.RenderTransform>
    <ScaleTransform ScaleY="0" />
</MyUserControl.RenderTransform>

然后，修改动画的目标属性以更改变换的ScaleY 属性：

<Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" Storyboard.TargetName="MyUserControl" To="145" Duration="0:0:1" />
</Storyboard>

更新：

实现滑入视图效果的另一种方法是使用TranslateTransform 与负Y 值：

<MyUserControl.RenderTransform>
   <TranslateTransform Y="-1000" />
</MyUserControl.RenderTransform>

然后，将其 Y 属性设置为 0：

<Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)" Storyboard.TargetName="MyUserControl" To="0" Duration="0:0:1" />
</Storyboard>

【讨论】：

这行得通，控件不再跳来跳去；但是，它们现在看起来被拉伸，直到转换完成。我接受了，因为它比我所拥有的要好得多，但如果你有任何关于避免伸展的想法，那就太好了。

【解决方案2】：

当您为高度或宽度设置动画时，UserControl 会告诉其子级也重新调整，这就是布局系统在 WPF 中的工作方式。 “跳跃”实际上取决于您使用的布局类型（网格、堆栈面板等）。

但看起来，对于您的场景，最好使用 RenderTransform ScaleTransform ScaleY 动画而不是动画高度。 Rendertransform 不会干扰您对 UserControl 的布局安排。

【讨论】：

【解决方案3】：

要添加到 Pavlov 的更新答案，我不得不改用空白 CompositeTransform。也许是因为使用了最新的 Blend for Visual Studio 2012 更新 1，但这有效（针对 Windows Phone 8）：

    <MyUserControl.RenderTransform>
        <CompositeTransform />
    </MyUserControl.RenderTransform>

【讨论】：