数据绑定:更新动画中的值

Question

我想做这样的事情：当我点击一个按钮时，图像开始围绕其中心旋转。当我再次单击该按钮时，动画停止。我想双向绑定 Angle 属性并在动画停止时检索它。代码非常简单，但绑定不起作用。它只能单向工作，从代码到 xaml，但不能从 xaml 到代码（我无法从动画中更新角度）。

这是 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;
        }

从

xaml 文件中的图像中忽略RotationAngle = 90;（绑定不再起作用）。但是，如果我以这种方式更改.Pause() .Stop()：

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