Silverlightのマージンの変更をアニメーション化

Question

私は、私も徐々に（現在は50）、その周囲の余白を削除する必要があるが、境界はSilverlightでサイズを変更するアニメーションしています。 Blendはマージンの変更のためのトゥイーンを生成していないようだ - それはただ一度に50から0にジャンプします。これを達成する方法はありますか？

Answer 1

問題は、このように左、上、右、下は依存関係プロパティではありませんので、可能にDoubleAnimationを（使用してアニメーション化することができない、マージンのタイプが本当にあるとした依存関係オブジェクトではありません「System.Windows.Thickness」であります）トゥイーンためます。

どのようなマージンをアニメーション化するために使用されることはありませんトゥイーンを行いObjectAnimationです。あなたがその新しい場所に元の場所からのマージンジャンプを参照してください理由です。あなたが可視および共有間のVisibilityプロパティをアニメーション化しようとすると、他の一般的な例として、同じことが起こります。

あなたはどちらかのマージンをアニメーションや厚さのオブジェクトのための独自のアニメーションの種類を実装するためにタイマーベースのアニメーションを実行する必要があります。

Answer 2

ベン・レモンは、エレガントなソリューションを提供します：<のhref = "http://blogs.msdn.com/blemmon/archive/2009/03/18/animating-margins-in-silverlight.aspx" のrel = "nofollowをnoreferrer 「> http://blogs.msdn.com/blemmon/archive/2009/03/18/animating-margins-in-silverlight.aspx の

Answer 3

ここでは、更新されたバージョンであることあなたはXAML

の中からアニメーション化することができます

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace NiceCards.Animations
{
    public class ThicknessAnimationX
    {
        public static readonly DependencyProperty ElementProperty = DependencyProperty.RegisterAttached("Element", typeof(DependencyObject), typeof(DoubleAnimation), new PropertyMetadata(new PropertyChangedCallback(OnElementPropertyChanged)));

        // The time along the animation from 0-1
        public static DependencyProperty TimeProperty = DependencyProperty.RegisterAttached("Time", typeof(double), typeof(DoubleAnimation), new PropertyMetadata(OnTimeChanged));

        // The object being animated
        public static DependencyProperty TargetProperty = DependencyProperty.RegisterAttached("Target", typeof(DependencyObject), typeof(ThicknessAnimationX), null);
        public static DependencyProperty TargetPropertyProperty = DependencyProperty.RegisterAttached("TargetProperty", typeof(DependencyProperty), typeof(DependencyObject), null);

        public static readonly DependencyProperty FromProperty = DependencyProperty.RegisterAttached("From", typeof(Thickness), typeof(DoubleAnimation), null);
        public static readonly DependencyProperty ToProperty = DependencyProperty.RegisterAttached("To", typeof(Thickness), typeof(DoubleAnimation), null);

        public static void SetElement(DependencyObject o, DependencyObject value)
        {
            o.SetValue(ElementProperty, value);
        }

        public static DependencyObject GetElement(DependencyObject o)
        {
            return (DependencyObject)o.GetValue(ElementProperty);
        }

        private static void OnElementPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (e.NewValue != null)
            {
                DoubleAnimation doubleAnimation = (DoubleAnimation)d;

                doubleAnimation.SetValue(TargetProperty, e.NewValue);
                doubleAnimation.From = 0;
                doubleAnimation.To = 1;
                doubleAnimation.SetValue(TargetPropertyProperty, FrameworkElement.MarginProperty);
                Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(ThicknessAnimationX.Time)"));
                Storyboard.SetTarget(doubleAnimation, doubleAnimation);
            }
        }


        private static void OnTimeChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            DoubleAnimation animation = (DoubleAnimation)sender;
            double time = GetTime(animation);
            Thickness from = (Thickness)sender.GetValue(FromProperty);
            Thickness to = (Thickness)sender.GetValue(ToProperty);
            DependencyProperty targetProperty = (DependencyProperty)sender.GetValue(TargetPropertyProperty);
            DependencyObject target = (DependencyObject)sender.GetValue(TargetProperty);
            target.SetValue(targetProperty, new Thickness((to.Left - from.Left) * time + from.Left,
                                                          (to.Top - from.Top) * time + from.Top,
                                                          (to.Right - from.Right) * time + from.Right,
                                                          (to.Bottom - from.Bottom) * time + from.Bottom));
        }

        public static double GetTime(DoubleAnimation animation)
        {
            return (double)animation.GetValue(TimeProperty);
        }

        public static void SetTime(DoubleAnimation animation, double value)
        {
            animation.SetValue(TimeProperty, value);
        }

        public static Thickness GetFrom(DoubleAnimation animation)
        {
            return (Thickness)animation.GetValue(FromProperty);
        }

        public static void SetFrom(DoubleAnimation animation, Thickness value)
        {
            animation.SetValue(FromProperty, value);
        }

        public static Thickness GetTo(DoubleAnimation animation)
        {
            return (Thickness)animation.GetValue(ToProperty);
        }

        public static void SetTo(DoubleAnimation animation, Thickness value)
        {
            animation.SetValue(ToProperty, value);
        }
    }   
}

そして、あなたはXAMLでこれを行うことができます。

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="Positions">
        <VisualStateGroup.Transitions>
            <VisualTransition GeneratedDuration="0:0:0.2"/>
        </VisualStateGroup.Transitions>
        <VisualState x:Name="Left">                    
            <Storyboard>
                <DoubleAnimation Duration="0:0:0.3" NiceCards:ThicknessAnimationX.To="0,0,0,0" NiceCards:ThicknessAnimationX.Element="{Binding ElementName=rectangle1}" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Opacity"/>
            </Storyboard>                       
        </VisualState>
        <VisualState x:Name="Right">                    
            <Storyboard>
                <DoubleAnimation Duration="0:0:0.3" NiceCards:ThicknessAnimationX.To="0,200,0,0" NiceCards:ThicknessAnimationX.Element="{Binding ElementName=rectangle1}" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Opacity"/>
            </Storyboard>                    
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Height="100" HorizontalAlignment="Left" Margin="23,25,0,0" x:Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200" Fill="#FF1BAA00"/>

あなたはXAMLでDoubleAnimationにTargetプロパティを設定しない場合、あなたはBlendでコントロール/ページを表示することができませんので注意してください。この問題を解決するには、（私は二重の値である不透明度プロパティを追加し、上記のコードで）だけで偽のtargetプロパティを追加し、そして、それはとにかく、実行時に上書きされます。