Welcome to RenEvo Sign in | Join | Help

Rounded Rectangle Tutorial

    After seeing a lot of samples on the web, and a lot of different methods, I have decided to write up my own little tutorial on getting Rounded Rectangles in .Net

    First off, lets start by opening up Visual Studio and creating a new Windows Forms Application.

    Next, resize your main form and add a new picture box to the form. Resize the picture box to 400,400 and adjust your form size to where it looks something like this.


    Double click on the form to access the Form Load event handler, and lets start some small bits of code.

    Instead of just showing you how to do this, I am going to first demonstrate exactly how each part of what we are doing actually works.

    Start off by creating a new Bitmap object, I decreased the size a bit to allow for the borders and padding of the picture box.


    Now lets setup our picture box and display the new bitmap in it at runtime.


    Next, we are going to create a new Graphics object (System.Drawing.Graphics).


    You may also want to set the smoothing mode of the Graphics object, this will produce much cleaner lines while drawing shapes.


    With the graphics object you can draw and fill all kinds of wonderful shapes and colors.  We are going to first concern ourselves with the Graphics.DrawArc method.

    To get a good feel, lets first start with the obvious, draw a single arc on the image.


    The method above is drawing an arc with a black pen at position 10,10 in a 10x10 size a start angle of 0 degrees, and an sweep angle of 90 degrees, which is a right triangle.

    If you run the application, you should see something like this.


    Not very impressive, but a good start to the rounded rectangle we are going to want to create.  Working around in quarter circles, we can then display all 4 sides of the circle.


    When you run the application now, you should see a complete circle like so


    Neat huh? Comment out the lines one at a time to see which angle is which, just to save you some time, here are the mappings for our corners.

    Starting Angle 0 = Bottom Right

    Starting Angle 90 = Bottom Left

    Starting Angle 180 = Top Left

    Starting Angle 270 = Top Right

    That is a very basic understanding of the Arc drawing, lets make a rounded rectangle now!

    Stub out the following method


    This method will create a GraphicsPath Object that defines the shape of our rounded rectangle.  A graphics path can best be described as a way to draw piece by piece the lines, points, etc… of a shape, and then "fill in the blanks" by connecting all the points.  A lot of samples I have seen, and used, usually draw all the internal lines, or create a bunch of boxes, etc…  But in this tutorial, we are going to do it the "easy way".

    Lets first take care of a small issue that I have noticed with this method, For some reason the right side and bottom always gets clipped off, so I manually add a padding of 1,1,2,2; that’s top 1, left 1, right 2, bottom 2.  This will center up the rounded rectangle quite nicely.  And as you noticed in the constructor, I added a way to put in a padding for the actual drawing so that you can grow shrink it using the padding.


    That should be pretty self explanatory.

    Now, using the logic that we built above, we are going to create arcs at each of the four corners of the image, except using the GraphicsPath.AddArc method (same as the Graphics.DrawArc, except it doesn't contain a color in the arguments).


    Following the code, you will see that we start in the upper left hand corner to create an arc, move to the upper right hand corner, bottom right hand corner, then finally the bottom left hand corner, now we will want to take a big shortcut


    Here we tell the GraphicsPath to "connect the dots", basically it takes the current path and fills in the blanks to create a solid shape.

    With the method complete, it should look like this


    Only thing left to do is make a call to this method to get a path, and then use the Graphics object to "fill the path" - back in our form load under the smoothing mode set


    Big call, simple understanding.  Call the Graphics.FillPath, set the brush color, then pass in the return from our call to MakeRoundedRectanglePath that we created above.

    Now run the application, and look at your rounded rectangle goodness.


    Now, lets dress this up a bit, to make it a bit more attractive. Use a System.Drawing.Drawing2D.LinearGradientBrush instead of a standard SolidBrush.


    And now our newly applied fill path method


    And, our final result:


    Pretty simple!  I hope you enjoyed this tutorial, below is the full code for this tutorial.  With some practice and modifications of the function calls, you can very easily get this result




    *Yes, they are images, you should type to learn.

Published Wednesday, January 2, 2008 8:18 PM by Tom Anderson


No Comments
Anonymous comments are disabled