Title: Make numbered buttons in C#

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 an ellipse that fits 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 and then uses the pen draw an ellipse inside the rectangle.

Finally the code draws the button's text inside the image. (This example's buttons display numbers, but the 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 images for the numbered buttons. When you click the Make Files 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 or in some other format, 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 to experiment with it and to see additional details.