sdk/samples/WPFSamples/keyframes/csharp/coloranimationusingkeyframesexample.xaml

   1 <Page  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   2   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   3   WindowTitle="ThicknessAnimationUsingKeyFrames Example">
   4
   5   <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
   6     <Border Background="#99FFFFFF"  BorderThickness="28"
   7     Margin="0,60,0,20" Padding="20" >
   8       <Border.BorderBrush>
   9         <SolidColorBrush x:Name="MyAnimatedBrush" Color="Green" />
  10       </Border.BorderBrush>
  11       <Border.Triggers>
  12         <EventTrigger RoutedEvent="Border.Loaded">
  13           <BeginStoryboard>
  14             <Storyboard>
  15
  16               <!-- Animate from green to red using a linear key frame, from red to
  17               yellow using a discrete key frame, and from yellow back to green with
  18               a spline key frame. This animation repeats forever. -->
  19               <ColorAnimationUsingKeyFrames
  20                 Storyboard.TargetProperty="(SolidColorBrush.Color)"
  21                 Storyboard.TargetName="MyAnimatedBrush"
  22                 Duration="0:0:6" FillBehavior="HoldEnd" RepeatBehavior="Forever">
  23                 <ColorAnimationUsingKeyFrames.KeyFrames>
  24
  25                   <!-- Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
  26                   a smooth, linear animation between values. -->
  27                   <LinearColorKeyFrame Value="Red" KeyTime="0:0:2" />
  28
  29                   <!-- In the next half second, go to yellow. DiscreteColorKeyFrame creates a
  30                   sudden jump between values. -->
  31                   <DiscreteColorKeyFrame Value="Yellow" KeyTime="0:0:2.5" />
  32
  33                   <!-- In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame
  34                   creates a variable transition between values depending on the KeySpline property. In this example,
  35                   the animation starts off slow but toward the end of the time segment, it speeds up exponentially.-->
  36                   <SplineColorKeyFrame Value="Green" KeyTime="0:0:4.5" KeySpline="0.6,0.0 0.9,0.00" />
  37                 </ColorAnimationUsingKeyFrames.KeyFrames>
  38               </ColorAnimationUsingKeyFrames>
  39             </Storyboard>
  40           </BeginStoryboard>
  41         </EventTrigger>
  42       </Border.Triggers>
  43
  44       <TextBlock>
  45         This example shows how to use the ColorAnimationUsingKeyFrames to create
  46         an animation on the BorderBrush property of a Border.
  47       </TextBlock>
  48     </Border>
  49
  50   </StackPanel>
  51 </Page>