How do I make silverlight button transparent while showing the image?

Question

I have a button that is programatically created, it's content is a stack panel with an image and a textblock. This all works great.

I want to make the button behind the image and text transparent, so that the image and text looks like it's sitting on the background, but still have all the properties of the button (i.e. someone clicks in the button region it still registers the button click event).

I have been playing with opacities, but every opacity I play with dealing with the button seems to set the whole button (image and text included) to that opacity value as well.

How can I make the button opaque while making the text and image content still visible?

Oh, this is silverlight 3. Thanks in advance.

Answer 1

You can override the template property of the button to make an empty grid, like so:

<Button>
        <Button.Template>
            <ControlTemplate TargetType="Button">
            <Grid />
        </ControlTemplate>
    </Button.Template>
</Button>

This could be set as a reusable style if needed.

Answer 2

You are going to have to template the button and remove the gradients, focus element, etc that you don't want to keep from the default style for a button. It sounds like you probably just want to keep the content presenter and get rid of the background and mouse over "glow" gradients. You will probably have to set the background of your StackPanel content to be transparent if you want the entire button area to intercept mouse events and not just the underlying image and text content.

Scott Gu has a good tutorial here on the basics of creating a control template.

If you are using Expression Blend it's very easy to right-click on the button and choose Edit Template -> Edit a Copy to copy the default style into a new style resource for the button where you can then manipulate the template right in Blend.