【IT168 技术】在实际项目中可能会遇到绘制各类工程图或者网络拓扑图之类的情况，这类图基本上都是以设备加线的方式连接在一起的。那么一个中心设备连接多个外围设备的展示方式就是本节需要讲述的内容。在这个图的中心点加一个设备牵动所有的线的中心点的变化同时在外围点也加一个设备。中心设备和外围设备都可以随意拖动。中心设备的拖动牵连所有与中心设备关联的设备拖动。下面请看Silverlight运行预览图：
在Photoshop里面绘画两个不同颜色的球(绿色和黄色)，其直径皆为44像素，保存为Png图片。再在Silverlight项目中添加这两个球的图片。设置黄球图片为中心点，在MainPage.xaml文件中的Canvas下面添加此球图片：
<Image x:Name="img1" Source="yellow.png" Width="44" Visibility="Collapsed" Canvas.ZIndex="300" Height="44"></Image>
设置这个图片可以被拖动，且在拖动的同时让所有的线的起始点始终在这个圆的圆心位置，需要使用行为MouseDragElementBehavior，所以引入Microsoft.Expression.Interactions.dll、Microsoft.Expression.Prototyping.Interactivity.dll和System.Windows.Interactivity.dll。并且在代码也中using Microsoft.Expression.Interactivity.Layout;。此时MainPage.xaml.cs的代码如下：
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
//让img1图片控件具有MouseDragElementBehavior行为，且为让此控件在拖动过程中执行dragBehavior_Dragging事件。
dragBehavior.Attach(this.img1);
dragBehavior.Dragging += new MouseEventHandler(dragBehavior_Dragging);
//初始化时默认点击函数
button1_Click(new object(), new RoutedEventArgs());
}
MouseDragElementBehavior dragBehavior = new MouseDragElementBehavior();
//放所有的线的集合
private List ucLineList=new List();
private void button1_Click(object sender, RoutedEventArgs e)
{
CanvasDevice.Children.Clear();
//获取需要设置多少条线
double lineCount=double.Parse((this.comboBox1.SelectedItem as ComboBoxItem).Content.ToString());
//获取需要设置的线的长度
double lineLenth = double.Parse(this.textBox1.Text.ToString());
//设置平均角度
double angle = 360.0 / lineCount;
//设置线的起始点的坐标
double centerX = 250;
double centerY = 250;
for (int i = 0; i < lineCount; i++)
{
ucLine dline = new ucLine();
//设置线的半径
dline.R = lineLenth;
//设置线的起始点的坐标
dline.CenterX = centerX;
dline.CenterY = centerY;
//设置这根线的角度
dline.AngleAll = angle * (i);
CanvasDevice.Children.Add(dline);
//将所有的线添加到线集合中去，以供拖动过程中使用
ucLineList.Add(dline);
}
//设置img1可见，设置其初始位置。
this.img1.Visibility = Visibility.Visible;
img1.SetValue(Canvas.LeftProperty, centerX - 22.0);
img1.SetValue(Canvas.TopProperty, centerY - 22.0);
}
///
/// img1被拖动的时候触发的事件
///
///
///
void dragBehavior_Dragging(object sender, MouseEventArgs e)
{
MouseDragElementBehavior dragBehavior2 = sender as MouseDragElementBehavior;
//获取到控件被拖动后的位置坐标
double x1 = dragBehavior2.X + 22;
double y1 = dragBehavior2.Y + 22;
foreach (ucLine dline in ucLineList)
{
//设置lineD线的起点坐标为移动后的坐标位置
dline.LineD.X1 = x1;
dline.LineD.Y1 = y1;
}
}
}
{
public MainPage()
{
InitializeComponent();
//让img1图片控件具有MouseDragElementBehavior行为，且为让此控件在拖动过程中执行dragBehavior_Dragging事件。
dragBehavior.Attach(this.img1);
dragBehavior.Dragging += new MouseEventHandler(dragBehavior_Dragging);
//初始化时默认点击函数
button1_Click(new object(), new RoutedEventArgs());
}
MouseDragElementBehavior dragBehavior = new MouseDragElementBehavior();
//放所有的线的集合
private List ucLineList=new List();
private void button1_Click(object sender, RoutedEventArgs e)
{
CanvasDevice.Children.Clear();
//获取需要设置多少条线
double lineCount=double.Parse((this.comboBox1.SelectedItem as ComboBoxItem).Content.ToString());
//获取需要设置的线的长度
double lineLenth = double.Parse(this.textBox1.Text.ToString());
//设置平均角度
double angle = 360.0 / lineCount;
//设置线的起始点的坐标
double centerX = 250;
double centerY = 250;
for (int i = 0; i < lineCount; i++)
{
ucLine dline = new ucLine();
//设置线的半径
dline.R = lineLenth;
//设置线的起始点的坐标
dline.CenterX = centerX;
dline.CenterY = centerY;
//设置这根线的角度
dline.AngleAll = angle * (i);
CanvasDevice.Children.Add(dline);
//将所有的线添加到线集合中去，以供拖动过程中使用
ucLineList.Add(dline);
}
//设置img1可见，设置其初始位置。
this.img1.Visibility = Visibility.Visible;
img1.SetValue(Canvas.LeftProperty, centerX - 22.0);
img1.SetValue(Canvas.TopProperty, centerY - 22.0);
}
///
/// img1被拖动的时候触发的事件
///
///
///
void dragBehavior_Dragging(object sender, MouseEventArgs e)
{
MouseDragElementBehavior dragBehavior2 = sender as MouseDragElementBehavior;
//获取到控件被拖动后的位置坐标
double x1 = dragBehavior2.X + 22;
double y1 = dragBehavior2.Y + 22;
foreach (ucLine dline in ucLineList)
{
//设置lineD线的起点坐标为移动后的坐标位置
dline.LineD.X1 = x1;
dline.LineD.Y1 = y1;
}
}
}
所有的注释都在代码中，需要注意的是比如double x1 = dragBehavior2.X + 22，这里的22这个数字是黄球的半径，是为了让这些线集中在黄球的中心点位置上，而不是集中在黄球的左上角位置。这个是计算的坐标。
