推荐一个 WPF 仪表盘开源控件

93 阅读2分钟

前言

前段时间,做服务器端监控系统,为了界面好看,采用WPF。硬件相关监控,比如CPU、内存等,想用仪表盘控件。网上找了很多这种控件,基本上都是第三方商业控件(虽然很漂亮,不过得money...)。

最后在CodeProject上找到了一款还不错的开源的仪表盘控件 CircularGauge

www.codeproject.com/Articles/38…

正文

用了下该控件,感觉还不错,由于很多参数(比如圆盘半径大小、指针大小等等),进行大小调整时需要多试几次才能达到想要的效果。

由于项目中监控重点是数据库相关内容,硬件监控只是简单点缀,显得好看而已,没有调的比较大。

效果图如下:

<UserControl x:Class="Monitor.UC.UCGauge"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             xmlns:gauge="clr-namespace:CircularGauge;assembly=CircularGauge" Loaded="UserControl_Loaded">
    <Grid>
        <gauge:CircularGaugeControl x:Name="myGauge1" Grid.Column="0" Grid.Row="0" 
                Radius="75" 
                ScaleRadius="55" 
                ScaleStartAngle="120" 
                ScaleSweepAngle="300"
                PointerLength="35" 
                PointerCapRadius="15" 
                MinValue="0" 
                MaxValue="100" 
                MajorDivisionsCount="10" 
                MinorDivisionsCount="5" 
                ImageSize="20,30"
                RangeIndicatorThickness="4"
                RangeIndicatorRadius="56"
                RangeIndicatorLightRadius="5"
                RangeIndicatorLightOffset="40"
                ScaleLabelRadius="45"
                ScaleLabelSize="18,10"
                ScaleLabelFontSize="8"
                ScaleLabelForeground="LightGray"
                MajorTickSize="10,3"
                MinorTickSize="3,1"
                MajorTickColor="LightGray"
                MinorTickColor="LightGray"
                ImageOffset="-22"
                GaugeBackgroundColor="Black"
                PointerThickness ="16"
                OptimalRangeStartValue="30"
                OptimalRangeEndValue="90" 
                DialTextOffset="20" 
                DialTextColor="Black" 
                BelowOptimalRangeColor="Green" OptimalRangeColor="Yellow"
        </gauge:CircularGaugeControl>
    </Grid>
</UserControl>
<UserControl xmlns:my="clr-namespace:Monitor.UC"  x:Class="Monitor.UC.UCMonitor"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid Margin="0,2,0,0">
        <!--定义框-->
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Image Style="{StaticResource HardwareImage}" Grid.Row="0" Margin="2,0,0,0"></Image>
        <Label Style="{StaticResource BlackContentText}" Content="硬件监控" Grid.Row="0"  Margin="20,5,2,2"></Label>

        <Grid Grid.Row="1" Style="{StaticResource HardwareBackgroundGrid}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.5*"></ColumnDefinition>
                <ColumnDefinition Width="0.5*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <my:UCGauge  x:Name="ucGaugeCUP" Grid.Column="0"/>
            <my:UCGauge x:Name="ucGaugeMemory" Grid.Column="1"/>
        </Grid>
    </Grid>
</UserControl>

总结

在开发服务器端监控系统时,为了提升用户界面的美观性和用户体验,开常常需要集成仪表盘控件来展示如CPU使用率、内存占用等硬件监控信息。在CodeProject上可以找到一款名为CircularGauge的开源WPF仪表盘控件,它提供了一个既经济又实用的解决方案。

最后

如果你觉得这篇文章对你有帮助,不妨点个赞支持一下!你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助,欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区,与其他热爱技术的同行一起交流心得,共同成长!

优秀是一种习惯,欢迎大家留言学习!

作者:WebEnh

出处:cnblogs.com/webenh/p/18207343

声明:网络内容,仅供学习,尊重版权,侵权速删,歉意致谢!