是否可以使 RenderTransform 动画不修改鼠标的点击区域？答案

【问题标题】：Is it possible to make RenderTransform animation not modify the hit area for the mouse?是否可以使 RenderTransform 动画不修改鼠标的点击区域？
【发布时间】：2014-02-25 05:39:33
【问题描述】：

我的按钮模板上有一个动画，当IsMouseOver 为真时旋转按钮。
动画会旋转按钮，因此如果用户没有将光标放在旋转的锚点附近，按钮可能会“逃跑”。

我的目标是，如果鼠标在其原始区域内，按钮仍将保持悬停状态（因此，即使按钮旋转离开光标，它也会保持悬停状态并且也会接收鼠标点击，即使点击不是直接在上面）。

我认为使用RenderTransform 而不是LayoutTransform 可以解决我的问题，但不幸的是它仍然存在。

我该怎么做？
谢谢！

这是我的故事板（我用混合创建的，所以如果它凌乱，请原谅）：

<Storyboard x:Key="HoverAnimation">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="border">
        <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="-10.8">
            <EasingDoubleKeyFrame.EasingFunction>
                <BounceEase EasingMode="EaseOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="border">
        <EasingPointKeyFrame KeyTime="0:0:1.6" Value="0.919,0.3">
            <EasingPointKeyFrame.EasingFunction>
                <BounceEase EasingMode="EaseOut"/>
            </EasingPointKeyFrame.EasingFunction>
        </EasingPointKeyFrame>
    </PointAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" Storyboard.TargetName="border">
        <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

【问题讨论】：

这个问题解释得很好，但添加一些代码会更容易理解。
@MayurDhingra 我已经包含了我的故事板，如果还有什么可以帮助你帮助我的，请告诉我。

标签： c# wpf animation storyboard expression-blend

【解决方案1】：

在按钮的模板中，相互添加两个项目（使用Grid）：

下方透明边框，占据整个矩形区域，不应用变换。
上面的实际按钮内容，应用了转换。

我无法提供经过测试的示例代码，因为您没有包含独立的示例。

【讨论】：