Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF Button Background Transparency on Mouse Over

Tags:

.net

wpf

I'm trying to change the mouse-over effect on some buttons, as they have different custom background colours set, so the current mouse-over scheme of turning the same light blue doesn't fit very well.

I've currently got this:

    <Style TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="2">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Background">
                    <Setter.Value>
                        <SolidColorBrush Color="{Binding Path=Background}" Opacity="1" />
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background">
                    <Setter.Value>
                        <SolidColorBrush Color="{Binding Path=Background}" Opacity="0.5" />
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

I can't seem to get it to work; I'm trying to keep the background colour set on the button, but change the background opacity to 0.5 when mouse-over.

Changing the opacity of the whole button works, but I don't want to make the text/content disappear too, only dim the background colour.

AFAIK setting the SolidColorBrush here should work, but how do I grab the color value from the existing background value?

EDIT:

After adapting the below answer from @Clemens, I had this, which works beautifually!

    <Style TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid>
                            <Rectangle x:Name="background" Fill="{TemplateBinding Background}"/>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="background" Property="Opacity" Value="0.5"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter TargetName="background" Property="Opacity" Value="1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
like image 732
iamacarpet Avatar asked Oct 26 '17 11:10

iamacarpet


1 Answers

You may set the Opacity of a dedicated background element in the ControlTemplate:

<Style TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid>
                        <Rectangle x:Name="background"
                                   Fill="{TemplateBinding Background}"/>
                        <ContentPresenter
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="background" Property="Opacity" Value="0.5"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
like image 51
Clemens Avatar answered Nov 17 '22 17:11

Clemens