如何利用C# Winform画一个简单的关系图

     如何利用C# 自带的控件画一个比较简单的关系图，因为很少在Winform开发，所有对我来说，第一反应就是在winform中嵌入网页。因为在网页中，画图是比较容易的，然后利用WebBrowser 嵌入到窗体中。或者可以直接找第三方画流程图的控件进行绘画。但是，对于我来说，如何利用Winform创建，却很重要。在多方面的尝试中，一步一步的探索，终于画出了满意的图片。

    在我这个小Demo中，第一、根据输入的一个数，查找相关数据之间的关系，所以数据源是动态的，即动态绘图；第二、数据源的逻辑，有点复杂。大概是这么个样子，针对数据之间的逻辑关系大致可以划分成以下情况：

            （1）1个体 A；

            （2）A有多个子节点；

            （3）A有多个父节点；

            （4）当A只有一个子节点时，需要知道列出该子节点的所有父节点或者只有一个父节点时，列出该父节点的所有子节点；是不是有点乱了，或许看图会好一些：

  

图（1）

图（2）

图（3）

图（4）

    起初，我刚开始设计的时候，发现这些位置都应该是相对的。所以我先固定要寻找的点，当然这个点的在几种情况下是固定的，但是为了美观些，我将列分为三块区域，而我的起始点初步左中两个区域。不啰嗦，直接讲原理，每个数字就是一个picturebox,背景可以画长方形，园，椭圆，然后根据字数的长度以及背景图像的宽度，在画字的时候，让字居中显示。另外一个难点就是画线，需要创建一个类Lines，用来记住开始与终点的控件。

    Lines类：     

     public class Lines
        {
            public Control StartControl { get; set; }

            public Control EndControl { get; set; }

            public Lines(Control startCtl, Control endCtl)
            {
                this.StartControl = startCtl;
                this.EndControl = endCtl;
            }
         }

    画picturebox，以及动态绑定Click事件，利用Graphics的DrawString来在图片上写字。默认情况的，图片或者线之类的可能出现锯齿，在画的时候设置一下 gra.SmoothingMode = SmoothingMode.HighQuality;下面是我画方框图的代码：

        #region 画方框图

        /// <summary>
        /// 画方框图
        /// </summary>
        /// <param name="picBox"></param>
        /// <param name="content"></param>
        /// <param name="brush"></param>
        private void DrawContentOnImage(PictureBox picBox, string content, Brush brush)
        {
            Bitmap bitmap = new Bitmap(picBox.Width, picBox.Width);

            picBox.Image = bitmap;
            Graphics gra = Graphics.FromImage(bitmap);
            //Pen pen = new Pen(Color.Black);//画笔颜色
            gra.SmoothingMode = SmoothingMode.HighQuality;
            PointF p = new PointF();
            p.Y = 6;
            int len = content.Trim().Length;
            p.X = this._width / 2 - (float)3.6 * len;
            gra.DrawString(content, new Font("宋体", 10), brush, p);




            //gra.DrawEllipse(pen,0 ,0, 67, 26);//画椭圆的方法，x坐标、y坐标、宽、高，如果是100，则半径为50

            //Point p=new Point();
            //p.Y = 6;
            //int len = content.Trim().Length;
            //p.X = 7;
            //if (len <= 6)
            //{
            //    p.X = 31 - 4*len;
            //}
            //gra.DrawString(content, new Font("宋体", 10), brush,p);
        }

        /// <summary>
        /// 根据字符串画picturebox
        /// </summary>
        /// <param name="contents"></param>
        /// <param name="parent"></param>
        /// <param name="startPoint"></param>
        /// <returns></returns>
        private List<Control> DrawContentContainers(List<Zdgx> contents, Control parent, Point startPoint, Brush brush)
        {
            List<Control> controlLst = new List<Control>();
            PictureBox picb;
            int x = startPoint.X;
            int y = startPoint.Y;

            //Graphics g = parent.CreateGraphics();

            foreach (Zdgx gx in contents)
            {
                Point p = new Point(x, y);
                picb = new PictureBox();
                picb.Location = p;
                picb.Name = gx.Zdh;

                picb.BorderStyle = BorderStyle.FixedSingle;
                picb.Width = this._width;
                picb.Height = this._height;

                this._picControls.Add(picb);
                picb.Click += new EventHandler(picb_Click);
                parent.Controls.Add(picb);

                controlLst.Add(picb);

                DrawContentOnImage(picb, gx.Zdh, brush);

                y = y + this._heightBetween;
            }

            return controlLst;
        }

        public void picb_Click(object sender, EventArgs e)
        {
            string zdj = "";
            PictureBox pb = sender as PictureBox;
            MessageBox.Show(pb.Name);
        }
         #endregion

    接下来就是画数据之间的两两关系了，就是画线了，这里我一般都会定义一个全局变量，List<Lines> _lineLst=newList<Lines>();用来存储有关系的pictcurebox。然后开始画线：

        /// <summary>
        /// 画图
        /// </summary>
        /// <param name="linesLst"></param>
        public void DrawGxLine(List<Lines> linesLst)
        {
            if (linesLst != null)
            {
                foreach (Lines line in linesLst)
                {
                    //右下角坐标
                    Point pLft = new Point(line.StartControl.Location.X + line.StartControl.Width, line.StartControl.Location.Y + line.StartControl.Height / 2);

                    //左上角图标
                    Point pRgt = new Point(line.EndControl.Location.X, line.EndControl.Location.Y + line.EndControl.Height / 2);

                    Pen p = new Pen(Color.Black);
                    p.DashStyle = System.Drawing.Drawing2D.DashStyle.Solid;
                    p.EndCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor;
                    p.CustomEndCap = new System.Drawing.Drawing2D.AdjustableArrowCap(5, 5, true);
                    Graphics g = this.CreateGraphics();
                    g.SmoothingMode = SmoothingMode.HighQuality;
                    g.DrawLine(p, pLft, pRgt);
                }
            }
        }

     然后是处理数据逻辑关系，与计算位置的方法了，大体上解释一下，我们从左往右思考，如果出现图（1）的情况，将起始位置处理成左边位置，起始的高度是一样的；接着，如果A的父节点B只有一个的情况下，我们就计算该父节点B下的所有子节点，根据B的子节点的个数，计算出B在这几个节点的左侧中间位置，同时记住中间_centerLastControl，与位置关系;如果A存在多个父节点，那就根据A节点的计算出左侧的picturebox的起始点的高度，每个节点的高度是一个定值。右边的逻辑，与左侧一样的。

    public void InitInfo(string zdh)
        {
            if (string.IsNullOrEmpty(zdh)) return;
            if (zdh.Length > 19) return;
            initialIList();
            ClearZdGxT();

            //SetStyle(ControlStyles.UserPaint | ControlStyles.AllPaintingInWmPaint, false);
            //UpdateStyles();

            this._picControls = new List<PictureBox>();
            this._zdh = zdh;
            List<ZD_GX> leftList = GetData(this._zdh, true);
            List<ZD_GX> rightList = GetData(this._zdh, false);

            #region 
            if (leftList.Count == 0 && rightList.Count == 0)
            {
                //中间默认ID为0
                this._centerZdGx.Add(new Zdgx(0, this._zdh));
                //画中间的
                this._centerControlLst = DrawContentContainers(this._centerZdGx, this, new Point(this._startX, this._startY), Brushes.Blue);
                Control cCenter = this._centerControlLst[0];
                //中间最下面一个Control
                this._centerLastControl = cCenter;

                //画图
                DrawGxLine(this._lineLst);
                return;
            }
            #endregion

            Control ccCenter = new Control();


            if (leftList.Count > 0)
            {

                //中间默认ID为0
                this._centerZdGx.Add(new Zdgx(0, this._zdh));
                //画中间的
                this._centerControlLst = DrawContentContainers(this._centerZdGx, this, new Point(this._startX + 180, this._startY), Brushes.Blue);
                ccCenter = this._centerControlLst[0];
                //中间最下面一个Control
                this._centerLastControl = ccCenter;

                this._leftZdGx = GetZdgxList(leftList, true);
                int y = 0;

                #region 
                if (this._leftZdGx.Count > 1)
                {
                    y = 0;
                    int count = this._leftZdGx.Count;
                    //为了样式好看些
                    if (this._leftZdGx.Count % 2 == 0)//个数是偶数
                    {
                        y = this._startY - ((this._heightBetween - this._height) / 2 - this._height / 2)
                            - (count / 2) * this._height
                            - (count / 2 - 1) * (this._heightBetween - this._height);
                    }
                    else
                    {
                        y = this._startY - (count / 2) * this._height - (count / 2) * (this._heightBetween - this._height);
                    }

                    //画左边框
                    this._leftControlLst = DrawContentContainers(this._leftZdGx, this, new Point(this._startX, y), Brushes.Black);
                    //左边最下面一个
                    this._leftLastControl = this._leftControlLst[leftList.Count - 1];

                    //保存左-->中的连线
                    foreach (Control c in this._leftControlLst)
                    {
                        _lineLst.Add(new Lines(c, ccCenter));
                    }
                }


                //画左边扩展
                if (leftList.Count == 1)
                {
                    List<ZD_GX> list = GetData(leftList[0].LZDH_L, false);
                    this._leftExtendZdGx = GetZdgxList(list, false);
                    RemoveCenter(this._leftExtendZdGx);
                    if (this._leftExtendZdGx.Count > 0)
                    {
                        y = 0;
                        int count = this._leftExtendZdGx.Count + 1;
                        if (count % 2 == 0)
                        {
                            y = this._startY + ((this._heightBetween - this._height) / 2 - this._height / 2)
                                + (count / 2) * this._height
                                + (count / 2 - 1) * (this._heightBetween - this._height);
                        }
                        else
                        {
                            y = this._startY + (count / 2) * this._height + (count / 2) * (this._heightBetween - this._height);
                        }


                        //画左边框
                        this._leftControlLst = DrawContentContainers(this._leftZdGx, this, new Point(this._startX, y), Brushes.Black);
                        //左边最下面一个
                        this._leftLastControl = this._leftControlLst[leftList.Count - 1];

                        //保存左-->中的连线
                        foreach (Control c in this._leftControlLst)
                        {
                            _lineLst.Add(new Lines(c, ccCenter));
                        }

                        //画中间扩展
                        this._leftExtendControlLst = DrawContentContainers(this._leftExtendZdGx, this, new Point(this._centerLastControl.Location.X, this._centerLastControl.Location.Y + this._heightBetween), Brushes.Black);
                        //中间最后一个
                        this._centerLastControl = this._leftExtendControlLst[this._leftExtendZdGx.Count - 1];

                        //左右连线
                        foreach (Control c in this._leftExtendControlLst)
                        {
                            _lineLst.Add(new Lines(this._leftLastControl, c));
                        }
                    }
                    else
                    {

                        //画左边框
                        this._leftControlLst = DrawContentContainers(this._leftZdGx, this, new Point(this._startX, this._startY), Brushes.Black);
                        //左边最下面一个
                        this._leftLastControl = this._leftControlLst[leftList.Count - 1];

                        //保存左-->中的连线
                        foreach (Control c in this._leftControlLst)
                        {
                            _lineLst.Add(new Lines(c, ccCenter));
                        }
                    }

                }



                #endregion
            }
            else
            {
                //中间默认ID为0
                this._centerZdGx.Add(new Zdgx(0, this._zdh));
                //画中间的
                this._centerControlLst = DrawContentContainers(this._centerZdGx, this, new Point(this._startX, this._startY), Brushes.Blue);
                ccCenter = this._centerControlLst[0];
                //中间最下面一个Control
                this._centerLastControl = ccCenter;
            }





            #region 右边



            //画右边
            if (rightList.Count > 0)
            {
                this._rightZdGx = GetZdgxList(rightList, false);
                int y = 0;

                if (this._rightZdGx.Count > 1)
                {
                    y = 0;
                    //为了样式好看些
                    int count = this._rightZdGx.Count;
                    if (this._leftZdGx.Count % 2 == 0)//个数是偶数
                    {
                        y = this._startY - ((this._heightBetween - this._height) / 2 - this._height / 2)
                            - (count / 2) * this._height
                            - (count / 2 - 1) * (this._heightBetween - this._height);
                    }
                    else
                    {
                        y = this._startY + (count / 2) * this._height + (count / 2) * (this._heightBetween - this._height);
                    }

                    //画右边边框
                    this._rightControlLst = DrawContentContainers(this._rightZdGx, this, new Point(ccCenter.Location.X + 180, y), Brushes.Black);
                    //右边最下面一个
                    this._rightLastControl = this._rightControlLst[rightList.Count - 1];

                    //中右连线
                    foreach (Control c in this._rightControlLst)
                    {
                        _lineLst.Add(new Lines(this._centerControlLst[0], c));
                    }
                }


                //画右边扩展
                if (rightList.Count == 1)
                {
                    List<ZD_GX> list = GetData(rightList[0].LZDH_X, true);
                    this._rightExtendZdGx = GetZdgxList(list, true);
                    RemoveCenter(this._rightExtendZdGx);
                    if (this._rightExtendZdGx.Count > 0)
                    {
                        y = 0;
                        int count = this._rightExtendZdGx.Count + this._leftExtendControlLst.Count + 1;
                        if (count % 2 == 0)
                        {
                            y = this._startY + (this._heightBetween - this._height) / 2 + this._height / 2
                                + (count / 2) * this._height
                                + (count / 2 - 1) * (this._heightBetween - this._height);
                        }
                        else
                        {
                            y = this._startY + (count / 2) * this._height + (count / 2) * (this._heightBetween - this._height);
                        }

                        //画右边边框
                        this._rightControlLst = DrawContentContainers(this._rightZdGx, this, new Point(ccCenter.Location.X + 180, y), Brushes.Black);
                        //右边最下面一个
                        this._rightLastControl = this._rightControlLst[rightList.Count - 1];

                        //中右连线
                        foreach (Control c in this._rightControlLst)
                        {
                            _lineLst.Add(new Lines(this._centerControlLst[0], c));
                        }


                        //画中间扩展
                        this._rightExtendControlLst = DrawContentContainers(this._rightExtendZdGx, this, new Point(this._centerLastControl.Location.X, this._centerLastControl.Location.Y + this._heightBetween), Brushes.Black);
                        //中间最后一个
                        this._centerLastControl = this._rightExtendControlLst[this._rightExtendZdGx.Count - 1];
                        //中右连线

                        foreach (Control c in this._rightExtendControlLst)
                        {
                            _lineLst.Add(new Lines(c, this._rightLastControl));
                        }
                    }
                    else
                    {
                        //画右边边框
                        this._rightControlLst = DrawContentContainers(this._rightZdGx, this, new Point(ccCenter.Location.X + 180, this._startY), Brushes.Black);
                        //右边最下面一个
                        this._rightLastControl = this._rightControlLst[rightList.Count - 1];

                        //中右连线
                        foreach (Control c in this._rightControlLst)
                        {
                            _lineLst.Add(new Lines(this._centerControlLst[0], c));
                        }
                    }

                }




            }
            #endregion

            //画图
            DrawGxLine(this._lineLst);
        }

   清空程序，释放资源：

      private void ClearLines()
        {
            this._lineLst = new List<Lines>();
            this.OnPaint(new PaintEventArgs(this.CreateGraphics(), new Rectangle(this.Location, new Size(this.Width, this.Height))));
        }

        private void ClearPictureBox()
        {
            if (this._picControls.Count > 0)
            {
                foreach (PictureBox picBox in this._picControls)
                {
                    picBox.Dispose();
                }
            }
        }

   在这里会经常发现一个，就是对话框最小化或者放大缩小的时候，我们会发现，绘画的线不见了，那是因为我们在窗体上绘画的时候使用的是 Graphics g = this.CreateGraphics();这种情况下对窗体进行操作会触发它的OnPaint的事件，所以我们需要重写Onpaint的事件。

      protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);

            DrawGxLine(this._lineLst);
        }

   运行结果图：