How do you completely remove the button border in

Question

I'm trying to create a button that has an image in it and no border - just like the Firefox toolbar buttons before you hover over them and see the full button.

I've tried setting the BorderBrush to Transparent, BorderThickness to 0, and also tried BorderBrush="{x:Null}", but you can still see the outline of the button.

Answer 1

You may already know that putting your Button inside of a ToolBar gives you this behavior, but if you want something that will work across ALL current themes with any sort of predictability, you'll need to create a new ControlTemplate.

Prashant's solution does not work with a Button not in a toolbar when the Button has focus. It also doesn't work 100% with the default theme in XP -- you can still see faint gray borders when your container Background is white.

Answer 2

What you have to do is something like this:

<Button Name="MyFlatImageButton"
        Background="Transparent"
        BorderBrush="Transparent"
        BorderThickness="0" 
        Padding="-4">
   <Image Source="MyImage.png"/>
</Button>

Hope this is what you were looking for.

Edit: Sorry, forgot to mention that if you want to see the button-border when you hover over the image, all you have to do is skip the Padding="-4".