WPF实现自绘仪表盘Gauge
更新时间：2024年12月31日 10:12:42 作者：WPF开发者
这篇文章主要为大家详细介绍了如何使用WPF实现自绘仪表盘Gauge效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
自绘仪表盘 Gauge
框架支持.NET4 至 .NET8；
Visual Studio 2022;
WPFDevelopers 1.1.0.3-preview 版本已正式发布！
该版本为预览版，欢迎各位开发者下载并体验。
来自 Issue
逻辑实现
Gauge 继承 RangeBase，支持设置最大值、最小值以及当前值，并且可以显示一个动态的百分比值、标题、刻度。
1. 新增 Gauge.cs
依赖属性
Title：仪表盘的标题，默认值为 "WD"。ValueFormat：定义数值显示的格式（{0:0}%），以百分比形式显示当前值。Thickness：设置仪表盘的边框，默认值10。
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public string ValueFormat
{
get { return (string)GetValue(ValueFormatProperty); }
set { SetValue(ValueFormatProperty, value); }
}
public double Thickness
{
get { return (double)GetValue(ThicknessProperty); }
set { SetValue(ThicknessProperty, value); }
}
RangeBase 依赖属性
Value：设置为0.0，表示当前的仪表盘值（默认0%）。Minimum：设置为0.0，表示仪表盘的最小值。Maximum：设置为100.0，表示仪表盘的最大值。
public Gauge()
{
SetValue(ValueProperty, 0.0);
SetValue(MinimumProperty, 0.0);
SetValue(MaximumProperty, 100.0);
}
2. 重写 OnRender 方法绘制控件
背景：使用 Ellipse 作为仪表盘的背景，背景色通过 Background 属性设置，默认为 #293950。
指针：根据当前值（Value），计算出指针的角度，并使用 DrawLine 绘制红色指针。
外边框：使用渐变颜色绘制仪表盘的外边框。
刻度和标签：绘制了从最小值到最大值的刻度线，并在每个刻度绘制了对应的刻度值。
当前值显示：根据 ValueFormat 属性格式化显示当前值，并显示在仪表盘的底部位置。
protected override void OnRender(DrawingContext drawingContext)
{
base.OnRender(drawingContext);
if (Background == null)
Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#293950"));
var width = ActualWidth;
var height = ActualHeight;
var radius = Math.Min(width, height) / 2;
drawingContext.DrawEllipse(Background, new Pen(Background, Thickness), new Point(width / 2, height / 2), radius, radius);
var normalizedValue = (Value - Minimum) / (Maximum - Minimum);
var mappedAngle = -220 + normalizedValue * 260;
var angleInRadians = mappedAngle * Math.PI / 180;
var pointerLength = radius * 0.7;
var pointerX = width / 2 + pointerLength * Math.Cos(angleInRadians);
var pointerY = height / 2 + pointerLength * Math.Sin(angleInRadians);
drawingContext.DrawLine(new Pen(Brushes.Red, 2), new Point(width / 2, height / 2), new Point(pointerX, pointerY));
drawingContext.DrawEllipse(Brushes.White, new Pen(Brushes.Red, 2), new Point(width / 2, height / 2), width / 20, width / 20);
var pathGeometry = new PathGeometry();
var startAngle = -220;
angleInRadians = startAngle * Math.PI / 180;
var startX = width / 2 + radius * Math.Cos(angleInRadians);
var startY = height / 2 + radius * Math.Sin(angleInRadians);
var pathFigure = new PathFigure()
{
StartPoint = new Point(startX, startY),
};
var endAngle = 40;
angleInRadians = endAngle * Math.PI / 180;
var endX = width / 2 + radius * Math.Cos(angleInRadians);
var endY = height / 2 + radius * Math.Sin(angleInRadians);
var isLargeArc = (endAngle - startAngle > 180);
var arcSegment = new ArcSegment()
{
Point = new Point(endX, endY),
Size = new Size(radius, radius),
RotationAngle = 0,
SweepDirection = SweepDirection.Clockwise,
IsLargeArc = isLargeArc,
};
pathFigure.Segments.Add(arcSegment);
pathGeometry.Figures.Add(pathFigure);
if (BorderBrush == null)
{
var gradientBrush = new LinearGradientBrush
{
StartPoint = new Point(0, 0),
EndPoint = new Point(1, 0)
};
gradientBrush.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#37D2C2"), 0.0));
gradientBrush.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#5AD2B2"), 0.01));
gradientBrush.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#B77D29"), 0.49));
gradientBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));
gradientBrush.Freeze();
BorderBrush = gradientBrush;
}
drawingContext.DrawGeometry(null, new Pen(BorderBrush, Thickness), pathGeometry);
var tickLength = radius * 0.1;
var step = (Maximum - Minimum) / 10;
for (int i = 0; i <= 10; i++)
{
var angle = startAngle + (i * (endAngle - startAngle) / 10);
var tickStartX = width / 2 + (radius - tickLength) * Math.Cos(angle * Math.PI / 180);
var tickStartY = height / 2 + (radius - tickLength) * Math.Sin(angle * Math.PI / 180);
var tickEndX = width / 2 + (radius + Thickness / 2) * Math.Cos(angle * Math.PI / 180);
var tickEndY = height / 2 + (radius + Thickness / 2) * Math.Sin(angle * Math.PI / 180);
drawingContext.DrawLine(new Pen(Brushes.White, 2), new Point(tickStartX, tickStartY), new Point(tickEndX, tickEndY));
var labelValue = Minimum + step * i;
var formattedText = DrawingContextHelper.GetFormattedText(labelValue.ToString(),Brushes.White, FlowDirection.LeftToRight,FontSize);
var labelRadius = radius - tickLength * 2;
var labelX = width / 2 + labelRadius * Math.Cos(angle * Math.PI / 180) - formattedText.Width / 2;
var labelY = height / 2 + labelRadius * Math.Sin(angle * Math.PI / 180) - formattedText.Height / 2;
drawingContext.DrawText(formattedText, new Point(labelX, labelY));
}
var formattedValue = "{0:0}%";
try
{
formattedValue = string.Format(ValueFormat, Value);
}
catch (FormatException ex)
{
throw new InvalidOperationException("Formatting failed ", ex);
}
var currentValueText = DrawingContextHelper.GetFormattedText(formattedValue, Brushes.White, FlowDirection.LeftToRight, FontSize * 2);
var valueX = width / 2 - currentValueText.Width / 2;
var valueY = height / 2 + radius * 0.4;
drawingContext.DrawText(currentValueText, new Point(valueX, valueY));
var titleValue = DrawingContextHelper.GetFormattedText(Title, Brushes.White, FlowDirection.LeftToRight, FontSize);
valueX = width / 2 - titleValue.Width / 2;
valueY = height / 2 + radius * 0.8;
drawingContext.DrawText(titleValue, new Point(valueX, valueY));
}
XAML 示例
示例引入 WPFDevelopers 1.1.0.3-preview 的 Nuget 正式包
<WrapPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel VerticalAlignment="Bottom">
<wd:Gauge
Title="Min"
Width="100"
Height="100"
Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Black"
BorderBrush="Red"
FontSize="8"
Maximum="90"
Minimum="30"
Thickness="3"
ValueFormat="{}{0:0}值"
Value="{Binding ElementName=MySlider2, Path=Value}" />
<Slider
Name="MySlider2"
Width="200"
Margin="0,0,0,20"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Maximum="90"
Minimum="30" />
</StackPanel>
<StackPanel>
<wd:Gauge
Title="反对率"
Width="200"
Height="200"
Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ValueFormat="{}{0:0}%"
Value="{Binding ElementName=MySlider, Path=Value}" />
<Slider
Name="MySlider"
Width="200"
Margin="0,0,0,20"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Maximum="100"
Minimum="0" />
</StackPanel>
<StackPanel VerticalAlignment="Bottom">
<wd:Gauge
Title="Max"
Width="100"
Height="100"
Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Black"
BorderBrush="DodgerBlue"
FontSize="8"
Maximum="90"
Minimum="30"
Thickness="3"
ValueFormat="{}{0:0}值"
Value="{Binding ElementName=MySlider3, Path=Value}" />
<Slider
Name="MySlider3"
Width="200"
Margin="0,0,0,20"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Maximum="90"
Minimum="30" />
</StackPanel>
</WrapPanel>
效果图
到此这篇关于WPF实现自绘仪表盘Gauge的文章就介绍到这了,更多相关WPF自绘仪表盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
我们给大家分享了关于C#无边框窗体实现以及拖动代码，大家在程序设计的时候如果用的到一起跟着小编学习下吧。2018-03-03
C#借助Spire.Doc for .NET实现Word段落和文本添加底纹
在日常的 Word 文档处理中,我们经常需要通过各种视觉手段来突出重点信息,本文将深入探讨如何利用Spire.Doc for .NET实现 Word 段落和文本的底纹效果,感兴趣的小伙伴可以了解下2026-02-02
ExcelDataReader是一个轻量级的可快速读取Excel文件中数据的工具,本文主要介绍了C#中ExcelDataReader的具体使用,具有一定的参考价值,感兴趣的可以了解一下2025-04-04
这篇文章主要介绍了C# 中的多态底层虚方法调用详情，文章围绕主题展开详细的内容介绍，需要的小伙伴你可以参考一下2022-06-06
在现代应用程序中,数据加密是保护敏感信息安全的重要手段,AES（高级加密标准）是一种广泛使用的对称加密算法,提供强大的数据保护功能,今天,我将为大家展示如何使用 C# 实现 AES 加密和解密,需要的朋友可以参考下2024-12-12
这篇文章主要为大家详细介绍了C#用websocket实现简易聊天功能，客户端方向，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
前段时间由于项目的需求，要在Windows里把同样的组件制作成多个不同名称的服务，这些服务完成类似的功能，仅需要修改业务配置文件2012-06-06
VS Code里使用Debugger for Unity插件调试的方法(2023最新版)
Debugger for Unity是一个非正式支持的，官方推荐的，应用最广的，Visual Studio Code上的Unity调试插件，这篇文章主要介绍了VS Code里使用Debugger for Unity插件进行调试(2023最新版),需要的朋友可以参考下2023-02-02
这篇文章主要介绍了C# WPF里怎么使用CefSharp嵌入一个网页，并给出一个简单示例演示C#和网页（JS）的交互实现，感兴趣的小伙伴可以了解一下2023-04-04
这篇文章介绍了C#定时器插件FluentScheduler的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
最新评论