删除按钮周围的边框

Question

I've been trying to remove the Border around a Button and also change the Colour of the Button 's Background when the mouse hovers over it.

Here is what I have:

<Button Name="Home" Content="Home" HorizontalAlignment="Left" Width="75" Click="Button_Click_Home" Background="#FF252525" FontFamily="/VideoManager;component/#Myriad Pro" FontSize="13.333" Foreground="White" BorderThickness="5">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
           <Setter Property="Template">
             <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                   <Border BorderThickness="0"/>
                </ControlTemplate>
              </Setter.Value>
            </Setter>
            <Style.Triggers>
               <Trigger Property="IsMouseOver" Value="True">
                  <Setter Property="Background" Value="#FF36290A"/>
               </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

The issue is that regardless of what I set BorderThickness to, the Button disappears. Also the Button is not changing to the colour I specified with the Trigger .

I also tried simply using a Style Setter but found this had no effect on my Button .

<Style TargetType="{x:Type Button}">
    <Setter Property="BorderThickness" Value="0"/>
</Style>

Answer 1

You need to define following ControlTemplate and remove Style Trigger.

<ControlTemplate TargetType="{x:Type Button}">
    <Border Name="border"
            Background="{TemplateBinding Background}">
        <ContentPresenter HorizontalAlignment="Center"
                          VerticalAlignment="Center" />
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver"
                 Value="True">
            <Setter TargetName="border"
                    Property="Background"
                    Value="#FF36290A" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

I have tried this and this is working.

Answer 2

I have a style that I use to remove the default Windows style from buttons ; I'm sure you can use it or use it to achieve what you want. As it is, it just makes a button with absolutely no border, no background, no margins, nothing, just play with the template to achieve what you want :

<Style x:Key="NoChromeButton" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                            <Setter Property="Opacity" TargetName="Chrome" Value="0.5"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Cursor" Value="Hand"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

It is not mine but I don't remember where I found it, so sorry if the author come by !

You could also take the default button template from MSDN and tweak it.