WinRT Xaml StoryBoard

Question

I wrote this storyboard in my however whenever I do a SwapImages.Begin(); from the C# file nothing happens. Can someone tell me what might be wrong with the code below?

    <Storyboard x:Name="SwapImages" >
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="Image" >
            <EasingDoubleKeyFrame KeyTime="0" Value="300" />
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0" />
        </DoubleAnimationUsingKeyFrames>

        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="Image2" >
            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="300" />
        </DoubleAnimationUsingKeyFrames>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.HorizontalAlignment)" Storyboard.TargetName="Image">
            <DiscreteObjectKeyFrame KeyTime="00:00:7">
                <DiscreteObjectKeyFrame.Value>
                    <HorizontalAlignment>Right</HorizontalAlignment>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.HorizontalAlignment)" Storyboard.TargetName="Image2">
            <DiscreteObjectKeyFrame KeyTime="00:00:7">
                <DiscreteObjectKeyFrame.Value>
                    <HorizontalAlignment>Left</HorizontalAlignment>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>

Answer 1

I don't think you can animate alignment properties (according to this question here) You could try doing what the comment in the linked question says, and put your two images in a canvas, then manipulate there x and y coordinates from the code-behind

Answer 2

this is the code I wrote in the MainPage.xaml along with ur story board and I did get the output.

<Page
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:data="using:TestApp">
<Page.Resources>
    <Storyboard x:Name="SwapImages" >
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="Image" >
            <EasingDoubleKeyFrame KeyTime="0" Value="300" />
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0" />
        </DoubleAnimationUsingKeyFrames>

        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="Image2" >
            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="300" />
        </DoubleAnimationUsingKeyFrames>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.HorizontalAlignment)" Storyboard.TargetName="Image">
            <DiscreteObjectKeyFrame KeyTime="00:00:7">
                <DiscreteObjectKeyFrame.Value>
                    <HorizontalAlignment>Right</HorizontalAlignment>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.HorizontalAlignment)" Storyboard.TargetName="Image2">
            <DiscreteObjectKeyFrame KeyTime="00:00:7">
                <DiscreteObjectKeyFrame.Value>
                    <HorizontalAlignment>Left</HorizontalAlignment>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>
<Grid >
    <Rectangle Fill="Red" Height="100" Margin="430,237,0,0" Stroke="Black" Name="Image" VerticalAlignment="Top" Width="100"/>
    <Rectangle Fill="Green" Loaded="Image2_Loaded_1" Height="100" Margin="922,212,0,0" Stroke="Black" VerticalAlignment="Top" Width="100" Name="Image2"/>
</Grid></Page>

Here's the code behind for the above xaml

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

    }

    /// <summary>
    /// Invoked when this page is about to be displayed in a Frame.
    /// </summary>
    /// <param name="e">Event data that describes how this page was reached.  The Parameter
    /// property is typically used to configure the page.</param>
    protected async override void OnNavigatedTo(NavigationEventArgs e)
    {

    }

    private void Image2_Loaded_1(object sender, RoutedEventArgs e)
    {
        SwapImages.Begin();
    }
}

It worked fine only thing is that I wrote the SwapImages.Begin(); method in the loaded event which is fired after the elements are loaded onto the screen.

The other thing that you might be mistaken is with the fact that animating alignments does not mean you will get a smooth transition from left to right . Alignment is always relative to the parent container and can have few sets of value. So if you want a smooth transition try animating some other property like canvas X,Y etc etc. .