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

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 使用抗锯齿呈现元素，这会导致形状之间出现小间隙。

在您的Border 上将EdgeMode 设置为Aliased 这应该可以消除小间隙

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:

另一个简单的选择是将 Style 中的 Grid 更改为 Border 并设置 Background 和CornerRadius 相同但将 Margin 设置为 -1，这将导致比使用 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>