如何在带圆角的按钮中修复边框和背景之间的空白区域？

Question

我为我的WPF应用程序创建了一个简单的按钮模板:

<Style x:Key="DialogButton" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="buttonBorder" CornerRadius="8" BorderThickness="2" BorderBrush="{TemplateBinding Background}" Background="{TemplateBinding Background}" MaxHeight="30" MinWidth="70" Margin="0,8,8,8">
                    <Grid>
                        <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="buttonBorder" Property="BorderBrush" Value="{DynamicResource WindowBackColor}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

但正如您在下面的屏幕截图中看到的那样,按钮在角落中有一个小的空白区域:

这是按钮的放大部分:

我怎样才能解决这个问题？

谢谢!

Answer 1

WPF默认情况下使用抗锯齿渲染元素,这可能会导致形状之间的间隙很小.

设置EdgeMode到Aliased您Border这应该摆脱小的差距

RenderOptions.EdgeMode="Aliased"

例:

    <Style TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border RenderOptions.EdgeMode="Aliased" Name="buttonBorder" CornerRadius="8" BorderThickness="2" BorderBrush="{TemplateBinding Background}" Background="{TemplateBinding Background}" MaxHeight="30" MinWidth="70" Margin="0,8,8,8">
                        <Grid>
                            <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="buttonBorder" Property="BorderBrush" Value="{DynamicResource WindowBackColor}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

结果:

前(抗锯齿): 之后(化名):

选项2:

另一种简单的选择是改变Grid的Style一个Border,并设置Background和CornerRadius相同的,但设置Margin为-1,这将导致比使用更光滑apperence Aliased并取出小的差距

例:

<Border Name="buttonBorder" CornerRadius="8" BorderThickness="2" BorderBrush="{TemplateBinding Background}" MaxHeight="30" MinWidth="70" Margin="0,8,8,8">
    <Border CornerRadius="8" Margin="-1" Background="{TemplateBinding Background}" >
        <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Border>
</Border>

Answer 2

在现有的顶部添加另一个悬停边框最终可以达到预期的效果：

<Style x:Key="DialogButton" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Border Name="buttonBorder" CornerRadius="8" Background="{TemplateBinding Background}" MaxHeight="30" MinWidth="70" Margin="0,8,8,8">
                        <Grid>
                            <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </Grid>
                    </Border>
                    <Border Name="buttonHoverBorder" CornerRadius="8" BorderThickness="2" BorderBrush="{DynamicResource WindowBackColor}" Visibility="Hidden" Background="Transparent" MaxHeight="30" MinWidth="70" Margin="0,8,8,8" 
                        Width="{Binding ElementName=buttonBorder, Path=Width}" Height="{Binding ElementName=buttonBorder, Path=Height}"> 
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="buttonHoverBorder" Property="Visibility" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>