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

【问题标题】：An aliasing rendering effect of a button - how to get rid of it?一个按钮的锯齿渲染效果 - 如何摆脱它？
【发布时间】：2017-08-29 14:59:00
【问题描述】：

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

按钮的样式如下

<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"，结果还是一样。也许这是一个愚蠢的问题，但我不知道如何正确地谷歌它。

【问题讨论】：

尝试在按钮样式中添加<Setter Property="SnapsToDevicePixels" Value="True" />。
谢谢，它有效。我应该在模板编辑之前更深入地学习 wpf））

标签： wpf xaml styles antialiasing

【解决方案1】：

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

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

WPF 布局是浮点数，而不是整数。你看到的是anti-aliasing。必要时，您可以使用SnapsToDevicePixels（影响渲染）和UseLayoutRounding（影响测量和布局）停止这种情况。不幸的是，我不准备详细解释两者之间的实际差异¹。

^{1.我认为这听起来比“我不知道”更好。}

【讨论】：