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:
<!--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 a 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 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.
? <!--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 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.
? <!--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 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.
<!--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 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. <!--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>
Dynamically:
? <!--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 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. <!--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 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.
<!--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 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.
? <!--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:
Figure 8. For more information see attached project. This is it. | 
