Silverlight实用窍门系列：59.多个中心点联动多线的可拖动控件扩展为拓扑图

        在本系列的第17篇文章中“Silverlight实用窍门系列：17.中心点联动多线的可拖动控件（绘制工程图、拓扑图基础） ”，制作了基本的中心联动图标。有园友对此图的扩展不是很清晰，所以在本文中我们将在那基础上做一个简易的拓扑图。

        首先：将黄球为中心，绿球为圆圈的节点封装为一个子控件，然后提供一个接口，该接口可以接收一条外部的直线，并且这个接口可以指定在子控件中外部链接线的起始点还是结束点。      

    public partial class UCCircle : UserControl
    {
        public UCCircle(double lineCount, double lineLenth, double centerX, double centerY)
        {
            InitializeComponent();
            //让img1图片控件具有MouseDragElementBehavior行为，且为让此控件在拖动过程中执行dragBehavior_Dragging事件。
            dragBehavior.Attach(this.img1);
            dragBehavior.Dragging += new MouseEventHandler(dragBehavior_Dragging);
            //设置img1可见，设置其初始位置。
            img1.SetValue(Canvas.LeftProperty, centerX - 22.0);
            img1.SetValue(Canvas.TopProperty, centerY - 22.0);
            AddChirldren(lineCount, lineLenth, centerX, centerY);
        }
        MouseDragElementBehavior dragBehavior = new MouseDragElementBehavior();
        //放所有的线的集合
        private List<ucLine> ucLineList = new List<ucLine>();
        private void AddChirldren(double lineCount, double lineLenth, double centerX, double centerY)
        {
            //设置平均角度
            double angle = 360.0 / lineCount;
            //设置线的起始点的坐标
            for (int i = 0; i < lineCount; i++)
            {
                ucLine dline = new ucLine();
                //设置线的半径
                dline.R = lineLenth;
                //设置线的起始点的坐标
                dline.CenterX = centerX;
                dline.CenterY = centerY;
                XX = centerX;
                YY = centerY;
                //设置这根线的角度
                dline.AngleAll = angle * (i);
                CanvasDevice.Children.Add(dline);
                //将所有的线添加到线集合中去，以供拖动过程中使用
                ucLineList.Add(dline);
            }
        }
        /// <summary>
        /// 设置连接两个圈中心的线条
        /// </summary>
        public void SetLinkLine(LinkLineModel lineModel)
        {

            if (lineModel.PointType == PoiType.StartPoint)
            {
                lineModel.LinkLine.X1 = XX;
                lineModel.LinkLine.Y1 = YY;
            }
            else
            {
                lineModel.LinkLine.X2 = XX;
                lineModel.LinkLine.Y2 = YY;
            }
            if (LinkLineList == null)
                LinkLineList = new List<LinkLineModel>();
            LinkLineList.Add(lineModel);

        }
        /// <summary>
        /// 中心点连接线的列表
        /// </summary>
        public List<LinkLineModel> LinkLineList { set; get; }

        //移动后的中心点位置
        public double XX { get; set; }
        public double YY { get; set; }

        /// <summary>
        /// img1被拖动的时候触发的事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        void dragBehavior_Dragging(object sender, MouseEventArgs e)
        {
            MouseDragElementBehavior dragBehavior2 = sender as MouseDragElementBehavior;
            //获取到控件被拖动后的位置坐标
            double x1 = dragBehavior2.X + 22;
            double y1 = dragBehavior2.Y + 22;
            XX = x1;
            YY = y1;
            foreach (ucLine dline in ucLineList)
            {
                //设置lineD线的起点坐标为移动后的坐标位置
                dline.LineD.X1 = x1;
                dline.LineD.Y1 = y1;
            }

            //设置起始点或者终结点的位置
            foreach (LinkLineModel linemodel in LinkLineList)
            {
                if (linemodel.PointType == PoiType.StartPoint)
                {
                    linemodel.LinkLine.X1 = XX;
                    linemodel.LinkLine.Y1 = YY;
                }
                else
                {
                    linemodel.LinkLine.X2 = XX;
                    linemodel.LinkLine.Y2 = YY;
                }
            }

        }
    }

        UCCircle.Xaml代码如下：

    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas x:Name="CanvasDevice" >

            <Image x:Name="img1" Source="yellow.png" Width="44" Canvas.ZIndex="300" Height="44"></Image>
        </Canvas>
    </Grid>

        接口中指定线条是起始点还是终结点，以供子控件识别并且随时改变两个子控件中的连接线位置。

    public class LinkLineModel
    {
        /// <summary>
        /// 起点线还是终点线
        /// </summary>
        public PoiType PointType { get; set; }

        /// <summary>
        /// 线
        /// </summary>
        public Line LinkLine { get; set; }

        /// <summary>
        /// 线条名字
        /// </summary>
        public string LineName { get; set; }
    }

        定义了一个枚举如下：

    /// <summary>
    /// 指定点的类型是起始点还是终结点
    /// </summary>
    public enum PoiType
    { 
        StartPoint,
        EndPoint
    }

        最后看MainPage.xaml.cs代码如下，构造了三个子控件，两条子控件之间的连接线：

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            CanvasDevice.Children.Clear();

            //连接uc和uc1的线条
            Line line = new Line();
            line.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
            line.AllowDrop = true;

            //连接uc1和uc2的线条
            Line line2 = new Line();
            line2.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
            line2.AllowDrop = true;

            //声明三个圆心的图
            UCCircle uc = new UCCircle(5, 100, 250, 150);
            UCCircle uc1 = new UCCircle(6, 100, 160, 370);
            UCCircle uc2 = new UCCircle(6, 100, 450, 400);

            //设置线条一 在子控件中
            uc.SetLinkLine(new LinkLineModel() { LinkLine= line, PointType= PoiType.StartPoint });
            uc1.SetLinkLine(new LinkLineModel() { LinkLine = line, PointType = PoiType.EndPoint });

            //设置线条二 在子控件中
            uc1.SetLinkLine(new LinkLineModel() { LinkLine = line2, PointType = PoiType.StartPoint });
            uc2.SetLinkLine(new LinkLineModel() { LinkLine = line2, PointType = PoiType.EndPoint });

            //将线条和子空间添加到Canvas中
            CanvasDevice.Children.Add(line);
            CanvasDevice.Children.Add(line2);
            CanvasDevice.Children.Add(uc);
            CanvasDevice.Children.Add(uc1);
            CanvasDevice.Children.Add(uc2);
        }
    }

        如需源码请点击 SLLinkLine.rar 下载。下面是效果图，建议下载源码之后观看。