How to: Animate a BorderThickness Value
This example shows how to animate changes to the thickness of a border by using the ThicknessAnimation class.
Example
The following example animates the thickness of a border by using ThicknessAnimation. The example uses the BorderThickness property of Border.
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;
namespace SDKSamples
{
public class ThicknessAnimationExample : Page
{
public ThicknessAnimationExample()
{
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
// Create a Border which will be the target of the animation.
Border myBorder = new Border();
myBorder.Background = Brushes.Gray;
myBorder.BorderBrush = Brushes.Black;
myBorder.BorderThickness = new Thickness(1);
myBorder.Margin = new Thickness(0, 60, 0, 20);
myBorder.Padding = new Thickness(20);
// Assign the border a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"myAnimatedBorder", myBorder);
ThicknessAnimation myThicknessAnimation = new ThicknessAnimation();
myThicknessAnimation.Duration = TimeSpan.FromSeconds(1.5);
myThicknessAnimation.FillBehavior = FillBehavior.HoldEnd;
// Set the From and To properties of the animation.
// BorderThickness animates from left=1, right=1, top=1, and bottom=1
// to left=28, right=28, top=14, and bottom=14 over one and a half seconds.
myThicknessAnimation.From = new Thickness(1, 1, 1, 1);
myThicknessAnimation.To = new Thickness(28, 14, 28, 14);
// Set the animation to target the Size property
// of the object named "myArcSegment."
Storyboard.SetTargetName(myThicknessAnimation, "myAnimatedBorder");
Storyboard.SetTargetProperty(
myThicknessAnimation, new PropertyPath(Border.BorderThicknessProperty));
// Create a storyboard to apply the animation.
Storyboard ellipseStoryboard = new Storyboard();
ellipseStoryboard.Children.Add(myThicknessAnimation);
// Start the storyboard when the Path loads.
myBorder.Loaded += delegate(object sender, RoutedEventArgs e)
{
ellipseStoryboard.Begin(this);
};
StackPanel myStackPanel = new StackPanel();
myStackPanel.HorizontalAlignment = HorizontalAlignment.Center;
myStackPanel.Children.Add(myBorder);
Content = myStackPanel;
}
}
}
<!-- This example shows how to use the ThicknessAnimation to create
an animation on the BorderThickness property of a Border. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Border Background="#99FFFFFF" BorderBrush="#CCCCFF" BorderThickness="1"
Margin="0,60,0,20" Padding="20" >
<Border.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- BorderThickness animates from left=1, right=1, top=1, and bottom=1 to
left=28, right=28, top=14, and bottom=14 over one second. -->
<ThicknessAnimation
Storyboard.TargetProperty="BorderThickness"
Duration="0:0:1.5" FillBehavior="HoldEnd" From="1,1,1,1" To="28,14,28,14" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<TextBlock>
This example shows how to use the ThicknessAnimation to create
an animation on the BorderThickness property of a Border.
</TextBlock>
</Border>
</StackPanel>
</Page>
For the complete sample, see Animation Example Gallery.
See Also
Tasks
How to: Animate the Thickness of a Border by Using Key Frames