1

I want a button that

  1. Displays an image with NO border, NO background, NO text
  2. If I tab into the imagebutton, THEN it shows the background and border
  3. Also if I hover over it, it shows the background and border

I've searched and I've tried so many different things, but nothing it exactly what I want. I've tried setting various properties on the button to make the background and border transparent, but it still shows up. I've tried a style with a custom control template. I'd rather not have to completely reinvent all the triggers etc to get the button to render on mouse over. The biggest problem with custom control template is that then I loose all existing functionality and I'm basically building a new control from the ground up.

Here is another link that came closest to what I wanted but it doesn't properly work for me.

How do you completely remove the button border in wpf? - BUT.... for some reason the hover effect gets stuck. One I mouse over the image and the button border draws, it stays stuck on until I click somewhere else.

Community
  • 1
  • 1
happyfirst
  • 1,033
  • 1
  • 13
  • 27

1 Answers1

0

Actually, you will want to override the control template. You're not "losing" any functionality (aside from the UI triggers).

Original/Default Template -- This is a good starting point... copy/paste that into you're XAML (wherever you want to style this button... ie Button resources, UserControl/Window resources, App Resources?). From there make your adjustments.

Another easy way is to use Expression Blend. You can easily create a new template based on the existing template, and the styling/authoring tools it provides are much better than hand-coding XAML (unless you're good at doing that).

As far as displaying an image instead of text, just set the image as the content. A Button is a type of ContentControl which means that it can house any type of content (Object).

myermian
  • 31,823
  • 24
  • 123
  • 215
  • 1
    Those pages do **not** contain the default templates. The defaults are [here](http://archive.msdn.microsoft.com/Project/Download/FileDownload.aspx?ProjectName=wpfsamples&DownloadId=7812) (`Default WPF Themes` link on [this page](http://msdn.microsoft.com/en-us/library/aa970773.aspx)). – H.B. Nov 22 '11 at 16:05
  • @H.B. Wrong link, my bad. I'm so used to just using Expression Blend. – myermian Nov 22 '11 at 16:17
  • Thanks for the link to the default templates. However, that is even more confusing is that just relies on theme specific controls. – happyfirst Dec 05 '11 at 15:37
  • I do have a content template that just shows the image, but then I loose the effect of visual highlighting that it is a button when they hover over it. All I want is to hide the default border when rendering normally. – happyfirst Dec 05 '11 at 15:39
  • @happyfirst: You still need to override the content template (completely), including the triggers that switch the visual styles. – myermian Dec 05 '11 at 16:51
  • yes, but those triggers mostly point to the button chrome control in the default template. So I've tried to give this another shot. I've copied the entire default template. Replaced the content presenter with an image source bound to my ImageButton Image property. I made the chrome control border transparent and set it's RenderDefaulted to false. I STILL have a white border. Googling that leads me back to this site here: http://stackoverflow.com/questions/3364056/windows-themes-buttonchrome-border – happyfirst Dec 06 '11 at 18:35
  • I really hate how the enter key on this site defaults to submitting – happyfirst Dec 06 '11 at 18:36
  • And in reading that other stack overflow post, it seems there's no way to get rid of that white border. Except to basically build my own complete stand alone control. I just can't believe there isn't any easier way to have a basic image button that renders flat with no border or background unless hovered over or clicked on.\ – happyfirst Dec 06 '11 at 18:37