[WPF] Create a Rotating Control Using WPF

[Negative0]

Creating a rotating control is easy in WPF. The Animation features of WPF allow you to quickly build a form that has one or many rotating controls.

For this example, we are going to create a rotating progress bar on our form.

To start, create a new WPF Application within visual studio.
Add a progress bar control to your form. Then anchor it only to the top and left of the form. Your XAML should look something like this:

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ProgressBar Margin="64,118,0,0" Name="ProgressBar1" HorizontalAlignment="Left" Width="150" Height="24" VerticalAlignment="Top" />
    </Grid>
</Window>

Next up, we are going to add an animation that will automatically fill and unfill the progress bar. So we are going to add a Trigger that fires after our progress bar has loaded. That trigger will fire a storyboard with an animation. The animation will be set to increase the ProgressBar.Value from 0 to 100 over the course of 1 second. We set the autoreverse property to true, to allow the animation to go forwards and backwards. The xaml to do this would be:

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ProgressBar Margin="64,118,0,0" Name="ProgressBar1" HorizontalAlignment="Left" Width="150" Height="24" VerticalAlignment="Top">
            <ProgressBar.Triggers>
                <EventTrigger RoutedEvent="ProgressBar.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
        Storyboard.TargetName="ProgressBar1" 
        Storyboard.TargetProperty="Value"
        From="0" To="100" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ProgressBar.Triggers>
            
            
        </ProgressBar>
    </Grid>
</Window>

So now, if you run your code, you will see that your progress bar automatically fills over the course of a second and then automatically unfills.

Next up we are going to rotate our progressbar, so it is spinning as it is filling up. The first thing we need to do is add a Render transform and a subsequent rotate transform to our progress bar. I set this to rotate around the center of the object. We are going to leave the angle at 0 to start and then an animation will change that over time. The XAML for this is:

            <ProgressBar.RenderTransform>
                <RotateTransform Angle="0" CenterX="75" CenterY="12" />
            </ProgressBar.RenderTransform>

Finally to add our rotation over time, we will add a second animation that will rotate the progressbar. On this animation we are going to update the Angle property of the RotateTransform. We are going to have it move from 0 to 360. We are also going to set the AutoReverse to false, because we want to have it continuously spin instead of hitting 360 and then reversing its spin. The XAML for this is:

                            <DoubleAnimation
        Storyboard.TargetName="ProgressBar1" 
        Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"
        From="0" To="360" Duration="0:0:2" 
        AutoReverse="False" RepeatBehavior="Forever" />

Your final XAML, should look like this:

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ProgressBar Margin="64,118,0,0" Name="ProgressBar1" HorizontalAlignment="Left" Width="150" Height="24" VerticalAlignment="Top">
            <ProgressBar.RenderTransform>
                <RotateTransform Angle="0" CenterX="75" CenterY="12" />
            </ProgressBar.RenderTransform>
            <ProgressBar.Triggers>
                <EventTrigger RoutedEvent="ProgressBar.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
        Storyboard.TargetName="ProgressBar1" 
        Storyboard.TargetProperty="Value"
        From="0" To="100" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
                            <DoubleAnimation
        Storyboard.TargetName="ProgressBar1" 
        Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"
        From="0" To="360" Duration="0:0:2" 
        AutoReverse="False" RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ProgressBar.Triggers>
            
            
        </ProgressBar>
    </Grid>
</Window>

If you run this code, you should see a rotating progressbar that is continuously filling and unfilling.