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