Le moteur d'animation de silverlight ne permet d'animer que certains types de propriétés : des couleurs, des doubles et des points. Il n'est a priori pas simple d'animer une propriété comme Margin. En rusant un peu, on se rend compte qu'il est tout à fait possible de le faire. L'idée est de passer par une classe intermédiaire qui possède une propriété simple et de faire la conversion vers le type Thickness utilisé pour représenté une Margin. Afin de facilité l'utilisation de cette classe depuis le Xaml, elle hérite de Panel et peut donc être posée dans n'importe quel conteneur. Voici donc un petit exemple que vous retrouverez bien sur dans le projet SLExtensions.
La classe wrapper
namespace SLExtensions.Controls.Animation
{
...
public class MarginWrapper : Panel
{
public MarginWrapper()
{
// Hide this control. It's just a wrapper and does not need to be shown in the GUI
this.Visibility = Visibility.Collapsed;
this.Loaded += new RoutedEventHandler(MarginWrapper_Loaded);
}
void MarginWrapper_Loaded(object sender, RoutedEventArgs e)
{
EnsureElement();
}
public string ElementName { get; set; }
private FrameworkElement element;
private void EnsureElement()
{
if (element == null)
{
element = this.FindName(ElementName) as FrameworkElement;
if (element != null)
{
Thickness margin = element.Margin;
if (margin != null)
{
MarginLeft = margin.Left;
MarginTop = margin.Top;
MarginRight = margin.Right;
MarginBottom = margin.Bottom;
}
}
}
}
#region MarginLeft
public double MarginLeft
{
get
{
return (double)GetValue(MarginLeftProperty);
}
set
{
SetValue(MarginLeftProperty, value);
}
}
/// <summary>
/// MarginLeft depedency property.
/// </summary>
public static readonly DependencyProperty MarginLeftProperty =
DependencyProperty.Register(
"MarginLeft",
typeof(double),
typeof(MarginWrapper),
new PropertyMetadata((d, e) => ((MarginWrapper)d).OnMarginLeftChanged((double)e.OldValue, (double)e.NewValue)));
/// <summary>
/// handles the MarginLeftProperty changes.
/// </summary>
/// <param name="oldValue">The old value.</param>
/// <param name="newValue">The new value.</param>
private void OnMarginLeftChanged(double oldValue, double newValue)
{
EnsureElement();
if (element != null)
{
Thickness margin = element.Margin;
if (margin == null)
margin = new Thickness();
margin.Left = newValue;
element.Margin = margin;
}
}
#endregion MarginLeft
...
}
}
Un exemple de Xaml
<UserControl x:Class="SLExtensions.Showcase.PageAnimation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:anim="clr-namespace:SLExtensions.Controls.Animation;assembly=SLExtensions.Controls"
xmlns:slei="clr-namespace:SLExtensions.Input;assembly=SLExtensions"
>
<UserControl.Resources>
<Storyboard x:Name="anim1">
<DoubleAnimation Storyboard.TargetName="marginWrapper1" Storyboard.TargetProperty="MarginLeft" To="150" Duration="0:00:03"/>
</Storyboard>
</UserControl.Resources>
<StackPanel x:Name="LayoutRoot" Background="White">
<StackPanel Orientation="Horizontal">
<Button Content="Start" slei:CommandService.Command="BeginStoryboard" slei:CommandService.CommandParameter="anim1" />
<Button Content="Stop" slei:CommandService.Command="StopStoryboard" slei:CommandService.CommandParameter="anim1"/>
<Grid Width="400" Height="100">
<anim:MarginWrapper x:Name="marginWrapper1" ElementName="rect1" />
<Rectangle x:Name="rect1" Fill="Red" Width="50" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="50,0,0,0" />
</Grid>
</StackPanel>
</StackPanel>
</UserControl>