Silverlight制作网络拓扑图（21）

来源：互联网发布：oracle数据库设计规范编辑：程序博客网时间：2024/06/11 03:02

Silverlight制作网络拓扑图

1. 概述

最近项目中要做一个网络拓扑图程序监控网络设备，流量等。网上找了很多资料，也有很多例子。原先想用Flex实现，网上也有一些开源的Birdeye可用，要花时间精力去研究，研究明白了项目基本也就结束了，花费成本精力太大.总的感觉是，网上的东西要么复杂难用，要么功能简单达不到要求。于是决定自己用Silverlight做。

2. 实现效果

先贴个效果图再一步步讲解实现过程。

功能：

1）能够根据配置动态生成拓扑图。

2）类似雷达扫描效果。10秒钟搜索一圈。设置5分钟刷新一次网络状态。

3）网络断开时连线变红，设备图标变成断开状态图标。

3. 设计及技术实现要点

3.1. 网络设备控件制作

思路：动态设置用户控件背景，实现断开状态下动态切换图标。

拓扑图中用到的图标：

注意图标为：32X32背景透明的png文件。这样显示在silverlight中才不会有背景阴影。

Ø 图标表示

通过枚举NodeType区分正常图标，网络断开图标

///<summary>

///区分正常图标，网络断开图标

///</summary>

public enum NodeType

{

NomalBlack,

ErrorRed,

None

}

图标代码对应表:

类别

图标代码

对应图标

网络正常图标

BR.png

BN.png

BB.png

BA.png

BK.png

BC.png

BP.png

网络断开图标

BRS.png

BNS.png

BBS.png

BAS.png

BKS.png

BCS.png

BPS.png

注：小写字母代表网络正常图标，大写字母代表网络断开图标，其他不在上表中的图标备用。

Ø 前台设置背景代码：

后台控制图标切换代码：

private void setType(string BK)

{

_type = getChessType(MyName);//设置类型

switch(BK)

{

//正常

case"r":

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BR.png",UriKind.Relative)) };

break;

case"n"://马

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BN.png",UriKind.Relative)) };

break;

case"b":

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BB.png",UriKind.Relative)) };

break;

case"a":

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BA.png",UriKind.Relative)) };

break;

case"k":

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BK.png",UriKind.Relative)) };

break;

case"c":

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BC.png",UriKind.Relative)) };

break;

case"p":

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BP.png",UriKind.Relative)) };

break;

//不正常

case"R":

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BRS.png",UriKind.Relative)) };

break;

case"N":

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BNS.png",UriKind.Relative)) };

break;

case"B":

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BBS.png",UriKind.Relative)) };

break;

case"A":

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BAS.png",UriKind.Relative)) };

break;

case"K":

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BKS.png",UriKind.Relative)) };

break;

case"C":

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BCS.png",UriKind.Relative)) };

break;

case"P":

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/BPS.png",UriKind.Relative)) };

break;

case"O"://无

this.LayoutRoot.Background=newImageBrush(){ ImageSource =newBitmapImage(newUri("/SLAppTopMap;component/Images/Nodes/Router.png",UriKind.Relative)) };

break;

default:

break;

}

3.2. 主界面布局

3.2.1. 整体布局

整体布局是9X10的grid网格布局。

前台关键代码：

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

代码说明：

（1）9行，10列布局，高度宽度均为50。

（2）Grid整体高10*50=500，宽9*50=450

也可后台实现代码：

int stepCount = 50;

public void SetGridRowCol()

{

for(int x = 0; x < 9; x++)

{

ColumnDefinitioncd1 =newColumnDefinition();

cd1.Width = new GridLength(stepCount);

LayoutRoot.ColumnDefinitions.Add(cd1);

}

for(int y = 0; y < 10; y++)

{

RowDefinitionrd1 =newRowDefinition();

rd1.Height = new GridLength(stepCount);

LayoutRoot.RowDefinitions.Add(rd1);

}

3.2.2. 渐变效果实现

Grid渐变背景实现代码：

<Grid.Background>

</RadialGradientBrush>

</Grid.Background>

3.2.3. 雷达扫描动画效果实现

Ø 雷达指针前台代码：

<Rectangle.Fill>

<LinearGradientBrush.RelativeTransform>

</LinearGradientBrush.RelativeTransform>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

Ø 设置让雷达围绕中心点扫描360度，后台代码：

void AddCanvasTransform()

{

#region 为Canvas添加一个二维 x-y 坐标系内围绕指定点顺时针旋转对象

RotateTransformrTransform =newRotateTransform();

//设置旋转的初始角度为360度

rTransform.Angle = 360;

//设置旋转对象的名称属性为rTrans，让下面的DoubleAnimation使用

rTransform.SetValue(NameProperty, "rTrans");

//将此旋转对象给Canvas

this.layRoot.RenderTransform= rTransform;

#endregion

#region 设置动画板且让Canvas对象内的物品以某点位圆心360度旋转下去

//设置一个DoubleAnimation动画来翻转这个旋转对象。

Storyboardsboard =newStoryboard();

DoubleAnimationdanima =newDoubleAnimation();//设置rectangle1矩形控件的透明度的Double类型数字变化

//设置DoubleAnimation动画的作用对象名称和作用对象属性

danima.SetValue(Storyboard.TargetNameProperty,"rTrans");

danima.SetValue(Storyboard.TargetPropertyProperty,newPropertyPath("RotateTransform.Angle"));

//在10秒的时间内让动画作用的角度属性从360到0，且永远循环下去

danima.From = 360; danima.To = 0;

danima.Duration = newDuration(newTimeSpan(0, 0,10));

danima.RepeatBehavior = RepeatBehavior.Forever;

sboard.Children.Add(danima);

LayoutRoot.Resources.Add("colorboard", sboard);

sboard.Begin();

#endregion

}

3.2.4. 黑色外框效果实现

…

</Border>

说明：BorderThickness属性代表外框粗细，设置外框为黑色BorderBrush="Black"。

宽高略大于grid的宽高Height="503" Width="453"。

3.3. 后台数据控制拓扑图显示

3.3.1. 数据模型

代码：

public classNodeInfo

{

///<summary>

///唯一标示

///</summary>

public string NodeID { get; set; }

///<summary>

///名称

///</summary>

public string MyName { get; set; }

///<summary>

///显示名称

///</summary>

public string MyText { get; set; }

///<summary>

///状态

///</summary>

public int StateFlag { get; set; }

///<summary>

///数据流量

///</summary>

public double DataFlowSize { get;set; }

///<summary>

///提示信息

///</summary>

public string ToolTip { get;set; }

///<summary>

/// IP地址

///</summary>

public string IPAddress { get;set; }

///<summary>

///位置

///</summary>

public string Address { get;set; }

}

3.3.2. XML数据配置文件

<?xmlversion="1.0"encoding="utf-8" ?>

</NodesInfo>

说明：

（1）最多支持90个节点设备

（2） MyName中通过设置设备编码显示不同设备，小写代表设备网络连接正常，大写字母代表网络设备断开。同时控制设备连线是否正常。

（3） DataFlowSize ="80"代表数据流量，控制拓扑图中连线粗细。小于100为细线，大于等于100为粗线。