Dynamic and static Rectangle in WPF

Raj Kumar
16y
123.3k
0
1

Article

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.

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all