Live Chat Icon For mobile
Live Chat Icon

WPF FAQ - Decorator Content Model

Find answers for the most frequently asked questions
Expand All Collapse All

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.


<!-- This example shows how to use the ThicknessAnimation to create
an animation on the BorderThickness property of a Border. -->
<Page  xmlns=''
  xmlns:x='' >

  <StackPanel Orientation='Vertical' HorizontalAlignment='Center'>
    <Border Background='#99FFFFFF' BorderBrush='#CCCCFF' BorderThickness='1'
    Margin='0,60,0,20' Padding='20'  >
        <EventTrigger RoutedEvent='Border.Loaded'>

              <!-- 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. -->
                Duration='0:0:1.5' FillBehavior='HoldEnd' From='1,1,1,1' To='28,14,28,14' />
        This example shows how to use the ThicknessAnimation to create
        an animation on the BorderThickness property of a Border.

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

<Window x:Class='BorderlessWindow.Window1'
 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>

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


<Page xmlns=''
  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>


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

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

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

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

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

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

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

Share with

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

Please submit your question and answer.