1

我想知道，如何使两种背景颜色之间的过渡更加平滑。是否可以进行某种淡入淡出过渡？

我创建了这个小示例项目来说明行为。

主窗口.xaml

<Window x:Class="FadeTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Converter="clr-namespace:FadeTest" Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <Converter:BackgroundPercentConverter x:Key="backgroundPercentConverter"/>
</Window.Resources>
<DockPanel>
    <Label Content="{Binding PercentComplete}" Height="100" Width="200" 
           DockPanel.Dock="Top" Foreground="White" FontSize="28" 
           Background="{Binding PercentComplete, Converter={StaticResource backgroundPercentConverter}}" 
           HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
    <Button DockPanel.Dock="Bottom" Click="Button_Click" Width="100" Height="32">Click</Button>
</DockPanel>

主窗口.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new MyClass {PercentComplete = 0};
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        ((MyClass) DataContext).PercentComplete++;
    }
}

我的类.cs

class MyClass : INotifyPropertyChanged 
{
    private int _percentComplete;
    public int PercentComplete
    {
        get { return _percentComplete; }
        set
        {
            if (value >= 10)
                value = 0;
            _percentComplete = value;
            OnPropertyChanged("PercentComplete");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(String propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

背景百分比转换器.cs

public class BackgroundPercentConverter : IValueConverter
{
    private static readonly SolidColorBrush[] MyColors = new[]
                                                             {
           new SolidColorBrush(Color.FromRgb(229, 29, 37)),
           new SolidColorBrush(Color.FromRgb(252, 52, 0)),
           new SolidColorBrush(Color.FromRgb(253, 81, 0)),
           new SolidColorBrush(Color.FromRgb(255, 101, 1)),
           new SolidColorBrush(Color.FromRgb(255, 133, 0)),
           new SolidColorBrush(Color.FromRgb(254, 175, 0)),
           new SolidColorBrush(Color.FromRgb(221, 182, 3)),
           new SolidColorBrush(Color.FromRgb(173, 216, 2)),
           new SolidColorBrush(Color.FromRgb(138, 191, 62)),
           new SolidColorBrush(Color.FromRgb(47, 154, 69))
                                                             };


    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if ((int)value < 0 || (int)value >= MyColors.Length)
            return MyColors[0];

        return MyColors[(int)value];
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}
4

1 回答 1

1

你可以定义一个 StoryBoard，它有一个 ColorAnimation，它定义了一个从和到的颜色，即你想要在它们之间平滑插值的颜色。

您的动画应该以 SolidColorBrush 的 Color 属性为目标，该属性可以是定义为 Resource 然后由您的控件引用的属性（即您的 Label 在背景中使用 {StaticResource xxxxxx} 来引用它，或者您的动画可以针对直接在标签中的背景如果背景包含一个画笔，它是一个 SolidColorBrush（...通常是这种情况...但这完全取决于控件模板的设计方式）。

然后您需要开始和暂停动画并寻找与您的百分比相对应的动画位置。例如，您可以将 Duration 设置为 100 秒，然后您可以简单地将百分比值用作 TimeSpan 中的秒数。（可能必须设置 IsControllable=true）。

您将在加载控件时启动和暂停动画，然后根据您的百分比变化同步更改搜索位置。

请注意，始终运行动画可能是个坏主意，只是将范围值映射到演示颜色，但这是您所拥有的另一种选择。

否则坚持你的值转换器，你可以自己计算两种颜色之间的线性插值。请参阅此链接：

以下是一些与动画相关的链接：

于 2012-07-29T11:36:31.510 回答