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

이것은 내가 ur 이야기 보드와 함께 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> 

여기에 좋은 유일한 것은 내가 요소가 화면에로드 된 후 해고로드 이벤트에 SwapImages.Begin(); 방법을 쓴 것입니다 그것은 일을 위의 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(); 
    } 
} 

에 대한 뒤에 코드입니다.

잘못 생각할 수도있는 것은 정렬을 애니메이션한다고해서 왼쪽에서 오른쪽으로 부드럽게 전환한다는 의미가 아니라는 것입니다. 정렬은 항상 상위 컨테이너와 관련이 있으며 소수의 값 집합을 가질 수 있습니다. 따라서 부드러운 전환을 원한다면 캔버스 X, Y 등 다른 속성을 애니메이션으로 적용 해보십시오.