11

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

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

这是按钮的放大部分：

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

谢谢！

4

4 回答 4

15

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

设置EdgeMode为Aliased你的Borderthis 应该摆脱小差距

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：

另一个简单的选项是将 a 更改Grid为Stylea并将andBorder设置为相同但将 -1 设置为 -1，这将导致比使用和删除小间隙更平滑的外观BackgroundCornerRadiusMarginAliased

例子：

<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>
于 2013-09-02T22:20:12.450 回答
4

在现有的顶部添加另一个悬停边框最终可以达到预期效果：

<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>
于 2013-09-02T22:40:45.463 回答
2

尝试将BorderThickness您的属性设置buttonBorder Border为任何一个"0"或更大的数字。话虽如此，我以前从未在我的任何Border元素上看到过这种情况......你真的确定这不仅仅是按钮图像的一些失真吗？

于 2013-09-02T22:13:21.840 回答
0

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

  • 混叠使它变得模糊
  • 悬停边框需要更改不同边框粗细的边距

由于我想创建自己的样式库以在多个项目中使用，这些都不是很好的解决方案，即使它可以为每种样式完成工作。

好吧，现在看起来很简单，如果我错了，请告诉我，但是模板根目录中的附加边框可以按预期完成工作。

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

<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

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

于 2016-06-10T16:05:52.827 回答