Need to create a animation in Blend in Windows 8 application

Question

I am creating a XAML Windows 8 application and i need to create a animation like frame by frame animation i.e. each frame contains a different image and collection of all images make a animation. Like a person running etc.

I have images and currently the way i found is create image control for all the image and then on different time frame hide one and display the other. This is the only way i can find now.

But when i try to change the source of that image control in Storyboard it doesn't happen.

Can anyone let me know is there a better way then image control collapse and visible??

Code:

<Image Tapped="tapped_OldMan" x:Name="OldMan1" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050001.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan2" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050002.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan3" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050003.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan4" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050004.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan5" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050005.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan6" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050006.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan7" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050007.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan8" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050008.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan9" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050009.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan10" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050010.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan11" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050011.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan12" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050012.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan13" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050013.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan14" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050014.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan15" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050015.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan16" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050016.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan17" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050017.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan18" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050018.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan19" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050019.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan20" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050020.png" Width="160" Height="216" Margin="10,0,0,40"/>
        <Image x:Name="OldMan21" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="5" Source="ms-appx:///JungleTheme/Images/VocabAnimations/oldmc/05/050021.png" Width="160" Height="216" Margin="10,0,0,40"/>




  <Storyboard x:Name="OldManAnimate">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan1">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:2.01">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan2">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan3">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                   <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan4">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.4">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan5">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.4">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan6">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.6">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan7">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.6">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.7">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan8">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.7">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.8">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan9">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.8">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.9">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan10">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.9">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan11">
                <DiscreteObjectKeyFrame KeyTime="0:0:1.0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.1">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan12">
                <DiscreteObjectKeyFrame KeyTime="0:0:1.1">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan13">
                <DiscreteObjectKeyFrame KeyTime="0:0:1.2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.3">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan14">
                <DiscreteObjectKeyFrame KeyTime="0:0:1.3">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.4">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan15">
                <DiscreteObjectKeyFrame KeyTime="0:0:1.4">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.5">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan16">
                <DiscreteObjectKeyFrame KeyTime="0:0:1.5">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.6">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan17">
                <DiscreteObjectKeyFrame KeyTime="0:0:1.6">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.7">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan18">
                <DiscreteObjectKeyFrame KeyTime="0:0:1.7">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                   </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.8">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan19">
                <DiscreteObjectKeyFrame KeyTime="0:0:1.8">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.9">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan20">
                <DiscreteObjectKeyFrame KeyTime="0:0:1.9">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:2.0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OldMan21">
                <DiscreteObjectKeyFrame KeyTime="0:0:2.0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:2.01">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>

Answer 1

this is a better way to do it...

 <Storyboard x:Name="storyboard" >
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="Source">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="/images/HandAnimationGirl/girl-hand0.png"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.03" Value="/images/HandAnimationGirl/girl-hand1.png"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.06" Value="/images/HandAnimationGirl/girl-hand2.png"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.10" Value="/images/HandAnimationGirl/girl-hand3.png"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.15" Value="/images/HandAnimationGirl/girl-hand4.png"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.25" Value="/images/HandAnimationGirl/girl-hand.png"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>

this is the proper way to make a storyboard fpr frames