wpf - WPF と MVVM: RotateTransform と DoubleAnimation を使用してオブジェクトを円形パスに沿って移動する

Question

私はWPFアニメーションに比較的慣れていません。オブジェクト (単純な円など) を円形のパスに沿って 10 度単位で移動させたいと考えています。次の例は、興味をそそるほど近いものです。 WPF 円形移動オブジェクト XAML で RotateTransform を使用し、コード ビハインドで DoubleAnimation を使用する Clemens による回答を参照してください。ただし、MVVM を使用していますが、これを達成する方法が明確ではありません。ViewModel から View にある RotateTransform にアクセスする必要があると思うので、BeginAnimation を呼び出すことができますが、どうすればよいでしょうか?

例やアイデアはありますか？運悪く検索してしまいました。ありがとう

更新: 既に試したことを示すことで、質問をより具体的にすることができます。上記の参照に基づいて、ビューの DependencyProperty をビューモデルのプロパティに双方向バインドしますか? （@Michael Schnerringによる回答）、次の簡単なコードがあります（以下）。楕円が回転していません。バインド エラーやその他のエラーはなく、回転はありません。そして、私のメソッドがヒットしました（デバッグしました）、PerformAnimation関数、特にSetTargetProperty部分が間違っていると思います。2 つのアニメーション (回転用と変換用) を追加して試してみましたが、うまくいきませんでした。

誰かが私が間違っていることを教えてもらえますか?

XAML:

<Canvas Grid.Row="0" Grid.Column="0">
        <Ellipse Height="100" Width="100" Fill="Aqua" Name="MyEllipse"
         Canvas.Left="200" Canvas.Top="200"
         RenderTransformOrigin="0.5,0.5">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <TranslateTransform Y="-100"/>
                <RotateTransform />
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
    </Canvas>

    <Button Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" Command="{Binding Path=RotateCommand}">Press Me!</Button>

分離コード

  public partial class MainWindow : Window
   {
      public MainWindow()
      {
         InitializeComponent();
         var nameOfPropertyInVm = "AngleProperty";
    var binding = new Binding(nameOfPropertyInVm) { Mode = BindingMode.TwoWay };
         this.SetBinding(AngleProperty, binding);
      }

      public double Angle
      {
         get { return (double)GetValue(AngleProperty); }
         set { SetValue(AngleProperty, value); }
      }

      // Using a DependencyProperty as the backing store for Angle.  This enables animation, styling, binding, etc...
      public static readonly DependencyProperty AngleProperty = DependencyProperty.Register("Angle", typeof(double), typeof(MainWindow), new UIPropertyMetadata(0.0, new PropertyChangedCallback(AngleChanged)));

      private static void AngleChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
      {
         MainWindow control = (MainWindow)sender;
         control.PerformAnimation((double)e.OldValue, (double)e.NewValue);
      }

      private void PerformAnimation(double oldValue, double newValue)
      {
         Storyboard s = new Storyboard();

         DoubleAnimation animation = new DoubleAnimation();
         animation.From = oldValue;
         animation.To = newValue;
         animation.Duration = new Duration(TimeSpan.FromSeconds(1));
         s.Children.Add(animation);

         
         Storyboard.SetTarget(animation, MyEllipse);
         Storyboard.SetTargetProperty(animation, new PropertyPath("(Ellipse.RenderTransform).(RotateTransform.Angle)"));

         s.Begin();

      }

そしてViewModel

    public class MyViewModel :  ViewModelBase
   {
      private ICommand _rotateCommand = null;
      private double _angleProperty = 10;
      public MyViewModel()
      {
         
      }

      public double AngleProperty
      {
         get
         {
            return _angleProperty;
         }

         set
         {
            _angleProperty = value;
            OnPropertyChanged("AngleProperty");
         }
      }

      public ICommand RotateCommand
      {
         get
         {
            if (_rotateCommand == null)
            {
               _rotateCommand = new RelayCommand(param => RotateCommandImplementation());
            }
            return _rotateCommand;
         }
      }

      private void RotateCommandImplementation()
      {
         AngleProperty = AngleProperty + 10;
      }
   }