首先说一下思路: 先创建一个控件(其实就是一个canvas),在canvas里面生成一条线,给这条线绑定一个pointcollection,在主界面中用一个定时器改变这个pointcollection的值就行了.

 

1.创建的控件

 public partial class brokenline : usercontrol
    {                     
        public brokenline()
        {
            initializecomponent();
            this.loaded += brokenline_loaded;
        }
        private brush mbrushes;
        private pointcollection coordinatepoints = new pointcollection();
        polyline curvepolyline = new polyline();
        public brokenline(pointcollection pointcollection,brush brushes)
        {
            initializecomponent();
            this.loaded += brokenline_loaded;
            coordinatepoints = pointcollection;
            mbrushes = brushes;
        }
        private void brokenline_loaded(object sender, routedeventargs e)
        {
            curvepolyline = new polyline();
            curvepolyline.stroke = mbrushes;
            curvepolyline.strokethickness = 1;
            canvas.setleft(curvepolyline, 5);
            canvas.settop(curvepolyline, 5);
            curvepolyline.points = coordinatepoints;
            chartcanvas.children.add(curvepolyline);
        }
    }

 

2.主界面的代码

  brokenline xinlv_brokenline = new brokenline(mxl.coordinatepoints, new solidcolorbrush((color)colorconverter.convertfromstring("#35cd75")));
                    canvas.settop(xinlv_brokenline, 20);
                    canvas_tz.children.add(xinlv_brokenline);
   if (points!=null && points.count>10)///points作为一个缓存集合
                {
                    if (points.count >= 10)
                    {
                        for (int k = 0; k < 10; k++)
                        {
                            coordinatepoints.add(points[k]);
                            if (coordinatepoints.count > mshowlength)//mshowlength控制最多能显示的长度(点的个数)
                            {
                                addcurvepoint(true, 0.8);//将要显示的点全部向前移动一位
                            }
                        }
                        points.removerange(0, 10);
                    }
                    else {
                        for (int k = 0; k < points.count; k++)
                        {
                            coordinatepoints.add(points[k]);
                            if (coordinatepoints.count > mshowlength)
                            {
                                addcurvepoint(true, 0.8);
                            }
                        }
                        points.clear();
                    }

                }
       private void addcurvepoint(boolean ismeet, double length)
        {
            if (ismeet)
            {
                coordinatepoints.removeat(0);
                for (int i = 0; i < coordinatepoints.count-1; i++)
                {
                    coordinatepoints[i] = new point(coordinatepoints[i].x - length, coordinatepoints[i].y);
                }
                coordinatepoints[coordinatepoints.count-1] = new point(coordinatepoints[coordinatepoints.count-1].x - length*mx, coordinatepoints[coordinatepoints.count - 1].y);
                mx++;
            }


        }