title: How do I get rid of this WPF/XAML ListBox Padding?
body: <p>I'm having some trouble learning WPF, I've set up a custom UserControl like so:</p>
  
  <pre><code>&lt;UserControl
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
           xmlns:local="clr-namespace:LobbyApp" x:Class="LobbyApp.ChatPanel" 
           mc:Ignorable="d" 
           d:DesignHeight="200" d:DesignWidth="600"&gt;
  &lt;UserControl.Resources&gt;
      &lt;DataTemplate DataType="{x:Type local:ChatMessage}"&gt;
          &lt;Grid&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition&gt;
                      &lt;ColumnDefinition.Width&gt;Auto&lt;/ColumnDefinition.Width&gt;
                      &lt;ColumnDefinition.SharedSizeGroup&gt;Date&lt;/ColumnDefinition.SharedSizeGroup&gt;
                  &lt;/ColumnDefinition&gt;
                  &lt;ColumnDefinition&gt;
                      &lt;ColumnDefinition.Width&gt;Auto&lt;/ColumnDefinition.Width&gt;
                      &lt;ColumnDefinition.SharedSizeGroup&gt;Who&lt;/ColumnDefinition.SharedSizeGroup&gt;
                  &lt;/ColumnDefinition&gt;
                  &lt;ColumnDefinition&gt;
                      &lt;ColumnDefinition.Width&gt;*&lt;/ColumnDefinition.Width&gt;
                  &lt;/ColumnDefinition&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;DataGridCell BorderThickness="0" Content="{Binding Timestamp}" Grid.Column="0" Background="Black" Foreground="LightCyan"/&gt;
              &lt;DataGridCell BorderThickness="0" Content="{Binding Who}" Grid.Column="1" Background="Black" Foreground="LightBlue"/&gt;
              &lt;DataGridCell BorderThickness="0" Grid.Column="2" Background="Black" Foreground="White"&gt;
                  &lt;TextBox Text="{Binding What, Mode=OneWay}" IsReadOnly="True" TextWrapping="Wrap"/&gt;
              &lt;/DataGridCell&gt;
          &lt;/Grid&gt;
      &lt;/DataTemplate&gt;
  &lt;/UserControl.Resources&gt;
  
  &lt;ListBox ItemsSource="{Binding History}" SnapsToDevicePixels="True" Background="Magenta" Padding="0"/&gt;
  </code></pre>
  
  <p></p>
  
  <p>Most of that I think doesn't matter, just including it for completeness. The interesting bit is I see the magenta background outside the scrollbars, like the listbox content and it's scrollbars are actually padded inside the listbox. It looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/q76J2.png" alt="ListBox Padding"></p>
  
  <p>I see the outer magenta even if the listbox is a reasonable size, it's just easier to see when you shrink it small like that.</p>
  
  <p>I've tried every margin/padding on every element I can to get rid of the magenta, but I can't seem to. I don't know what is causing that, or how to 'fix' it. I'll probably simplify my example down to the most basic parts but thought I'd post first since maybe it's just a dumb obvious answer. My apologies if so.</p>