移除按钮周围的边框答案

【问题标题】：Remove Border around Button移除按钮周围的边框
【发布时间】：2015-01-18 11:01:53
【问题描述】：

我一直在尝试删除Button 周围的Border，并在鼠标悬停在Button 的Background 上时更改Colour。

这是我所拥有的：

<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>

问题是，无论我将BorderThickness 设置为什么，Button 都会消失。 Button 也不会变成我用 Trigger 指定的颜色。

我也尝试过简单地使用StyleSetter，但发现这对我的Button没有影响。

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

【问题讨论】：

您的模板中缺少ContentPresenter，但BorderThickness 有什么问题？如果您设置BorderThickness="0"，则内容周围不会有边框

标签： c# wpf templates button

【解决方案1】：

您需要定义以下ControlTemplate 并删除样式触发器。

<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>

我已经试过了，这是有效的。

【讨论】：

【解决方案2】：

我有一种用于从按钮中删除默认 Windows 样式的样式；我相信您可以使用它或使用它来实现您想要的。事实上，它只是制作了一个绝对没有边框、没有背景、没有边距、什么都没有的按钮，只需使用模板来实现你想要的：

<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>

这不是我的，但我不记得我在哪里找到的，如果作者来了，很抱歉！

您还可以从MSDN 获取默认按钮模板并对其进行调整。

【讨论】：