C# WinForms Button Image Switching Tutorial

Hello, developers! 👋
Today, we’re diving into a very practical and commonly needed feature in Windows Forms (WinForms) applications — dynamically switching a button’s image based on user interaction, without relying on image file names at runtime.

In this tutorial, you’ll learn how to smoothly toggle a button’s image between two states (such as “Accept” and “Reject”) using global Bitmap objects.
This approach enhances user experience while keeping your code clean and efficient.

Why Switch Button Images Dynamically?

Dynamic image switching provides visual feedback to users, making your application more intuitive and interactive.
Instead of just changing text, combining it with images helps users immediately recognize the current state or action.

Typical scenarios where this is useful:

Approving or rejecting items
Play/Pause buttons
On/Off toggles
Expanding/Collapsing menus

Step-by-Step Code Example

Here’s the full example in C#:


using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApp4
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        // Global Bitmap objects for button states
        Bitmap bmpAccept = Properties.Resources.accept;
        Bitmap bmpReject = Properties.Resources.reject;

        private void Form1_Load(object sender, EventArgs e)
        {
            button1.Image = bmpAccept;
            button1.Text = "Accept All";
        }

        private void button1_Click(object sender, EventArgs e)
        {
            if (button1.Image == bmpAccept)
            {
                button1.Image = bmpReject;
                button1.Text = "Reject All";
            }
            else
            {
                button1.Image = bmpAccept;
                button1.Text = "Accept All";
            }
        }
    }
}

using System;

using System.Drawing;

using System.Windows.Forms;

namespace WindowsFormsApp4

{

public partial class Form1 : Form

{

public Form1()

{

InitializeComponent();

}

// Global Bitmap objects for button states

Bitmap bmpAccept = Properties.Resources.accept;

Bitmap bmpReject = Properties.Resources.reject;

private void Form1_Load(object sender, EventArgs e)

{

button1.Image = bmpAccept;

button1.Text = "Accept All";

}

private void button1_Click(object sender, EventArgs e)

{

if (button1.Image == bmpAccept)

{

button1.Image = bmpReject;

button1.Text = "Reject All";

}

else

{

button1.Image = bmpAccept;

button1.Text = "Accept All";

}

How It Works: Code Breakdown

1. Global Bitmap Objects

We define two global Bitmap variables:

bmpAccept for the “Accept” action
bmpReject for the “Reject” action

Using global objects allows quick and efficient image switching without reloading resources each time.

2. Initial Button Setup

In the Form1_Load event:

The button’s image is set to bmpAccept
The button’s text is set to "Accept All"

This ensures that your application starts in a consistent, default state.

3. Handling the Click Event

Inside button1_Click:

We check if the current image is bmpAccept.
If it is, we switch it to bmpReject and change the button text to "Reject All".
Otherwise, we revert back to bmpAccept and "Accept All".

✅ Result: Smooth toggling between two button states based on user interaction!

Extra Tips for Better UX

Image Size: Ensure that the images you use are properly resized to fit the button without distortion.
Tooltips: You can add tooltips for additional hints when users hover over the button.
Accessibility: Always combine icons with clear text for better accessibility and user understanding.

Conclusion

By using global Bitmap objects and simple conditional logic, you can easily switch button images in your C# WinForms applications without worrying about file names or runtime resource issues.

This technique not only keeps your code clean but also delivers a smoother and more engaging user experience.
Perfect for toggle buttons, approval systems, and interactive interfaces!

If you found this tutorial helpful, don’t forget to:

👍 Like the video
🔔 Subscribe to the channel
📝 Comment your thoughts or ask questions!

Stay tuned for more practical coding tutorials and C# tips! 🚀

1 Comment

Mary says:
November 23, 2024 at 10:42 am
Hello, I am kind of new with this programming stuff, about 2 years or so, but I know how to do some programming. Anyway, I have a WinForm project I am working on that has 2 buttons. I have 2 images for each button and they are stored in Properties.Resources. On the code-behind I made bitmaps and gave them different names, just like you did at the top. I put in the form_load the buttons with the image names I wanted for the buttons and already assigned to. In button1_Click event, I added “if button1 == ‘image name that is created at the top and in design'” Then I added below it what to do if it is that image. Well when I build and run it, it bypasses the “if” statement and when I hover above the image name it says its a “System.Drawing.Image” and when I hover above the button it says the same thing. When I hover above “==” it says the name of the image I put but beside that it says “false”. I have everything exactly the same as what you have with my own names but it will not work. Did they change something in visual studio that now you can not do that?