Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

c#

button

image

wpf

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

like image 618
Jaz Avatar asked Apr 09 '13 02:04

Jaz


3 Answers

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

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;
like image 162
Walt Ritscher Avatar answered Nov 15 '22 17:11

Walt Ritscher


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>
like image 39
Evren Gunay Avatar answered Nov 15 '22 18:11

Evren Gunay


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).

Setting action to build resource

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.

like image 1
Kohanz Avatar answered Nov 15 '22 16:11

Kohanz