How to set a borderless button which changes its color when mouse hovering in WPF

Question

I want to override all my button's style to a borderless grayish button which highlights when hover on.

I wrote like below: If I remove the template section (I even have no idea of what does it do), the button will have a border even if I have set BorderThickness to 0. But if I keep the template section, the button will not change its background color at all.

So what can I do to keep both features and why my xaml won't work?

BTW, where can I find a full list of properties/triggers that I can set for certain type of control like button?

    <Style TargetType="{x:Type Button}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="Background" Value="{StaticResource TitleBrush}" />
        <Setter Property="Foreground" Value="{StaticResource WhiteTextBrush}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <ContentPresenter Content="{TemplateBinding Content}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{StaticResource HoverBrush}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

I got what I want by this answer http://stackoverflow.com/questions/17259280/how-do-you-change-background-for-a-button-mouseover-in-wpf. But still I want to know why... — user3819226, May 14 '15 at 06:42

score 0 · Answer 1 · answered May 14 '15 at 06:45

Try something like this it will work

<Grid>
    <Grid.Resources>
        <ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
            <Grid>
                <Rectangle x:Name="Rect" Width="100" Height="100" Fill="Aqua"/>

                <Viewbox>
                    <ContentControl Margin="20" Content="{TemplateBinding Content}"/>
                </Viewbox>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Rect" Property="Fill" Value="Orange"/>
                </Trigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Grid.Resources>
    <Button Template="{StaticResource buttonTemplate}">OK</Button>
</Grid>

score 0 · Accepted Answer · edited May 23 '17 at 10:24

Why BorderThickness value not reflected to control?

https://stackoverflow.com/a/16649319/440030

Why your xaml won't work?

Because, you set Template property of button with a simple content presenter, So Button ignore all control property and reflect your template. One way is improve your Template property with a by example label:

<ControlTemplate TargetType="{x:Type Button}">
    <Label Content="{TemplateBinding Content}"  
        Background="{TemplateBinding Background}" 
        Foreground="{TemplateBinding Foreground}" 
        BorderThickness="{TemplateBinding BorderThickness}" 
        BorderBrush="Black"/>
</ControlTemplate>

How to set a borderless button which changes its color when mouse hovering in WPF

2 Answers2