Remove Extra Space around Listbox

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?

回答1:

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

回答2:

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.