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 下载。下面是效果图，建议下载源码之后观看。