Infinitely rotate rectangle in XAML

Question

How to define XAML to rotate a rectangle infinitely?

So far I found a solution with code but no xaml: http://www.codeproject.com/Articles/23257/Beginner-s-WPF-Animation-Tutorial which I use like this:

private void Window_Loaded_1(object sender, RoutedEventArgs e)
{
    var doubleAnimation = new DoubleAnimation(360, 0, new Duration(TimeSpan.FromSeconds(1)));
    var rotateTransform = new RotateTransform();
    
    rect1.RenderTransform = rotateTransform;
    rect1.RenderTransformOrigin = new Point(0.5, 0.5);
    doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
    
    rotateTransform.BeginAnimation(RotateTransform.AngleProperty, doubleAnimation);
}

But how can I achieve this with XAML only?

http://www.galasoft.ch/mydotnet/articles/article-2006102701.aspx this explains both code-behind and XAML version.. http://www.google.com! — KyorCode, Sep 06 '12 at 10:32
Heh, needed the code, so thanks. As to why we ever use XAML given it is twice as long and somewhat obtuse I leave to philosophers. — Tuntable, May 14 '20 at 08:35

score 72 · Accepted Answer · edited Sep 20 '16 at 13:28

72

Something like this

<Rectangle x:Name="rect1" RenderTransformOrigin="0.5, 0.5">
  <Rectangle.RenderTransform>
    <!-- giving the transform a name tells the framework not to freeze it -->
    <RotateTransform x:Name="noFreeze" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)"
            To="-360" Duration="0:0:1" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Of course you can remove Loaded trigger and run this storyboard whenever you want.

edited Sep 20 '16 at 13:28

answered Sep 06 '12 at 10:43

Zabavsky

13,340
8
54
79

3

I needed to add CenterX="16" CenterY="16" to the RotateTransform to center the origin in my 32x32 rectangle. – Dave Jan 14 '14 at 14:02
12

FYI, if you're here because you've tried this and you're getting an error about animating a frozen property, that's because WPF is aggressively freezing elements in your tree now. To provide a hint to the framework not to freeze the transform, simply give your transform an x:Name, which the framework sees and assumes you'll be referencing it from code and so won't freeze it. – Mar 03 '15 at 18:37
For the noobs like me, this also needs a stroke, strokeThickness, background color, size etc. `` – The One Mar 30 '17 at 14:10
1

@Dave It's more practical to use `RenderTransformOrigin=".5, .5"` and prevent manual positioning as much as you can. – Kushonoha Jun 22 '19 at 08:30

Infinitely rotate rectangle in XAML

1 Answers1

Linked