Make numbered buttons in C#

[example]

This program lets you create a sequence of images that look like numbered buttons. It’s another program that I seem to recreate periodically.

Click the Background and Foreground color swatches to change those colors. Use the numeric up/down controls to change the width and height of the images, their border thickness, and the numbers that you want to draw in the buttons. Click the font sample to change the font.

Whenever you change the colors, font, width/height, or border thickness, the program displays a sample image. When you like the sample’s look, click the Make Files button to make the program generate images for the numbered buttons.

The key to the program is the MakeNumberButton method.

MakeNumberBitmap

The following code shows the MakeNumberButton method, which makes one of the buttons’ images.

// Make a bitmap containing the indicated text.
private Bitmap MakeNumberBitmap(int width,
    Color bg_color, Color fg_color,
    int border_thickness, Font fg_font, string txt)
{
    // Size the bitmap.
    Bitmap bm = new Bitmap(width, width);
    using (Graphics gr = Graphics.FromImage(bm))
    {
        gr.SmoothingMode = SmoothingMode.AntiAlias;
        gr.TextRenderingHint = TextRenderingHint.AntiAlias;

        // Make the background transparent.
        gr.Clear(Color.Transparent);

        // Fill the background.
        float margin = 2 + border_thickness / 2f;
        RectangleF rect = new RectangleF(margin, margin,
            width - 2 * margin, width - 2 * margin);
        using (LinearGradientBrush bg_brush = new LinearGradientBrush(
            rect, Color.White, bg_color, LinearGradientMode.BackwardDiagonal))
        {
            gr.FillEllipse(bg_brush, rect);
        }

        // Outline the background.
        if (border_thickness > 0)
        {
            using (LinearGradientBrush bg_brush = new LinearGradientBrush(
                rect, bg_color, Color.White, LinearGradientMode.ForwardDiagonal))
            {
                using (Pen bg_pen = new Pen(bg_brush, border_thickness))
                {
                    gr.DrawEllipse(bg_pen, rect);
                }
            }
        }

        // Draw the button text.
        using (StringFormat string_format = new StringFormat())
        {
            string_format.Alignment = StringAlignment.Center;
            string_format.LineAlignment = StringAlignment.Center;
            using (Brush fg_brush = new SolidBrush(fg_color))
            {
                gr.DrawString(txt, fg_font, fg_brush, rect, string_format);
            }
        }
    }

    return bm;
}

The method first creates a bitmap with the desired width and height. It then creates an associated Graphics object on which it can draw. It sets that object’s SmoothingMode property to draw smooth curves, and sets its TextRenderingHint property to produce smooth text.

The code then clears the Graphics object with the color transparent. Later if you use the image in another program that understands transparency, the parts of the image that are not part of the button will be transparent.

Next the program fills the button’s background. To do that, it makes a rectangle that is the size of the image minus the button’s thickness around the edges. It then makes a linear gradient brush that shades from white to the background color as it moves from the upper right to the lower left. It uses that brush to fill the rectangle.

The program then draws the button’s outline. To do that, it creates another linear gradient brush, this time shading from the background color to white as the brush moves from the upper left to the lower right. It uses that brush to define a pen with the desired border thickness. I then uses the pen draw an ellipse around the rectangle.

Finally the code draws the button’s text inside the image. (This example’s buttons display numbers, MakeNumberBitmap method can draw any text.) The code makes a StringFormat object and sets its Alignment and LineAlignment properties to center text vertically and horizontally. Next the code creates a brush that uses the desired foreground color. It then uses the StringFormat object, the brush, and the desired font to draw the button’s text.

The method finishes by returning the button’s bitmap.

Making Files

The program uses the MakeNumberBitmap method to draw the sample button image and to make the image for the numbered buttons. When you click the Make File button, the following code executes.

// Make the files.
private void btnMakeFiles_Click(object sender, EventArgs e)
{
    Cursor = Cursors.WaitCursor;
    Refresh();

    // Make the files.
    for (decimal i = nudMin.Value; i <= nudMax.Value; i++)
    {
        // Make the file.
        Bitmap bm = MakeNumberBitmap((int)nudWidth.Value,
            picBackground.BackColor, picForeground.BackColor,
            (int)nudBorderThickness.Value, lblFontSample.Font,
            i.ToString());

        // Save the file.
        bm.Save("Number" + i.ToString() + ".png", ImageFormat.Png);
    }

    MessageBox.Show("Done", "Done", MessageBoxButtons.OK);
    Cursor = Cursors.Default;
}

This code loops from the minimum to the maximum button numbers that you selected. Inside the loop, the code calls the MakeNumberBitmap method to create the buttons. It then calls the Bitmap class’s Save method to save the image in a png file.

The program saves the buttons in png files because that format understands transparency. If you save the image as a jpg, its transparent background will be lost.

Summary

You may want to experiment with the brushes used to draw the buttons’ backgrounds and borders.

Download the example program to try that and to see additional details.


Download Example   Follow me on Twitter   RSS feed   Donate




About RodStephens

Rod Stephens is a software consultant and author who has written more than 30 books and 250 magazine articles covering C#, Visual Basic, Visual Basic for Applications, Delphi, and Java.
This entry was posted in drawing, graphics, user interface and tagged , , , , , , , , , . Bookmark the permalink.