Infinitely rotate rectangle in XAML
47,375
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.
Author by
Bruno Bieri
https://www.humanatomy.app I'm mainly active in: Android / Java iOS / Objective-C C++ Blender 3D SQL/SQLite .NET C#
Updated on January 05, 2021Comments
-
Bruno Bieri over 3 years
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?
-
Dave over 10 yearsI needed to add CenterX="16" CenterY="16" to the RotateTransform to center the origin in my 32x32 rectangle.
-
Admin about 9 yearsFYI, 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.
-
The One about 7 yearsFor the noobs like me, this also needs a stroke, strokeThickness, background color, size etc.
<Rectangle x:Name="rect1" RenderTransformOrigin="0.5, 0.5" Width="50" Height="50" Stroke="Black" StrokeThickness="10">
-
Star Helvanithri almost 5 years@Dave It's more practical to use
RenderTransformOrigin=".5, .5"
and prevent manual positioning as much as you can.