views:

401

answers:

1

I was looking for a way to change an Image during a storyboard, or more specifically, change the Source property of the image to point to a new image resource. There seems to be a StringAnimationUsingKeyFrames and a DiscreteStringKeyFrame but this does not work (as far as I can tell) since the Source property of the Image is of type ImageSource

My current storyboard looks like this

     <Storyboard x:Key="TransitionImage">
  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
   <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0.2"/>
   <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1"/>
  </DoubleAnimationUsingKeyFrames>
  <StringAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(Image.Source)">
   <DiscreteStringKeyFrame KeyTime="00:00:00.7000000" Value="check_24.png"/><!-- This does not work -->
  </StringAnimationUsingKeyFrames>
  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
   <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0.2"/>
   <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1"/>
  </DoubleAnimationUsingKeyFrames>
 </Storyboard>

and the image

     <Image x:Name="image" Source="delete_24.png" Width="32" Height="32" Margin="8" RenderTransformOrigin="0.5,0.5" >
  <Image.RenderTransform>
   <TransformGroup>
    <ScaleTransform/>
    <SkewTransform/>
    <RotateTransform/>
    <TranslateTransform/>
   </TransformGroup>
  </Image.RenderTransform>
 </Image>

Can I change the Source of the image as part of the storyboard or am I out of luck?

A: 

Okay, solved it myself. Seems you have to use the ObjectAnimationUsingKeyFrames and DiscreteObjectKeyFrame as shown below:

      <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(Image.Source)">
   <DiscreteObjectKeyFrame KeyTime="00:00:00.7000000">
    <DiscreteObjectKeyFrame.Value>
     <BitmapImage UriSource="check_24.png" />
    </DiscreteObjectKeyFrame.Value>
   </DiscreteObjectKeyFrame>
  </ObjectAnimationUsingKeyFrames>
soren.enemaerke