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.
  • 3974

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.

 DrawingGraphicsObjectsImg3.gif

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.
 DrawingGraphicsObjectsImg2.gif

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.

 RoundedRectangleImg4.gif

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

 

© 2019 DotNetHeaven. All rights reserved.