Note that there are some explanatory texts on larger screens.

plurals
  1. POChange an image during animation using storyboard
    primarykey
    data
    text
    <p>I was looking for a way to change an <em>Image</em> during a storyboard, or more specifically, change the <code>Source</code> property of the image to point to a new image resource. There seems to be a <code>StringAnimationUsingKeyFrames</code> and a <code>DiscreteStringKeyFrame</code> but this does not work (as far as I can tell) since the Source property of the Image is of type <code>ImageSource</code></p> <p>My current storyboard looks like this</p> <pre><code>&lt;Storyboard x:Key="TransitionImage"&gt; &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"&gt; &lt;SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0.2"/&gt; &lt;SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1"/&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;StringAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(Image.Source)"&gt; &lt;!-- This does not work --&gt; &lt;DiscreteStringKeyFrame KeyTime="00:00:00.7000000" Value="check_24.png"/&gt; &lt;/StringAnimationUsingKeyFrames&gt; &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"&gt; &lt;SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0.2"/&gt; &lt;SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1"/&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; </code></pre> <p>and the image</p> <pre><code>&lt;Image x:Name="image" Source="delete_24.png" Width="32" Height="32" Margin="8" RenderTransformOrigin="0.5,0.5"&gt; &lt;Image.RenderTransform&gt; &lt;TransformGroup&gt; &lt;ScaleTransform/&gt; &lt;SkewTransform/&gt; &lt;RotateTransform/&gt; &lt;TranslateTransform/&gt; &lt;/TransformGroup&gt; &lt;/Image.RenderTransform&gt; &lt;/Image&gt; </code></pre> <p>Can I change the <code>Source</code> of the image as part of the storyboard or am I out of luck?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload