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.
1. This code shows how to draw a rectangle:
<!--static 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 rectangle dynamically:
<!--dynamic rectangle -->
<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 Sub DrawRectangle()
Dim exampleRectangle As Rectangle = New Rectangle()
exampleRectangle.Width = 150
exampleRectangle.Height = 150
' Create a SolidColorBrush and use it to
' paint the rectangle.
Dim myBrush As SolidColorBrush = New SolidColorBrush(Colors.Green)
exampleRectangle.Stroke = Brushes.Red
exampleRectangle.StrokeThickness = 4
exampleRectangle.Fill = myBrush
canvas.Children.Insert(0, exampleRectangle)
End Sub
Result looks like this:
Figure1.
2. This code shows how draw a rectangle with Radius.
<!--static 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:
<!--dynamic rectangle with radius -->
<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 Sub RadiusRectangle()
Dim exampleRectangle1 As Rectangle = New Rectangle()
exampleRectangle1.Width = 150
exampleRectangle1.Height = 150
exampleRectangle1.RadiusX = 10
exampleRectangle1.RadiusY = 10
' Create a SolidColorBrush and use it to
' paint the rectangle.
Dim myBrush As SolidColorBrush = New SolidColorBrush(Colors.Green)
exampleRectangle1.Stroke = Brushes.Red
exampleRectangle1.StrokeThickness = 4
exampleRectangle1.Fill = myBrush
canvas1.Children.Insert(0, exampleRectangle1)
End Sub
Result:
Figure2.
3. This code shows how to make a Rectangle using Gradient colors.
<!--static rectangle with 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:
<!--dynamic rectangle with gradient colors-->
<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 Sub GradientRectangle()
Dim exampleRectangle As Rectangle = New Rectangle()
exampleRectangle.Width = 150
exampleRectangle.Height = 150
' Create a RadialGradientBrush and use it to
' paint the rectangle.
Dim myBrush As RadialGradientBrush = 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)
End Sub
Figure 3.
4. This code shows how to draw a rectangle paint with image.
<!--static paint with 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:
<!--dynamic paint with image-->
<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 Sub PaintWithImageRectangle()
Dim exampleRectangle As Rectangle = New Rectangle()
exampleRectangle.Width = 150
exampleRectangle.Height = 150
' Create an ImageBrush and use it to
' paint the rectangle.
Dim myBrush As ImageBrush = New ImageBrush()
myBrush.ImageSource =
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)
End Sub
Result:
Figure4.
5. This code shows how to draw paint a rectangle with visual.
<!--static paint with visual-->
<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>
<!--dynamic paint with image-->
<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 Sub VisualRectangle()
Dim exampleRectangle As Rectangle = 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.
Dim myBrush As VisualBrush = New VisualBrush()
'
' Create the brush's contents.
'
Dim aPanel As StackPanel = New StackPanel()
' Create a DrawingBrush and use it to
' paint the panel.
Dim myDrawingBrushBrush As DrawingBrush = New DrawingBrush()
Dim aGeomeTryGroup As GeomeTryGroup = New GeomeTryGroup()
aGeomeTryGroup.Children.Add(New RectangleGeomeTry(New Rect(0, 0, 50, 50)))
aGeomeTryGroup.Children.Add(New RectangleGeomeTry(New Rect(50, 50, 50, 50)))
Dim checkerBrush As RadialGradientBrush = New RadialGradientBrush()
checkerBrush.GradientStops.Add(New GradientStop(Colors.Green, 0.0))
checkerBrush.GradientStops.Add(New GradientStop(Colors.White, 1.0))
Dim checkers As GeomeTryDrawing = New GeomeTryDrawing(checkerBrush, Nothing, aGeomeTryGroup)
myDrawingBrushBrush.Drawing = checkers
aPanel.Background = myDrawingBrushBrush
' Create some text.
Dim someText As TextBlock = New TextBlock()
someText.Text = "Raj Beniwal"
Dim fSizeConverter As FontSizeConverter = New FontSizeConverter()
someText.FontSize = CType(fSizeConverter.ConvertFromString("10pt"), Double)
someText.Margin = New Thickness(10)
aPanel.Children.Add(someText)
myBrush.Visual = aPanel
exampleRectangle.Fill = myBrush
canvas4.Children.Insert(0, exampleRectangle)
End Sub
Figure5.
6. This code shows how to draw and paint a rectangle with drawing.
<!--static paint with drawing-->
<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:
<!--dynamic paint with drawing-->
<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 Sub PaintWithDrawing()
Dim exampleRectangle As Rectangle = New Rectangle()
exampleRectangle.Width = 150
exampleRectangle.Height = 150
' Create a DrawingBrush and use it to
' paint the rectangle.
Dim myBrush As DrawingBrush = New DrawingBrush()
GeomeTryDrawing backgroundSquare =
New GeomeTryDrawing(
Brushes.White,
Nothing,
RectangleGeomeTry(New Rect(0,0,100,100)))
Dim aGeomeTryGroup As GeomeTryGroup = New GeomeTryGroup()
aGeomeTryGroup.Children.Add(New RectangleGeomeTry(New Rect(0, 0, 50, 50)))
aGeomeTryGroup.Children.Add(New RectangleGeomeTry(New Rect(50, 50, 50, 50)))
Dim checkerBrush As LinearGradientBrush = New LinearGradientBrush()
checkerBrush.GradientStops.Add(New GradientStop(Colors.Red, 0.0))
checkerBrush.GradientStops.Add(New GradientStop(Colors.Green, 1.0))
Dim checkers As GeomeTryDrawing = New GeomeTryDrawing(checkerBrush, Nothing, aGeomeTryGroup)
Dim checkersDrawingGroup As DrawingGroup = 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)
End Sub
Result:
Figure6.
7. This code shows how to draw and fill a rectangle with a Brush.
<!--static rectangle with brush -->
<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:
<!--dynamic rectangle using brush-->
<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 Sub RectangleWithBrush()
Dim myRectangle As Rectangle = 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)
End Sub
Result:
Figure7.
8. This demonstrate how to rotate a rectangle.
<!--static rotate rectangle -->
<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:
Figure8.
For more information see attached project. This is it.