The X and Y properties of this TranslateTransform are each animated from -50 to 50
<Window x:Class="Workspace.DockExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Workspace" Width="640" Height="480">
<StackPanel Orientation="Horizontal">
<Canvas Width="250" Height="250">
<Rectangle
Height="50" Width="50" Fill="Red" Stroke="Blue" StrokeThickness="2"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="AnimatedTranslateTransform" X="0" Y="0" />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
<Button Name="startButton" Margin="0,0,2,0">Start</Button>
<Button Name="stopButton">Stop</Button>
<StackPanel.Triggers>
<EventTrigger SourceName="startButton" RoutedEvent="Button.Click">
<BeginStoryboard Name="myBeginStoryboard">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="AnimatedTranslateTransform"
Storyboard.TargetProperty="X"
From="-50" To="50" Duration="0:0:2" />
<DoubleAnimation Storyboard.TargetName="AnimatedTranslateTransform"
Storyboard.TargetProperty="Y"
From="-50" To="50" Duration="0:0:2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger SourceName="stopButton" RoutedEvent="Button.Click">
<StopStoryboard BeginStoryboardName="myBeginStoryboard" />
</EventTrigger>
</StackPanel.Triggers>
</StackPanel>
</Window>
Related examples in the same category
