如何在 WPF ColorAnimation 中绑定颜色？

Question

我想做一些看似很简单的事情，但是我不知道该怎么做。当鼠标进入时，我有一个ColorAnimation触发。它只是将Border的背景颜色从一种颜色更改为另一种颜色。

不幸的是，我无法在这个ColorAnimation中放置除硬编码颜色以外的任何东西。所以它目前看起来像这样:

<Style x:Key="MouseOverStyle">
<Style.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                    To="Red" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Style.Triggers>
</Style>

然而，我想要做的事情是这样的：

<SolidColorBrush x:Key="MyEventColor" Color="{Binding EventColor}" />

<Style x:Key="MouseOverStyle">
<Style.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                    To="{StaticResource MyEventColor}" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Style.Triggers>
</Style>

或者像这样：

<Style x:Key="MouseOverStyle">
<Style.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                    To="{Binding EventColor}" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Style.Triggers>
</Style>

当我尝试执行其中任何一个操作时，都会抛出异常。对于第一个操作，它会抛出一个异常，告诉我基本上“颜色”属性不能采用SolidColorBrush值...这是有道理的...但它肯定没有帮助我，因为ColorAnimation不允许我动画化“(Border.Background).(SolidColorBrush)”属性...它只允许我动画化“(Border.Background).(SolidColorBrush.Color)”属性...

第二个示例的异常基本上告诉我“无法冻结此Storyboard时间线树以供跨线程使用”...因此，似乎ColorAnimation正在尝试在UI线程之外的某个其他线程中进行此绑定？无论它试图做什么...它都不起作用。

我该如何完成这样一个简单的任务？

- David

Answer 1

首先，您可以使用{StaticResource MyColor}，其中MyColor定义如下：

<Color x:Key="MyColor">#FF00FF00</Color>

然而，这并不能解决你的问题：你无法绑定到动画属性，因为这些属性需要被冻结（不可更改）才能使动画正常工作。要么尝试消除对绑定的依赖，要么在颜色发生变化时从代码后台重新创建带有正确颜色的故事板。

- Julien Lebosquain

---

不幸的是，第一种解决方案只有在代码后台绑定颜色的某种方式存在时才能起作用。我可以安全地摆脱“MouseEnter”事件动画的绑定......这意味着对于此控件的每个实例，如果鼠标悬停在其上，则控件将变为相同的颜色。然而，我无法安全地摆脱相应的“MouseLeave”事件动画的绑定（看起来完全相同），因为该对象的每个实例都可能具有不同的BackgroundColor属性，并且当鼠标离开时，该颜色需要返回到正常状态。 - David

对于MouseLeave动画，您可以使用完全相同的方法通过将"To"更改为"From"来获得反向效果。这样可以指定要开始的颜色，并在"To"的位置使用原始颜色。另外要注意的一件事是，如果将渐变刷应用为背景，则这些动画将停止工作。 - John Bowen