Change an image during animation using storyboard
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)">
<!-- This does not work -->
<DiscreteStringKeyFrame KeyTime="00:00:00.7000000" Value="check_24.png"/>
</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,开发者_如何学C0.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?
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>
精彩评论