删除列表框周围的额外空间

Question

我的列表框周围有一些额外的空间。它有 1px 宽，但我不知道它来自哪里......

我将 ListBox 和 ListboxItem 的 padding、margin 和 BorderThickness 都设置为 0。

这是 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>

我错过了什么？

Answer 1

尝试将 Padding="-1" 放在 ListBox 中。

Answer 2

这是 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>

注意名为 Bd 的边框上的 Padding="1"。由于这是硬编码而不是模板绑定，因此您可以重新模板化 ListBox 并将填充设置为 0，或者由于 ScollViewer 上的 Padding 有一个 TemplateBinding 到 ListBox 的填充，您可以将 ListBox 上的填充设置为 -1 以偏移边框上的填充。

Answer 3

ListBox 的控件模板如下所示：

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