Silverlight-Simulate Frame of Radar Scan, 2D Rotation + Plane Gradient + Animation

In our daily life, it will alarm if the radar find that one property of some objects (such as speed, rate) is over safety range. Therefore, it is necessary to research how to create a radar scan to simulate equipments scanning in some projects.

We can take various equipments as point which radar needs to scan. If the indicator touches these point when scanning, crash will be triggered to detect if equipment property is over normal range value. If over, the point changes colors.

In this post, I will introduce how to create frame of radar scan.

  1. Create background of radar scan.
  2. Radar indicator rotates around center point.
  3. We draw gradient streaks for indicator in order to make the radar scan be more beautiful.

Radar Scan as following:

Then, we use DoubleAnimation and RotateTransform to make indicator rotate. Add one white indicator and set rotation central point of white indicator: RenderTransformOrigin = “0.0,0.0”.

XAML code as following:

            <Canvas Margin=“300 300 0 0” Name=“layRoot”>

            <Line X1=“0” Y1=“0” X2=“252” Y2=“0” StrokeThickness=“1” RenderTransformOrigin=“0.0,0.0” Stroke=“#ffffffff” Fill=“#ffffffff”></Line>

                </Canvas>

Set one RotateTransform 2D coordinate object for Canvas which white indicator belongs to and its parameter is Angle. Then, add one DoubleAnimation object to make the angle from 360º to 0º within 10 sec.

Code as following:

            public void AddCanvasTransform()

            {

                #region Add one clockwise rotation rotation around specify point in x-y coordinate system for Canvas.

                RotateTransform rTransform = new RotateTransform();

                //Set rotation start angle as 360.

                rTransform.Angle = 360;

                //Set rotation object name property as rTrans which is used by the following DoubleAnimation.

                rTransform.SetValue(NameProperty, “rTrans”);

                //Assign this rotation object to Canvas

                this.layRoot.RenderTransform = rTransform;              

                #endregion

                #region Set Storyboard and make goods in Canvas 360 rotate around one point.

                //Set DoubleAnimation to overturn this rotation object.

                Storyboard sboard = new Storyboard();

                DoubleAnimation danima = new DoubleAnimation();

                //Set DoubleAnimation action object name and propery.

                danima.SetValue(Storyboard.TargetNameProperty, “rTrans”);

                danima.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath(“RotateTransform.Angle”));

                //Make animation action angle change from 360 to 0 within 10 sec and loops infinitely.

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

                danima.Duration = new Duration(new TimeSpan(0, 0, 10));

                danima.RepeatBehavior = RepeatBehavior.Forever;

                sboard.Children.Add(danima);

                LayoutRoot.Resources.Add(“colorboard”, sboard);

                sboard.Begin();

                #endregion

            }

Finally, add streaks for indicator. We use one rectangle control and generate gradient effect (using LinearGradentBrush) and then rotate its angle. This control can be put in Canvas and rotate with white radar indicator.

xaml code as following:

            <Rectangle x:Name=“rectangle” Height=“60” Width=“253” RenderTransformOrigin=“0.0,0.0”>

            <Rectangle.Fill>

            <LinearGradientBrush EndPoint=“0.5,1” MappingMode=“RelativeToBoundingBox” StartPoint=“0.5,0”>

            <LinearGradientBrush.RelativeTransform>

            <CompositeTransform CenterY=“0.5” CenterX=“0.5” Rotation=“39.2”/>

                </LinearGradientBrush.RelativeTransform>

            <GradientStop Color=“#8Dffffff”/>

                <GradientStop Color=“#00ffffff” Offset=“0.483”/>

                    <GradientStop Color=“Transparent” Offset=“1”/>

                        </LinearGradientBrush>

                            </Rectangle.Fill>

                            </Rectangle>

Complete Main.Page.xaml:

            <UserControl x:Class=“SLRandar.MainPage”

            xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

            xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml&#8221;

            xmlns:d=http://schemas.microsoft.com/expression/blend/2008&#8221;

            xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006&#8221;

            mc:Ignorable=“d”

            d:DesignHeight=“600” d:DesignWidth=“600”>

            <Grid x:Name=“LayoutRoot” HorizontalAlignment=“Left” VerticalAlignment=“Top”>

            <Image HorizontalAlignment=“Left” Source=“Randar.png” Width=“600” Height=“600” Name=“image1” Stretch=“Fill” VerticalAlignment=“Top” />

                <Canvas Margin=“300 300 0 0” Name=“layRoot”>

            <Line X1=“0” Y1=“0” X2=“252” Y2=“0” StrokeThickness=“1” RenderTransformOrigin=“0.0,0.0” Stroke=“#ffffffff” Fill=“#ffffffff”></Line>

            <Rectangle x:Name=“rectangle” Height=“60” Width=“253” RenderTransformOrigin=“0.0,0.0”>

            <Rectangle.Fill>

            <LinearGradientBrush EndPoint=“0.5,1” MappingMode=“RelativeToBoundingBox” StartPoint=“0.5,0”>

            <LinearGradientBrush.RelativeTransform>

            <CompositeTransform CenterY=“0.5” CenterX=“0.5” Rotation=“39.2”/>

                </LinearGradientBrush.RelativeTransform>

            <GradientStop Color=“#8Dffffff”/>

            <GradientStop Color=“#00ffffff” Offset=“0.483”/>

            <GradientStop Color=“Transparent” Offset=“1”/>

                 </LinearGradientBrush>

            </Rectangle.Fill>

            </Rectangle>

            </Canvas>

            </Grid>

            </UserControl>

Complete MainPage.xaml.cs:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace SLRandar

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

            AddCanvasTransform();

        }

        public void AddCanvasTransform()

        {

            #region Add one clockwise rotation rotation around specify point in x-y coordinate system for Canvas.

            RotateTransform rTransform = new RotateTransform();

            //Set rotation start angle as 360.

            rTransform.Angle = 360;

            //Set rotation object name property as rTrans which is used by the following DoubleAnimation.

            rTransform.SetValue(NameProperty, “rTrans”);

            //Assign this rotation object to Canvas

            this.layRoot.RenderTransform = rTransform;           

            #endregion

            #region Set Storyboard and make goods in Canvas 360 rotate around one point.

            //Set DoubleAnimation to overturn this rotation object.

            Storyboard sboard = new Storyboard();

            DoubleAnimation danima = new DoubleAnimation();

            //Set DoubleAnimation action object name and propery.

            danima.SetValue(Storyboard.TargetNameProperty, “rTrans”);

            danima.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath(“RotateTransform.Angle”));

            //Make animation action angle change from 360 to 0 within 10 sec and loops infinitely.

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

            danima.Duration = new Duration(new TimeSpan(0, 0, 10));

            danima.RepeatBehavior = RepeatBehavior.Forever;

            sboard.Children.Add(danima);

            LayoutRoot.Resources.Add(“colorboard”, sboard);

            sboard.Begin();

            #endregion

        }

    }

}

Result:

Two Components Recommend:

Spire.Doc, is used to operate MS Word document for .Net and Silverlight, including basic manipulations (generate, open, edit documents), mail merge and other Word functions manipulations.

Spire.XLS, is used to operate MS Excel for .NET and Silverlight, including basic manipulations (generate, open, edit files), chart creation and data exporting.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s