I have a Button control, and this has a child Image. How can I make the Button completely invisible so I only see the Image
I can always see an outline of a button, even more so when the mouse is over the button.

Setting BorderThickness has no effect.


Re: Windows Presentation Foundation (WPF) Button with an embedded image

Laurent Bugnion


You need to make a new ControlTemplate for your button.

For example:

Code Block


<ControlTemplate x:Key="IconButton"

TargetType="{x:Type Button}">







<Button Template="{StaticResource IconButton}">

<Image Source="myIcon.jpg"/>



This code takes the Image (the Content) of the button and places it in an empty Border. So in effect, you will see only the Image. If you want to make a different style when the mouse is over the button, or when the button is pressed, you must create the corresponding styles. Check Google for ControlTemplates, or you can see the tutorial I posted today:


Also very good to learn to make Templates:




Re: Windows Presentation Foundation (WPF) Button with an embedded image


Just make your life easier. Launch the Microsoft Expression Blend. Draw a new rectangle, place an image, click on tools, and then click "Make Button". You can also have mouse over animation if you want.

Watch this Video Tutorial about how to make an animated button inside Expression Blend

http://windowsclient.net/learn/video.aspx v=3934

Re: Windows Presentation Foundation (WPF) Button with an embedded image


Thanks for that: The video resource was really useful: and I found a load of useful other videos on that site too.But how do I place an image (bitmap or icon) in a rectangle
When I tried to do so in the Xaml I got a message that <Rectangle> cannot have content. And none of the attributes looked like I could associate an image file with a rectangle either.

Re: Windows Presentation Foundation (WPF) Button with an embedded image


Open the Expression Blend, Draw a rectangle, Right Click the Project Name in the "Project" Box and click

"Add Existing Item" now add the image u want to use on a button. Move the image on a desired location over a rectangle. Select Both the image and rectangle (by holding down the CTRL Key) . Right click the rictangle and select "Group Into" and then click "Grid". Both the rectangle and the image will now be grouped in to a single Grid. Now select the Grid (one with the rectangle and the image ) and Make it a Button as usual.

And yes, if you don't want a border around your button, set the Stroke of a rectangle to none. Select the rectangle, click the Stroke in a properties pane and then click "No Brush" button.

Just watch which Xaml code is generated for you if you want to do it in Xaml manually.

Hope this helps.