Я хотел бы сделать что-то вроде этого: когда я нажимаю кнопку, изображение начинает вращаться вокруг его центра. Когда я снова нажимаю на эту кнопку, анимация останавливается. Я хотел бы привязать свойство 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;
работает, и изображение лежит горизонтально, как я ожидаю. Кажется, что привязка не работает во время анимации.
Попробуйте вместо этого привязать:
Angle="{Binding ElementName=pageRoot, Path=RotationAngle, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"