WPF实现炫酷趋势图

时间:2021-10-20 00:44:14

系统: Window 7以上;

工具:VS2013及以上。

研发语言及工程:

C# WPF 应用程序

效果:

WPF实现炫酷趋势图

WPF实现炫酷趋势图

?

WPF实现炫酷趋势图

?

简介:

不需要调用第三方Dll, 仅仅在WPF中使用贝塞尔曲线,不到500行代码构建自定义的趋势图效果。

原理:

WPF中路径Path的Data值为PathGeometry。如:

<Path x:Name="PathData1" Stroke="#FFEE4141" StrokeThickness="2"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.5"> <GradientStop Color="#FFEE4141" Offset="0"/> <GradientStop Color="#7F031528" Offset="1"/> </LinearGradientBrush> </Path.Fill> <Path.Data> <PathGeometry x:Name="PgData1"/> </Path.Data> </Path>

PathGeometry.Figures的Value类型为PathFigureCollection;即PathFigure对象的集合,将一系列的Point数据已构建Beizer曲线的形式处理后生成PathFigureCollection对象,最终以PathGeometry对象赋值给Path.Data即可实现如上述所示的效果。

主要处理函数:

private void SetPathData(PathGeometry geo, List<Point> points) { var myPathFigure = new PathFigure { StartPoint = points.FirstOrDefault() }; var myPathSegmentCollection = new PathSegmentCollection(); var beizerSegments = BeizerUtils.InterpolatePointWithBeizerCurves(points, false); if (beizerSegments == null || beizerSegments.Count < 1) { foreach (var point in points.GetRange(1, points.Count - 1)) { var myLineSegment = new LineSegment { Point = point }; myPathSegmentCollection.Add(myLineSegment); } } else { for (int i = 0; i < beizerSegments.Count; i++) { BeizerCurveSegment beizerCurveSegment = beizerSegments[i]; PathSegment segment = new BezierSegment { Point1 = beizerCurveSegment.FirstControlPoint, Point2 = beizerCurveSegment.SecondControlPoint, Point3 = beizerCurveSegment.EndPoint }; myPathSegmentCollection.Add(segment); } } myPathFigure.Segments = myPathSegmentCollection; var myPathFigureCollection = new PathFigureCollection { myPathFigure }; geo.Figures = myPathFigureCollection; }

WPF实现炫酷趋势图

 源码下载:微信扫描下方二维码文章末尾获取链接。