WPF：触发动画 - 沿 Y 轴向下移动控件答案

【问题标题】：WPF: Trigger animation - Move Control downwards along Y axisWPF：触发动画 - 沿 Y 轴向下移动控件
【发布时间】：2013-04-10 13:41:47
【问题描述】：

我有一个控件，我想在MouseOver 上向下移动。不幸的是，当我将鼠标悬停时动画没有运行，但是背景改变了颜色。

Toolkit:Dialog 是继承ContentControl 的自定义对话框控件。此外，在最终实现中，我不会使用 MouseOver - 目前只是为了便于测试。

<Style x:Key="blah" TargetType="Toolkit:Dialog">
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Toolkit:CanvasControl.Background" Value="White" />
        <Trigger.EnterActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" From="0" To="100" Duration="00:00:01.000" />
                </Storyboard>
            </BeginStoryboard>
        </Trigger.EnterActions>
    </Trigger>
</Style>

【问题讨论】：

信息不足。该触发器在什么控制/样式上使用？请记住，当您在鼠标悬停时应用动画时，元素会移动，这可能会导致鼠标不再悬停。当您将鼠标放在控件的顶行时，可能会导致一些烦人的抖动。
同意，但我实际上计划在可见性状态更改时使用它，但为了便于测试，我将它放在鼠标悬停状态上。它在一个自定义控件上（继承 ContentControl）
我不是 100% 确定，但我认为您必须为 RenderTransform 提供一个空的 TranslateTransform，因为通常那里没有任何内容。因此，您正在尝试为不存在的东西制作动画。只需添加 TranslateTransform 并查看是否有效。
@dowhilefor 好主意..如何使用上面的样式应用它？（我已经相应地更新了我的 xaml）
我也可以为边缘设置动画..这看起来更优雅..

标签： c# .net wpf xaml animation

【解决方案1】：

我认为您必须为 RenderTransform 提供一个空的TranslateTransform，因为通常RenderTransform 中没有任何内容。因此，您正在尝试为不存在的东西制作动画。只需添加TranslateTransform 看看是否有效：

<Style x:Key="blah" TargetType="Toolkit:Dialog">
    <Setter Property="RenderTransform">
        <Setter.Value>
            <TranslateTransform/>
        </Setter.Value>
    </Setter>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Toolkit:CanvasControl.Background" Value="White" />
        <Trigger.EnterActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" From="0" To="100" Duration="00:00:01.000" />
                </Storyboard>
            </BeginStoryboard>
        </Trigger.EnterActions>
    </Trigger>
</Style>

【讨论】：