在本系列的第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 下载。下面是效果图,建议下载源码之后观看。

本文转自程兴亮博客园博客,原文链接:http://www.cnblogs.com/chengxingliang/archive/2012/03/13/2390404.html,如需转载请自行联系原作者

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

  1. Silverlight实用窍门系列:71.Silverlight的Style

    此文章实例基于Silverlight实用窍门系列:68.Silverlight的资源字典ResourceDictionary,如有数据源疑问请参考该文章. 在Silverlight中的Style相当于 ...

  2. Silverlight实用窍门系列:35.细解Silverlight冒泡路由事件和注册冒泡路由事件【附带实例源码】...

    Silverlight中的事件分为普通事件和冒泡路由事件,它并没有包括WPF中的隧道路由事件,在本章中将详细讲解冒泡路由事件和如何注册一个冒泡路由事件. 一.细解冒泡路由事件 冒泡路由事件可以比喻为: ...

  3. Silverlight实用窍门系列:66.Silverlight的数据模板DataTemplate(二)获取数据模板控件...

    在Silverlight中我们使用了数据模板,在很多时候也需要获取到数据模板上的控件,并且进行改变.本文使用的实例数据源和上节相同,如需了解请下载源码查看. 当然在这里我们可以分为获取数据模板原始控件 ...

  4. Silverlight实用窍门系列:65.Silverlight的数据模板DataTemplate(一)使用数据模板

    在Silverlight中,我们的数据列表显示控件有ListBox.DataGrid等.对于显示出来的数据条目样式外观的管理是通过DataTemplate(数据模板)来完成的.本节将从DataTemp ...

  5. Silverlight实用窍门系列:47.Silverlight中元素到元素的绑定,以及ObservableCollection和List的使用区别...

    问题一:在某一些情况下,我们使用MVVM模式的时候,对于某一个字段(AgeField)需要在前台的很多个控件(A.B.C.D.E)进行绑定,但是如何能够让我们后台字段名改变的时候能够非常方便的改变所有 ...

  6. Silverlight实用窍门系列:42.读取拖动到控件上的外部txt和jpg文件,多外部文件的拖动【附带实例源码】...

    本实例将读取拖动到Silverlight的ListBox控件中的txt文件或者Jpg文件.在本实例中将讲如果通过UIelementA.Drop事件获取到拖动到UIelementA上的文件的相关名称以及 ...

  7. Silverlight实用窍门系列:51.Silverlight页面控件的放大缩小、Silverlight和Html控件的互相操作...

    本节将讲述三个Silverlight中应用的小技巧:Silverlight页面的放大缩小.Silverlight操作Html.Html操作Silverlight控件. 一.Silverlight页面的 ...

  8. Silverlight实用窍门系列:27.Silverlight二维旋转+平面渐变+动画,模拟雷达扫描图之基本框架【附带源码实例】...

    在现实生活中的雷达运行扫描到物体的某一些属性(比如:速度,频率)超过安全范围值将会报警.在实际的某一些项目中(比如监控系统),我们也想制作一个雷达扫描图来模拟扫描各种设备那么应该如何做呢? 我们将各种 ...

  9. Silverlight实用窍门系列:29.Silverlight碰撞测试、检测自定义控件碰撞,雷达扫描图之扫描雷达点状态【附带源码实例】...

    雷达扫描图中当雷达指针转动扫描到某一个点上的时候,判断这个点的CPU值是否已经超过60的警戒位置如果超过将此点设置为红色. 在Silverlight中我们的雷达指针是一直在做圆运动的,我们要随时检测雷 ...

最新文章

  1. 基于WINCE6.0+S3C2443的camera驱动
  2. 微信小程序图片放大预览效果的实现
  3. oracle json字符串转数组,json字符串转化成json对象(原生方法)
  4. centos 7 部署 dotnetcore+Angular2 实践
  5. 多线程原理实例应用详解
  6. docker部署mysql项目_docker部署springboot项目(web + mysql)
  7. java random array_java復習之Math、Random、Arrays工具類
  8. LightGBM大战XGBoost,谁将夺得桂冠?
  9. 删除购物车ajax js,在购物车中使用ajax在woocommerce中移除产品
  10. 浅谈如何用We7站群平台打造垂直性政务网站
  11. python chardet_Python - chardet
  12. 【操作系统】银行家算法
  13. 【贪心】【AOJ-5】渊子赛马
  14. 2015-11-23 12:50:55
  15. Docker最新超详细版教程通俗易懂(基础版)
  16. 东方通(tongweb)部署
  17. C语言打印100以内素数(开根号法)
  18. TikTok十亿MAU增长内幕:横扫全球的时间熔炉
  19. 怎样做50+女性的生意: 渠道变革/多品牌策略催生10亿元级中老年女装品牌
  20. 计算机专业教室三行诗,当学霸写起三行情书,看完第一个就懵了……

热门文章

  1. java 停顿 分钟_java - 年轻的垃圾收集更长时间停顿与Java 7 vs java 6 - 堆栈内存溢出...
  2. python退出函数_python 退出程序的方式
  3. ffpemg扩展 安装php_ThinkSwoole 教程(二)安装
  4. 微型计算机系统没有的总线是( ),微型计算机系统总线(1).ppt
  5. 半导体基础知识(2):PN结二极管和二极管特性
  6. PythonElementTree
  7. JAVA通信系列三:Netty入门总结
  8. 【转载】Unix编程艺术——Unix哲学
  9. 【Android】入门级连接网络示例: 网页浏览和播放网络MP3
  10. 剑走偏锋——用css制作一个三角形箭头