WPF: ScrollViewer is 4px smaller than ListView

Question

I've come across a very strange "feature" of the ListView. Hopefully someone can help me out here.

When you create a ListView on your Window, it comes with a default spacing between the border and the content. I guess it's a padding of 2 (left and right) if you look at the Snoop information. The ListBoxChrome (part of the ListView) is in my case 363px wide. The ScrollViewer inside it is 359px. There's nothing set on both these controls. Even a new project with a simple ListView has this issue.

One workaround is to give the header cells a padding of -2, but for some reason the headers won't fill until the right and leaves me with a wider gap at the right.

Someone here to help me out?

Some screenshots:

http://i.imgur.com/AKbDfwQ.png

http://i.imgur.com/pQtqMJ4.png

Answer 1

It's a combination of BorderThickness and Padding from the Border element (each contribute to 2px. 1px from left and 1px from right).

You can set

<ListView BorderThickness="0">

and loose 2px, however Padding atleast on Windows-8 is set directly on the Border control in the default Template and would not take any effect if set directly on the ListView

extract from default Style for ListView

<ControlTemplate TargetType="{x:Type ListView}">
  <Border x:Name="Bd"
          Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}"
          Padding="1"
          SnapsToDevicePixels="true">

simplest option is to provide a custom Style where you tweak that Padding value to 0. You can also choose to use Behavior's and get a reference to the Border control and override padding in code.

If you choose the option of code-behind to override Padding a very rough way to set the padding could be like:

public MainWindow()
{
  InitializeComponent();
  Loaded += (sender, args) => {
    var border = (Border)lv.Template.FindName("Bd", lv);
    border.Padding = new Thickness(0);
  };
}

and your xaml:

<ListView x:Name="lv"
          BorderThickness="0">