WPF中的颜色过渡

Question

我希望能够实现WPF窗口背景颜色的渐变效果。

怎么做呢？

例如：

Brush i_color = Brushes.Red; //this is the initial color
Brush f_color = Brushes.Blue; //this is the final color

当我点击 Button 按钮1时。

private void button1_Click(object sender, RoutedEventArgs e)
{
    this.Background = f_color; //here the transition begins. I don't want to be quick. Maybe an interval of 4 seconds.
}

- Ionică Bizău

---

@downvoter 为什么？欢迎留言评论。 - Ionică Bizău

我不明白为什么这个问题被负投票了。这个问题清晰明了，而且还附有一些演示OP想要的代码。 - Ritch Melton

@John：可能是因为你没有展示出自己解决问题的努力（请参见下箭头工具提示），所以被人点了踩。此外，我相信这个问题之前已经被问过了，所以搜索的努力也可以受到质疑。 - H.B.

Answer 1

代码中可以使用以下方法实现

private void button1_Click(object sender, RoutedEventArgs e)
{
    ColorAnimation ca = new ColorAnimation(Colors.Red, Colors.Blue, new Duration(TimeSpan.FromSeconds(4)));
    Storyboard.SetTarget(ca, this);
    Storyboard.SetTargetProperty(ca, new PropertyPath("Background.Color"));

    Storyboard stb = new Storyboard();
    stb.Children.Add(ca);
    stb.Begin();
}

正如H.B.所指出的，这也可以起作用。

private void button1_Click(object sender, RoutedEventArgs e)
{
    ColorAnimation ca = new ColorAnimation(Colors.Blue, new Duration(TimeSpan.FromSeconds(4)));
    this.Background = new SolidColorBrush(Colors.Red);
    this.Background.BeginAnimation(SolidColorBrush.ColorProperty, ca);
}

- LPL

---

拥有单个动画的故事板有点多余，你可以使用 BeginAnimation 代替。 - H.B.

@H.B. this.Background.BeginAnimation(SolidColorBrush.ColorProperty, ca); 抛出异常 无法在 'System.Windows.Media.SolidColorBrush' 上动画化 'Color' 属性，因为该对象已被封闭或冻结。如果您知道如何解决此问题，请分享您的知识。 - LPL

@LPL：你只需要确保不要使用SolidColorBrush的冻结实例，例如将Background设置为new SolidColorBrush(Colors.Red)，然后对其进行动画处理。从Brushes获取的实例可能都是冻结的，因此无法更改（这很奇怪，想象一下有人拿走了Brushes.Red，现在它变成了蓝色）。 - H.B.

Answer 2

这里有一种方法：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Grid x:Name="BackgroundGrid" Background="Red">

        <Button HorizontalAlignment="Left" VerticalAlignment="Top">
            Transition
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation  Storyboard.TargetName="BackgroundGrid" From="Red" To="Blue" Duration="0:0:4" Storyboard.TargetProperty="Background" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

- RQDQ

---

你需要C#代码来启动动画，还是定义动画的C#代码？ - RQDQ

@John：这个答案已经实现了你想要的功能，它可以在点击时改变颜色，不需要使用事件处理程序和代码后台。 - H.B.

没问题 - 我回答了我首先想到的。我确实喜欢ColorAnimation的方法（我不知道还有这个选项），所以我更新了我的答案，以防其他人能够使用它。 - RQDQ

Answer 3

你可以使用一个动画 (阅读此文)，特别是ColorAnimation (查看示例) 或 ColorAnimationUsingKeyframes。

- H.B.

Answer 4

仅是为了补充 LPL 和 H.B. 的回答...... 在我的情况下，我需要将控件还原回动画之前的相同颜色。

这是我的代码：

ColorAnimation animation = new ColorAnimation()
{
    From = Colors.Orange,
    To = ((SolidColorBrush)myControl.Background).Color,//Revert to initial control Color
    Duration = new Duration(TimeSpan.FromSeconds(2))
};

myControl.Background = new SolidColorBrush(Colors.Orange);//Do not use a frozen instance
myControl.Background.BeginAnimation(SolidColorBrush.ColorProperty, animation);

- Guish

---

我想要一个即时的橙色，然后再淡回到“控制颜色”。自动反转可以让它从“控制颜色”淡出到橙色，然后再回到“控制颜色”。 - Guish

Answer 5

您还可以将背景设置为一种颜色，然后使用此XAML代码来使窗口反复更改为另一种指定的颜色：

<Window.Triggers>
  <EventTrigger RoutedEvent="Window.Loaded">
    <BeginStoryboard>
        <Storyboard>
            <ColorAnimation To="White" Storyboard.TargetProperty="(Window.Background).(SolidColorBrush.Color)" FillBehavior="Stop" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever"/>
        </Storyboard>
    </BeginStoryboard>
  </EventTrigger>
</Window.Triggers>

- RevitArkitek