简体   繁体   中英

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

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>

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>

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM