How do you completely remove the button border in wpf?

Question

I'm trying to create a button that has an image in it and no border - just like the Firefox toolbar buttons before you hover over them and see the full button.

I've tried setting the BorderBrush to Transparent, BorderThickness to 0, and also tried BorderBrush="{x:Null}", but you can still see the outline of the button.

A borderless button in WPF?!!! What do you think this is, an intuitive UI framework??! — Josh Noe, Sep 21 '16 at 16:17

Simon · Answer 1 · 2010-06-02T11:47:51.833

274

Try this

<Button BorderThickness="0"  
    Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" >...

edited Jun 02 '10 at 11:47

answered Jun 02 '10 at 11:38

Simon

33,714
21
133
202

2

Fantastic! Every other solution I've found is extremely convoluted and involves overriding all styling of the button. – Jonathan Jun 22 '11 at 14:34
11

Unfortunately, it disables the effect of setting `HorizontalContentAlignment` to `Stretch`. – Konrad Morawski Oct 12 '11 at 11:38
It says "x:Static is not supported in a Silverlight project." – Cœur Mar 31 '13 at 09:36
3

@Cœur the questions specified WPF not Silverlight – Simon Mar 31 '13 at 12:47
11

This is turning my button into a toggle button. When I click the button it stays selected until I click another button. How would I stop it from acting like that? – burnttoast11 Jan 28 '14 at 22:17
2

I'd upvote this twice if I could. Saved me a lot of code to get the look I want. – avenmore Jul 26 '14 at 13:39
This makes my button image gone after i click that. How to resolve this problem?? – Neha Mar 09 '15 at 10:50

score 61 · Answer 2 · edited Oct 06 '14 at 14:03

61

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:

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

And the button:

<Button Style="{StaticResource TransparentStyle}"/>

edited Oct 06 '14 at 14:03

Contango

76,540
58
260
305

answered Jul 17 '12 at 07:12

Snehal

1,070
12
20

1

I don't know why other solutions seems to work at other people. This solution is the only one which can work because the ContentPresenter Border line is also removed! Good work! – Nasenbaer Apr 09 '13 at 21:06
1

I tried several other solutions, this is the only one works. btw, for newbies, the code should be in the header of your xaml like in – Felix Jul 17 '13 at 05:41
1

also, there is a typo in the answer: `` should be `` – Felix Jul 17 '13 at 05:45
Worked for me as well, great solution! – bbqchickenrobot Aug 04 '14 at 15:46
Why there is empty `` ? What is it for? – Dmitry Feb 04 '17 at 21:23
Typo in @Felix comment: should probably be ` – Manfred Jul 06 '18 at 08:58

score 27 · Answer 3 · answered Jul 24 '10 at 23:21

27

What you have to do is something like this:

<Button Name="MyFlatImageButton"
        Background="Transparent"
        BorderBrush="Transparent"
        BorderThickness="0" 
        Padding="-4">
   <Image Source="MyImage.png"/>
</Button>

Hope this is what you were looking for.

Edit: Sorry, forgot to mention that if you want to see the button-border when you hover over the image, all you have to do is skip the Padding="-4".

answered Jul 24 '10 at 23:21

Alfred B. Thordarson

4,460
8
39
37

1

This works, and this is very nice idea in some cases – curiousity Nov 03 '15 at 12:06
This works perfectly when you want to stretch an image inside a button. Removing the padding lets the image occupy the full button dimensions. – visc Aug 02 '17 at 16:30
To remove only the border, `BorderThickness="0"` is enough – marsh-wiggle Oct 07 '20 at 07:37

score 23 · Answer 4 · edited May 23 '17 at 10:31

I don't know why others haven't pointed out that this question is duplicated with this one with accepted answer.

I quote here the solution: You need to override the ControlTemplate of the Button:

<Button Content="save" Name="btnSaveEditedText" 
                Background="Transparent" 
                Foreground="White" 
                FontFamily="Tw Cen MT Condensed" 
                FontSize="30" 
                Margin="-280,0,0,10"
                Width="60"
                BorderBrush="Transparent"
                BorderThickness="0">
    <Button.Template>
        <ControlTemplate TargetType="Button">
             <ContentPresenter Content="{TemplateBinding Content}"/>
        </ControlTemplate>
    </Button.Template>  
</Button>

If you don't put any content inside the button it will not respond to clicks. You can fix that by wrapping that ContentPresenter in a Border with a transparent background. That way you can make a blank/transparent button of any size to place over an image. — bj0, Oct 08 '13 at 19:01

score 4 · Answer 5 · edited Jan 04 '14 at 13:46

4

You can use Hyperlink instead of Button, like this:

        <TextBlock>
            <Hyperlink TextDecorations="{x:Null}">
            <Image Width="16"
                   Height="16"
                   Margin="3"
                   Source="/YourProjectName;component/Images/close-small.png" />
            </Hyperlink>
        </TextBlock>

edited Jan 04 '14 at 13:46

Khushi

1,031
4
24
48

answered Nov 25 '10 at 07:47

Сергей Гусев

41
1

I like this solution. It's a nice trick, gives you a hand cursor on hover and doesn't require to use a custom style. – Martin Braun Dec 29 '21 at 23:02

score 2 · Answer 6 · answered Jun 15 '09 at 19:52

You may already know that putting your Button inside of a ToolBar gives you this behavior, but if you want something that will work across ALL current themes with any sort of predictability, you'll need to create a new ControlTemplate.

Prashant's solution does not work with a Button not in a toolbar when the Button has focus. It also doesn't work 100% with the default theme in XP -- you can still see faint gray borders when your container Background is white.

score -2 · Answer 7 · answered Dec 18 '15 at 10:31

Why don't you set both Background & BorderBrush by same brush

 <Style TargetType="{x:Type Button}" >
        <Setter Property="Background" Value="{StaticResource marginBackGround}"></Setter>
        <Setter Property="BorderBrush" Value="{StaticResource marginBackGround}"></Setter>            
 </Style>

<LinearGradientBrush  x:Key="marginBackGround" EndPoint=".5,1" StartPoint="0.5,0">
    <GradientStop Color="#EE82EE" Offset="0"/>
    <GradientStop Color="#7B30B6" Offset="0.5"/>
    <GradientStop Color="#510088" Offset="0.5"/>
    <GradientStop Color="#76209B" Offset="0.9"/>
    <GradientStop Color="#C750B9" Offset="1"/>
</LinearGradientBrush>

How do you completely remove the button border in wpf?

7 Answers7

Linked

Related