{{announcement.body}}
{{announcement.title}}

# Progress Control Animations for Windows Store Apps with XAML and C#

DZone 's Guide to

# Progress Control Animations for Windows Store Apps with XAML and C#

· Mobile Zone ·
Free Resource

Comment (0)

Save
{{ articles.views | formatCount}} Views

In this post, I'm going to show you how you can create a circular animation in a metro style application (XAML/C#). In my case, we needed to animate a circular progress arc that fires when the user waits for some process to complete. In this case, we're going to use a full 360° animation, but take into account that you can go up to any angle you want (if that's your scenario).

I developed a sample so you can test this approach, you can find it here. Feel free to use it in your app, modify it (and do whatever you want).

## The XAML

We animate two ArcSegments inside a Path. The Data attribute contains the value of the initial values (position zero).

```<Grid Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">
<Path x:Name="progressPath" Stroke="Gold" StrokeThickness="5"
HorizontalAlignment="Center" VerticalAlignment="Center" Height="305" Width="305"
Data="m 150,0 A 150,0 0 0 0 150,0 A 150,150 0 0 0 150,0" />
</Grid>```

## The code (C#)

I think the code speaks for itself: we create a storyboard to animate the Data attribute. Given an angle, we calculate the point in the circle using sin and cos (math rocks!) and create a DiscreteObjectKeyFrame to animate the transition. We do this for all angles between 0 and the final angle (with 1° steps). Lastly, the first ArcSegment is for the angles between 0 a 180, and the second are for the rest.

```public static void AnimatePath(Windows.UI.Xaml.Shapes.Path progressPath, double radius, Point initialPoint, double finalAngle = 180, double timeStep = 0.01)
{
var storyboard = new Storyboard();

var progressAnimation = new ObjectAnimationUsingKeyFrames();
Storyboard.SetTarget(progressAnimation, progressPath);
Storyboard.SetTargetProperty(progressAnimation, "(Path.Data)");

for (int i = 0; i <= finalAngle; i++)
{
var discreteObjectKeyFrame = new DiscreteObjectKeyFrame();
discreteObjectKeyFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(i * timeStep));

// create points for each ArcSegment
Point firstArcPoint = new Point(radius, 0);
Point secondArcPoint = new Point(radius, 0);

if (i < 180)
{
// calculate a new point of the first ArcSegment
firstArcPoint.X = Math.Cos(Math.PI * (270 - i) / 180.0) * radius + center.X;
firstArcPoint.Y = Math.Sin(Math.PI * (270 - i) / 180.0) * radius + center.Y;
secondArcPoint = firstArcPoint;
}
else
{
// leave the first ArcSegment static and calculate a new point of the second
firstArcPoint = new Point() { X = radius, Y = radius * 2 };
secondArcPoint.X = Math.Cos(Math.PI * (270 - i) / 180.0) * radius + center.X;
secondArcPoint.Y = Math.Sin(Math.PI * (270 - i) / 180.0) * radius + center.Y;
}

// for instance, a complete circle with a radius of 150: "m 150,0 A 150,150 0 0 0 150,300 A 150,150 0 0 0 150,0"
string dataValue = "m {0},{1} A {2},{2} 0 0 0 {3},{4} A {2},{2} 0 0 0 {5},{6}";
discreteObjectKeyFrame.Value = string.Format(dataValue, initialPoint.X, initialPoint.Y, radius, firstArcPoint.X, firstArcPoint.Y, secondArcPoint.X, secondArcPoint.Y);
}

storyboard.Begin();
}
```

Below you can find a video with the result:

And that's it! Remember that you can check out the code here

Note: for a smoother animation, you can use 0.5° steps (or less). I decided to leave it in 1° here just to make the code simpler.

Topics:

Comment (0)

Save
{{ articles.views | formatCount}} Views

Published at DZone with permission of Mariano Vazquez , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.