码迷,mamicode.com
首页 > Windows程序 > 详细

WPF自定义控件(2)——图表设计[1]

时间:2017-04-06 00:13:45      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:使用   name   画布   分享   需要   isa   动态   closed   控件   

0、讲点废话


除了仪表盘控件比较常用外,还有图表也经常使用,同样网上也有非常强大的图表控件,有收费的(DVexpress),也有免费的。但我们平时在使用时,只想简单地绘一个图,控件库里面的许多功能我们都用不到,没必要使用那么功能丰富的控件,以提高程序运行的效率和减小程序的占用空间。同时,我们自己如果能够绘制图表出来,对于程序的移植,也非常方便。对于大部分平台,相信设计方法是不会变的。

1、图表整体设计


简单来看一个图表的组成,一般由4个部分组成,坐标轴,刻度和刻度值,绘图区域(添加数据点和绘制曲线)。

2、坐标轴绘制


先作出两根垂直的直线出来,为x轴和y轴,XAML代码如下。2,3行代码即为两个数轴。4~23行,是作出两个小三角形,以形成箭头的形状。

 1 <Canvas Margin="5">
 2     <Line x:Name="x_axis" Stroke="Black" StrokeThickness="3" X1="40" Y1="280" X2="480" Y2="280" StrokeStartLineCap="Round"/>
 3     <Line x:Name="y_axis" Stroke="Black" StrokeThickness="3" X1="40" Y1="280" X2="40" Y2="30" StrokeStartLineCap="Round"/>
 4     <Path x:Name="x_axisArrow" Fill="Black">
 5         <Path.Data>
 6             <PathGeometry>
 7                 <PathFigure StartPoint="480,276" IsClosed="True">
 8                     <LineSegment Point="480,284"/>
 9                     <LineSegment Point="490,280"/>
10                 </PathFigure>
11             </PathGeometry>
12         </Path.Data>
13     </Path>
14     <Path x:Name="y_axisArrow" Fill="Black">
15         <Path.Data>
16             <PathGeometry>
17                 <PathFigure StartPoint="36,30" IsClosed="True">
18                     <LineSegment Point="44,30"/>
19                     <LineSegment Point="40,20"/>
20                 </PathFigure>
21             </PathGeometry>
22         </Path.Data>
23     </Path>
24 </Canvas>

 WPF中没有画带箭头直线的函数,这个必需要自己写了,最好的方法当然还是在XAML中,用Path来绘制出一个三角形在线的末端。当然这种用绝对坐标绘出来的小三角形,它不方便绘制到别的画布中,当前单纯为了做出效果,后面可以用C#动态生成箭头,在后台完成绘制。上述代码的效果如下所示。

技术分享 

3、坐标轴刻度和标签添加


 

4、数据点添加和曲线绘制


 

心得体会


 

WPF自定义控件(2)——图表设计[1]

标签:使用   name   画布   分享   需要   isa   动态   closed   控件   

原文地址:http://www.cnblogs.com/endlesscoding/p/6670432.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!