WPF+MVVM案例实战（十一）- 环形进度条实现

---

1、运行效果

2、功能实现

1、文件创建与代码实现

打开 Wpf_Examples 项目，在Views 文件夹下创建 CircularProgressBar.xaml 窗体文件。
CircularProgressBar.xaml 代码实现如下：

<Window x:Class="Wpf_Examples.Views.CircularProgressBar"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:Wpf_Examples.Views"xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"xmlns:uc="clr-namespace:UserControlLib;assembly=UserControlLib"xmlns:converter="clr-namespace:Wpf_Examples.Converters"mc:Ignorable="d"Title="CircularProgressBar" Height="450" Width="800"><Grid><ProgressBar FontSize="36" Background="#FF292929" Foreground="#FFE42424" Maximum="1" Minimum="0" SmallChange="0.01"Width="200" Height="200" Value="{Binding ElementName=pBar,Path=Value}"><ProgressBar.Template><ControlTemplate TargetType="ProgressBar"><ControlTemplate.Resources><converter:PercentConverter x:Key="PercentConverter"/></ControlTemplate.Resources><Grid><TextBlock Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Value,StringFormat=p0}"VerticalAlignment="Center" HorizontalAlignment="Center"/><ed:Arc StartAngle="0" EndAngle="360" ArcThickness="16" Fill="{TemplateBinding Background}" Stretch="None"/><ed:Arc StartAngle="0" ArcThickness="16" EndAngle="{TemplateBinding Value,Converter={StaticResource PercentConverter}}" ArcThicknessUnit="Pixel" Fill="{TemplateBinding Foreground}" Stretch="None"/></Grid></ControlTemplate></ProgressBar.Template></ProgressBar><Slider Maximum="1" Minimum="0" SmallChange="0.01" x:Name="pBar"/></Grid>
</Window>

2、角度转换器实现

在 Converters 文件夹下创建 PercentConverter.cs ，代码实现如下：

 public class PercentConverter : IValueConverter{public object Convert(object value, Type targetType, object parameter, CultureInfo culture){return 360 * (double)value;}public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture){return (double)value / 360;}}

3、命名空间引用

这里命名空间 有点不好整，本人也是费了一番功夫，这里我直接下载好了，只要项目引用即可，大家可以在源代码下载中获取这个dll 文件。

  xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"

拿到这个Dll文件后，把它放在项目的一个文件夹下，添加引用到这个Dll 所在文件夹中选择到这个 dll,添加成功后。注意修改生成资源方式。


以上完成命名空间引用。改命名空间中 Arc 就是画圆弧的方法，只要提供起始角度和介绍角度，设置填充色即可完成圆弧绘制。

3、源代码下载

CSDN 代码下载链接：WPF 自定义环形进度条实现