??????? 實際項目中，我們模擬一個監控多臺電腦的雷達掃描圖效果。我們假設發現了很多臺設備，這些設備具有CPU使用率這個屬性，在雷達掃描的時候，如果CPU的值高于90則報警為紅色。

??????? 本節實例建立在上一節的基礎之上，在本節中我們將向雷達掃描圖中隨機投放多臺設備點，這些點擁有X坐標和Y坐標的屬性以設置它在雷達掃描圖中的位置，并且有一個閃動的動畫效果。新建一個自定義控件命名為Device.xaml。

??????? 第一步計算設備的X、Y坐標設置CPU的信號值Value。在這里使用Random對象rom.Next(Math.Sin(45)*250)函數來隨機得到設備的X坐標和Y坐標，暫時先以（0,0）點為中心坐標的250半徑的圓圈范圍內，這臺設備在一個坐標系中還有可能出現X或者Y坐標出現負的情況，這個時候我們可以調用Random隨機對象的隨機小于2的數，如果為1的話就將隨機得到的數設置為負。（注意：Random對象是使用系統時鐘生成其種子值的，所以在全局范圍內不能出現多個Random對象，否則的話你設置多個Random對象在同一個時間段內時得到的值相同的。解決方法是設置一個public static的全局隨機對象，每次要使用的時候直接調用這個對象的Next()函數即可。）計算出了X、Y坐標之后此時的中心點是按照（0,0）點位置的坐標，在本項目中的中心點的位置是（300,300），所以X坐標加300，Y坐標加300。另外使用隨機對象隨機了100以內的數字賦值給本設備的CPU使用率信號值Value，下面請看代碼：

public Device()
{
InitializeComponent();
InitData();
}

private double _X;
private double _Y;
private double _Value;
/// <summary>
/// X軸坐標
/// </summary>
public double X
{
get { return _X; }
set { _X = value; }
}

/// <summary>
/// Y軸坐標
/// </summary>
public double Y
{
get { return _Y; }
set { _Y = value; }
}
/// <summary>
/// 設備關鍵信號值
/// </summary>
public double Value
{
get { return _Value; }
set { _Value = value; }
}
public static Random rom = new Random();
public void InitData()
{
#region 隨機將設備分布到雷達圖中，模擬掃描到的機器
//模擬設備CPU值
Value = rom.Next(100);
//首先模擬設備，讓設備隨機分布在圖中。
//模擬設備X坐標
X = rom.Next(200);
//模擬X坐標的符號，如果為0則為正，如果為1則為負；
int Xmark = rom.Next(2);
if (Xmark == 1)
{
X = -X;
}
X = X + 300.0;

//模擬設備Y坐標
Y = rom.Next(Convert.ToInt32(Math.Sin(45)*250));
//模擬Y坐標的符號，如果為0則為正，如果為1則為負；
int Ymark = rom.Next(2);
if (Ymark == 1)
{
Y = -Y;
}
Y = Y + 300.0;
Storyboard1.Begin();
#endregion
//tip顯示當前值
devicetip.Content = "設備CPU占用率:" + Value + "--X:" + X + "--Y:" + Y;
}

??????? 第二步開始制作設備點的動畫效果，在Device.xaml中我們添加兩個一摸一樣的矩形框（RectangleRed、Rectangleblue），這兩個矩形框是通過CompositeTransform復合變形和漸變得到一個中心白色，外層漸變透明的小圓圈，我們控制RectangleRed小圓圈的ScaleX和，ScaleY在1秒內從0.3倍變到2倍，同時控制Rectangleblue小圓圈的ScaleX和，ScaleY在1秒內從2倍變到0.3倍。這樣就得到了一個一直閃動的點，下面請看Xaml代碼：

<UserControl.Resources>
<Storyboard x:Name="Storyboard1" RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:1" From="0.3" To="2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="RectangleRed" />
<DoubleAnimation Duration="0:0:1" From="0.3" To="2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="RectangleRed" />
<DoubleAnimation Duration="0:0:1" From="2" To="0.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Rectangleblue" />
<DoubleAnimation Duration="0:0:1" From="2" To="0.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Rectangleblue" />
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" >
<Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Height="16" x:Name="RectangleRed" RadiusX="15" RadiusY="15" Width="15" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#30FFFFFF" Offset="0.276"/>
<GradientStop Color="Transparent" Offset="0.582"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Height="16" x:Name="Rectangleblue" RadiusX="15" RadiusY="15" Width="15" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#30FFFFFF" Offset="0.276"/>
<GradientStop Color="Transparent" Offset="0.582"/>
</RadialGradientBrush>
</Rectangle.Fill>
<ToolTipService.ToolTip>
<ToolTip x:Name="devicetip" />
</ToolTipService.ToolTip>
</Rectangle>
</Grid>

????????最后一步我們在雷達掃描圖初始化的時候創建多個掃描點投放到圖中：

#region 添加閃動的設備
for (int i = 0; i < 15; i++)
{
Device dev=new Device();
//設置X、Y坐標和Z層次
dev.SetValue(Canvas.TopProperty,dev.Y);
dev.SetValue(Canvas.LeftProperty,dev.X);
dev.SetValue(Canvas.ZIndexProperty, 600);
LayoutRoot.Children.Add(dev);
}
#endregion

??????? 本節使用VS2010+Silverlight4.0編寫，點擊?SLRandarAddPoint.rar 下載源碼，非IE6.0用戶可以點擊下圖觀看演示：

在線演示

轉載于:https://www.cnblogs.com/chengxingliang/archive/2011/03/19/1988266.html

總結

以上是生活随笔為你收集整理的Silverlight实用窍门系列：28.Silverlight制作随机分布雷达扫描点，模拟雷达扫描图之被扫描设备【附带源码实例】...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。