WPF animate linear gradient

Question

You can animate linear gradient by:

<Storyboard x:Key="Focused" >
<DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty=
"BorderBrush.GradientStops[0].Offset" Storyboard.TargetName="Bd"/>
</Storyboard>

Fine so far. You can set a color To animate it to. How can you set the To property to point to a gradient resource you already have?

Is it possible to use borderbrush target property without the offset? In most of the cases, I need to fully switch a gradient.

Answer 1

Complete guess, no testing to back it up, use with heaps of critical thinking etc... but exactly how do you mean to "fade" between one gradient and another? I mean they are object instances, each may have many different gradient points etc. Unless MS built in some magic sauce the animator won't check for this (nor am I certain you could set up an algorithm that will satisfy all their customers).

Rather try and set up a gradient and animate the gradient points between colors.

Answer 2

You can use ColorAnimation to animate it from one Color to another.

Answer 3

ok then, how can i use color animation to fade from one gradient offset to another, where the destination color is not hardcoded but its coming from a resource?

example:

  <!-- @ MouseOver -->
<LinearGradientBrush x:Key="MouseOverBrush" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Color="#FF656565" Offset="0"/>
    <GradientStop Color="#33656565" Offset="1"/>
</LinearGradientBrush>

<Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
 <Setter Property="Foreground" Value="{StaticResource CheckBoxForeground}"/>
 <Setter Property="Background" Value="{StaticResource CheckBoxGradientBrush}"/>
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="{x:Type CheckBox}">
    <Border x:Name="Bd" 
      Background="{TemplateBinding Background}">
     <ContentPresenter 
      Content="{TemplateBinding Content}"
      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
      RecognizesAccessKey="True"/>
    </Border>
    <ControlTemplate.Triggers>
     <Trigger Property="IsMouseOver" Value="true">
      <Setter TargetName="Bd" Property="Background" Value="{StaticResource MouseOverBrush}"/>   
     </Trigger>
    </ControlTemplate.Triggers>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

if i want to animate bd's background on mouse over to mouseoverbrush, how can i do it?

Answer 4

You have two choices, depending on the effect you want and whether or not you know the structure of the brushes involved:

1. You can fade from any brush to another using a <VisualBrush> that has a canvas containing two overlapping 1x1 rectangles painted with each of the two brushes. You can animate the opacity of the two rectangles within the VisualBrush to fade from one brush to the other. This works no matter what the actual brushes are - for example, you can fade from a radial gradient to a linear gradient or from a tile brush to a visual brush.

2. You can fade between two brushes of similar structure by animating the invidividual properties, as shown in your initial example. For the storyboard's "To" component simply use a Binding to the given component of the source brush. This has the advantage of smooth transition of structure. For example, if you fade between two radial brushes with two different center points, the radial center will actually move across the object instead of the one fading out and the other fading in.