Question

I’ve got the following Windows Phone code which is used to change the color of a Rectangle from Black to Red.

<Grid x:Name="LayoutRoot">
  <phone:Pivot x:Name="MyPivot" >
    <phone:PivotItem x:Name="MyPivotItem">
      <Canvas x:Name="MyCanvas">
        <Canvas.Resources>
          <Storyboard x:Name="MyStoryboard">
            <ColorAnimationUsingKeyFrames
              Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
              AutoReverse="True">
                <EasingColorKeyFrame KeyTime="00:00:0" Value="Black" />
                <EasingColorKeyFrame KeyTime="00:00:0.5" Value="Red" />
            </ColorAnimationUsingKeyFrames>
          </Storyboard>
        </Canvas.Resources>
      </Canvas>
    </phone:PivotItem>
  </phone:Pivot>
</Grid>

What I’d like to do is make this more dynamic so that I can change the colors used in the EasingColorKeyFrames from the code-behind page. Is it possible to bind the Value of my EasingColorKeyFrames to a property in my code-behind page?

Answer 1

If you’re just trying to change the colors from a code-behind page then just give your frames an x:Name and set their values in the code behind.

...
<EasingColorKeyFrame KeyTime="00:00:0" x:Name="start" Value="Black" />
<EasingColorKeyFrame KeyTime="00:00:0.5" x:Name="end" Value="Red" />
...

Code-behind:

private void ChangeColors()
{
  start.Value = Colors.Green;
  end.Value = Colors.Blue;
}