Question

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

我创建了这个小样本项目来说明行为。

MainWindow.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>

MainWindow.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++;
    }
}

MyClass.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));
        }
    }
}

BackgroundPercentConverter.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();
    }
}

Answer 1

你可以定义一个StoryBoard，它有一个ColorAnimation，它定义了一个from和to颜色，即你想要平滑插入的颜色。

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

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

您可以在加载控件时启动和暂停动画，然后与您的百分比更改同步更改搜索位置。

注意，让动画一直运行可能是一个坏主意，只是将范围值映射到演示文稿颜色，但它是你拥有的另一种选择。

否则坚持使用您的valueconverter，您可以自己计算2种颜色之间的线性插值。看到这个链接：

Algorithm: How do I fade from Red to Green via Yellow using RGB values?

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

在propertyChanged上的背景颜色之间淡出

1 个答案: