CODEWITHSUNDEEP
c#wpfimagerotation
Mohit Gupta
Mohit Gupta

Reputation: 87

How to control the speed of rotation of image in wpf using C#

I need to rotate an image in my wpf application. Basically this image is a wheel and it need to be rotated after button click event. In my xaml I defined this image as follow:-

<Ellipse Name="wheel" Canvas.Left="244.813" Canvas.Top="39" Height="525" Width="525" RenderTransformOrigin="0.5,0.5">
        <Ellipse.Fill>
            <ImageBrush x:Name="imgwheel" Stretch="Uniform" />
        </Ellipse.Fill>
        <Ellipse.RenderTransform>
            <RotateTransform x:Name="rtWheel" CenterX="0" CenterY="0" />
        </Ellipse.RenderTransform>
</Ellipse>

This image can be rotated by using RotateTransform rotateTransform = new RotateTransform(angle); where angle is a variable which defines the angle of rotation. My problem is to create an animation means wheel should rotate for 10 sec with a constant speed and it should stop at described angle. How to implement it using C#?

Upvotes: 0

Views: 2234

Answers (2)

RedLaser
RedLaser

Reputation: 680

XAML

This will it rotate it (put it in your ellipse tags):

    <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="(Ellipse.RenderTransform).(RotateTransform.Angle)" To="360" Duration="0:0:10"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Ellipse.Triggers>

Basically sets rotation animation going from when ellipse is loaded

c#

        Storyboard storyboard = new Storyboard();
        storyboard.Duration = new Duration(TimeSpan.FromSeconds(10));
        DoubleAnimation rotateAnimation = new DoubleAnimation()
        {
            From = 0,
            To = 360,
            Duration = storyboard.Duration,
            RepeatBehavior= new RepeatBehavior(1)
        };

        Storyboard.SetTarget(rotateAnimation, ellipseToRotate);
        Storyboard.SetTargetProperty(rotateAnimation, new PropertyPath("(Ellipse.RenderTransform).(RotateTransform.Angle)"));

        storyboard.Children.Add(rotateAnimation);

        storyboard.Begin();

where 'ellipseToRotate' is the ellipse you want to rotate

Upvotes: 1

Philip Stuyck
Philip Stuyck

Reputation: 7467

Your question is a bit confusing because the title asks to control the speed whereas the question text refers to constant speed. Anyway using animation you can control the start position and the end position of an angle whatever value fits for you, and you specify the amount of time it should take.

Below example is an animation I use myself when I have to load something that takes more than 1s:

<DataTemplate x:Key="RowLoadingTemplate">
        <Image x:Name="Image" Source="/Interstone.Bestelbonnen;component/Images\loading.png" Visibility="Hidden" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <RotateTransform x:Name="Rotator" Angle="0"/>
            </Image.RenderTransform>
        </Image>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding IsLoading}" Value="True">
                <DataTrigger.Setters>
                    <Setter TargetName="Image" Property="Visibility" Value="Visible"/>
                </DataTrigger.Setters>
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="Rotator" Storyboard.TargetProperty="Angle" To="360" Duration="0:0:1" 
                                             />
                        </Storyboard>
                    </BeginStoryboard>    
                </DataTrigger.EnterActions>
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>

Upvotes: 1

Related Questions