如何摆脱图像嵌入按钮周围的边界？

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.

Answer 1

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.