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 自定义环形进度条实现