BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Shapes - Rectangle

The one hundred and twentieth part of the Windows Presentation Foundation Fundamentals tutorial considers the second two-dimensional drawing control of WPF. This is provided by the Rectangle class.

Rectangle

In the first article describing drawing objects we looked at the Line class. This allows you to draw straight lines using simple XAML. In this article we'll look at the second drawing control, provided by the Rectangle class. As the name implies, this class allows you to draw rectangles. You can create rectangles with or without a border, filled or transparent, and with square or rounded corners.

Rectangle and Line inherit from the same base class, Shape. This class provides the Stroke and StrokeThickness properties that we saw in the previous article. We can use those properties to describe the border of the rectangle.

To demonstrate, create a new WPF application project in Visual Studio. Name the solution, "RectangleDemo". Once prepared, replace the XAML for the main window with the code shown below:

<Window x:Class="RectangleDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Rectangle Demo" Height="150" Width="200">
    <Canvas>
        <Rectangle Height="100" Width="150" Stroke="Black" StrokeThickness="5"/>
    </Canvas>
</Window>

The above XAML creates a window containing a single rectangle. You can see that the size of the shape is defined by the Height and Width properties. The two stroke properties specify that the border of the rectangle will be black and five device independent units thick.

WPF Rectangle Demo Window

Fill

Another key property that is inherited from the base class is Fill. This allows you to set the brush that should be used fill the rectangle. Any type of brush may be used, including solid colours, gradients and patterns.

Let's add a second rectangle, this one filled with a solid colour. Add the following XAML directly after the existing Rectangle's code.

<Rectangle Height="80" Width="130" Stroke="Black" StrokeThickness="5"
           Fill="Orange" Canvas.Left="10" Canvas.Top="10"/>

This creates a smaller rectangle within the boundaries of the first. The new rectangle is filled using an orange brush.

WPF Filled Rectangle

Rounded Corners

The last two properties that we'll consider allow you to round the corners of a rectangle. RadiusX determines the horizontal distance between the start of a rounded corner and the corner of the bounding box for the shape. RadiusY sets the vertical radius. The same values are applied to every corner of a Rectangle, unlike with the Border control where each corner's radius can be set independently.

Add a third Rectangle beneath the existing two shapes, using the following XAML:

<Rectangle Height="60" Width="110" Stroke="Black" StrokeThickness="5"
            RadiusX="40" RadiusY="15"
            Fill="Green" Canvas.Left="20" Canvas.Top="20"/>

The third rectangle uses the two radius properties to round the corners. The effect is similar to that shown below:

WPF Rectangle with Corner Radii

14 December 2014