Setting a LinearGradientBrush instead of a solid color to a storyboard.targetProperty in a VisualState

StackOverflow https://stackoverflow.com/questions/6024812

Question

I'm wondering how I can set a Storyboard.TargetProperty to a LinearGradientBrush instead of a solid color. I'm new to VisualStates so please let me know if I'm not given enough information for my question. Mostly I just want to set a Gradient instead of a solid color and can't figure out how. Thanks for any help. I'm working from an example I found at http://msdn.microsoft.com/en-us/library/ms753328.aspx.

 <VisualState x:Name="Disabled">
    <Storyboard>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                            Storyboard.TargetName="Border">
                <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource DisabledControlDarkColor}" />
              </ColorAnimationUsingKeyFrames>
              <ColorAnimationUsingKeyFrames
                  Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                            Storyboard.TargetName="Border">
                <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource DisabledForegroundColor}" />
              </ColorAnimationUsingKeyFrames>
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                            Storyboard.TargetName="Border">
                <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource DisabledBorderDarkColor}" />
              </ColorAnimationUsingKeyFrames>
            </Storyboard>
          </VisualState>
Was it helpful?

Solution

The code you pasted animates certain stops in the existing gradient which is applied as the Background property. If you just want to replace the whole Background with a new brush (which happens to be a LinearGradientBrush) you can do so using a ObjectAnimationUsingKeyFrames.

The documentation even gives this example:

      <Storyboard>

        <!-- ObjectAnimationUsingKeyFrames is used to animate properties that take
             an object as a value. This animation lasts for 4 seconds using 3 KeyFrames which
             swap different brush objects at regular intervals, making the background of the Page
             change. -->
        <ObjectAnimationUsingKeyFrames
          Storyboard.TargetProperty="Background"
          Duration="0:0:4" RepeatBehavior="Forever">
        <ObjectAnimationUsingKeyFrames.KeyFrames>

          <!-- Note: Only discrete interpolation (DiscreteObjectKeyFrame) is available for 
          use with ObjectAnimationUsingKeyFrames which merely swaps objects according to
          a specified timeline. Other types of interpolation are too problematic to apply
          to objects.  -->

          <!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes 
               to a LinearGradientBrush after the first second of the animation. -->
          <DiscreteObjectKeyFrame KeyTime="0:0:1">
            <DiscreteObjectKeyFrame.Value>
              <LinearGradientBrush>
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="Yellow" Offset="0.0" />
                  <GradientStop Color="Orange" Offset="0.5" />
                  <GradientStop Color="Red" Offset="1.0" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </DiscreteObjectKeyFrame.Value>
          </DiscreteObjectKeyFrame>

          <!-- ... -->
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top