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

概述        在本系列的第17篇文章中“Silverlight实用窍门系列：17.中心点联动多线的可拖动控件（绘制工程图、拓扑图基础） ”，制作了基本的中心联动图标。有园友对此图的扩展不是很清晰，所以在本文中我们将在那基础上做一个简易的拓扑图。         首先：将黄球为中心，绿球为圆圈的节点封装为一个子控件，然后提供一个接口，该接口可以接收一条外部的直线，并且这个接口可以指定在子控件中外部

        在本系列的第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 @R_502_6818@<ucline> ucline@R_502_6818@ = new @R_502_6818@<ucline>();         private voID AddChirldren(double lineCount, 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);                 //将所有的线添加到线集合中去，以供拖动过程中使用                 ucline@R_502_6818@.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 (linkline@R_502_6818@ == null)                 linkline@R_502_6818@ = new @R_502_6818@<linklineModel>();             linkline@R_502_6818@.Add(lineModel);              }         /// <summary>         /// 中心点连接线的列表         /// </summary>         public @R_502_6818@<linklineModel> linkline@R_502_6818@ { 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 ucline@R_502_6818@)             {                 //设置lineD线的起点坐标为移动后的坐标位置                 dline.lineD.X1 = x1;                 dline.lineD.Y1 = y1;             }                  //设置起始点或者终结点的位置             foreach (linklineModel linemodel in linkline@R_502_6818@)             {                 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, 0));             line2.AllowDrop = true;                  //声明三个圆心的图             UCCircle uc = new UCCircle(5, 100, 250, 150);             UCCircle uc1 = new UCCircle(6, 160, 370);             UCCircle uc2 = new UCCircle(6, 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 下载。下面是效果图，建议下载源码之后观看。

 

总结

以上是内存溢出为你收集整理的Silverlight实用窍门系列：59.多个中心点联动多线的可拖动控件扩展为拓扑图全部内容，希望文章能够帮你解决Silverlight实用窍门系列：59.多个中心点联动多线的可拖动控件扩展为拓扑图所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。