好吧,其实这些都是我闲暇时自己做着玩的,以前总是拿来主义,现在分享一下让我也为大家做一点贡献好了。废话不说了,看效果。

小米视频加载进度条效果实现

好吧 其实没什么技术含量 直接上代码好了 和我上一篇利用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>
XMAL前端

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-08
  • 2021-12-08
猜你喜欢
  • 2021-09-20
  • 2022-12-23
  • 2021-05-26
  • 2021-08-30
  • 2021-06-01
  • 2022-02-07
相关资源
相似解决方案