The Rectangle object represents a rectangle shape and draws
a rectangle with the given height and width. The Width and Height properties of
the Rectangle class represent the width and height of a rectangle. The Fill
property fills the interior of a rectangle. The Stroke property sets the color
and StrokeThickness represents the width of the outer line of a rectangle.
Creating a Rectangle
The Rectangle element in XAML creates a rectangle shape. The
following code snippet creates a rectangle by setting its width and height
properties to 200 and 100 respectively. The code also sets the black stroke of
width 4.
<Rectangle
Width="200"
Height="100"
Fill="Blue"
Stroke="Black"
StrokeThickness="4"
/>
The output looks like Figure 5.
Figure 5. A rectangle
The CreateARectangle method listed in Listing 8 draws same
rectangle in Figure 5 dynamically.
/// <summary>
/// Creates a blue rectangle with black border
/// </summary>
public void CreateARectangle()
{
// Create a
Rectangle
Rectangle
blueRectangle = new Rectangle();
blueRectangle.Height = 100;
blueRectangle.Width = 200;
// Create a blue
and a black Brush
SolidColorBrush
blueBrush = new SolidColorBrush();
blueBrush.Color = Colors.Blue;
SolidColorBrush
blackBrush = new SolidColorBrush();
blackBrush.Color = Colors.Black;
// Set
Rectangle's width and color
blueRectangle.StrokeThickness = 4;
blueRectangle.Stroke = blackBrush;
// Fill rectangle
with blue color
blueRectangle.Fill = blueBrush;
// Add Rectangle
to the Grid.
LayoutRoot.Children.Add(blueRectangle);
}
Listing 7
The RadiusX and RadiusY properties set the x-axis and y-axis radii of the
ellipse that is used to round the corner of a rectangle. By adding the following lines of code to
Listing 7 creates a rounded rectangle, which looks like Figure 6.
// Set roundness
blueRectangle.RadiusX = 20;
blueRectangle.RadiusY = 20;
Figure 6. A rounded rectangle