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

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

你能帮帮我吗？谢谢！

EDIT 回答 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 文件中的图像中被忽略（绑定不再起作用）。但是，如果我以这种方式将.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}"