按钮的锯齿渲染效果 - 如何摆脱它？

Question

我在按钮渲染中遇到了一个奇怪的效果。

按钮的样式如下

<Style x:Key="DraggableItemDeleteButton" TargetType="{x:Type Button}">
    <Setter Property="Opacity" Value="1"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Background" Value="{StaticResource TransparentBrush}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="{StaticResource TransparentBrush}"/>
    <Setter Property="Width" Value="42"/>
    <Setter Property="Height" Value="42"/>
    <Setter Property="Command" Value="{Binding DataContext.DeleteItem, RelativeSource={RelativeSource AncestorType={x:Type UserControl}, Mode=FindAncestor}}"/>
    <Setter Property="CommandParameter" Value="{Binding}"/>
    <Setter Property="ToolTipService.InitialShowDelay" Value="500"/>
    <Setter Property="ToolTipService.ShowDuration" Value="4500"/>
    <Setter Property="ToolTipService.BetweenShowDelay" Value="1000"/>
    <Setter Property="ToolTipService.Placement" Value="Top"/>
    <Setter Property="Panel.ZIndex" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                    <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Command" Value="{x:Null}">
            <Setter Property="Visibility" Value="Hidden"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="{StaticResource DeletingBrush}"/>
            <Setter Property="BorderBrush" Value="{StaticResource DeletingBrush}"/>
            <Setter Property="Opacity" Value="1"/>
        </Trigger>
        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type StackPanel}, Mode=FindAncestor}}" Value="True">
            <Setter Property="Opacity" Value="1"/>
        </DataTrigger>
    </Style.Triggers>
    <Style.Resources>
        <Style TargetType="{x:Type ToolTip}" BasedOn="{StaticResource TooltipStyleBase}"/>
    </Style.Resources>
</Style>

我之前试过设置BorderThickness="0"，结果还是一样。也许这是一个愚蠢的问题，但我不知道如何正确 google 它。

Answer 1

尝试将此添加到按钮样式中：

<Setter Property="UseLayoutRounding" Value="True" />

WPF 布局是浮点数，不是整数。您在那里看到的是 anti-aliasing. When necessary, you can make that stop happening with SnapsToDevicePixels (which affects rendering) and UseLayoutRounding（这会影响测量和布局）。不幸的是，我不准备详细解释两者之间的实际差异¹。

^{1.我认为这听起来比 "I don't have a clue".}

好

按钮的锯齿渲染效果 - 如何摆脱它？

An aliasing rendering effect of a button - how to get rid of it?

wpf

xaml

styles

antialiasing