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

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

1 个答案: