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.

<!-- 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

Reference

ThicknessAnimation
BorderThickness
Border

Concepts

Animation Overview

Other Resources

Animation and Timing
Animation and Timing How-to Topics
Animation and Timing Samples