好吧,其实这些都是我闲暇时自己做着玩的,以前总是拿来主义,现在分享一下让我也为大家做一点贡献好了。废话不说了,看效果。
好吧 其实没什么技术含量 直接上代码好了 和我上一篇利用WPF动画实现圆形进度条是一个道理,表现形式不同而已。
1 <UserControl x:Class="MyUserControlLibrary.CircleProgressbarcontrol" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" 7 xmlns:local ="clr-namespace:MyUserControlLibrary" 8 mc:Ignorable="d" 9 d:DesignHeight="60" d:DesignWidth="60" MinWidth="60" MinHeight="60" Loaded="UserControl_Loaded"> 10 <UserControl.Resources> 11 <local:ConverterCircleToPercent x:Key="converter"/> 12 <Storyboard x:Key="MainStoryboard"> 13 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ed:Arc.EndAngle)" Storyboard.TargetName="ProgressArea"> 14 <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 15 <EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="360"/> 16 </DoubleAnimationUsingKeyFrames> 17 </Storyboard> 18 </UserControl.Resources> 19 <Grid> 20 <Border Name="MainBorder" Margin="0,0,0,0" CornerRadius="500" BorderThickness="2" BorderBrush="White" Opacity="0.6" Background="Black"/> 21 <ed:Arc Name="ProgressArea" Margin="5,5,5,5" ArcThickness="1" StartAngle="0" EndAngle="0" ArcThicknessUnit="Percent" Stretch="None" Fill="White" Opacity="0.4"/> 22 <Ellipse Name="CenterCircle" Width="5" Height="5" Fill="White" Opacity="0.7"/> 23 <Label Name="AreaShow" Margin="10,10,10,10" Content="{Binding ElementName=ProgressArea, Path=EndAngle,Converter={StaticResource converter}}" Foreground="White" FontFamily="宋体" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="20" Opacity="0.8"/> 24 </Grid> 25 </UserControl>