How to: Draw a Closed Shape by Using the Polygon Element

  • Article

This example shows how to draw a closed shape by using the Polygon element. To draw a closed shape, create a Polygon element and use its Points property to specify the vertices of a shape. A line is automatically drawn that connects the first and last points. Finally, specify a Fill, a Stroke, or both.

Example

In Extensible Application Markup Language (XAML), valid syntax for points is a space-delimited list of comma-separated x- and y-coordinate pairs.

<Canvas Height="300" Width="300">

  <!-- Draws a triangle with a blue interior. -->
  <Polygon Points="10,110 60,10 110,110" 
    Fill="Blue" />

  <!-- Draws a triangle with a blue interior and a black outline. 
       The Canvas.Top setting moves the Polygon down 150 pixels. -->
  <Polygon Points="10,110 60,10 110,110"
    Fill="Blue"
    Stroke="Black" StrokeThickness="4"
    Canvas.Top="150" />

  <!-- Draws another triangle with a blue interior.
       The Canvas.Left setting moves the Polygon 150 pixels to the right. -->
  <Polygon Points="10,110 110,110 110,10"
    Fill="Blue"
    Canvas.Left="150" />

  <!-- Draws a triangle with a black outline. 
       The Canvas.Left and Canvas.Top settings move 
       the Polygon down 150 pixels and 150 pixels to the right.-->
  <Polygon Points="10,110 110,110 110,10"
    Stroke="Black" StrokeThickness="4"
    Canvas.Left="150" Canvas.Top="150" />  


</Canvas>

Although the example uses a Canvas to contain the polygons, you can use polygon elements (and all the other shape elements) with any Panel or Control that supports non-text content.

This example is part of a larger sample; for the complete sample, see Shape Elements Sample.