Results 1 to 3 of 3

Thread: [WPF] Create a Rotating Control Using WPF

Hybrid View

  1. #1

    Thread Starter
    PowerPoster 2.0 Negative0's Avatar
    Join Date
    Jun 2000
    Location
    Southeastern MI
    Posts
    4,367

    [WPF] Create a Rotating Control Using WPF

    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:

    Code:
    <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:

    Code:
    <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:

    Code:
                <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:
    Code:
                                <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:

    Code:
    <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.
    Last edited by Negative0; Jan 25th, 2009 at 11:26 PM.

  2. #2
    Pro Grammar chris128's Avatar
    Join Date
    Jun 2007
    Location
    England
    Posts
    7,604

    Re: [WPF] Create a Rotating Control Using WPF

    Funny I was just thinking about making a rotating 'loading' icon for my WPF app and was wondering how hard it would be, then I saw this Thanks!
    My free .NET Windows API library (Version 2.2 Released 12/06/2011)

    Blog: cjwdev.wordpress.com
    Web: www.cjwdev.co.uk


  3. #3
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    Re: [WPF] Create a Rotating Control Using WPF

    That's super...

    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width