从头实现一个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等，只分享自己熟悉的、自己会的。
阅读导航：
- 一、先看效果
- 二、本文背景
- 三、代码实现
- 四、文章参考
- 五、代码下载
一、先看效果
二、本文背景
有没有这种场景：开源控件库或者收费的控件库，条形图或者柱状图都非常强大，但我的业务就是不符合，就是要自己设计呢？本文通过简单的实现一个条形图功能，以后类似的统计图可以在这上面进行修改，原理是类似的。
三、代码实现
小编使用.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主题