Post
Ask Question

Color Animation in RadialGradientBrush using XAML

This code snippet below creates a Canvas control on a Grid.

The Canvas control is filled with a RadialGradientBrush with 5 different colors and color stops.

On Windows.Triggers, we add a trigger on Window.Loaded event and using a StoryBoard, we add ColorAnimation on each GradientStop and change color for current color to next color in the Gradient Stops.
  1. <Window x:Class="InkSample.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="MainWindow" Height="350" Width="525">  
  5.   
  6.     <Window.Triggers>  
  7.         <EventTrigger RoutedEvent="Window.Loaded">  
  8.             <EventTrigger.Actions>  
  9.                 <BeginStoryboard>  
  10.                     <Storyboard RepeatBehavior="Forever" AutoReverse="True">  
  11.                         <ColorAnimation  Storyboard.TargetName="Canvas1"  
  12.                             Storyboard.TargetProperty = "(Canvas.Background).(RadialGradientBrush.GradientStops)[0].(GradientStop.Color)"  
  13.                             From="Red" To="Orange" Duration="0:0:5"/>  
  14.                         <ColorAnimation Storyboard.TargetName="Canvas1"  
  15.                               Storyboard.TargetProperty = "(Canvas.Background).(RadialGradientBrush.GradientStops)[1].(GradientStop.Color)"  
  16.                               From="Orange" To="Green" Duration="0:0:5"/>  
  17.                         <ColorAnimation Storyboard.TargetName="Canvas1"  
  18.                               Storyboard.TargetProperty = "(Canvas.Background).(RadialGradientBrush.GradientStops)[2].(GradientStop.Color)"  
  19.                               From="Green" To="Blue" Duration="0:0:5"/>  
  20.                         <ColorAnimation Storyboard.TargetName="Canvas1"  
  21.                               Storyboard.TargetProperty = "(Canvas.Background).(RadialGradientBrush.GradientStops)[3].(GradientStop.Color)"  
  22.                               From="Blue" To="Black" Duration="0:0:5"/>  
  23.                         <ColorAnimation Storyboard.TargetName="Canvas1"  
  24.                               Storyboard.TargetProperty = "(Canvas.Background).(RadialGradientBrush.GradientStops)[4].(GradientStop.Color)"  
  25.                               From="Black" To="Red" Duration="0:0:5"/>  
  26.                     </Storyboard>  
  27.                 </BeginStoryboard>  
  28.             </EventTrigger.Actions>  
  29.         </EventTrigger>  
  30.     </Window.Triggers>  
  31.   
  32.     <Grid>  
  33.         <Canvas Name="Canvas1" >  
  34.             <Canvas.Background>  
  35.                 <RadialGradientBrush  GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">                   
  36.                     <GradientStop Color="Red" Offset="0.0" />  
  37.                     <GradientStop Color="Orange" Offset="0.40" />   
  38.                     <GradientStop Color="Green" Offset="0.60" />  
  39.                     <GradientStop Color="Blue" Offset="0.80" />  
  40.                     <GradientStop Color="Black" Offset="1.00" />  
  41.                 </RadialGradientBrush >  
  42.             </Canvas.Background>  
  43.         </Canvas>  
  44.     </Grid>  
  45. </Window>