How to disable border of WPF button when click it?

Question

How to disable border of WPF button when I click it?

I have create button like below, everything work fine except when I click on the button.

<Button Background="Transparent" BorderBrush="Transparent">
    <Button.Content>
        <StackPanel>
            <Image Source="xxx.png" />
            <TextBlock Text="Change Password" />
        </StackPanel>
    </Button.Content>
</Button>

When I click the button, it has border like below.

alt text http://www.freeimagehosting.net/uploads/8ece306bd4.png

I try to create style for FocusVisualStyle of the button but it don't work as I expect, this problem also occur when I set IsDefault="True" too.

score 13 · Answer 1 · answered Jul 14 '11 at 16:17

13

I know this is an old question, but felt I could answer.

If I understand the problem correctly, after you click the button and move on, a border remains around it. When you click on some other item, like a TextBox or another Button, the border disappears.

This "border" is the "focus" indicator.

To prevent this, set "Focusable" to "False" on the Button:

<Button Background="Transparent" BorderBrush="Transparent" Focusable="False">
    <Button.Content>
        <StackPanel>
            <Image Source="xxx.png" />
            <TextBlock Text="Change Password" />
        </StackPanel>
    </Button.Content>
</Button>

answered Jul 14 '11 at 16:17

D'Hag

591
8
11

I was looking for this...thnx – Bibaswann Bandyopadhyay Nov 12 '14 at 15:56
3

Well this answer is just crazy. Everyone knows simple solutions in WPF require 300 lines of code and a dependency property – JumpingJezza Jun 02 '16 at 07:28
That's not a good solution for people who navigate with the keyboard, since this won't allow you to focus a button with the tabulator. – Victor O Mar 17 '20 at 17:34

score 10 · Accepted Answer · answered Nov 26 '09 at 09:11

You may have to change the button template, this will give you a button with no frame what so ever, but also without any press or disabled effect:

In your Window.Resources element:

<Style TargetType="Button" x:Key="TransparentButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="Transparent">
                   <ContentPresenter/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And the button:

<Button Style="{StaticResource TransparentButton}">
    <Button.Content>
        <StackPanel>
            <Image Source="xxx.png" />
            <TextBlock Text="Change Password" />
        </StackPanel>
    </Button.Content>
</Button>

Now, if you need a little more visual feedback start with this template:

http://msdn.microsoft.com/en-us/library/ms753328.aspx

and remove things until you get what you want.

Don't forget to add a transparent background to your elements, if you don't have one, or have a null background the transparent area inside teh button will not be clickable.

How to disable border of WPF button when click it?

2 Answers2

Linked