Animate Margem Mudança no Silverlight
-
13-09-2019 - |
Pergunta
Estou animando um redimensionamento fronteira, em Silverlight no entanto I também precisará remover gradualmente a margem em torno dele (atualmente 50). Mistura não parece gerar uma interpolação para a mudança de margem - ele só salta 50-0 de uma só vez. Existe uma maneira de conseguir isso?
Solução
O problema é que uma margem é realmente do tipo "System.Windows.Thickness" que não é um objeto de dependência, assim Esquerda, Superior, Direita e Inferior NÃO são propriedades de dependência e, portanto, não podem ser animados usando DoubleAnimation (que permite por interpolação).
O que é usado para animar a Margem é um ObjectAnimation que não faz interpolação. É por isso que você vê o salto margem da sua localização original para a nova localização. Como outro exemplo comum, o mesmo acontece quando você tenta animar a propriedade Visibilidade entre visível e entrou em colapso.
Você quer necessidade de fazer animação baseada temporizador, a fim de animar margem ou implementar seu próprio tipo de animação para Espessura objetos.
Outras dicas
Ben Lemmon dá uma solução elegante: http://blogs.msdn.com/blemmon/archive/2009/03/18/animating-margins-in-silverlight.aspx
Aqui é uma versão atualizada que permite animar a partir de dentro 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);
}
}
}
E então você pode fazer isso em 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"/>
Note que, se você não definir a propriedade Target para um DoubleAnimation em XAML, você não será capaz de exibir o controle / página no Blend. Para corrigir isso, basta adicionar uma propriedade de destino falso (no código acima eu adicionei a propriedade de opacidade que é um valor duplo), E será anulado em tempo de execução de qualquer maneira