How does the Indeterminate ProgressRing animation work? - wpf

Question

I am trying to understand how the Progress Ring animation works. I want to create something similar for the Windows 7 progress bar, I can not use a third party style, I need to create it myself.
This is the style I am looking at as base for my work.
The template for the ProgressRing has a grid with 6 ellipses inside canvases.
Here one of the Canvases with the Ellipse
<Canvas RenderTransformOrigin=".5,.5">
<Canvas.RenderTransform>
<RotateTransform x:Name="E1R" />
</Canvas.RenderTransform>
<Ellipse x:Name="E1" Style="{StaticResource ProgressRingEllipseStyle}"
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseOffset}"
Fill="{TemplateBinding Foreground}"/>
</Canvas>
I understand that The RenderTransformOrigin=".5,.5" is set so the animation is aligned to the center of the container, so the ellipses rotate centered.
The animation itself has two parts, first changes on the opacity of the Ellipse over time.
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="E1"
Storyboard.TargetProperty="Opacity"
BeginTime="0">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
<DiscreteDoubleKeyFrame KeyTime="0:0:3.21" Value="1" />
<DiscreteDoubleKeyFrame KeyTime="0:0:3.22" Value="0" />
<DiscreteDoubleKeyFrame KeyTime="0:0:3.47" Value="0" />
</DoubleAnimationUsingKeyFrames>
And then changes in the angle:
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="E1R"
BeginTime="0"
Storyboard.TargetProperty="Angle">
<SplineDoubleKeyFrame KeyTime="0" Value="-110" KeySpline="0.13,0.21,0.1,0.7"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.433" Value="10" KeySpline="0.02,0.33,0.38,0.77"/>
<SplineDoubleKeyFrame KeyTime="0:0:1.2" Value="93"/>
<SplineDoubleKeyFrame KeyTime="0:0:1.617" Value="205" KeySpline="0.57,0.17,0.95,0.75"/>
<SplineDoubleKeyFrame KeyTime="0:0:2.017" Value="357" KeySpline="0,0.19,0.07,0.72"/>
<SplineDoubleKeyFrame KeyTime="0:0:2.783" Value="439"/>
<SplineDoubleKeyFrame KeyTime="0:0:3.217" Value="585" KeySpline="0,0,0.95,0.37"/>
</DoubleAnimationUsingKeyFrames>
Is my understanding that this animations changes the angle overtime and with the KeySpline it tells WPF the points of the Bezier curve for the acceleration of the movement.
However, I fail to see how the Radius of the general animation gets decided.
With minor adjustments, you can make the animation on this style work with the WPF ProgressBar, and then if you set something like this:
<ProgressBar x:Name="Progress" Width="100" Height="100" Background="Aquamarine" IsIndeterminate="True">
You can see the Ellipses rotating around the 100x100 Square of the ProgressBar.
I don't get how it decides what Radius to use, I feel I am missing something very obvious. I would like to make the animation sun-subscribe to the 100x100 Box, instead of having the curve the animation follows go outside its boundaries. How can I achieve this? How is the Radius being determined?

Answer 1

I'm not familiar with animation, so I might just be making things worse. But since it's using rotation around the center of the square, the radius should be the distance from the original ellipse to the center. And it looks like its "set" here:
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseOffset}"
I'm guessing this puts the first ellipse in the corner, causing it to rotate outside of the square. You would want it set to one side to keep it in. I'm guessing that the Margin determines it's location.