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

Concepts

Animation Overview

Reference

ThicknessAnimation

BorderThickness

Border

Other Resources

Animation and Timing

Animation and Timing How-to Topics

Animation and Timing Samples