Transparent button background in WPF using style

Question

I've found this topic about setting the border of a button to transparent. This works fine, but I want to use this for the button background and not the border.

Solution in link which I've put in <Window.Resources>...</Window.Resources>:

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Green"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>

Source: How do you change Background for a Button MouseOver in WPF?

How can edit this code so I can use this to set the background of my button to transparent and not the border of it?

score 10 · Answer 1 · answered Jan 16 '14 at 13:36

10

Try this snippet for a transparent button:

<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" BorderThickness="0">
    <-- PUT BUTTON CONTENT HERE e.g. a Image -->
</Button>

answered Jan 16 '14 at 13:36

aDoubleSo

1,128
9
19

While this displays a transparent button, when you press on it, the background is not transparent anymore. – Alexandru Dicu Oct 26 '21 at 00:50

score 6 · Accepted Answer · answered Jan 17 '14 at 01:07

Found the solution for my issue:

Apparently you have to add the triggers within the ControlTemplate under ControlTemplate.Trigger. Andd after you've done that the thing with borders is that you have to set a TargetName in the Border tag and then set the reference (-> TargetName="XXXXX") to the properties which you've named in the border tag.

So:

<Window.Resources>
<Style x:Key="MenuButton" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Height" Value="40" />
    <Setter Property="Width" Value="Auto" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Margin" Value="45,0,0,0" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                <Border Name="MenuBorder" SnapsToDevicePixels="True" BorderBrush="Black" Background="{TemplateBinding Background}" BorderThickness="0,0,0,2" >
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Button.IsFocused" Value="True">
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter TargetName="MenuBorder" Property="BorderBrush" Value="#FFED6A2B" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

but in question you havnt wriiten about isfoused property.you are writtrn about ismouseover and evrytime there is no need of target name.you need target name in your case because you have added extra grid there.anyway you find out your solution.its good. — Heena, Jan 17 '14 at 03:44
yea i've added some extra properties and changed the property to IsFocussed, but that isn't quite the issue. It was just about the background part which I couldn't solve to get it transparent in other situations but the standart button style. I had to add the part and the TargetName so I could solve my issue. Rest is just a change of my own stuff (update). — Bilow, Jan 18 '14 at 04:09

score 5 · Answer 3 · answered Jan 16 '14 at 13:33

5

Change this line

<Setter Property="Background" Value="Red"/>

to

<Setter Property="Background" Value="Transparent"/>

answered Jan 16 '14 at 13:33

Alex

1,110
8
15

score 0 · Answer 4 · edited Sep 21 '15 at 08:45

0

Use this in C# code

Button btn = new Button() {BorderBrush=System.Windows.Media.Brushes.Transparent, 
                               BorderThickness = new Thickness(0)};

or

yourBtn.BorderBrush=System.Windows.Media.Brushes.Transparent;
yourBtn.BorderThickness =new Thickness(0);

edited Sep 21 '15 at 08:45

Cris

12,799
5
35
50

answered May 14 '15 at 05:39

Dharmendra Chaudhary

37
2

Transparent button background in WPF using style

4 Answers4

Linked