欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

从头实现一个WPF条形图

程序员文章站 2023-11-10 21:40:10
时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform、WPF、ASP.NET Core等,亦有C++桌面相关的Qt Quick和Qt Widgets等,只分 ......

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

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

本文 dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如winform、wpf、asp.net core等,亦有c++桌面相关的qt quick和qt widgets等,只分享自己熟悉的、自己会的。

阅读导航:

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

一、先看效果

从头实现一个WPF条形图

二、本文背景

有没有这种场景:开源控件库或者收费的控件库,条形图或者柱状图都非常强大,但我的业务就是不符合,就是要自己设计呢?本文通过简单的实现一个条形图功能,以后类似的统计图可以在这上面进行修改,原理是类似的。

三、代码实现

小编使用.net core 3.1创建的wpf工程,创建名称为“barchart”的解决方案后,添加名称为”bar“的wpf用户控件,这个控件就是上图中的单个柱子,下面是bar.xaml代码

 1 <usercontrol x:class="barchart.bar"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              mc:ignorable="d" 
 7              minheight="20" width="auto" loaded="usercontrol_loaded">
 8     <grid sizechanged="grid_sizechanged">
 9         <grid background="{binding background,elementname=border}" opacity="0.3"/>
10         <border x:name="border" background="{binding color}" verticalalignment="bottom" height="{binding barheight}"/>
11         <textblock verticalalignment="center" margin="3" horizontalalignment="center" text="{binding value}" fontsize="20">
12             <textblock.effect>
13                 <dropshadoweffect blurradius="1" shadowdepth="0" color="white"/>
14             </textblock.effect>
15         </textblock>
16     </grid>
17 </usercontrol>

 

bar.xaml.cs代码,主要是绑定前景色及背景色,及柱子百分比值。

 1 using system.componentmodel;
 2 using system.windows;
 3 using system.windows.controls;
 4 using system.windows.media;
 5 
 6 namespace barchart
 7 {
 8     /// <summary>
 9     /// barchart.xaml 的交互逻辑
10     /// </summary>
11     public partial class bar  : usercontrol, inotifypropertychanged
12     {
13         public event propertychangedeventhandler propertychanged;
14         private void notifypropertychanged(string info)
15         {
16             if (propertychanged != null)
17             {
18                 propertychanged(this, new propertychangedeventargs(info));
19             }
20         }
21 
22         private double _value;
23         public double value
24         {
25             get { return _value; }
26             set
27             {
28                 _value = value;
29                 updatebarheight();
30                 notifypropertychanged("value");
31             }
32         }
33 
34         private double maxvalue;
35         public double maxvalue
36         {
37             get { return maxvalue; }
38             set
39             {
40                 maxvalue = value;
41                 updatebarheight();
42                 notifypropertychanged("maxvalue");
43             }
44         }
45 
46         private double barheight;
47         public double barheight
48         {
49             get { return barheight; }
50             set
51             {
52                 barheight = value;
53                 notifypropertychanged("barheight");
54             }
55         }
56 
57         private brush color;
58         public brush color
59         {
60             get { return color; }
61             set
62             {
63                 color = value;
64                 notifypropertychanged("color");
65             }
66         }
67 
68         private void updatebarheight()
69         {
70             if (maxvalue > 0)
71             {
72                 var percent = (_value * 100) / maxvalue;
73                 barheight = (percent * this.actualheight) / 100;
74             }
75         }
76 
77         public bar()
78         {
79             initializecomponent();
80 
81             this.datacontext = this;
82             color = brushes.black;
83         }
84 
85 
86         private void usercontrol_loaded(object sender, routedeventargs e)
87         {
88             updatebarheight();
89         }
90 
91         private void grid_sizechanged(object sender, sizechangedeventargs e)
92         {
93             updatebarheight();
94         }
95     }
96 }

 

主窗体mainwindow.xaml,添加显示的业务数据,目前只是展示了进度值,其他标签只要你看懂了代码,很好加的,比如每根柱子,上面颜色显示一种意义名称、下面显示另一种意义名称。

 1 <window x:class="barchart.mainwindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:barchart"
 7         mc:ignorable="d"
 8         background="#ff252525" fontfamily="nontserrrat"
 9         title="mainwindow" height="600" width="1080" windowstyle="none" resizemode="noresize" windowstartuplocation="centerscreen">
10     <grid>
11         <grid.rowdefinitions>
12             <rowdefinition height="70"/>
13             <rowdefinition height="*"/>
14         </grid.rowdefinitions>
15 
16         <border borderbrush="gray" borderthickness="0 0 0 1">
17             <textblock text="dotnet9.com" verticalalignment="center" margin="15"
18                        foreground="white" fontsize="24"/>
19         </border>
20 
21         <border grid.row="1" width="500" height="300" verticalalignment="top"
22                 horizontalalignment="left" margin="20" background="white"
23                 borderbrush="gray" cornerradius="12">
24             <grid>
25                 <textblock text="自定义条形图" margin="10" fontsize="15"/>
26                 <stackpanel orientation="horizontal" height="200" verticalalignment="bottom">
27                     <local:bar background="#ff4455aa" color="#ff88aa55" maxvalue="100" value="80" margin="5"/>
28                     <local:bar background="#ff4335aa" color="#ff883355" maxvalue="100" value="26" margin="5"/>
29                     <local:bar background="#f26455aa" color="#ff88a355" maxvalue="100" value="49" margin="5"/>
30                     <local:bar background="#ff4423aa" color="#ff88a115" maxvalue="100" value="23" margin="5"/>
31                     <local:bar background="#ff4415aa" color="#ff887955" maxvalue="100" value="97" margin="5"/>
32                     <local:bar background="#ff44513a" color="#ff896a55" maxvalue="100" value="68" margin="5"/>
33                 </stackpanel>
34             </grid>
35         </border>
36     </grid>
37 </window>

 

四、文章参考

参考:
design com wpf :    https://www.youtube.com/watch?v=3rz9yrwrznq

五、代码下载

文章中代码已经全部贴出,小编这里还是建议:能使用开源的控件库还是使用开源控件库吧,自己定义确实有点麻烦。

本文只是给个例子,方便自定义扩展。

 

 

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

转载请注明本文地址:

欢迎扫描下方二维码关注 dotnet9 的微信公众号,本站会及时推送最新技术文章(微信公众号“dotnet9_com”):

 

如有收获,请大力转发,给dotnet9赞助和支持,谢谢大家对dotnet技术的关注和支持 。

本站使用  的 justnews主题