Silverlight utility tip series: 16. Draw multiple lines with a certain point as the center, and form a circle with the same angle between the line and the line [with source code instance]

There is a basic Line class in Silverlight, which is used to draw a straight Line. In mathematics, you can draw a straight line by confirming the coordinates of two points, therefore, the Line class in Silverlight has four attributes: X1, Y1, X2, and Y2, which respectively represent the coordinate 1 of the starting point and the coordinate 2 of the end point of the Line. After the coordinates of these two points are set, a straight line can be displayed. The title of this article draws multiple lines from the center of a certain point, and the angle between the line and the line needs to be the same to form a circle. For example, if we assume there are three lines that need to form a circle, the angle between each line is 360/3 = 120 degrees. If we have eight lines, the angle between the line and the line is 360/8 = 45 degrees. To achieve this effect, you need to customize a line control. For this line control, set the X, Y coordinates of the center and the length of the line (that is, the radius length of the circle formed ), the coordinates of the line radians and the end point 2 are calculated based on the number of lines. And so on, multiple lines form a circle. Let's take a look at the following:

Right-click the project name and add a Silverlight custom control named ucLine. xaml. In this custom control, add a Line. Of course, this Line must be in the Canvas label. Enter 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>

In ucLine. xaml. in cs, we need to create the following attributes for this custom control: R, AngleAll, CenterX, and CenterY respectively represent the line length, the radians of the line, the center X coordinates, and the center Y coordinates, the Code is as follows:

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>
/// Specify the X2 coordinates of the control
/// </Summary>
Public double X2
{
Get {return _ X2 ;}
Set
{
_ X2 = value;
This. LineD. X2 = this. X2;
}
}
/// <Summary>
/// Specify the Y2 coordinate of the control
/// </Summary>
Public double Y2
{
Get {return _ Y2 ;}
Set
{
_ Y2 = value;
This. LineD. Y2 = this. Y2;
}
}
/// <Summary>
/// The X coordinate of the central origin of the control
/// </Summary>
Public double CenterX
{
Get {return _ centerX ;}
Set
{
_ CenterX = value;
This. LineD. X1 = _ centerX;
}
}
/// <Summary>
/// Y coordinate of the central origin of the control
/// </Summary>
Public double CenterY
{
Get {return _ centerY ;}
Set
{
_ CenterY = value;
This. LineD. Y1 = _ centerY;
}
}
/// <Summary>
/// Start line radians of the control
/// </Summary>
Public double AngleAll
{
Get {return _ AngleAll ;}
Set
{
_ AngleAll = value;
// Obtain the angle and copy it to the end coordinate of the line. Note: The starting point of the line must be added when the line end coordinate is set.
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 ();
}
}

The key is to set the Coordinate Calculation of the end point of Line in the control based on the radians when this control is called. Let's just look at the source code here. In Mainpage. xaml. cs, we calculate the radians and R lengths of each line based on the number of lines and the length of lines. See the code below:

CanvasDevice. Children. Clear ();
// Obtain the number of lines to be set
Double lineCount = double. Parse (this. comboBox1.SelectedItem as ComboBoxItem). Content. ToString ());
// Obtain the length of the line to be set
Double lineLenth = double. Parse (this. textBox1.Text. ToString ());
// Set the average angle
Double angle = 360.0/lineCount;
For (int I = 0; I <lineCount; I ++)
{
UcLine dline = new ucLine ();
// Set the line radius
Dline. R = lineLenth;
// Set the coordinates of the starting point of the line
Dline. centerx= 250;
Dline. CenterY = 250;
// Set the angle of the line
Dline. AngleAll = angle * (I );
CanvasDevice. Children. Add (dline );
}

This example is written in VS2010 + Silverlight 4.0. Click SLLine.rar to download the source code.