Get rid of button border in WPF?

Question

i am trying to get rid of button border and only display text, however a thin line around the text gets displayed even though i set borderThickness to 0 and borderbrush to transparent.

my xaml code for save 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"/>

Is there anyway i can get rid of the button border?

Short hack: ``, from a [similar post](http://stackoverflow.com/questions/995757/how-do-you-completely-remove-the-button-border-in-wpf) — Gábor Imre, Dec 10 '14 at 09:24

bitbonk · Accepted Answer · 2010-05-24T20:19:01.997

49

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>

edited May 24 '10 at 20:19

answered May 24 '10 at 20:12

bitbonk

48,890
37
186
278

3

Your suggestion will remove all highlight/pressed style of the button. – Nam G VU Dec 28 '10 at 03:31
2

Yes. If you want to keep that, you would have to get a copy of the control template (e.g. using expression blend) modify it (and leaving in the parts in you want to keep) and then apply it to your buttons. – bitbonk Jan 03 '11 at 08:40

score 12 · Answer 2 · edited Jan 24 '14 at 12:21

12

The method that I recently found to be most useful for this was to have your button use the style of a toolbars. This will only use the image or text while only showing button borders on mouse over.

<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
        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" />

edited Jan 24 '14 at 12:21

Abbas

14,186
6
41
72

answered Jan 22 '13 at 15:36

Dan Asberry

121
1
3

1

Holy Buckets Dan! This is genius! – Jesse Seger Sep 09 '13 at 19:08
1

Something to note about this, it will not work if the button is inside a toolbar. – xandermonkey Jan 11 '17 at 15:28

score 2 · Answer 3 · answered May 24 '10 at 20:17

You need to create a new Template for your buttons.

The easiest way to do this is open your project in Expression Blend, select the button and then right click and select "Edit Template > Edit a Copy..". This copies the existing template into one you can modify. It's easier if you create it in a resource dictionary.

Then select the template and on the Resource tab (on the right of the UI) select the ButtonFocusVisual. Select the Properties tab and expand the Miscellaneous section. This has BorderStyle and BorderThickness fields (among others). Set the style to None.

I follow your guide but failed to remove the border. I post the problem here http://stackoverflow.com/questions/4553692/how-to-remove-buttonchrome-border-when-defining-the-template-of-a-border. Please support us. — Nam G VU, Dec 29 '10 at 14:04

score 1 · Answer 4 · edited May 23 '17 at 12:25

1

Templates will not solve this problem, your only course of action is to modify the WPF control. The solution is here:

How to remove ButtonChrome border (when defining the template of a border)?

edited May 23 '17 at 12:25

Community

1
1

answered Jun 10 '11 at 15:41

samneric

3,038
2
28
31

Get rid of button border in WPF?

4 Answers4

Linked