ARTICLE

Dynamic and static Rectangle in WPF

Posted by Raj Kumar in Articles | Learn .NET on August 29, 2008

Tags: Dynamic Rectangle, How to make Rectangle, how to make rectangle in WPF, Rectangle, Static Rectangle, Windows Presentation Foundation, WPF

This article shows how to create dynamic and static rectangle in WPF and XAML with various drawing effects.

Tweet
41785
4

Reader Level: Beginner

Download Files:

Chapter1.zip

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.