1

2 つの背景色間の移行をよりスムーズにする方法を知りたいです。ある種のフェードトランジションを行うことは可能ですか?

動作を説明するために、この小さなサンプル プロジェクトを作成しました。

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

1 に答える 1

1

from と to の色、つまりスムーズに補間したい色を定義する ColorAnimation を持つ StoryBoard を定義できます。

アニメーションは、SolidColorBrush の Color プロパティをターゲットにする必要があります。これは、リソースとして定義され、コントロールによって参照されるものです (つまり、Label はバックグラウンドで {StaticResource xxxxxx} を使用して参照するか、アニメーションをターゲットにすることができます)。 Background に SolidColorBrush である Brush が含まれている場合は、Label の Background を直接指定します (...通常はそうですが、コントロールの Template の設計方法に完全に依存します)。

次に、アニメーションを開始して一時停止し、パーセンテージに対応するアニメーションの位置をシークする必要があります。たとえば、Duration を 100 秒に設定し、パーセンテージ値を TimeSpan の秒数として単純に使用できます。(IsControllable=true を設定する必要がある場合があります)。

コントロールがロードされたときにアニメーションを開始して一時停止し、パーセンテージの変更に同期してシーク位置を変更します。

範囲値をプレゼンテーションの色にマップするためだけに、アニメーションを常に実行しておくのはおそらく悪い考えですが、それはあなたが持っているものの別のオプションです。

それ以外の場合は、valueconverter に固執すると、2 つの色の間の線形補間を自分で計算できます。このリンクを参照してください：

アニメーションに関連するいくつかのリンクを次に示します。

于 2012-07-29T11:36:31.510 に答える