2017-01-13 4 views
0

私のアプリケーションでは、幅に基づいて情報を示す矩形があり、これはカスタムプログレスバーです。変更がスムーズでなく、バ​​ーが不安定になりますが、データが変更されたときにスムーズなアニメーションを作成したいので、ViewModelsプロパティにその幅をバインドしません。INotifyProperty変化するデータの変更とアニメーション

したがってその基礎となる依存関係のPropertyChangedイベントに反応している私のイベントハンドラはUIに反映されるべきであるが、矩形は異なる方法で処理され、それぞれの特性に通知されます。基本的には

Rectangle.BeginAnimation(FrameworkElement.WidthProperty, 
    new DoubleAnimation(width, TimeSpan.FromMilliseconds(200))); 

は、私はそれは長方形の中にwidthプロパティをアニメーション化することにより、アニメーションを取得しますように、このプロパティをアニメーション化するために、次に変更し、ときPropertyChangedイベントを発生させ、幅のプロパティを導入するのが妥当であるかどうか興味があった走ります私のViewModel。そのシナリオでカスタムプロパティをアニメートすることも可能ですか?

答えて

2

設定すると、FrameworkElementのWidthプロパティをアニメーション化する添付プロパティTargetWidthを作成することができます。

<Rectangle ... local:FrameworkElementExtension.TargetWidth="{Binding RectangleWidth}" /> 
+0

私は '幅のデフォルト値を追加したにもかかわらず:あなたは今、直接TargetWidth

よう
Rectangle.SetTargetWidth(width); 

を設定したり、ビューモデルのプロパティにバインドして

public static class FrameworkElementExtension { public static readonly DependencyProperty TargetWidthProperty = DependencyProperty.RegisterAttached( "TargetWidth", typeof(double), typeof(FrameworkElementExtension), new PropertyMetadata(TargetWidthPropertyChanged)); public static double GetTargetWidth(this FrameworkElement obj) { return (double)obj.GetValue(TargetWidthProperty); } public static void SetTargetWidth(this FrameworkElement obj, double value) { obj.SetValue(TargetWidthProperty, value); } private static void TargetWidthPropertyChanged( DependencyObject obj, DependencyPropertyChangedEventArgs e) { var element = obj as FrameworkElement; if (element != null) { if (double.IsNaN(element.Width)) { element.Width = 0; } element.BeginAnimation( FrameworkElement.WidthProperty, new DoubleAnimation((double)e.NewValue, TimeSpan.FromSeconds(0.2))); } } } 

'' Rectangle'のどこかにNaNが現れました。したがって、 'element.ActualWidth'を使って参照することによって' fromValue'を 'DoubleAnimation'に追加しなければなりませんでした。アニメーションについての簡単な質問:最後のアニメーションがまだ完成していない間に値の更新を取得すると仮定します。最初のアニメーションの後に2番目のアニメーションが実行されるか、 –

+0

現在の値からすぐに開始します。したがって、アニメーションのFrom値を設定することはお勧めしません。幅が最初はNaNでないことを確認してください。 – Clemens

+0

XAMLの 'Rectangle'のデフォルトの' Width'を手作業で設定していたのですが、NaNを防ぐために手動で設定するのは奇妙なことでした。今は期待どおりに動作します。 –

関連する問題