Home | Contact Us

CSharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript

WPF Rectangle: Fill and Stroke

This WPF example uses the Rectangle control to visually specify a rectangular region with a color and border.

Rectangle. Shapes can be part of WPF interfaces.

With the Rectangle, we specify a rectangular graphical region that can have different colors and borders. This improves the interfaces of some programs.

Example. First, please drag a Rectangle from the Visual Studio Toolbox to your WPF Window. Next, you can adjust its attributes. By dragging some of the guides, you can add a RadiusY and RadiusX: these give the rectangle rounded corners.

Stroke: Next, try adding the Stroke attribute in the XAML. You will need to manually specify this in the markup.

StrokeThickness: You can adjust the thickness of the Stroke (border) by adding a StrokeThickness attribute, which counts in pixels.

Also, you can apply a colored background to the rectangle with the Fill attribute. This can receive hex colors or the named colors in Visual Studio's list. You will need to adjust Width and Height as well.

Based on:

.NET 4.5

Example markup: XAML

<Window x:Class="WpfApplication16.MainWindow"
	Title="MainWindow" Height="350" Width="525">
	<Rectangle Fill="Beige" HorizontalAlignment="Left"
		   Height="100" Margin="10,10,0,0"
		   Stroke="DarkMagenta" StrokeThickness="5"
		   VerticalAlignment="Top" Width="150"
		   RadiusY="13.5" RadiusX="13.5"/>

Ellipse. With the RadiusX and RadiusY attributes, you can create an Ellipse with a rectangle. But using an Ellipse control directly may be simpler. I cover Ellipse in a separate example page.


Tip: In the Ellipse example, I show how mouse events can interact with shapes. This is equally true with rectangles.

Summary. With WPF, a main goal is to make programs easier and faster to create. The Rectangle control (and similar controls like Ellipse) help this goal: they are easy options for when a graphical element (shape) is needed.