데이터 바인딩 : 애니메이션에서 값 업데이트

Question

다음과 같이하고 싶습니다. 버튼을 클릭하면 이미지가 가운데에서 회전하기 시작합니다. 해당 버튼을 다시 클릭하면 애니메이션이 중지됩니다. 각도 속성을 양방향으로 바인딩하고 애니메이션이 중단 될 때이를 검색하고 싶습니다. 코드는 매우 간단하지만 바인딩이 작동하지 않습니다. 코드에서 xaml까지는 단방향으로 만 작동하지만 xaml에서 코드로는 작동하지 않습니다. 애니메이션에서 Angle을 업데이트 할 수 없습니다.

이는 XAML 파일입니다

<Page 
    x:Name="pageRoot" 
    x:Class="Calculator.HubPage" 
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:Calculator" 
    xmlns:data="using:Calculator.Data" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 
    <Page.Resources> 
     <Storyboard x:Key="RotateImage"> 
      <DoubleAnimation From="0" To="360" Duration="00:00:00.5" Storyboard.TargetName="rotateTransform" Storyboard.TargetProperty="Angle"/> 
     </Storyboard> 
    </Page.Resources> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="100"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Image Source="Assets/spoon.gif" Stretch="None" Grid.Column="0" Grid.Row="0" RenderTransformOrigin="0.5,0.5"> 
      <Image.RenderTransform> 
       <RotateTransform x:Name="rotateTransform" Angle="{Binding ElementName=pageRoot, Path=RotationAngle, Mode=TwoWay}"/> 
      </Image.RenderTransform> 
     </Image> 
     <Button Grid.Row="1" Grid.Column="0" Content="Click me!" Click="Op_Click"/> 
    </Grid> 
</Page> 

그리고 이것은 C# 클래스입니다 :

public sealed partial class HubPage : Page 
    {     
     public static DependencyProperty RotationAngleProperty = DependencyProperty.Register("RotationAngle", typeof(double), 
      typeof(HubPage), new PropertyMetadata(default(double))); 

     private Boolean started; 

     public double RotationAngle 
     { 
      get { return (double)GetValue(RotationAngleProperty); } 
      set { SetValue(RotationAngleProperty, value); } 
     } 

     public HubPage() 
     { 
      this.InitializeComponent();    
      started = false; 

     } 

     private void Op_Click(object sender, RoutedEventArgs e) 
     { 
      if (!started) 
      { 
       (Resources["RotateImage"] as Windows.UI.Xaml.Media.Animation.Storyboard).Begin(); 
      } 
      else 
      { 
       (Resources["RotateImage"] as Windows.UI.Xaml.Media.Animation.Storyboard).Pause();     
      } 
      started = !started; 
     } 
    } 
} 

당신이 날 도와 드릴까요? 고맙습니다! 예, 애니메이션 바인딩을 시작한 후 더 이상 양방향으로 작동하지 않습니다

편집는 BradleyDotNET에 응답합니다. 나는이를 추가하려고합니다 :

private void Op_Click(object sender, RoutedEventArgs e) 
     { 
      if (!started) 
      { 
       (Resources["RotateImage"] as Windows.UI.Xaml.Media.Animation.Storyboard).Begin(); 
      } 
      else 
      { 
       (Resources["RotateImage"] as Windows.UI.Xaml.Media.Animation.Storyboard).Pause(); 
       RotationAngle = 90; 
      } 
      started = !started; 
     } 

RotationAngle = 90;은 (바인딩이 더 이상 작동하지 않습니다) XAML 파일의 이미지에서 무시됩니다. 하지만 .Stop()으로이 방법 .Pause()을 변경하는 경우 :

private void Op_Click(object sender, RoutedEventArgs e) 
     { 
      if (!started) 
      { 
       (Resources["RotateImage"] as Windows.UI.Xaml.Media.Animation.Storyboard).Begin(); 
      } 
      else 
      { 
       (Resources["RotateImage"] as Windows.UI.Xaml.Media.Animation.Storyboard).Stop(); 
       RotationAngle = 90; 
      } 
      started = !started; 
     } 

RotationAngle = 90; 작품을하고 이미지가 내가 예상대로 수평 낳는다. 애니메이션 도중 바인딩이 작동하지 않는 것 같습니다.

Answer 1

대신이 바인딩을 시도하는 애니메이션 *를 실행하는 경우

Angle="{Binding ElementName=pageRoot, Path=RotationAngle, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"