Draw numbered buttons and save them into files in C#


[numbered buttons]

This example is very similar to the previous one Draw numbered circles and save them into files in C# except it draws its circles so they look like numbered buttons. The following code shows how the program draws the circles’ backgrounds.

// Fill the background.
const int margin = 2;
int rect_width = width - 2 * margin;
if (rect_width < 1) rect_width = 1;
Rectangle outer_rect = new Rectangle(margin, margin,
    rect_width, rect_width);
using (LinearGradientBrush bg_brush = new LinearGradientBrush(
    outer_rect, Color.White, bg_color,
    LinearGradientMode.BackwardDiagonal))
{
    gr.FillEllipse(bg_brush, outer_rect);
}

rect_width = width - 2 * (margin + border_width);
if (rect_width < 1) rect_width = 1;
Rectangle inner_rect = new Rectangle(
    margin + border_width, margin + border_width,
    rect_width, rect_width);
using (LinearGradientBrush bg_brush = new LinearGradientBrush(
    inner_rect, bg_color, Color.White,
    LinearGradientMode.BackwardDiagonal))
{
    gr.FillEllipse(bg_brush, inner_rect);
}

To make images that look like numbered buttons, the code first makes a rectangle that includes the bitmap’s area minus a 2-pixel margin around the edges. It uses that rectangle to fill the background with a circle that shades from white in the upper right to a background color on the lower left.

Next the code repeats the same steps with two changes. First it reduces the size of the rectangle to make a smaller circle so the space between the two looks like a shaded border. Second it reverses the shading so the inner circles shades from white in the lower left corner to the background color in the upper right.

The results appear to be numbered buttons with an inset surface as shown in the picture. (See the previous example for additional details.)


Download Example   Follow me on Twitter   RSS feed   Donate




This entry was posted in drawing, fonts, graphics and tagged , , , , , , , , , , . Bookmark the permalink.

4 Responses to Draw numbered buttons and save them into files in C#

  1. Tante Browse says:

    Hi Rod,

    I would like to create an app, to get another app’s window by title,
    set this other window (where some animations running) to foreground and
    take screenshots of this other window’s rectangle (it’s content, as full window or client area alone) at specified intervalls (e.g. 10x each xx secs or onBtnClick)
    to save this screenshots to a folder (like shot_1.jpg, shot_2.jpg, …)
    So i can later on create an animGif, collage or similar from them.

    The only part i’m struggling with is the unmanaged part to get the target window
    by title, set topmost and GET POSITION & SIZE as {x, y, w, h} WITH OR w/o BORDER.
    I would be thankful for any idea about that.

  2. Pingback: Overlay images in C# - C# HelperC# Helper

  3. Tante Browse says:

    Hi Rod,

    Thanks for your quick response and helpful hints – i’ll work through them. Moreover got the nice idea also to include your next ‘Overlay images’ sample, which i find useful to mark the/some saved images. For a borderless image, i will simply use constants for the border widths and titlebar height.

Leave a Reply

Your email address will not be published. Required fields are marked *