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.
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">
</Rectangle>
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">
</Rectangle>
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"
</Rectangle>
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