[Wanli journey-Windows App development] drawing graphics and journey app

[Wanli journey-Windows App development] drawing graphics and journey app

Rectangle
We will first introduce a previously used Rectangle, which is also a relatively simple Rectangle. A simple rectangle only defines the length and width, but if there is a rounded corner, use RadiusX and RadiusY. So what is RadiusX and RadiusY? You can see it.

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

Similar to Rectangle, Border can also create a Rectangle, and the latter can also have a self-object and automatically adjust the size. The former can only have a fixed size.

Ellipse
We should all know what this name means. If you want to define it as a circle, make the Height and Width attributes equal.

Do the children's shoes know that ProgressRing is composed of six Ellipse, and RadioButton is also composed of two concentric Ellipse.

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

Polygon
Polygon is relatively free. You only need to define each vertex and it will connect these points. So we may have questions. Do we need to determine the starting and ending points of the image? The answer is no, because Polygon automatically connects the end point to the start point (it assumes that the graph is closed ).

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

If you want to write data in the C # file in the background, the original Point is defined by PointCollection and then added together.

Some children's shoes may have doubts. What should I do if the start point and the end point are not connected?

At this time, Polyline will be on the stage.

Although it was a debut, how do I think the lines are skewed.

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

Since it is not closed, what will happen with the Fill attribute?

Line
Line is also relatively simple to use, but you must set the attribute values of Stroke and StrokeThickness, otherwise Line will not be displayed. 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 final stage is naturally the most amazing, 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 the Data is quite complicated. There are three commands: M, C, H, and V. It may be easier to remember in English, including Move, Control, Horizontal, and Vertical.

So, let's take a look at figure ^_^.

Then go to 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" />                            <EllipseGeometry                                        Center="95, 180" RadiusX="20"                               RadiusY="30"/>                                                 <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>  

It took me a long time to draw this picture. I hope everyone will also draw it. Although it is not very helpful, it is good to play with it.

I have added some annotations on the graph. In addition, the RectangleGeometry Rect attribute has two values, and the latter is the length of the Rect attribute.

The most difficult part is BezierSegment, that is, the besiss' curve. StartPoint and Point3 are the start and end points respectively, while Point1 and Point2 are not the path, but just a reference offset direction for the curve. For details, refer to Wikipedia.

So this article is over. If you are interested, try it. Thank you for your support.