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

Question

I am facing a strange effect in the button rendering.

The style for the button is the following

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

I tried setting BorderThickness="0" before, but the result was the same. Maybe it is a stupid question, but I don't know how to google it properly.

Answer 1

Try adding this to the button style:

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

WPF layout is floating point, not integer. What you're seeing there is anti-aliasing. When necessary, you can make that stop happening with SnapsToDevicePixels (which affects rendering) and UseLayoutRounding (which affects measurement and layout). Unfortunately, I'm not prepared to provide a detailed explanation of the practical differences between the two¹.

^{1. I thought that sounded better than "I don't have a clue".}