-
Jan 25th, 2009, 11:00 PM
#1
[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.
-
Jan 26th, 2009, 07:05 AM
#2
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!
-
May 29th, 2010, 04:43 AM
#3
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|