Silverlight-Draw Several Lines by Taking One Point as Core and Form Circle According to the Same Angle between Two Lines

In Silverlight, there is a basic class, Line which is used to draw straight line. As is known, a straight line can be displayed only if the location of two options is confirmed. In this article, I will show how to draw lines and form circle in silverlight. Take an example: we have three lines and need to form a circle. So, the angle of each line is 360/3 = 120. If we have eight lines, the angle is  360/8 = 45. We need to custom a line control to realize it. Set location of central point X, Y of  this line control and line length (radius of circle). Calculate radian of line and location of end point 2 according to line count. Then, form a circle with several lines.

Effect image shows as following:

Now, right click project name. Add one silverlight custome control and name it ucLine.xaml. Then add one Line in this custom control. Of course, this line must be in Canvas tab.

Copy the following code in ucLine.xaml:

         <Canvas x:Name=”LayoutRoot” Background=”White”>

<Line X1=”600″ Y1=”600″ X2=”1000″ Y2=”500″ x:Name=”LineD” Stroke=”Black” AllowDrop=”True” />

</Canvas>

We need to create new properties: R, AngleAll, CenterX, CenterY for this control in ucLine.xaml.cs. These properties names line length, radian of this line, location of central point X, location of central point Y.

Code:

        private double _R;

        private double _AngleAll;

        private double _centerX;

        private double _centerY;

        ///<summary>

        ///Center Circle Radius

        ///</summary>

        public double R

        {

            get { return _R; }

            set { _R = value; }

        }

        private double _X2;

        private double _Y2;

        ///<summary>

        ///Customize Location of X2

        ///</summary>

        public double X2

        {

            get { return _X2; }

            set

            {

                _X2 = value;

                this.LineD.X2 = this.X2;

            }

        }

        ///<summary>

        ///Customize Location of Y2

        ///</summary>

        public double Y2

        {

            get { return _Y2; }

            set

            {

                _Y2 = value;

                this.LineD.Y2 = this.Y2;

            }

        }

        ///<summary>

        ///Location of Central Point X

        ///</summary>

        public double CenterX

        {

            get { return _centerX; }

            set

            {

                _centerX = value;

                this.LineD.X1 = _centerX;

            }

        }

        ///<summary>

        ///Location of Central Point Y

        ///</summary>

        public double CenterY

        {

            get { return _centerY; }

            set

            {

                _centerY = value;

                this.LineD.Y1 = _centerY;

            }

        }

        ///<summary>

        ///Threshold Bar Radian

        ///</summary>

        public double AngleAll

        {

            get { return _AngleAll; }

            set

            {

                _AngleAll = value;

                // Calculate angle, and copy to end location of line. Note: add the beginning location of line when setting end location.

                double sinAngle = Math.Sin(this.AngleAll * Math.PI / 180);

                double cosAngle = Math.Cos(this.AngleAll * Math.PI / 180);

                this.LineD.X2 = cosAngle * this.R + this.CenterX;

                this.LineD.Y2 = this.CenterY – sinAngle * this.R;

                // this.tips.Content = AngleAll.ToString();

            }

        }

We can set Line end point location accroding to radian when calling this control. Calculate radian and R length of each line according to line count and legnth in Mainpage.xaml.cs.

Code:

            CanvasDevice.Children.Clear();

            //Get Line Count

            double lineCount = double.Parse((this.comboBox1.SelectedItem as ComboBoxItem).Content.ToString());

            //Get Line Length

            double lineLenth = double.Parse(this.textBox1.Text.ToString());

            //Get Average Angle

            double angle = 360.0 / lineCount;

            for (int i = 0; i < lineCount; i++)

            {

                ucLine dline = new ucLine();

                //Set Radius

                dline.R = lineLenth;

                //Set Beginning Location of Line

                dline.CenterX = 250;

                dline.CenterY = 250;

                //Set Angle of this Line

                dline.AngleAll = angle * (i);

                CanvasDevice.Children.Add(dline);

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

Author: janewdaisy

.NET Program Beginner. Share methods about how to use C#/VB.NET to export data, operate Word, Excel, PDF and other useful skills.

1 thought on “Silverlight-Draw Several Lines by Taking One Point as Core and Form Circle According to the Same Angle between Two Lines”

  1. I’d like to thank you for the efforts you have put in writing this site.
    I am hoping to see the same high-grade blog posts from you in the future
    as well. In truth, your creative writing abilities has motivated me to get
    my own site now 😉

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