Edit

How to: Draw a Rectangle

  • Article

This example shows how to draw a rectangle by using the Rectangle element.

To draw a rectangle, create a Rectangle element and specify its Width and Height. To paint the inside of the rectangle, set its Fill. To give the rectangle an outline, use its Stroke and StrokeThickness properties.

To give the rectangle rounded corners, specify the optional RadiusX and RadiusY properties. The RadiusX and RadiusY properties set the x-axis and y-axis radii of the ellipse that is used to round the corners of the rectangle.

In the following example, two Rectangle elements are drawn in a Canvas. The first rectangle has a Blue interior. The second rectangle has a Blue interior, a Black outline, and rounded corners.

Example

  <Canvas Width="120" Height="200" >

  <!-- Draws a 100 by 50 rectangle with a solid blue fill. -->
  <Rectangle
    Width="100"
    Height="50"
    Fill="Blue"
    Canvas.Left="10"
    Canvas.Top="25" />

  <!-- Draws a 100 by 50 rectangle with a solid blue fill,
       a black outline, and rounded corners. -->
  <Rectangle
    Width="100"
    Height="50"
    Fill="Blue"
    Stroke="Black" StrokeThickness="4"
    RadiusX="20" RadiusY="20"
    Canvas.Left="10"
    Canvas.Top="100"/>

</Canvas>

Although this example uses a Canvas to contain the rectangles, you can use rectangle elements (and all the other shape elements) with any Panel or Control that supports non-text content. In fact, rectangles are particularly useful for providing backgrounds for portions of Grid panels. For an example, see the Table Overview.

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

See also