动画元素从屏幕边缘到中心

【问题标题】：Animating an element from the edge of the screen to the center动画元素从屏幕边缘到中心
【发布时间】：2014-06-23 09:32:26
【问题描述】：

我正在 WPF 中编写一个对话框，我想从屏幕边缘进入并在显示时向中心设置动画。即使调整窗口大小，对话框也需要保持在屏幕中心。这似乎在 WPF 中做起来应该很简单，但我仍然没有想到实现这种效果的可靠方法。我更喜欢使用纯粹的“布局”方法，而不是使用绑定来计算对话框的位置。

在 HTML/CSS 中，我只需将对话框的 left CSS 属性从 0' 设置为 50%... 在 WPF 中是否有类似的方法来实现此效果？

【问题讨论】：

你看过 Blend 吗？它是免费的，可以在 10 秒内完成故事板
只需在Loaded 事件上使用Trigger 为Windows Left 属性设置动画
@sa_ddam213 该对话框不是实际的Window，它只是我在应用程序中显示的UserControl。

标签： c# wpf

【解决方案1】：

为了达到这个效果，我编写了自己的Panel 子类，它的作用类似于Canvas，但接受百分比偏移而不是绝对偏移。这使我可以将“模态”UserControl 从屏幕的 0% 到 50% 设置为动画。

Here's the class on Github.

用法类似于Canvas:

<Window>
    <local:PercentagePanel>
        <Button local:PercentagePanel.Left=".10" local:PercentagePanel.Bottom=".5"
         Width="100" Height="40">Hello world!</Button>
    </local:PercentagePanel>
</Window>

结果：

默认情况下，PercentagePanel 根据每个孩子的适当边缘定位其孩子（类似于 CSS 定位）。 PercentagePanel 还可以通过PositioningMode 属性相对于每个孩子的中心定位其孩子：

<local:PercentagePanel PositioningMode="Center">

以下是在上例中更改PositioningMode 属性的结果：

【讨论】：