WPF FAQ - Decorator Content Model

BorderThickness can be animated by using the ‘ThicknessAnimation’ class.

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

[XAML]

<!-- This example shows how to use the ThicknessAnimation to create
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>

To make the window display without this gray border, you need to set the ‘ResizeMode’ property of the window to ’NoResize’.

[XAML]
<Window x:Class='BorderlessWindow.Window1'
 xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
 Title='BorderlessWindow' Height='200' Width='200' 
 Background='White' WindowStyle='None' ResizeMode='NoResize'>
 <Border Padding='5' BorderBrush='#feca00' 
	 BorderThickness='3' Width='150' Height='150'>
 <TextBlock>Learn WPF!</TextBlock>
 </Border>
</Window>

The following example uses controllable storyboard actions to interactively control a storyboard.

[XAML]

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
  xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
  WindowTitle='Controlling a Storyboard' >
  <StackPanel Margin='20' >

    <!-- This rectangle is animated. -->
    <Rectangle Name='myRectangle'
      Width='100' Height='20' Margin='12,0,0,5' Fill='#AA3333FF' HorizontalAlignment='Left' />

    <!-- This StackPanel contains all the Buttons. -->
    <StackPanel Orientation='Horizontal' Margin='0,30,0,0'>

      <Button Name='BeginButton'>Begin</Button>
      <Button Name='PauseButton'>Pause</Button>
      <Button Name='ResumeButton'>Resume</Button>
      <Button Name='SeekButton'>Seek</Button>
      <Button Name='SkipToFillButton'>Skip To Fill</Button>
      <Button Name='SetSpeedRatioButton'>Triple Speed</Button>
      <Button Name='StopButton'>Stop</Button>

      <StackPanel.Triggers>

        <!-- Begin the Storyboard -->
        <EventTrigger RoutedEvent='Button.Click' SourceName='BeginButton'>
          <BeginStoryboard Name='MyBeginStoryboard'>
            <Storyboard >
              <DoubleAnimation 
                Storyboard.TargetName='myRectangle' 
                Storyboard.TargetProperty='Width' 
                Duration='0:0:5' From='100' To='500' />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>

        <!-- Pause the Storyboard -->
        <EventTrigger RoutedEvent='Button.Click' SourceName='PauseButton'>
          <PauseStoryboard BeginStoryboardName='MyBeginStoryboard' />
        </EventTrigger>

        <!-- Resume the Storyboard -->
        <EventTrigger RoutedEvent='Button.Click' SourceName='ResumeButton'>
          <ResumeStoryboard BeginStoryboardName='MyBeginStoryboard' />
        </EventTrigger>

         <!-- Seek one second into the storyboard’s active period. -->
         <EventTrigger RoutedEvent='Button.Click' SourceName='SeekButton'>
           <SeekStoryboard 
            BeginStoryboardName='MyBeginStoryboard' 
            Offset='0:0:1' Origin='BeginTime' />
        </EventTrigger>   

        <!-- Skip to Fill -->
        <EventTrigger RoutedEvent='Button.Click' SourceName='SkipToFillButton'>
          <SkipStoryboardToFill BeginStoryboardName='MyBeginStoryboard' />
        </EventTrigger>

        <!-- Stop the Storyboard -->
        <EventTrigger RoutedEvent='Button.Click' SourceName='StopButton'>
          <StopStoryboard BeginStoryboardName='MyBeginStoryboard' />
        </EventTrigger>

        <!-- Triple the speed of the Storyboard -->
        <EventTrigger RoutedEvent='Button.Click' SourceName='SetSpeedRatioButton'>
          <SetStoryboardSpeedRatio SpeedRatio='3' BeginStoryboardName='MyBeginStoryboard' />
        </EventTrigger>
      </StackPanel.Triggers>
    </StackPanel>
  </StackPanel>
</Page>