画一个 Ellipse 设置 StrokeDashArray 单位值为边框值的宽度,所以可以通过控制 StrokeDashArray 的值设置加载进度。
XAML
<Grid Background="#1F3542">
<!-- 使用 ProgressBar 自定义环形进度条,因为它有 最大、小值及当前值, 所以只需要自定义模板 -->
<ProgressBar
x:Name="ProgressBar"
Width="200" Height="200"
Background="#101A26" FontSize="24" FontWeight="Bold" Foreground="#7BCDD9"
Maximum="100" Minimum="0" SmallChange="0.1"
Value="30">
<ProgressBar.Template>
<ControlTemplate TargetType="ProgressBar">
<Grid>
<!-- 进度条背景 -->
<Ellipse
Opacity=".5"
Stroke="{TemplateBinding Background}"
StrokeDashArray="100 0" StrokeDashCap="Round" StrokeThickness="19" />
<!-- 进度条 -->
<Ellipse
Margin="1"
Opacity=".5"
Stroke="{TemplateBinding Foreground}"
StrokeDashCap="Round" StrokeThickness="18">
<i:Interaction.Behaviors>
<circularProgressBarCtrls:EllipseProgressBehavior
EndAngle="0"
Progress="{Binding RelativeSource={RelativeSource AncestorType=ProgressBar}, Path=Value}"
StartAngle="0" />
</i:Interaction.Behaviors>
<!-- 进度条光辉 -->
<Ellipse.Effect>
<DropShadowEffect
BlurRadius="10" Direction="0" ShadowDepth="2"
Color="#7BCDD9" />
</Ellipse.Effect>
</Ellipse>
<!-- 中间的文字 -->
<TextBlock
HorizontalAlignment="Center" VerticalAlignment="Center"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontStretch="{TemplateBinding FontStretch}"
FontStyle="{TemplateBinding FontStyle}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}">
<Run Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value, StringFormat=0.00}" />
<Run Text="%" />
</TextBlock>
</Grid>
</ControlTemplate>
</ProgressBar.Template>
</ProgressBar>
</Grid>
代码
this.ProgressBar.Value = 0;
this.time.Interval = TimeSpan.FromSeconds(0.01);
this.time.Tick += (o, args) =>
{
this.ProgressBar.Value += 0.1;
if (this.ProgressBar.Value >= 100)
{
// this.time.Stop();
this.ProgressBar.Value = 0;
}
};
this.time.Start();