Rotating an Image with WPF in XAML

13 11 2009

So… pasting code is still tricky. But I think this will work. This code is what I used when I wanted to rotate an Image object declared in XAML. To be clear, this allows me to create a rotating image without any C# or VB code. Personally I chose to rotate this picture:

Loading 2
The CenterX and CenterY property of RotateTransform should be half of the Image objects width and height. This can be found by using databindings but that’s another post completely.  

<Style x:Key="AnimationImage" TargetType="{x:Type Image}">

    <Setter Property="RenderTransform">

        <Setter.Value>

            <RotateTransform Angle="0" CenterX="20" CenterY="20" />

        </Setter.Value>

    </Setter>

 

    <Style.Triggers>

        <Trigger Property="IsEnabled" Value="true">

            <Trigger.EnterActions>

                <BeginStoryboard>

                    <Storyboard>

                       <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"

                        From="0" To="360" Duration="0:0:1.5" RepeatBehavior="Forever" />

                    </Storyboard>

                </BeginStoryboard>

            </Trigger.EnterActions>

        </Trigger>

    </Style.Triggers>
</Style>

About these ads

Actions

Information

7 responses

28 02 2010
How to post sourcecode to Wordpress « Fragile Development

[...] to WordPress 28 02 2010 Ok, so maybe I did a post like this before with a less than stellar result. At least it was better than my new solutions where I paste images and raw black text into the [...]

12 02 2011
jorge

how to flip an image in wpf

8 10 2011
Sumit

Neat.

18 11 2011
sonicraf

exactly what i was looking for. thanks

17 12 2011
Eren Ersönmez

Thank you for this post. If you run this code above, it doesn’t look exactly like the gif animation above it. The visual trick in this image is that, the individual “ticks” (or “lines”) always occupy the same top-of-the-hour clock positions (12 o’clock, 1 o’clock, etc.) — and never appear in-between. When you run the code above, WPF renders frames at a high rate (60 fps by default) so the “ticks” smoothly move between clock positions, which undesirably changes the effect. To make it look exactly like the gif above, you need change the duration to 1s and make the frame rate 12 fps like this:

17 12 2011
Eren Ersönmez

Sorry, the XAML didn’t show up…
<Storyboard Timeline.DesiredFrameRate="12"> <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle" From="0" To="360" Duration="0:0:1" RepeatBehavior="Forever"/></Storyboard>

29 08 2012
Rotate an Image in WPF Using Just XAML « adamprescott.net

[...] solution is based on this post. Share this:EmailDiggFacebookTwitterLike this:LikeBe the first to like this. Posted by [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Follow

Get every new post delivered to your Inbox.

%d bloggers like this: