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

Source: Internet
Author: User

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

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.

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 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 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"/>

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.