How to change\set background image of a button in

Question

I'm trying to change background image of my button to some other image and I encountered some errors. This is the code I have on my xaml:

    <Button x:Name="Button1" Width="200" Height="200" Content="Button1" Margin="0,0,0,400">
        <Button.Background>
            <ImageBrush **ImageSource ="Images/AERO.png"**  ></ImageBrush>
        </Button.Background>
    </Button>

and my cs:

    private void Button1_Click_1(object sender, RoutedEventArgs e)
    {
        var brush = new ImageBrush();
        brush.ImageSource = new BitmapImage(new Uri("Images/AERO.png"));
        Button1.Background = brush;
    }

The error I have on my xaml is " The file 'Images\logo.png' is not part of the project or its 'Build Action' property is not set to 'Resource'. Can anyone help me explain, thanks

Answer 1

If it is not included, include the file "Image\Logo.png" in the project. Then set it's build action to "Resource" by visiting the properties tab for that file (right-click).

Also, I'm not sure what you're trying to do in the Click handler of the button. You are already setting the background image in the XAML. Unless you are setting it to another image in the Click handler, that code is not needed.

Answer 2

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.

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.

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;

Answer 3

I give a code snippet below, assing the style mentioned in code snippet to a button or to a toggle button, then you shall ve the changed background controlled totally by XAML...no other coding needed. I am not givin all the code just try to understand the logic behind ;)

<Style x:Key="KeyStopButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border TextBlock.Foreground="{TemplateBinding Foreground}"
                                  x:Name="Border"
                                  CornerRadius="1"
                                  BorderThickness="1">
                    <Border.Background>                            
                        <ImageBrush ImageSource= "..\Images\ButtonImages\StopButton.png"  Stretch="Uniform"/>
                    </Border.Background>                        
                    <Border.Effect>                            
                        <DropShadowEffect/>                                
                    </Border.Effect>
                </Border>
                <ControlTemplate.Triggers>                        
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="Border" Property="Border.Effect" Value="{x:Null}"/>                                                            
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="KeyPlayPauseButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border TextBlock.Foreground="{TemplateBinding Foreground}"
                                  x:Name="Border"
                                  CornerRadius="1"
                                  BorderThickness="1">
                    <Border.Background>
                        <ImageBrush ImageSource= "..\Images\ButtonImages\PlayButton.png"  Stretch="Uniform"/>
                    </Border.Background>
                    <Border.Effect>
                        <DropShadowEffect/>
                    </Border.Effect>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter TargetName="Border" Property="Border.Background">
                            <Setter.Value>
                                <ImageBrush ImageSource= "..\Images\ButtonImages\PauseButton.png" Stretch="Uniform"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>