Live Chat Icon For mobile
Live Chat Icon

How can I animate the thickness of a border by using ThicknessAnimation ?

Platform: WPF| Category: Border

The following example animates the thickness of a border by using the ‘ThicknessAnimation’ property.

The example uses the ’BorderThickness’ property of Border.

[XAML]

<!-- an animation on the BorderThickness property of a Border. -->
<Page  xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
  xmlns:x='http://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>

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.