Set Image as Button Background through XAML

Question

I am trying to set a image as a background of a button through XAML. I have a value converter that converts the icon path and returns a Bitmap Image

public static BitmapImage GetImage(String name)
{ 
      //return new BitmapImage from the location of the Path
}

I tried directly setting the Image object as a Content of the Button but that didnt work. Then I tried setting the Source Of the ImageBrush Tag in the Button.BackGround but that still doesnt work.

<Button  Margin="3" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="0">
    <Button.Background>
        <ImageBrush ImageSource="{Binding Path=IconPath, Converter={StaticResource ImageSourceConverter}}" />
    </Button.Background>
</Button>

Its not specifically the problem with the Converter since the Same logic works to display the images in my treeview nodes. What am I doing wrong here?

Answer 1

If I unterstood you right, initially you would like to bind the content of the button to an icon:

<Button Grid.Column="1">
        <Button.Content>
            <Image Source="{Binding IconPath, PresentationTraceSources.TraceLevel=High}" />
        </Button.Content>
</Button>

Edit:
Added debug for DataBinding.

Answer 2

I am not sure what the converter is doing. Simply binding IconPath to the ImageBrush.ImageSource should work straightaway without converter.

If it doesnt work then try to do have some panel inside the Button's Content and set Panel's background as ImageBrush. Like this...

  <Button>
     <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="../mypath/myimage.png"/>
        </Grid.Background>
     </Grid>
  </Button>

Answer 3

Hard to say, i would suspect the binding just fails, your DataContext may be wrong, set a breakpoint in the converter and see what value gets passed in, other than that see this article on debugging which offers some more advice.

Answer 4

I don't know for certain, but I may be able to provide some information that will help.

Recently I tried to do something even simpler: change the background color on a button - actually a ToggleButton. I found that setting a ToggleButton's Background property in code did not do what I expected. This surprised me. Search around, and you'll see "how do I Set the background of a ToggleButton?" is a common question, and it seems there is no simple answer. I've learned why it is so complicated.

The ToggleButton has a ControlTemplate that provides the visual appearance of the thing in operation. Inside the default ControlTemplate, there are animations provided for various state transitions. When the button gets pressed, there's an animation that WPF performs (I believe this is for WPF4, Silverlight, and not sure about prior versions). When you hover, there's another animation. And so on. Button also has a ControlTemplate. There's something called a VisualStateManager that aids in managing all those animations.

There are numerous colors used in each animation, all hardcoded into the default (implicit) template, and not exposed by named properties. You cannot change those without opening the hood of the ControlTemplate. The Background property plays only a minor role in the appearance of all these animations. In other words, the Background does not do what you might expect.

You may be running into the same thing. I'm not a WPF expert which is why I am hedging.

Possible ways to get what you want:

• instead of setting Background, set the property BorderBrush. This is a brush used to paint the Button, in the default ControlTemplate, I think.

• create your own control, simpler, without the animations in the ControlTemplate, and allow Background to behave as you wish.

• create a modified ControlTemplate, and apply it as a style to the button in your page. Here's an introduction.