记 一个 WPF 的 加载动画。

最近写界面的过程中需要弄个加载动画，但是又没找到想要的轮子，就差不多胡乱弄了一个，用到了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>