How to get rid of this border around image embed button?

Question

I am trying to get rid of this white border around my buttons. I am adding an Image to a Button. It does not seem to be the button itself, but the border of the image.

This is the XAML,

   <Style x:Key="MyButton" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" BorderThickness="0" Background="{TemplateBinding Background}" CornerRadius="5" >
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Opacity" Value="0.5" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And the Button itsself,

   <Button Name="Button2" Content="stuff" Height="25" Grid.Column="1" Grid.Row="1"
          Style="{StaticResource MyButton}" Click="Button2_OnClick">
              <Button.Background>
                  <ImageBrush ImageSource="Images\ButtonEnterLight.png"></ImageBrush>
              </Button.Background>
   </Button>

And this is the result,

What else do I need to do to get this to disappear? It has been bothering me for the last week.

EDIT: This is a Screen shot of the Live Visual Tree expanded to the first button that has an Image embedded in it.

Would be nice if the down voters would kindly share why they down voted? — KyloRen, Dec 15 '16 at 13:59
Have you checked with Snoop or VS where the border comes from? — Lennart, Dec 15 '16 at 14:03
@Lennart, Forgive me, I don't know what Snoop is, but where would I find where this boarder is in VS? Clicking on the border just registers that it is part of the button, but on non image embedded buttons there is not border using the same `Style`. — KyloRen, Dec 15 '16 at 14:07
Do you have Visual Studio 2015? It contains UI Debugging Tools (explained here https://msdn.microsoft.com/en-us/library/mt270227.aspx). What you want to do is to search the Live Visual Tree for your Button and then check where that border comes from. I suspect it's the border you have in your ControlTemplate. Do you need that? If you want no border at all you can just remove it and only have the ContentPresenter in the template. — Lennart, Dec 15 '16 at 14:58
@Lennart, Took me a bit ,bit I found it and how to see it. What am I looking for on the Visual Tree? When looking at the Border, it states below it `Content Presenter`. Is that what the border is? — KyloRen, Dec 15 '16 at 15:33
Add this to your button style `` or just put BorderThickness=0 — Chris W., Dec 15 '16 at 16:07
@ChrisW. Awesome, that fixed it. If you want to make that an answer I will UV and mark answered. Thanks again for the help. — KyloRen, Dec 15 '16 at 16:12
Oh I'm sure it's a question that's been asked before, just didn't take the time to search. No worries, if I have time I'll come back and give an answer with actual explanation if nobody finds a duplicate before long. — Chris W., Dec 15 '16 at 16:29

score 2 · Accepted Answer · edited May 23 '17 at 11:45

Alright, so FocusVisualStyle is an often overlooked System.Windows.Style property value that in many instances adds a resource to help visualization of when a control has active focus.

It may not always be evident in the Style template you're working in since the default is an empty static style but also often value effective at runtime. So what often ends up happening is even if you've declared your Triggers or Visual States for the elements in the template. A ghostly border or something else visual will occur on an element that you didn't explicitly set.

To get around this, there's several things you can do.

Could overwrite the property globally.
Could overwrite it at the instance of the template with a setter, eg <Setter Property="FocusVisualStyle" Value="{x:Null}"/>

[The value could also effectively be Transparent, either way you just want to declare you don't want the BorderThickness to have color.]
You could also ditch it at the instance by ditching the border all together via BorderThickness="0"

The overall goal though, is to just deal with that property of FocusVisualStyle and either wipe out its result, or hide it, so it's no longer a visual and you can move on with your day.

Hope this helps, cheers.

Thanks again for the detailed explanation, I am sure this is going to help others in the future. — KyloRen, Dec 15 '16 at 22:10
Hopefully. I know it threw me for a curve a couple times when I first started delving into custom UI. Happy Holidays! — Chris W., Dec 15 '16 at 22:47

How to get rid of this border around image embed button?

1 Answers1