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默认情况下使用抗锯齿渲染元素，这可能会导致形状之间的间隙很小。

将EdgeMode设置为Aliased Border这应该摆脱小差距

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>

结果：

之前（抗锯齿）： Before 之后（别名）： After

选项2：

另一个简单的选择是将Grid中的Style更改为Border并将Background和CornerRadius设置为相同但设置为{{ 1}}到-1，这将导致比使用Margin更平滑的外观并删除小间隙

示例：

Aliased

Answer 2

添加另一个悬停在现有顶部之上的边框最终可以实现所需的效果：

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

Answer 3

尝试将BorderThickness buttonBorder的{{1}}属性设置为Border或更大的数字。话虽如此，我以前从未在"0"个元素中看到过这个......你是否确实确定图像上的某些失真 em>按钮？

Answer 4

我现在已经坚持了很长一段时间，定期遇到按钮样式的一些问题。上面的答案对我帮助很大，但所有这些都有一些缺陷。

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

因为我想创建自己的样式库以便在多个项目中使用，所以这些并不是很好的解决方案，即使它可以为每种风格做特别的工作。

嗯，现在看起来很简单，并告诉我，如果我错了，但模板根目录中的额外边框可以按预期完成工作。

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

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

link to the picture before/after, 4 kb

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

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

4 个答案:

选项2：