如何修复边框和背景之间的空白空间在圆angularbutton？

WPF默认呈现具有抗锯齿功能的元素，这可能会导致形状之间的小间隙。

将EdgeMode设置为您的Border上的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,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，这会比使用CornerRadius产生更平滑的外观，并消除小间隙

例：

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

添加另一个边框悬停在现有的最后，最终会产生所需的效果：

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

尝试将buttonBorder Border的BorderThickness属性设置为"0"或更大的数字。 话虽如此，我从来没有见过这个在我的任何Border元素…你真的确定这不是只是在按钮的图像上的一些失真？

我已经停留了很长一段时间，周期性地出现按钮样式的一些问题。 上面的答案帮了我很多，但是他们都有一些缺陷。

• 别名使模糊
• 悬停边框要求更改不同边框厚度的边距

因为我想让自己的风格库在多个项目中使用，所以这些并不是很好的解决方案，尽管它可以为每种风格都做好工作。

那么，现在看起来很简单，告诉我，如果我错了，但在模板的根目录另外的边界做预期的工作。

位于其他元素下面，没有厚度，它应该有模板背景颜色作为背景。 从内部边界给它的大小属性，并享受！

 <Style x:Key="ButtonStyle2" TargetType="{x:Type Button}"> <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/> <Setter Property="Background" Value="White"/> <Setter Property="BorderBrush" Value="White"/> <Setter Property="Foreground" Value="Black"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border CornerRadius="8" BorderThickness="0" Background="{TemplateBinding Background}" MaxHeight="30" MinWidth="70" Margin="0,8,8,8"> <Border Name="buttonBorder" CornerRadius="8" BorderThickness="2" BorderBrush="{TemplateBinding Background}" Background="{TemplateBinding Background}" > <Grid> <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Grid> </Border> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> 

链接到之前/之后的图片，4 kb

请注意，如果通过触发器更改其他颜色，则必须在“触发器”中更改此边框的颜色。 否则，它将保持与静态相同，并在按下/悬停时在间隙中可见。