"Miles Journey--windows App development" drawing graphics

Rectangle
We start by introducing a previously used, but also relatively simple rectangle. The simple rectangle is only used to define the length and width, but if you want to have rounded corners, use radiusx and radiusy. So what exactly is RadiusX and radiusy? I'll see.

<Rectangle Fill="Yellow" Width="300" Height="200" Stroke="Blue"                   StrokeThickness="10" RadiusX="80" RadiusY="40"/>

Similar to rectangle, border can also create rectangles, and the latter can have self-objects and will automatically resize, which can only have a fixed size oh.

Ellipse
See this name everyone should know what it means, if you want to define a circle, let the height and width properties equal.

The children's shoes know that progressring is composed of 6 ellipse, RadioButton is also composed of 2 concentric ellipse oh.

<Ellipse Fill="Blue" Height="200" Width="350"/>

Polygon
Polygon are more free, and only need to define the vertices, and it will connect the points together. So we may have questions about the need to determine the starting and ending points of the graph? The answer is no, because the polygon automatically connects the endpoint to the starting point (it assumes the shape is closed).

<Polygon Fill="Green"Points="0,0,100,0,100,100,0,100  "/>

If you want to write in a background C # file, the original point is defined by PointCollection and added to it.

There may be children's shoes in question, if you want to start and end point not connected, what should be done?

This is the time for Polyline to debut.

Although the debut, but I think the line is oblique.

Line Stroke="Red" StrokeThickness="10" X1="100" Y1="0" Y2="400" X2="400"/>

Since it is not closed, what about adding the fill attribute?

Line
The use of line is also relatively simple, but one thing to note, you must set the stroke and StrokeThickness property values, or line will not show up. The reason is simple because it is a straight line.

<Line Stroke="Red" StrokeThickness="10" X1="100" Y1="0" Y2="400" X2="400"/>

Path
The last stage of the natural is the most powerful, first.

<Path Stroke="Gold"  StrokeThickness="7"               Data="M 0,0 C 100,200 50,200 40,150 H 200 V 100 "/>

The first two attributes have been used many times, but data is quite complex. There are 3 commands, M, C, H, and V. It might be easier to remember it in English: Move, Control, horizontal, and vertical.

So, the play comes, first look at the picture ^_^

Then the code.

  <Path Stroke="Black" strokethickness="1" Fill=" Red ">                <path.data>                    <geometrygroup>                                   <rectanglegeometry Rect="5,5 180,10" />                        <rectanglegeometry Rect="5,5 95,180" />                          <rectanglegeometry Rect="90,175 95,180"/>                           <rectanglegeometry Rect="5,345 180,10" />                            <ellipsegeometryCenter="Up, radiusx" = "radiusy" ="/>"                                                                                                                        <pathgeometry>                            <pathgeometry.figures>                                <pathfigurecollection>                                    <pathfigure IsClosed="true" StartPoint="50,50" >                                        <pathfigure.segments>                                            <pathsegmentcollection>                                                <beziersegment Point1="100,180"Point2="125,100" Point3 ="150,50"/>                                                                                                                                                            </pathsegmentcollection>                                        </pathfigure.segments>                                    </pathfigure>                                                                         <pathfigure IsClosed="true" StartPoint="40,310">                                        <pathfigure.segments>                                            <pathsegmentcollection>                                                <beziersegment Point1="90,180"Point2="115,250" Point3="140,310"/>                                                                                                           </pathsegmentcollection>                                        </pathfigure.segments>                                    </pathfigure>                                </pathfigurecollection>                            </pathgeometry.figures>                        </pathgeometry>                                      </geometrygroup>                </path.data>            </Path>  

This picture took me a long time, I hope you will also draw, although the role is not small, but it is good to spend fun.

I've probably added some markup on the graph, and the RectangleGeometry rect attribute has 2 values, which is relative to the length of the former.

The hardest part is beziersegment, which is the Bethesda curve, where StartPoint and Point3 are the starting and ending points respectively, and Point1 and Point2 are not the path yo, just give the curve a reference offset direction. Specifically, you can take a look at Wikipedia.

So this is the end of the article, if you are interested, try it. We'll see you next goodbye and thank you for your support.

"Miles Journey--windows App development" drawing graphics