Animate RadialGradient : Color Animation « Windows Presentation Foundation « C# / CSharp Tutorial






  1. C# / CSharp Tutorial
  2. Windows Presentation Foundation
  3. Color Animation
<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[1].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>
WPF Animate Radial Gradient




24.109.Color Animation
24.109.1.Animate RadialGradientAnimate RadialGradient
24.109.2.Animate OpacityAnimate Opacity
24.109.3.Animate GradientStop and Button controlAnimate GradientStop and Button control
24.109.4.Animate the Color of a Brush with Indirect Property TargetingAnimate the Color of a Brush with Indirect Property Targeting
24.109.5.Opacity AnimationOpacity Animation
24.109.6.Animate the background colorAnimate the background color
24.109.7.Animate the brush's RadiusX property.Animate the brush's RadiusX property.