Why are there thin hairlines (1 pixel?) between ItemsControl items?

Question

When I have background colors on the items in an ItemsControl, and set the margins to 0, WPF leaves hairlines between the items as if the ItemsControl wrapper plumbing is taking up a minute amount of space. I checked the visual tree with Snoop and all margins are set to 0,0,0,0.

What are causing these lines and how can I avoid them?

XAML:

<DockPanel>

    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Background="Yellow" >
        <ItemsControl ItemsSource="{Binding CustomerList}">

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="DarkGreen">
                        <TextBlock Text="{Binding LastName}"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <DockPanel Margin="10"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

        </ItemsControl>
    </StackPanel>

</DockPanel>

Code-Behind:

using System.Windows;
using System.ComponentModel;
using System.Collections.ObjectModel;
namespace TestItemsControl2938
{
    public partial class Window1 : Window, INotifyPropertyChanged
    {
        private ObservableCollection<Customer> _customerList = new ObservableCollection<Customer>();
        public ObservableCollection<Customer> CustomerList
        {
            get
            {
                return _customerList;
            }

            set
            {
                _customerList = value;
                OnPropertyChanged("CustomerList");
            }
        }

        public Window1()
        {
            InitializeComponent();
            DataContext = this;

            CustomerList.Add(new Customer { FirstName = "Jim", LastName = "Jones" });
            CustomerList.Add(new Customer { FirstName = "Joe", LastName = "Adams" });
            CustomerList.Add(new Customer { FirstName = "Jake", LastName = "Johnson" });
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;

            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

    public class Customer
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Street { get; set; }
        public string Location { get; set; }
        public string ZipCode { get; set; }
    }

}

Answer:

Here's the fix, thanks Kent:

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <StackPanel Background="#ccc" SnapsToDevicePixels="True">
            <TextBlock Text="{Binding LastName}"/>
        </StackPanel>
    </DataTemplate>
</ItemsControl.ItemTemplate>

Answer 1

It may be WPF inferring a certain amount of transparency because the items don't fall on exact pixel boundaries. Try playing with the SnapsToDevicePixels property on the item containers and see if that helps.

Answer 2

I have found that SnapToDevicePixes does not always work and moreover, it is not available Under WINRT. For me the best solution is simply to fill the gap between the items by using a margin slightly negative.

                 <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Background="DarkGreen" Margin="0,0,-0.5,-0.5">
                            <TextBlock Text="{Binding LastName}"/>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>