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

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

 

1. public partial class UCCircle : UserControl 
2. { 
3.     public UCCircle(double lineCount, double lineLenth, double centerX, double centerY) 
4.     { 
5.         InitializeComponent(); 
6.         //让img1图片控件具有MouseDragElementBehavior行为，且为让此控件在拖动过程中执行dragBehavior_Dragging事件。 
7.         dragBehavior.Attach(this.img1); 
8.         dragBehavior.Dragging += new MouseEventHandler(dragBehavior_Dragging); 
9.         //设置img1可见，设置其初始位置。 
10.         img1.SetValue(Canvas.LeftProperty, centerX - 22.0); 
11.         img1.SetValue(Canvas.TopProperty, centerY - 22.0); 
12.         AddChirldren(lineCount, lineLenth, centerX, centerY); 
13.     } 
14.     MouseDragElementBehavior dragBehavior = new MouseDragElementBehavior(); 
15.     //放所有的线的集合 
16.     private List<ucLine> ucLineList = new List<ucLine>(); 
17.     private void AddChirldren(double lineCount, double lineLenth, double centerX, double centerY) 
18.     { 
19.         //设置平均角度 
20.         double angle = 360.0 / lineCount; 
21.         //设置线的起始点的坐标 
22.         for (int i = 0; i < lineCount; i++) 
23.         { 
24.             ucLine dline = new ucLine(); 
25.             //设置线的半径 
26.             dline.R = lineLenth; 
27.             //设置线的起始点的坐标 
28.             dline.CenterX = centerX; 
29.             dline.CenterY = centerY; 
30.             XX = centerX; 
31.             YY = centerY; 
32.             //设置这根线的角度 
33.             dline.AngleAll = angle * (i); 
34.             CanvasDevice.Children.Add(dline); 
35.             //将所有的线添加到线集合中去，以供拖动过程中使用 
36.             ucLineList.Add(dline); 
37.         } 
38.     } 
39.     /// <summary> 
40.     /// 设置连接两个圈中心的线条 
41.     /// </summary> 
42.     public void SetLinkLine(LinkLineModel lineModel) 
43.     { 
44.  
45.         if (lineModel.PointType == PoiType.StartPoint) 
46.         { 
47.             lineModel.LinkLine.X1 = XX; 
48.             lineModel.LinkLine.Y1 = YY; 
49.         } 
50.         else 
51.         { 
52.             lineModel.LinkLine.X2 = XX; 
53.             lineModel.LinkLine.Y2 = YY; 
54.         } 
55.         if (LinkLineList == null) 
56.             LinkLineList = new List<LinkLineModel>(); 
57.         LinkLineList.Add(lineModel); 
58.  
59.     } 
60.     /// <summary> 
61.     /// 中心点连接线的列表 
62.     /// </summary> 
63.     public List<LinkLineModel> LinkLineList { set; get; } 
64.  
65.     //移动后的中心点位置 
66.     public double XX { get; set; } 
67.     public double YY { get; set; } 
68.  
69.     /// <summary> 
70.     /// img1被拖动的时候触发的事件 
71.     /// </summary> 
72.     /// <param name="sender"></param> 
73.     /// <param name="e"></param> 
74.     void dragBehavior_Dragging(object sender, MouseEventArgs e) 
75.     { 
76.         MouseDragElementBehavior dragBehavior2 = sender as MouseDragElementBehavior; 
77.         //获取到控件被拖动后的位置坐标 
78.         double x1 = dragBehavior2.X + 22; 
79.         double y1 = dragBehavior2.Y + 22; 
80.         XX = x1; 
81.         YY = y1; 
82.         foreach (ucLine dline in ucLineList) 
83.         { 
84.             //设置lineD线的起点坐标为移动后的坐标位置 
85.             dline.LineD.X1 = x1; 
86.             dline.LineD.Y1 = y1; 
87.         } 
88.  
89.         //设置起始点或者终结点的位置 
90.         foreach (LinkLineModel linemodel in LinkLineList) 
91.         { 
92.             if (linemodel.PointType == PoiType.StartPoint) 
93.             { 
94.                 linemodel.LinkLine.X1 = XX; 
95.                 linemodel.LinkLine.Y1 = YY; 
96.             } 
97.             else 
98.             { 
99.                 linemodel.LinkLine.X2 = XX; 
100.                 linemodel.LinkLine.Y2 = YY; 
101.             } 
102.         } 
103.  
104.     } 
105. } 

        UCCircle.Xaml代码如下：

 

1. <Grid x:Name="LayoutRoot" Background="White"> 
2.     <Canvas x:Name="CanvasDevice" > 
3.  
4.         <Image x:Name="img1" Source="yellow.png" Width="44" Canvas.ZIndex="300" Height="44"></Image> 
5.     </Canvas> 
6. </Grid> 

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

 

1. public class LinkLineModel 
2. { 
3.     /// <summary> 
4.     /// 起点线还是终点线 
5.     /// </summary> 
6.     public PoiType PointType { get; set; } 
7.  
8.     /// <summary> 
9.     /// 线 
10.     /// </summary> 
11.     public Line LinkLine { get; set; } 
12.  
13.     /// <summary> 
14.     /// 线条名字 
15.     /// </summary> 
16.     public string LineName { get; set; } 
17. } 

        定义了一个枚举如下：

 

1. /// <summary> 
2. /// 指定点的类型是起始点还是终结点 
3. /// </summary> 
4. public enum PoiType 
5. {  
6.     StartPoint, 
7.     EndPoint 
8. } 

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

 

1. public partial class MainPage : UserControl 
2. { 
3.     public MainPage() 
4.     { 
5.         InitializeComponent(); 
6.         CanvasDevice.Children.Clear(); 
7.  
8.         //连接uc和uc1的线条 
9.         Line line = new Line(); 
10.         line.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0)); 
11.         line.AllowDrop = true; 
12.  
13.         //连接uc1和uc2的线条 
14.         Line line2 = new Line(); 
15.         line2.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0)); 
16.         line2.AllowDrop = true; 
17.  
18.         //声明三个圆心的图 
19.         UCCircle uc = new UCCircle(5, 100, 250, 150); 
20.         UCCircle uc1 = new UCCircle(6, 100, 160, 370); 
21.         UCCircle uc2 = new UCCircle(6, 100, 450, 400); 
22.  
23.         //设置线条一 在子控件中 
24.         uc.SetLinkLine(new LinkLineModel() { LinkLine= line, PointType= PoiType.StartPoint }); 
25.         uc1.SetLinkLine(new LinkLineModel() { LinkLine = line, PointType = PoiType.EndPoint }); 
26.  
27.         //设置线条二 在子控件中 
28.         uc1.SetLinkLine(new LinkLineModel() { LinkLine = line2, PointType = PoiType.StartPoint }); 
29.         uc2.SetLinkLine(new LinkLineModel() { LinkLine = line2, PointType = PoiType.EndPoint }); 
30.  
31.         //将线条和子空间添加到Canvas中 
32.         CanvasDevice.Children.Add(line); 
33.         CanvasDevice.Children.Add(line2); 
34.         CanvasDevice.Children.Add(uc); 
35.         CanvasDevice.Children.Add(uc1); 
36.         CanvasDevice.Children.Add(uc2); 
37.     } 
38. } 

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

 

 

本文转自程兴亮 51CTO博客，原文链接:http://blog.51cto.com/chengxingliang/827110