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

发布时间：2020-12-14 04:10:01 所属栏目：Windows 来源：网络整理

导读：我为我的 WPF应用程序创建了一个简单的按钮模板： Style x:Key="DialogButton" TargetType="{x:Type Button}" Setter Property="Template" Setter.Value ControlTemplate TargetType="{x:Type Button}" Border Name="buttonBorder" CornerRadius="8" BorderT

我为我的 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">
                    <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>

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

这是按钮的放大部分：

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

谢谢！

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

在边框上将EdgeMode设置为别名,这应该摆脱小差距

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

另一个简单的选项是将样式中的网格更改为边框并将背景和CornerRadius设置为相同但将边距设置为-1,这将导致比使用别名更平滑的外观并消除小间隙

例：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!