最近写界面的过程中需要弄个加载动画，但是又没找到想要的轮子，就差不多胡乱弄了一个，用到了HandyControl的Arc控件，别的也没啥了。RatioConverter是自己随便写的一个转换器，算一下Border的中心点的位置。
通过旋转最外层的Border和中间的Arc控件实现整个加载动画。
这个是效果图：
最后直接上代码：
<Border Grid.Column="0" Margin="-5" > <hc:Arc Name="arc" Width="30" Height="30" StartAngle="180" EndAngle="180" Stretch="None" ArcThickness="2" Fill="{StaticResource SystemRunningColorBrush}" /> <Border.RenderTransform> <TransformGroup> <RotateTransform Angle="0" CenterX="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Border}, Path=ActualWidth,Converter={StaticResource RatioConverter}, ConverterParameter=0.5}" CenterY="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Border}, Path=ActualHeight,Converter={StaticResource RatioConverter}, ConverterParameter=0.5}" /> </TransformGroup> </Border.RenderTransform> <Border.Triggers> <EventTrigger RoutedEvent="Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation FillBehavior="HoldEnd" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" From="0" To="360" Duration="0:0:2.3" RepeatBehavior="Forever" />
<Storyboard RepeatBehavior="Forever" Storyboard.TargetName="arc" FillBehavior="HoldEnd"> <DoubleAnimation Storyboard.TargetProperty="EndAngle" To="540" BeginTime="0:0:0" Duration="0:0:3" FillBehavior="HoldEnd"> <DoubleAnimation.EasingFunction> <PowerEase EasingMode="EaseInOut" Power="3"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Storyboard.TargetProperty="EndAngle" To="180" BeginTime="0:0:2.8" Duration="0:0:2.3" FillBehavior="HoldEnd" /> </Storyboard> </Storyboard> </BeginStoryboard> </EventTrigger> </Border.Triggers> </Border>