用C# WPF简单实现仪表控件

时间如流水,只能流去不流回!

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

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

阅读导航:

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

一、先看效果

二、本文背景

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

三、代码实现

整个解决方案结构:

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

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

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

<UserControl x:Class="Gauge.UserControlGauge"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Gauge"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Slider Minimum="0" Maximum="170" Width="300" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="40" Value="{Binding Path=Value}"/>
        <Border HorizontalAlignment="Center" VerticalAlignment="Bottom" Height="300"    Width="600" BorderBrush="#FFCF5D1D"
                BorderThickness="2 2 2 0" CornerRadius="300 300 0 0" Background="#FF151515"/>
        <Border HorizontalAlignment="Center" VerticalAlignment="Bottom" Height="290"    Width="580" BorderBrush="#FFCF5D1D"
                BorderThickness="0 2 0 0" CornerRadius="300 300 0 0">
            <Border.Effect>
                <DropShadowEffect Color="#FFFFC7A7" BlurRadius="10" ShadowDepth="2"/>
            </Border.Effect>
        </Border>
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="100" FontSize="80" 
                   FontFamily="Agency FB" Foreground="#FF95D4FF" Text="{Binding Path=Value,Mode=TwoWay}">
            <TextBlock.Effect>
                <DropShadowEffect BlurRadius="20" Color="#FF91DEFB" ShadowDepth="0" />
            </TextBlock.Effect>
        </TextBlock>
        <Border Width="5" CornerRadius="120 120 0 0" Background="#FFFF6901" RenderTransformOrigin="0.5 2" Height="140" Margin="0 0 0 140"
                VerticalAlignment="Bottom" HorizontalAlignment="Center">
            <Border.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="{Binding Path=Angle}"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Border.RenderTransform>
        </Border>
    </Grid>
</UserControl>

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部分简单,直接加入仪表控件即可:

<Window x:Class="Gauge.MainWindow"
        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:Gauge"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Background="#FF363636" WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen">
    <Grid>
        <local:UserControlGauge/>
    </Grid>
</Window>

后台绑定控件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();
        }
    }
}

四、文章参考

建议直接打开大神视频学习,他的YouTube上还有很多代码视频哦,参考:
Design com WPFhttps://www.youtube.com/watch?v=KElruOV2EfE&t=930s

五、代码下载

文章中代码几乎已经全部贴出,就是这么多。

除非注明,文章均由 Dotnet9 整理发布,欢迎转载。

转载请注明:
作者:Dotnet9
链接:https://dotnet9.com/6662.html
来源:Dotnet9
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

登录后才能评论