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.

Answer 1

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.