Changing WPF Button Background Image

Question

I read the excellent advise regarding how to change an button's background image file from here:

How to change\set button background image in C# WPF code?

Notably the following code:

var brush = new ImageBrush();
brush.ImageSource = new BitmapImage(new Uri("Images/ContentImage.png",UriKind.Relative));
button1.Background = brush;

Along with telling visual studios it is a "content" file and "Copy Always".

It seems to work, but whenever my cursor hovers over the image, then the image will disappear.

This cursor hovering problem does not occur if instead I specify the image file in the xaml. But, I want to be changing the image file from the C# code.

Any advise?

Thanks, Howard

Answer 1

OK, I found a working solution - based on the webpage http://www.codeproject.com/Questions/634111/How-to-remove-Glow-of-Button-on-Mouse-hover-in-WPF

A little background: This is an application I wrote about ten years ago with Java/Netbeans which grew quite large over the years. Because Java/Netbeans no longer supports s/w development of desktop applications, I am porting it to Visual Studio WPF C#.

The xaml:

<Button x:Name="buttonDigit1"  HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Width="30" Height="50"
                        Click="buttonDigit1_Click" MouseRightButtonDown="buttonDigit1_RightClick" MouseWheel="buttonDigit1_MouseWheelMoved">
                    <Image Width="30" Height="50"></Image>
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <Grid Background="{TemplateBinding Background}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ControlTemplate>
                    </Button.Template>
                </Button>

This is repeated for a total of nine buttons. A serial i/o thread in a different class reads data from a radio over a serial port. If the radio's frequency changes it calls a method in this window class to change the displayed frequency.

The C# code in the window class:

// class global variables
    static ImageBrush[] digitBrush = new ImageBrush[10];
    static BitmapImage[] digitImage = new BitmapImage[10];
    static String radioDigitStyle = " ";

    public void displayFrequency(String frequency0)
    {
        int frequency_int = HowardUtils.frequency_int(frequency0);
        String frequency_str = HowardUtils.frequency_str(frequency_int);
        textBoxFreqVFOA.Dispatcher.Invoke(new Action(() => {
            textBoxFreqVFOA.Text = frequency_str;
        }));

        // Display the frequency in the digits display on RADIO Control Dialog
        String frequency = frequency0.Replace(".", "");  // Eliminate "."s
        frequency = HowardUtils.removeLeadingZeros(frequency);// Elmiinate leading 0s
        while (frequency.Length < 10) {
            // Add leading zeros for 10 digits
            frequency = "0" + frequency;
        }
        if (Global.DEBUG_RADIO) Console.WriteLine("displayFrequency frequency='" + frequency + "'");

        String[] digit_str = new String[9];
        digit_str[0] = frequency.Substring(1, 1);
        digit_str[1] = frequency.Substring(2, 1);
        digit_str[2] = frequency.Substring(3, 1);
        digit_str[3] = frequency.Substring(4, 1);
        digit_str[4] = frequency.Substring(5, 1);
        digit_str[5] = frequency.Substring(6, 1);
        digit_str[6] = frequency.Substring(7, 1);
        digit_str[7] = frequency.Substring(8, 1);
        digit_str[8] = frequency.Substring(9, 1);
        if (Global.DEBUG_RADIO) {
            Console.WriteLine("displayFrequency digit_str=" +
                digit_str[0] + digit_str[1] + digit_str[2] +
                digit_str[3] + digit_str[4] + digit_str[5] +
                digit_str[6] + digit_str[7] + digit_str[8]);
        }
        int[] digit = new int[9];
        int i;
        for (i = 0; i < 9; i++) {
            if (digit_str[i] == " ") { digit_str[i] = "0"; }    // Convert blank to zero.
            digit[i] = Convert.ToInt32(digit_str[i]);
        }
        if (Global.DEBUG_RADIO) Console.WriteLine("debug - digit_str[i]='" + 
            digit_str[0] + digit_str[1] + digit_str[2] + " " +
            digit_str[3] + digit_str[4] + digit_str[5] + " " +
            digit_str[6] + digit_str[7] + digit_str[8] + "'"); //xxxxx

        if (radioDigitStyle != Global.Settings.GetRadioDigits()) {
            // radio digits style has changed.
            //ImageBrush[] digitBrush = new ImageBrush[10];
            for (i = 0; i < 10; i++) {
                digitBrush[i] = new ImageBrush();
            }

            switch (Global.Settings.GetRadioDigits())
            {
                case "Blue Black Digits":
                    digitImage[0] = new BitmapImage(new Uri("digits/0BCKBLUE.GIF", UriKind.Relative));
                    digitImage[1] = new BitmapImage(new Uri("digits/1BCKBLUE.GIF", UriKind.Relative));
                    digitImage[2] = new BitmapImage(new Uri("digits/2BCKBLUE.GIF", UriKind.Relative));
                    digitImage[3] = new BitmapImage(new Uri("digits/3BCKBLUE.GIF", UriKind.Relative));
                    digitImage[4] = new BitmapImage(new Uri("digits/4BCKBLUE.GIF", UriKind.Relative));
                    digitImage[5] = new BitmapImage(new Uri("digits/5BCKBLUE.GIF", UriKind.Relative));
                    digitImage[6] = new BitmapImage(new Uri("digits/6BCKBLUE.GIF", UriKind.Relative));
                    digitImage[7] = new BitmapImage(new Uri("digits/7BCKBLUE.GIF", UriKind.Relative));
                    digitImage[8] = new BitmapImage(new Uri("digits/8BCKBLUE.GIF", UriKind.Relative));
                    digitImage[9] = new BitmapImage(new Uri("digits/9BCKBLUE.GIF", UriKind.Relative));
                    break;
                case "Computer Digits":
                    digitImage[0] = new BitmapImage(new Uri("digits/0COMPUTE.gif", UriKind.Relative));
                    digitImage[1] = new BitmapImage(new Uri("digits/1COMPUTE.gif", UriKind.Relative));
                    digitImage[2] = new BitmapImage(new Uri("digits/2COMPUTE.gif", UriKind.Relative));
                    digitImage[3] = new BitmapImage(new Uri("digits/3COMPUTE.gif", UriKind.Relative));
                    digitImage[4] = new BitmapImage(new Uri("digits/4COMPUTE.gif", UriKind.Relative));
                    digitImage[5] = new BitmapImage(new Uri("digits/5COMPUTE.gif", UriKind.Relative));
                    digitImage[6] = new BitmapImage(new Uri("digits/6COMPUTE.gif", UriKind.Relative));
                    digitImage[7] = new BitmapImage(new Uri("digits/7COMPUTE.gif", UriKind.Relative));
                    digitImage[8] = new BitmapImage(new Uri("digits/8COMPUTE.gif", UriKind.Relative));
                    digitImage[9] = new BitmapImage(new Uri("digits/9COMPUTE.gif", UriKind.Relative));
                    break;
                case "Black Yellow Digits":
                    digitImage[0] = new BitmapImage(new Uri("digits/0BCK-YLW.gif", UriKind.Relative));
                    digitImage[1] = new BitmapImage(new Uri("digits/1BCK-YLW.gif", UriKind.Relative));
                    digitImage[2] = new BitmapImage(new Uri("digits/2BCK-YLW.gif", UriKind.Relative));
                    digitImage[3] = new BitmapImage(new Uri("digits/3BCK-YLW.gif", UriKind.Relative));
                    digitImage[4] = new BitmapImage(new Uri("digits/4BCK-YLW.gif", UriKind.Relative));
                    digitImage[5] = new BitmapImage(new Uri("digits/5BCK-YLW.gif", UriKind.Relative));
                    digitImage[6] = new BitmapImage(new Uri("digits/6BCK-YLW.gif", UriKind.Relative));
                    digitImage[7] = new BitmapImage(new Uri("digits/7BCK-YLW.gif", UriKind.Relative));
                    digitImage[8] = new BitmapImage(new Uri("digits/8BCK-YLW.gif", UriKind.Relative));
                    digitImage[9] = new BitmapImage(new Uri("digits/9BCK-YLW.gif", UriKind.Relative));
                    break;
                case "Black Turq Digits":
                    digitImage[0] = new BitmapImage(new Uri("digits/0BCKTURQ.gif", UriKind.Relative));
                    digitImage[1] = new BitmapImage(new Uri("digits/1BCKTURQ.gif", UriKind.Relative));
                    digitImage[2] = new BitmapImage(new Uri("digits/2BCKTURQ.gif", UriKind.Relative));
                    digitImage[3] = new BitmapImage(new Uri("digits/3BCKTURQ.gif", UriKind.Relative));
                    digitImage[4] = new BitmapImage(new Uri("digits/4BCKTURQ.gif", UriKind.Relative));
                    digitImage[5] = new BitmapImage(new Uri("digits/5BCKTURQ.gif", UriKind.Relative));
                    digitImage[6] = new BitmapImage(new Uri("digits/6BCKTURQ.gif", UriKind.Relative));
                    digitImage[7] = new BitmapImage(new Uri("digits/7BCKTURQ.gif", UriKind.Relative));
                    digitImage[8] = new BitmapImage(new Uri("digits/8BCKTURQ.gif", UriKind.Relative));
                    digitImage[9] = new BitmapImage(new Uri("digits/9BCKTURQ.gif", UriKind.Relative));
                    break;
                case "Black Red Digits":
                    digitImage[0] = new BitmapImage(new Uri("digits/0BCK-RED.gif", UriKind.Relative));
                    digitImage[1] = new BitmapImage(new Uri("digits/1BCK-RED.gif", UriKind.Relative));
                    digitImage[2] = new BitmapImage(new Uri("digits/2BCK-RED.gif", UriKind.Relative));
                    digitImage[3] = new BitmapImage(new Uri("digits/3BCK-RED.gif", UriKind.Relative));
                    digitImage[4] = new BitmapImage(new Uri("digits/4BCK-RED.gif", UriKind.Relative));
                    digitImage[5] = new BitmapImage(new Uri("digits/5BCK-RED.gif", UriKind.Relative));
                    digitImage[6] = new BitmapImage(new Uri("digits/6BCK-RED.gif", UriKind.Relative));
                    digitImage[7] = new BitmapImage(new Uri("digits/7BCK-RED.gif", UriKind.Relative));
                    digitImage[8] = new BitmapImage(new Uri("digits/8BCK-RED.gif", UriKind.Relative));
                    digitImage[9] = new BitmapImage(new Uri("digits/9BCK-RED.gif", UriKind.Relative));
                    break;
                case "Black Pink Digits":
                    digitImage[0] = new BitmapImage(new Uri("digits/0BCKPINK.gif", UriKind.Relative));
                    digitImage[1] = new BitmapImage(new Uri("digits/1BCKPINK.gif", UriKind.Relative));
                    digitImage[2] = new BitmapImage(new Uri("digits/2BCKPINK.gif", UriKind.Relative));
                    digitImage[3] = new BitmapImage(new Uri("digits/3BCKPINK.gif", UriKind.Relative));
                    digitImage[4] = new BitmapImage(new Uri("digits/4BCKPINK.gif", UriKind.Relative));
                    digitImage[5] = new BitmapImage(new Uri("digits/5BCKPINK.gif", UriKind.Relative));
                    digitImage[6] = new BitmapImage(new Uri("digits/6BCKPINK.gif", UriKind.Relative));
                    digitImage[7] = new BitmapImage(new Uri("digits/7BCKPINK.gif", UriKind.Relative));
                    digitImage[8] = new BitmapImage(new Uri("digits/8BCKPINK.gif", UriKind.Relative));
                    digitImage[9] = new BitmapImage(new Uri("digits/9BCKPINK.gif", UriKind.Relative));
                    break;
                case "Black Orange Digits":
                    digitImage[0] = new BitmapImage(new Uri("digits/0BCKORNG.gif", UriKind.Relative));
                    digitImage[1] = new BitmapImage(new Uri("digits/1BCKORNG.gif", UriKind.Relative));
                    digitImage[2] = new BitmapImage(new Uri("digits/2BCKORNG.gif", UriKind.Relative));
                    digitImage[3] = new BitmapImage(new Uri("digits/3BCKORNG.gif", UriKind.Relative));
                    digitImage[4] = new BitmapImage(new Uri("digits/4BCKORNG.gif", UriKind.Relative));
                    digitImage[5] = new BitmapImage(new Uri("digits/5BCKORNG.gif", UriKind.Relative));
                    digitImage[6] = new BitmapImage(new Uri("digits/6BCKORNG.gif", UriKind.Relative));
                    digitImage[7] = new BitmapImage(new Uri("digits/7BCKORNG.gif", UriKind.Relative));
                    digitImage[8] = new BitmapImage(new Uri("digits/8BCKORNG.gif", UriKind.Relative));
                    digitImage[9] = new BitmapImage(new Uri("digits/9BCKORNG.gif", UriKind.Relative));
                    break;
                case "Black Old Digits":
                    digitImage[0] = new BitmapImage(new Uri("digits/0BCK-OLD.gif", UriKind.Relative));
                    digitImage[1] = new BitmapImage(new Uri("digits/1BCK-OLD.gif", UriKind.Relative));
                    digitImage[2] = new BitmapImage(new Uri("digits/2BCK-OLD.gif", UriKind.Relative));
                    digitImage[3] = new BitmapImage(new Uri("digits/3BCK-OLD.gif", UriKind.Relative));
                    digitImage[4] = new BitmapImage(new Uri("digits/4BCK-OLD.gif", UriKind.Relative));
                    digitImage[5] = new BitmapImage(new Uri("digits/5BCK-OLD.gif", UriKind.Relative));
                    digitImage[6] = new BitmapImage(new Uri("digits/6BCK-OLD.gif", UriKind.Relative));
                    digitImage[7] = new BitmapImage(new Uri("digits/7BCK-OLD.gif", UriKind.Relative));
                    digitImage[8] = new BitmapImage(new Uri("digits/8BCK-OLD.gif", UriKind.Relative));
                    digitImage[9] = new BitmapImage(new Uri("digits/9BCK-OLD.gif", UriKind.Relative));
                    break;
                case "EVA01 Digits":
                    digitImage[0] = new BitmapImage(new Uri("digits/0EVA00.gif", UriKind.Relative));
                    digitImage[1] = new BitmapImage(new Uri("digits/1EVA00.gif", UriKind.Relative));
                    digitImage[2] = new BitmapImage(new Uri("digits/2EVA00.gif", UriKind.Relative));
                    digitImage[3] = new BitmapImage(new Uri("digits/3EVA00.gif", UriKind.Relative));
                    digitImage[4] = new BitmapImage(new Uri("digits/4EVA00.gif", UriKind.Relative));
                    digitImage[5] = new BitmapImage(new Uri("digits/5EVA00.gif", UriKind.Relative));
                    digitImage[6] = new BitmapImage(new Uri("digits/6EVA00.gif", UriKind.Relative));
                    digitImage[7] = new BitmapImage(new Uri("digits/7EVA00.gif", UriKind.Relative));
                    digitImage[8] = new BitmapImage(new Uri("digits/8EVA00.gif", UriKind.Relative));
                    digitImage[9] = new BitmapImage(new Uri("digits/9EVA00.gif", UriKind.Relative));
                    break;
                case "DigitF Digits":
                    digitImage[0] = new BitmapImage(new Uri("digits/0DIGIF.gif", UriKind.Relative));
                    digitImage[1] = new BitmapImage(new Uri("digits/1DIGIF.gif", UriKind.Relative));
                    digitImage[2] = new BitmapImage(new Uri("digits/2DIGIF.gif", UriKind.Relative));
                    digitImage[3] = new BitmapImage(new Uri("digits/3DIGIF.gif", UriKind.Relative));
                    digitImage[4] = new BitmapImage(new Uri("digits/4DIGIF.gif", UriKind.Relative));
                    digitImage[5] = new BitmapImage(new Uri("digits/5DIGIF.gif", UriKind.Relative));
                    digitImage[6] = new BitmapImage(new Uri("digits/6DIGIF.gif", UriKind.Relative));
                    digitImage[7] = new BitmapImage(new Uri("digits/7DIGIF.gif", UriKind.Relative));
                    digitImage[8] = new BitmapImage(new Uri("digits/8DIGIF.gif", UriKind.Relative));
                    digitImage[9] = new BitmapImage(new Uri("digits/9DIGIF.gif", UriKind.Relative));
                    break;
            } //end switch 
            for (i=0; i<10; i++) {
                digitBrush[i] = new ImageBrush( digitImage[i] );
            }
            //
            radioDigitStyle = Global.Settings.GetRadioDigits();
        } // end of radio digits style has changed.

        System.Windows.Controls.Button[] radioDigitButtons = {
            buttonDigit1,
            buttonDigit2,
            buttonDigit3,
            buttonDigit4,
            buttonDigit5,
            buttonDigit6,
            buttonDigit7,
            buttonDigit8,
            buttonDigit9 };

        for (i = 0; i < 9; i++) {
            buttonDigit1.Dispatcher.Invoke(new Action(() =>
            {
                radioDigitButtons[i].Background = digitBrush[digit[i]];
            }));
        }
        RadioUtils.DisplayVFOFrequency();
    } // end displayFrequency(String frequency0)

The user can left click on a digit to increase the frequency value, and right click on a digit to decrease the value. Also the mouse wheel can do the same. But, I did not show the code for it.

The first answer solved the problem, but just would not work when inside a public method to be called from a different class. However, the information was useful and changed my internet searches for a solution.

I've been hammering on this code for days to find a solution, and yes it can be improved upon.

Answer 2

In order to change WPF Button background image, for example, from Images/ContentImage.png to Images/ContentImage1.png on MouseOver event you can add ControlTemplate containing Image control and use the Trigger like shown in the following XAML snippet:

Listing 1. Change Button Image on MouseOver using XAML Triggers

<Button Name="button1">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Image Name="img1" Source="Images/ContentImage.png" />
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="img1"  
                            Property="Source"  
                            Value="Images/ContentImage1.png" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

Another solution will allow to change the

Listing 2. Changing Button Image on click (XAML)

    <Button Name ="button1" Click="button1_Click">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Image x:Name="image1">
                    <Image.Style>
                        <Style TargetType="{x:Type Image}">
                            <Setter Property="Source"  Value="Images/ContentImage.png" />
                        </Style>
                    </Image.Style>
                </Image>
            </ControlTemplate>
        </Button.Template>
    </Button>

Listing 3. C# code behind (button1.click event handler)

private void button1_Click(object sender, RoutedEventArgs a)
{
    Image _img= button1.Template.FindName("image1", button1) as Image;
    Style _imgStyle = new Style { TargetType = typeof(Image) };
     _imgStyle.Setters.Add(new Setter(Image.SourceProperty, new BitmapImage(new Uri(@"pack://application:,,,/YourAssemblyName;component//Images/ContentImage1.png"))));
    _img.Style = _imgStyle;
}

Hope this may help.