Dynamic and Static Rectangle in WPF

In geometry, a rectangle is defined as a quadrilateral where all four of its angles are right angles (90 degrees).

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

In this example, I am showing you how to draw a rectangle static and dynamic. Static rectangle means the rectangle is drawn totally based on XAML code while dynamic rectangle means, I create the rectangle using code in the code behind file.

This code shows how to draw a rectangle:


<Canvas Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Margin="50,20,0,0">
<Rectangle Width="150" Height="150" Stroke="Red" Fill="Gray" StrokeThickness="2"></Rectangle>
</Canvas>
<TextBlock Grid.Column="0" Grid.Row="0" HorizontalAlignment="Center">Static Rectangle</TextBlock>

Draw a rectangle dynamically:


<Canvas x:Name="canvas" Grid.Column="1" Grid.Row="0" Margin="50,20,0,0"></Canvas>
<TextBlock Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center">Dynamic Rectangle</TextBlock>

private void DrawRectangle()
{
Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 150;
exampleRectangle.Height = 150;
// Create a SolidColorBrush and use it to
// paint the rectangle.
SolidColorBrush myBrush = new SolidColorBrush(Colors.Green);
exampleRectangle.Stroke = Brushes.Red;
exampleRectangle.StrokeThickness = 4;
exampleRectangle.Fill = myBrush;
canvas.Children.Insert(0, exampleRectangle);
}

Result looks like this:

Figure 1.
This code shows how draw rectangle with Radius.



<Canvas Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" Margin="50,20,0,0">

<Rectangle Width="150" Height="150" RadiusX="10" RadiusY="10" Stroke="Red" Fill="Gray" StrokeThickness="2"></Rectangle>

</Canvas>

<TextBlock Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center">Static Rectangle Radius</TextBlock>

Make dynamically:


<Canvas x:Name="canvas1" Grid.Column="1" Grid.Row="1" Margin="50,20,0,0"></Canvas>
<TextBlock Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center">Dynamic Rectangle Radius</TextBlock>

private void RadiusRectangle()

{

Rectangle exampleRectangle1 = new Rectangle();

exampleRectangle1.Width = 150;

exampleRectangle1.Height = 150;

exampleRectangle1.RadiusX = 10;

exampleRectangle1.RadiusY = 10;

// Create a SolidColorBrush and use it to

// paint the rectangle.

SolidColorBrush myBrush = new SolidColorBrush(Colors.Green);

exampleRectangle1.Stroke = Brushes.Red;

exampleRectangle1.StrokeThickness = 4;

exampleRectangle1.Fill = myBrush;

canvas1.Children.Insert(0, exampleRectangle1);

}

Result:

Figure 2.
This code shows how to make a rectangle using Gradient colors.



<Canvas Grid.Column="0" Grid.Row="2" HorizontalAlignment="Left" Margin="50,20,0,0">

<Rectangle Width="150" Height="150">

<Rectangle.Fill>

<LinearGradientBrush>

<GradientStop Color="Yellow" Offset="0.0" />

<GradientStop Color="Orange" Offset="0.5" />

<GradientStop Color="Red" Offset="1.0" />

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

<TextBlock Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center">Static Rectangle Gradient</TextBlock>

Make Dynamically:



<Canvas x:Name="canvas2" Grid.Column="1" Grid.Row="2" Margin="50,20,0,0"></Canvas>

<TextBlock Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center">Dynamic Rectangle Gradient</TextBlock>

private void GradientRectangle()

{

Rectangle exampleRectangle = new Rectangle();

exampleRectangle.Width = 150;

exampleRectangle.Height = 150;

// Create a RadialGradientBrush and use it to

// paint the rectangle.

RadialGradientBrush myBrush = new RadialGradientBrush();

myBrush.GradientOrigin = new Point(0.75, 0.25);

myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));

myBrush.GradientStops.Add(new GradientStop(Colors.Orange, 0.5));

myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));

exampleRectangle.Fill = myBrush;

canvas2.Children.Insert(0, exampleRectangle);

}

Figure 3.
This code shows how to draw a rectangle paint with an image.



<Canvas Grid.Column="0" Grid.Row="3" HorizontalAlignment="Left" Margin="50,20,0,0">

<Rectangle Width="150" Height="150">

<Rectangle.Fill>

<ImageBrush ImageSource="sampleImages\san20a.jpg" />

</Rectangle.Fill>

</Rectangle>

</Canvas>

<TextBlock Grid.Column="0" Grid.Row="3" HorizontalAlignment="Center">Static Rectangle paint with image</TextBlock>

Dynamically:



<Canvas x:Name="canvas3" Grid.Column="1" Grid.Row="3" Margin="50,20,0,0"></Canvas>

<TextBlock Grid.Column="1" Grid.Row="3" HorizontalAlignment="Center">Dynamic Rectangle paint with image</TextBlock>

private void PaintWithImageRectangle()

{

Rectangle exampleRectangle = new Rectangle();

exampleRectangle.Width = 150;

exampleRectangle.Height = 150;

// Create an ImageBrush and use it to

// paint the rectangle.

ImageBrush myBrush = new ImageBrush();

myBrush.ImageSource =

new BitmapImage(new Uri(@"C:\Users\Raj\Documents\Visual Studio 2008\Projects\Chapter1\Chapter1\sampleImages\san20a.jpg", UriKind.Relative));

exampleRectangle.Fill = myBrush;

canvas3.Children.Insert(0, exampleRectangle);

}

Result:

Figure 4.
This code shows how to draw paint a rectangle with visual effects.



<Canvas Grid.Column="2" Grid.Row="0" HorizontalAlignment="Left" Margin="50,20,0,0">

<Rectangle Width="150" Height="150" Stroke="Red" StrokeThickness="4">

<Rectangle.Fill>

<VisualBrush TileMode="Tile">

<VisualBrush.Visual>

<StackPanel>

<StackPanel.Background>

<DrawingBrush>

<DrawingBrush.Drawing>

<GeometryDrawing>

<GeometryDrawing.Brush>

<RadialGradientBrush>

<GradientStop Color="MediumBlue" Offset="0.0" />

<GradientStop Color="White" Offset="1.0" />

</RadialGradientBrush>

</GeometryDrawing.Brush>

<GeometryDrawing.Geometry>

<GeometryGroup>

<RectangleGeometry Rect="0,0,50,50" />

<RectangleGeometry Rect="50,50,50,50" />

</GeometryGroup>

</GeometryDrawing.Geometry>

</GeometryDrawing>

</DrawingBrush.Drawing>

</DrawingBrush>

</StackPanel.Background>

<TextBlock FontSize="10pt" Margin="10">Raj Beniwal</TextBlock>

</StackPanel>

</VisualBrush.Visual>

</VisualBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

<TextBlock Grid.Column="2" Grid.Row="0" HorizontalAlignment="Center">Static Rectangle paint with visual</TextBlock>

Dynamically:



<Canvas x:Name="canvas4" Grid.Column="3" Grid.Row="0" Margin="50,20,0,0"></Canvas>

<TextBlock Grid.Column="3" Grid.Row="0" HorizontalAlignment="Center">Dynamic Rectangle paint with visual</TextBlock>

private void VisualRectangle()

{

Rectangle exampleRectangle = new Rectangle();

exampleRectangle.Width = 150;

exampleRectangle.Height = 150;

exampleRectangle.StrokeThickness = 4;

exampleRectangle.Stroke = Brushes.Red;

// Create a VisualBrush and use it

// to paint the rectangle.

VisualBrush myBrush = new VisualBrush();

//

// Create the brush's contents.

//

StackPanel aPanel = new StackPanel();

// Create a DrawingBrush and use it to

// paint the panel.

DrawingBrush myDrawingBrushBrush = new DrawingBrush();

GeometryGroup aGeometryGroup = new GeometryGroup();

aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));

aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));

RadialGradientBrush checkerBrush = new RadialGradientBrush();

checkerBrush.GradientStops.Add(new GradientStop(Colors.Green, 0.0));

checkerBrush.GradientStops.Add(new GradientStop(Colors.White, 1.0));

GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);

myDrawingBrushBrush.Drawing = checkers;

aPanel.Background = myDrawingBrushBrush;

// Create some text.

TextBlock someText = new TextBlock();

someText.Text = "Raj Beniwal";

FontSizeConverter fSizeConverter = new FontSizeConverter();

someText.FontSize = (double)fSizeConverter.ConvertFromString("10pt");

someText.Margin = new Thickness(10);

aPanel.Children.Add(someText);

myBrush.Visual = aPanel;

exampleRectangle.Fill = myBrush;

canvas4.Children.Insert(0, exampleRectangle);

}

Figure 5.
This code shows how to draw and paint a rectangle with drawing brush.



<Canvas Grid.Column="2" Grid.Row="1" HorizontalAlignment="Left" Margin="50,20,0,0">

<Rectangle Width="150" Height="150">

<Rectangle.Fill>

<DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">

<DrawingBrush.Drawing>

<DrawingGroup>

<GeometryDrawing Brush="White">

<GeometryDrawing.Geometry>

<RectangleGeometry Rect="0,0,100,100" />

</GeometryDrawing.Geometry>

</GeometryDrawing>

<GeometryDrawing>

<GeometryDrawing.Geometry>

<GeometryGroup>

<RectangleGeometry Rect="0,0,50,50" />

<RectangleGeometry Rect="50,50,50,50" />

</GeometryGroup>

</GeometryDrawing.Geometry>

<GeometryDrawing.Brush>

<LinearGradientBrush>

<GradientStop Offset="0.0" Color="Red" />

<GradientStop Offset="1.0" Color="Green" />

</LinearGradientBrush>

</GeometryDrawing.Brush>

</GeometryDrawing>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

<TextBlock Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center">Static Rectangle paint with drawing</TextBlock>

Dynamic:



<Canvas x:Name="canvas5" Grid.Column="3" Grid.Row="1" Margin="50,20,0,0"></Canvas>

<TextBlock Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center">Dynamic Rectangle paint with drawing</TextBlock>

private void PaintWithDrawing()

{

Rectangle exampleRectangle = new Rectangle();

exampleRectangle.Width = 150;

exampleRectangle.Height = 150;

// Create a DrawingBrush and use it to

// paint the rectangle.

DrawingBrush myBrush = new DrawingBrush();

GeometryDrawing backgroundSquare =

new GeometryDrawing(

Brushes.White,

null,

new RectangleGeometry(new Rect(0, 0, 100, 100)));

GeometryGroup aGeometryGroup = new GeometryGroup();

aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));

aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));

LinearGradientBrush checkerBrush = new LinearGradientBrush();

checkerBrush.GradientStops.Add(new GradientStop(Colors.Red, 0.0));

checkerBrush.GradientStops.Add(new GradientStop(Colors.Green, 1.0));

GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);

DrawingGroup checkersDrawingGroup = new DrawingGroup();

checkersDrawingGroup.Children.Add(backgroundSquare);

checkersDrawingGroup.Children.Add(checkers);

myBrush.Drawing = checkersDrawingGroup;

myBrush.Viewport = new Rect(0, 0, 0.25, 0.25);

myBrush.TileMode = TileMode.Tile;

exampleRectangle.Fill = myBrush;

canvas5.Children.Insert(0, exampleRectangle);

}

Result:

Figure 6.
This code shows how to draw and fill a rectangle with a brush and opacity (transparency). The Opacity property defines the transparency of a control in XAML and WPF.



<Canvas Grid.Column="2" Grid.Row="2" HorizontalAlignment="Left" Margin="50,20,0,0">

<Rectangle Width="150" Height="150">

<Rectangle.Fill>

<SolidColorBrush Color="Green" Opacity="0.25" />

</Rectangle.Fill>

</Rectangle>

</Canvas>

<TextBlock Grid.Column="2" Grid.Row="2" HorizontalAlignment="Center">Static Rectangle rectangle with brush</TextBlock>

Dynamic:



<Canvas x:Name="canvas6" Grid.Column="3" Grid.Row="2" Margin="50,20,0,0"></Canvas>

<TextBlock Grid.Column="3" Grid.Row="2" HorizontalAlignment="Center">Dynamic Rectangle paint with drawing</TextBlock>

private void RectangleWithBrush()

{

Rectangle myRectangle = new Rectangle();

myRectangle.Width = 150;

myRectangle.Height = 150;

SolidColorBrush partiallyTransparentSolidColorBrush

= new SolidColorBrush(Colors.Green);

partiallyTransparentSolidColorBrush.Opacity = 0.25;

myRectangle.Fill = partiallyTransparentSolidColorBrush;

canvas6.Children.Insert(0, myRectangle);

}

Result:

Figure 7.
This demonstrate how to rotate a rectangle using transformation. The RenderTransform property of Rectangle is responsible for transforming a rectangle such as rotating.



<Canvas Grid.Column="2" Grid.Row="3" HorizontalAlignment="Left" Margin="50,20,0,0">

<Rectangle Width="150" Height="150" Stroke="#FFBF4343" Canvas.Left="10" Canvas.Top="10" StrokeThickness="4" RenderTransformOrigin="0.5,0.5">

<Rectangle.RenderTransform>

<TransformGroup>

<ScaleTransform ScaleX="1" ScaleY="1"/>

<SkewTransform AngleX="0" AngleY="0"/>

<RotateTransform Angle="30.704"/>

<TranslateTransform X="0" Y="0"/>

</TransformGroup>

</Rectangle.RenderTransform>

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF000000" Offset="0"/>

<GradientStop Color="#FF1E1919" Offset="1"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

<TextBlock Grid.Column="2" Grid.Row="3" HorizontalAlignment="Center">Static Rotate Rectangle</TextBlock>

Result:

Figure 8.

For more information see attached project. This is it.