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