How to change button image background in WPF C#

Question

I'm trying to change the image in a WPF application in C# when I click on a button. The image is like the background of the button, but I can't figure out how to change the image. Could someone give me some advice? I am new in WPF app btw.

My XAML button code:

<Window x:Class="Peel_App.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:local="clr-namespace:Peel_App"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
   <Grid x:Name="grid" HorizontalAlignment="Left" Height="420" VerticalAlignment="Top" Width="120" RenderTransformOrigin="0.5,0.5">


            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF111556" Offset="0.069"/>
                    <GradientStop Color="#FF4440E7" Offset="0.256"/>
                    <GradientStop Color="#FFE420DA" Offset="0.744"/>


                </LinearGradientBrush>
            </Grid.Background>
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Button x:Name="btn_Menu" HorizontalAlignment="Left" VerticalAlignment="Top" Width="45" Height="40"  Click="btn_Menu_Click" >

                <Button.Background>
                    <ImageBrush/>
                </Button.Background>
            </Button>
            <Button x:Name="btn_Menu_Continue" HorizontalAlignment="Left" VerticalAlignment="Top" Width="45" Height="40" BorderBrush="#FF111556" Click="btn_Menu_Continue_Click" >
                <Button.Background>
                    <ImageBrush/>
                </Button.Background>
            </Button>
            <Button x:Name="btn_Home"  Content="" HorizontalAlignment="Left" Margin="0,117,0,0" VerticalAlignment="Top" Width="120" Height="44" Click="Button_Click" HorizontalContentAlignment="Center">
                
                <Button.Background>
                    <ImageBrush ImageSource="home_Unselected.png" Stretch="None"/>
                </Button.Background>
  
            </Button>

Button for changing Image:

This is what I've tried

 private void Button_Click(object sender, RoutedEventArgs e)
    {
        var brush = new ImageBrush();
        brush.ImageSource = new BitmapImage(new Uri("home_Selected.png", UriKind.Relative));
        btn_Home.Background = brush;
    }

Set the Build Action of the image file to Resource, then load it by a Resource File Pack URI like `brush.ImageSource = new BitmapImage(new Uri("pack://application:,,,/home_Selected.png"));` — Clemens, Mar 17 '22 at 21:05

score 2 · Accepted Answer · answered Mar 17 '22 at 20:38

In the build action, you can mark the image file as content or as resource. The syntax to use the image in an ImageBrush is different depending on which one you choose.

Here is a image file marked as content.

Image, marked as content

To set the button background to this image use the following code.

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

Here is an image file marked as resource.*

Image, marked as resource [2]: https://i.stack.imgur.com/zyuMW.png

To set the button background to the resource image use the following code.

 `***Uri resourceUri = new Uri("Images/ResourceImage.png", 
 UriKind.Relative);
 StreamResourceInfo streamInfo = 
 Application.GetResourceStream(resourceUri);
 BitmapFrame temp = BitmapFrame.Create(streamInfo.Stream);
 var brush = new ImageBrush();
 brush.ImageSource = temp;***`

button1.Background = brush;

How to change button image background in WPF C#

1 Answers1