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

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.