文章目录
- 1、运行效果
- 2、功能实现
- 1、文件创建与代码实现
- 2、角度转换器实现
- 3、命名空间引用
- 3、源代码下载
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 自定义环形进度条实现