XAML Rectangle

The <Rectangle/> element of XAML is used to draw a rectangle. This article shows how to use the Rectangle element to draw and full rectangles in XAML.
  • 4118

The <Rectangle /> element of XAML draws a rectangle. The Height and Width attributes represent the height and width of the rectangle. The Stroke and StrokeThickness represents the color and thickness of the rectangle boundary.

The following code draws a rectangle with height 100 and width 300.

<Rectangle Width="300" Height="100" Stroke="Green" StrokeThickness="5">

The output looks like Figure 1.


Figure 1. Drawing a rectangle

The Fill attributes fill a rectangle with a color. The following code fills a rectangle with yellow color.

<Rectangle Fill="Yellow" Width="300" Height="100" Stroke="Blue" StrokeThickness="5">

The output looks like Figure 2.

Figure 2. Filling a rectangle

By setting RadiusX and RadiusY attributes, you can also draw a rectangle with rounded corders.

<Rectangle Width="120" Height="100" RadiusX="10" RadiusY="10"
Stroke="Green" StrokeThickness="5" Fill="Black">

The output looks like Figure 3.


Figure 3. Drawing a rounded rectangle
Ask Your Question 
Got a programming related question? You may want to post your question here


© 2020 DotNetHeaven. All rights reserved.