刪除按鈕周圍的邊框

Question

我一直在嘗試刪除Button周圍的Border ，並在鼠標懸停在Button上方時更改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指定的顏色。

我還嘗試僅使用Style Setter但發現這對我的Button沒有影響。

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

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

我已經嘗試過了，這正在工作。

Answer 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中獲取默認按鈕模板並進行調整。