ARC两种效果

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Arc"
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Class="Arc.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <ResourceDictionary>
            <local:NumberToAngle x:Key="NTA"/>
            <Storyboard x:Key="Storyboard1">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ed:Arc.EndAngle)" Storyboard.TargetName="N">
                    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="270"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ed:Arc.EndAngle)" Storyboard.TargetName="W">
                    <EasingDoubleKeyFrame KeyTime="0:0:4" Value="360"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </ResourceDictionary>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <ed:Arc x:Name="W" ArcThickness="0.05" ArcThicknessUnit="Percent" EndAngle="0" HorizontalAlignment="Center" VerticalAlignment="Center" Height="199" Width="199" Margin="0" Stretch="None" Stroke="Transparent" StartAngle="0" Fill="#FF0FE0F5" RenderTransformOrigin="0.5,0.5">
            <ed:Arc.RenderTransform>
                <TransformGroup>
                    <!--<ScaleTransform ScaleY="1" ScaleX="-1"/>--><!--逆时针打开-->
                    <!--<SkewTransform AngleY="0" AngleX="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform/>-->
                </TransformGroup>
            </ed:Arc.RenderTransform>
        </ed:Arc>
        <ed:Arc x:Name="N" ArcThickness="0.05" ArcThicknessUnit="Percent" EndAngle="0" HorizontalAlignment="Center" VerticalAlignment="Center" Height="199" Width="199" Margin="0" Stretch="None" Stroke="Transparent" StartAngle="0" Fill="#FF1025F3" RenderTransformOrigin="0.5,0.5">
            <ed:Arc.RenderTransform>
                <TransformGroup>
                    <!--<ScaleTransform ScaleY="1" ScaleX="-1"/>--><!--逆时针打开-->
                    <!--<SkewTransform AngleY="0" AngleX="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform/>-->
                </TransformGroup>
            </ed:Arc.RenderTransform>
        </ed:Arc>

        <TextBlock HorizontalAlignment="Center" Margin="0" TextWrapping="Wrap" Text="{Binding ElementName=W,Path=EndAngle,Converter={StaticResource NTA},StringFormat={}{0:P0}}" VerticalAlignment="Center"/>

    </Grid>
</Window>

<Window x:Class="Arc.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Arc"
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
        mc:Ignorable="d"
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Storyboard x:Key="stb">
            <DoubleAnimation Storyboard.TargetName="arcBack" Storyboard.TargetProperty="EndAngle" To="360" Duration="0:0:2"/>
            <DoubleAnimation Storyboard.TargetName="arcFore" Storyboard.TargetProperty="EndAngle" To="180" Duration="0:0:1"/>
            <DoubleAnimation Storyboard.TargetName="rtf" Storyboard.TargetProperty="Angle" To="360" Duration="0:0:2" BeginTime="0:0:1" RepeatBehavior="Forever"/>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger SourceName="btnGo" RoutedEvent="Button.Click">
            <BeginStoryboard Storyboard="{StaticResource stb}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Button Name="btnGo" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Content="go"/>
        <Grid x:Name="layout" Width="100" Height="100">
            <ed:Arc Name="arcBack" StartAngle="0" EndAngle="0" ArcThickness="8" Fill="#053894" Stretch="None"/>
            <ed:Arc Name="arcFore" StartAngle="0" EndAngle="0" ArcThickness="8" Stretch="None" RenderTransformOrigin="0.5,0.5">
                <ed:Arc.Fill>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="Transparent" Offset="0"/>
                        <GradientStop Color="#00E0FF" Offset="1"/>
                    </LinearGradientBrush>
                </ed:Arc.Fill>
                <ed:Arc.RenderTransform>
                    <RotateTransform x:Name="rtf" Angle="0"/>
                </ed:Arc.RenderTransform>
            </ed:Arc>
        </Grid>
    </Grid>
</Window>