Привязка данных: обновить значение из анимации

1

Я хотел бы сделать что-то вроде этого: когда я нажимаю кнопку, изображение начинает вращаться вокруг его центра. Когда я снова нажимаю на эту кнопку, анимация останавливается. Я хотел бы привязать свойство Angle к двум объектам и получить его, когда анимация прекратится. Код очень прост, но привязка не работает. Он работает только в одностороннем порядке - от кода до 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>

И это класс С#:

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; работает, и изображение лежит горизонтально, как я ожидаю. Кажется, что привязка не работает во время анимации.

  • 0
    Меня не удивит, если запуск этой анимации полностью очистит привязку . Вы уверены, что какая-то часть этой привязки все еще работает после запуска анимации?
  • 0
    Ммм ... почему ты не удивлен? Я новичок в xaml, извините. В нескольких словах я хотел бы «получить угол изображения, когда анимация останавливается». Могу ли я сделать это каким-то образом? Спасибо.
Показать ещё 10 комментариев
Теги:
xaml
wpf
binding
animation

1 ответ

0

Попробуйте вместо этого привязать:

Angle="{Binding ElementName=pageRoot, Path=RotationAngle, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
  • 0
    Я попробую через минуту, спасибо
  • 1
    Пожалуйста, не формулируйте ответы как вопросы. Ответы должны отвечать на вопрос, а не просто задавать вопросы ОП (для этого нужны комментарии). Здесь на самом деле есть ответ, поэтому я отредактировал его для вас. Объяснение того, почему этот ответ (возможно?) Работает, всегда полезно включить.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню