WPF开发：如何减小ListBox中ScrollBar占用的多余空白宽度

问题原因 #

该留白是WPF默认ScrollViewer模板的布局限制导致的：默认ScrollViewer的内部Grid中，垂直滚动条所在列的宽度是固定的系统默认值（通常为18px），哪怕将ScrollBar本身的宽度改成4px，该列依然会占用预设的固定宽度，就会出现多余空白。另外ScrollBar自带的默认MinWidth、Margin、Padding也可能占用额外空间。

解决步骤 #

• 补全ScrollBar样式属性，清除默认边距并限制最小宽度：

<Style TargetType="ScrollBar">
    <Setter Property="Width" Value="4"/>
    <!-- 覆盖默认MinWidth限制，避免宽度设置不生效 -->
    <Setter Property="MinWidth" Value="4"/>
    <!-- 清除默认内外边距 -->
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Template" Value="{DynamicResource MyScrollBar}"/>
</Style>

• 重写ListBox内部ScrollViewer的模板，将垂直滚动条所在列的宽度改为Auto，让列宽自动适配ScrollBar的实际宽度：

<ListBox ItemsSource="{Binding Path=Items}" ScrollViewer.CanContentScroll="False">
    <ListBox.Resources>
        <!-- 重写ScrollViewer模板，调整滚动条占位列宽度 -->
        <Style TargetType="ScrollViewer">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <!-- 核心修改：将滚动条列宽改为Auto，匹配ScrollBar实际宽度 -->
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <ScrollContentPresenter 
                                Grid.Column="0"
                                Grid.Row="0"
                                CanContentScroll="{TemplateBinding CanContentScroll}" />
                            <ScrollBar 
                                x:Name="PART_VerticalScrollBar"
                                Grid.Column="1"
                                Grid.Row="0"
                                Maximum="{TemplateBinding ScrollableHeight}"
                                ViewportSize="{TemplateBinding ViewportHeight}"
                                Value="{TemplateBinding VerticalOffset}"
                                Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                Orientation="Vertical"/>
                            <ScrollBar 
                                x:Name="PART_HorizontalScrollBar"
                                Grid.Column="0"
                                Grid.Row="1"
                                Maximum="{TemplateBinding ScrollableWidth}"
                                ViewportSize="{TemplateBinding ViewportWidth}"
                                Value="{TemplateBinding HorizontalOffset}"
                                Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                Orientation="Horizontal"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- 上面修改后的ScrollBar样式放在这里 -->
        <Style TargetType="ScrollBar">
            <Setter Property="Width" Value="4"/>
            <Setter Property="MinWidth" Value="4"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Template" Value="{DynamicResource MyScrollBar}"/>
        </Style>
    </ListBox.Resources>
</ListBox>

修改后ScrollViewer的滚动条列会自动适配设置的4px宽度，不会再有多余留白。
原始问题效果参考：

内容的提问来源于stack exchange，提问作者Dzianis Karpuk