Animate RadialGradient

image_pdfimage_print


   
     
<Window x:Class="Animation.AnimateRadialGradient"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AnimateRadialGradient" Height="300" Width="300">
  <Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Fill.GradientOrigin"
                                           RepeatBehavior="Forever" >
              <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:0"></LinearPointKeyFrame>
              <DiscretePointKeyFrame Value="0.3,0.7" KeyTime="0:0:25"></DiscretePointKeyFrame>
              <DiscretePointKeyFrame Value="0.5,0.9" KeyTime="0:0:28"></DiscretePointKeyFrame>
              <DiscretePointKeyFrame Value="0.7,0.3" KeyTime="0:0:24"></DiscretePointKeyFrame>
            </PointAnimationUsingKeyFrames>
            <ColorAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Fill.GradientStops&#91;1&#93;.Color"
              To="Black"  Duration="0:0:10"
              AutoReverse="True" RepeatBehavior="Forever"></ColorAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Window.Triggers>
    <Grid>
      <Ellipse Name="ellipse" Margin="5" Grid.Row="1" Stretch="Uniform">
        <Ellipse.Fill>
          <RadialGradientBrush
             RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.3">
            <GradientStop Color="White" Offset="0" ></GradientStop>
            <GradientStop Color="Blue" Offset="1" ></GradientStop>            
          </RadialGradientBrush>
        </Ellipse.Fill>
      </Ellipse>
    </Grid>
</Window>