Windows apps
Collapse the table of content
Expand the table of content
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

How to: Create a Quadratic Bezier Curve

 

This example shows how to create a quadratic Bezier curve. To create a quadratic Bezier curve, use the PathGeometry, PathFigure, and QuadraticBezierSegment classes.

In the following examples, a quadratic Bezier curve is drawn from (10,100) to (300,100). The curve has a control point of (200,200).

[xaml]

In Extensible Application Markup Language (XAML), you can use attribute syntax to describe a path.

          <Path Stroke="Black" StrokeThickness="1" 
            Data="M 10,100 Q 200,200 300,100" />

[xaml]

(Note that this attribute syntax actually creates a StreamGeometry, a lighter-weight version of a PathGeometry. For more information, see the Path Markup Syntax page.)

In XAML, you may also draw a quadratic Bezier curve using object element syntax. The following is equivalent to the previous XAML example.

          <Path Stroke="Black" StrokeThickness="1">
            <Path.Data>
              <PathGeometry>
                <PathGeometry.Figures>
                  <PathFigureCollection>
                    <PathFigure StartPoint="10,100">
                      <PathFigure.Segments>
                        <PathSegmentCollection>
                          <QuadraticBezierSegment Point1="200,200" Point2="300,100" />
                        </PathSegmentCollection>
                      </PathFigure.Segments>
                    </PathFigure>
                  </PathFigureCollection>
                </PathGeometry.Figures>
              </PathGeometry>
            </Path.Data>
          </Path>

This example is part of larger sample; for the complete sample, see the Geometries Sample.

Create an Elliptical Arc
Create a Cubic Bezier Curve

Show:
© 2017 Microsoft