Making a background image scale with button size

Question

I'm trying to add some background images to a few buttons in my Win Forms application. The three images are different sizes (ie pixel dimensions don't match, one is 128x128 and another is 256x256). I need the buttons to be identical in size (otherwise the GUI is horribly asymmetrical). Without changing the actual image files, how can I get the images to scale with button size?

I've tried creating my own class, and adding an event handler for the button resize event, but that doesn't seem to work. My code:

class CustomButton : Button {

        internal void CustomButton_Resize( object sender, EventArgs e ) {
            if ( this.BackgroundImage == null ) {
                return;
            }

            var pic = new Bitmap( this.BackgroundImage, this.Width, this.Height );
            this.BackgroundImage = pic;
        }
    }

and in the form:

this.buttonOne.Resize += new System.EventHandler(this.buttonOne.CustomButton_Resize);

Forgot to mention, the above code does not resize the images at all. The buttons still need to have different sizes to display the images completely.

Solution 1

The easy programmatic way

Say I have a button btn1, Following code is working perfectly in visual-studio-2010.

private void btn1_Click(object sender, EventArgs e)
{
    btn1.Width = 120;
    btn1.Height = 100;
}
void btn1_Resize(object sender, EventArgs e)
{
    if ( this.BackgroundImage == null )
          return;
    var bm = new Bitmap(btn1.BackgroundImage, new Size(btn1.Width, btn1.Height));
    btn1.BackgroundImage = bm;
}

The better way

You can add eventHandler in the constructor of your custombutton (just to ensure that you are adding eventhandler correctly)

class CustomButton : Button
{    
    CustomButton()
    {
        this.Resize += new System.EventHandler(buttonOne.CustomButton_Resize);
    }
    void CustomButton_Resize( object sender, EventArgs e )
    {
       if ( this.BackgroundImage == null )
          return;
       var pic = new Bitmap( this.BackgroundImage, new Size(this.Width, this.Height) );
       this.BackgroundImage = pic;          
    }
}

Now when you will resize the button anywhere your image will get fit(scaled) to its new size.

Solution 2

Easiest way to add a background image to a .NET Button object and scale it to fit

I used this method to avoid any additional coding of new classes and event handlers. This helped me also avoid converting all Button objects into Image objects.

1. Add image to your Resources.resx file.

2. Click on your chosen button.

3. Navigate to the BackgroundImage property and choose the image you imported into the project's resources.resx file.

4. Navigate to the BackgroundImageLayout property and choose Stretch.

Make sure you don't have anything entered for the Image and Text properties or else they will interfere with your new background image.

Solution 3

You could start with something like this...

 public class ImageButton : Control
{
    public Image backgroundImage;

    public Image BackgroundImage
    {
        get
        {
            return backgroundImage;
        }
        set
        {
            backgroundImage = value;
            Refresh();
        }
    }

    public ImageButton()
    {

    }

    protected override void OnPaint(PaintEventArgs e)
    {
        e.Graphics.Clear(BackColor);

        if(BackgroundImage != null)
            e.Graphics.DrawImage(BackgroundImage, 0, 0, Width, Height);

        base.OnPaint(e);
    }

    protected override void OnPaintBackground(PaintEventArgs pevent)
    {
        //base.OnPaintBackground(pevent);
    }
}

You can just handle paint and draw the image yourself. You may also try using a PictureBox or some other control which has more scaling options