WinRT Xaml StoryBoard

Question

我在我的中编写了这个情节提要，但是，每当我执行SwapImages.Begin()时，从C#文件中什么都不会发生。谁能告诉我下面的代码可能出了什么问题？

    <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

我不认为您可以动画对齐属性(根据此问题here)您可以尝试执行链接问题中的注释所说的操作，并将您的两个图像放在画布中，然后从代码隐藏操作x和y坐标

Answer 2

这是我在MainPage.xaml和你的故事板中写的代码，我确实得到了输出。

<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>

下面是上述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();
    }
}

它工作得很好，唯一的事情是我在loaded事件中编写了SwapImages.Begin();方法，该事件在元素加载到屏幕上后触发。

你可能会误解的另一件事是，动画对齐并不意味着你会从左到右平滑过渡。对齐方式始终是相对于父容器的，并且可以有几组值。因此，如果你想要一个平滑的过渡，尝试动画一些其他属性，如画布X，Y等。