Make a button display the picture beneath it in C#

[button]

This example makes a button display copies of the picture on which it sits, making it appear that the button is part of the underlying image.


The key to this example is the following SetButtonBackground method.

// Make the Button display the part of the
// PictureBox's picture that is under it.
private void SetButtonBackground(PictureBox pic, Button btn)
{
    // Get the offset between the PictureBox's
    // and button's upper left corners.
    Point pic_pt = new Point(0, 0);
    pic_pt = pic.PointToScreen(pic_pt);
    Point btn_pt = new Point(0, 0);
    btn_pt = btn.PointToScreen(btn_pt);
    int x_offset = btn_pt.X - pic_pt.X;
    int y_offset = btn_pt.Y - pic_pt.Y;

    // Get the button's size.
    int wid = btn.ClientSize.Width;
    int hgt = btn.ClientSize.Height;

    // Make a bitmap to hold the button image.
    Bitmap bm = new Bitmap(wid, hgt);
    using (Graphics gr = Graphics.FromImage(bm))
    {
        // Destination rectangle.
        Rectangle dest_rect = new Rectangle(0, 0, wid, hgt);

        // Source rectangle.
        Rectangle src_rect = new Rectangle(x_offset, y_offset, wid, hgt);

        // Copy the image under the button into the bitmap.
        gr.DrawImage(pic.Image, dest_rect, src_rect, GraphicsUnit.Pixel);
    }

    // Make the button display the image.
    btn.Image = bm;
}

The method starts by using the PointToScreen method to determine where the upper left corner of the PictureBox and Button are in screen coordinates. This gives the relative offset between the two controls in pixels.

The code then gets the button’s size, makes a Bitmap to fit it, and creates an associated Graphics object.

Next, the method makes Rectangle structures to define the source and destination areas in the PictureBox control’s image that should be copied to the button. It then uses the Graphics object’s DrawImage method to copy that part of the PictureBox image into the new Bitmap. It finishes by making the Button display the new Bitmap.


Download Example   Follow me on Twitter   RSS feed   Donate




This entry was posted in controls, graphics, image processing and tagged , , , , , , , , , , , , . Bookmark the permalink.

3 Responses to Make a button display the picture beneath it in C#

  1. Pingback: Make a button display the picture beneath slightly grayed it in C# - C# HelperC# Helper

  2. stephen morrow says:

    OK, I have copied your code exactly. I don’t get any red squigglies and the program doesn’t crash when I run it. But I dont get the underlying image to show up in the button. I wrote the code just after the InitializeComponent() method. Have I put it in the wrong place. Sorry for the novice question.

    • RodStephens says:

      No problem. Did you assign an image to the PIctureBox behind the buttons?

      The posts only describe the key pieces of their examples. Often there are little details that you need to download the example to see. Particularly things like setting control properties at design time. (Listing every last thing would make the posts much longer and would usually not be too helpful.)

      So if you find a program like this one where you can’t get it to work, download the example and try to see what’s different between your code and the example’s. Or post a question like you did here 😉

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.