vb窗体基础编程100例（用CWPF简单实现仪表控件）-爱玩科技

逗爷 2023-04-02 16:52:15 397

vb窗体基础编程100例（用CWPF简单实现仪表控件）2、添加一个用户控件，命名为“UserControlGauge.xaml”1、站长使用.Net Core 3.1创建的WPF工程，创建的名称为“Gauge”的解决方案。一、先看效果二、本文背景三、代码实现四、文章参考五、代码下载小编全程是看 Design com WPF 大神视频手敲的仪表控件代码，视频长度19:28，只有背景声音，无国界的视频传播课程，和大神只有代码交流，大家有兴趣，可以到大神YouTube上膜拜，看视频学C# WPF技术我看行。整个解决方案结构：

时间如流水，只能流去不流回！

点赞再看，养成习惯，这是您给我创作的动力！

本文 Dotnet9 https://dotnet9.com 已收录，站长乐于分享dotnet相关技术，比如Winform、WPF、ASP.NET Core等，亦有C 桌面相关的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己会的。

阅读导航：

一、先看效果
二、本文背景
三、代码实现
四、文章参考
五、代码下载

一、先看效果

vb窗体基础编程100例（用CWPF简单实现仪表控件）(1)

二、本文背景

小编全程是看 Design com WPF 大神视频手敲的仪表控件代码，视频长度19:28，只有背景声音，无国界的视频传播课程，和大神只有代码交流，大家有兴趣，可以到大神YouTube上膜拜，看视频学C# WPF技术我看行。

三、代码实现

整个解决方案结构：

vb窗体基础编程100例（用CWPF简单实现仪表控件）(2)

1、站长使用.Net Core 3.1创建的WPF工程，创建的名称为“Gauge”的解决方案。

2、添加一个用户控件，命名为“UserControlGauge.xaml”

下面就是仪表控件的xaml部分，代码不多，总体上就是用两个Border绘制出仪表盘的轮廓，再加一个表针Border、一个数值展示TextBlock，外加一个控制仪表值的Slider，就这么简单做出了仪表控件的一个大致样子：

3、添加仪表控件ViewModel

仪表控件实际使用场景，可能要在仪表盘上加上显示的刻度值，仪表值会根据业务实时变化等，这些都方便添加，读者可以自己扩展，下面的ViewModel只是绑定了仪表控件的指针摆动角度及显示的实际刻度值：

using System.ComponentModel; namespace Gauge { public class GaugeViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(string info) { if (PropertyChanged != null) { PropertyChanged(this new PropertyChangedEventArgs(info)); } } public GaugeViewModel() { Angle = -85; Value = 0; } private int _angle; public int Angle { get { return _angle; } private set { if (value != _angle) { _angle = value; NotifyPropertyChanged("Angle"); } } } private int _value; public int Value { get { return _value; } set { if (value != _value && value >= 0 && value <= 170) { _value = value; Angle = value - 85; NotifyPropertyChanged("Value"); } } } } }

4、主窗体MainWindow

xaml部分简单，直接加入仪表控件即可：

后台绑定控件ViewModel

using System.Windows; namespace Gauge { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { this.DataContext = new GaugeViewModel(); InitializeComponent(); } } }