Remove Extra Space around Listbox - wpf

Question

I have some extra space around my Listbox. It's 1px wide, but I don't know where it comes from...
I set the padding, margin and BorderThickness of both, the ListBox and the ListboxItem to 0.
This is the XAML:
<!-- NOTEBOX LISTBOX -->
<!-- The Datatemplate for the Notebox - ListboxItem -->
<DataTemplate x:Key="NoteListboxItemTemplate" DataType="ListBoxItem">
<Border Style="{DynamicResource OuterNoteBoxBorder}">
<Border Style="{DynamicResource SecondOuterNoteBoxBorder}">
<StackPanel>
<TextBlock Grid.Column="0" Foreground="#225588" Text="{Binding Title}" Style="{DynamicResource PlayListListBoxTitleLabel}" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" ></TextBlock>
<ContentPresenter Content="{Binding NoteView}"></ContentPresenter>
<TextBlock Grid.Column="1" Foreground="Black" Text="{local:CultureAwareBinding CreationDate, StringFormat={}{0:F}}" Style="{DynamicResource PlayListListBoxTitleLabel}"></TextBlock>
</StackPanel>
</Border>
</Border>
</DataTemplate>
<!-- The Itemtemplate for the Notebox - ListboxItem -->
<Style x:Key="NoteboxListItemTemplate" TargetType="{x:Type ListBoxItem}">
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="White" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
<!--<Setter Property="Background" TargetName="Bd" Value="#66000000"/>
<Setter Property="BorderBrush" Value="#000000" />-->
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<!--<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>-->
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#88000000"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
</Style.Resources>
</Style>
<!-- The Border-Template for our Notebox - ListboxItem -->
<Style x:Key="NoteboxListItemBorderTemplate" TargetType="{x:Type Border}">
<Setter Property="Background" Value="#CCFFFFFF" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#88000000"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#44000000"/>
</Style.Resources>
</Style>
<!-- Notebox - Listbox Template -->
<Style x:Key="NoteboxListboxTemplate" TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0" />
</Style>
<ListBox Grid.Column="1"
Grid.Row="0"
Background="Black"
MouseDoubleClick="ListBox_MouseDoubleClick"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemContainerStyle="{DynamicResource NoteboxListItemTemplate}"
VirtualizingStackPanel.VirtualizationMode="Recycling"
VirtualizingStackPanel.IsVirtualizing="True"
ItemsSource="{Binding Notes, Mode=TwoWay}"
ItemTemplate="{DynamicResource NoteListboxItemTemplate}"
SelectedItem="{Binding SelectedNote}"
Style="{DynamicResource NoteboxListboxTemplate}">
</ListBox>
What am I missing?

Answer 1

This is the default control template for ListBox:
<ControlTemplate x:Key="ListBoxControlTemplate1" TargetType="{x:Type ListBox}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="True">
<ScrollViewer Focusable="False" Padding="{TemplateBinding Padding}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Notice the Padding="1" on Border named Bd. Since this is harcoded and not template bound, you can either retemplate the ListBox and set the padding to 0, or since Padding on the ScollViewer has a TemplateBinding to the Padding of the ListBox, you can set the Padding on your ListBox to -1 to offset the padding on the border.

Answer 2

The control template of a ListBox looks like this:
<ControlTemplate TargetType="{x:Type ListBox}">
<Border Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true"
Padding="1"> <!-- This might be the problem -->
<!-- ... -->

Answer 3

Try to put Padding="-1" in the ListBox.