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?

Solution 1

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>

Solution 2

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>

Solution 3

Change this line

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

to

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

Comments

[Heena]

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.

[Bilow]

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 <Grid> part and the TargetName so I could solve my issue. Rest is just a change of my own stuff (update).

[Alexandru Dicu]

While this displays a transparent button, when you press on it, the background is not transparent anymore.