ListView 滚动条弄乱了我的布局答案

【问题标题】：ListView scrollbar messes up my layoutListView 滚动条弄乱了我的布局
【发布时间】：2009-05-15 14:03:17
【问题描述】：

我有一个通常显示 4 或 5 个项目的 WPF 列表框。对于我的应用程序，这意味着我几乎不需要显示滚动条（有足够的空间）。

但是，如果列表中有更多项目，我需要显示垂直滚动条，但结果是我的内容空间较小，并且在我创建的“背景”上不再好看列表框。

我喜欢在布局中“保留”空间以显示滚动条。有没有办法做到这一点？（也许滚动条覆盖在内容上）

【问题讨论】：

【解决方案1】：

用 ScrollViewr 包装它怎么样？

<ScrollViewer VerticalScrollBarVisibility="Auto">
<!-- your ListBoxHere -->           
</ScrollViewer>

【讨论】：

这并没有解决我的问题，滚动条仍然占用空间

【解决方案2】：

好的，找到了解决办法。

我按照this MSDN article 为 ScrollViewer 创建了一个新的默认样式。然后我改变了放置滚动条的部分。

原始行为

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <Border Grid.Row="0" Grid.Column="1">
    <ScrollContentPresenter CanContentScroll="True" Content="{TemplateBinding ScrollViewer.Content}" />
  </Border>
  <ScrollBar Orientation="Vertical" Grid.Row="0" Grid.Column="0" Minimum="0" Maximum="{TemplateBinding ScrollViewer.ScrollableHeight}" Value="{TemplateBinding ScrollViewer.VerticalOffset}" ViewportSize="{TemplateBinding ScrollViewer.ViewportHeight}" Name="PART_VerticalScrollBar" Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}" />
  <ScrollBar Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Minimum="0" Maximum="{TemplateBinding ScrollViewer.ScrollableWidth}" Value="{TemplateBinding ScrollViewer.HorizontalOffset}" ViewportSize="{TemplateBinding ScrollViewer.ViewportWidth}" Name="PART_HorizontalScrollBar" Visibility="{TemplateBinding ScrollViewer.ComputedHorizontalScrollBarVisibility}"/>
</Grid>

新行为

<Grid>
  <!-- Presentation below is different from the default: the scrollbar is overlayed on the content. -->
  <ScrollContentPresenter CanContentScroll="True" Content="{TemplateBinding ScrollViewer.Content}" />
  <ScrollBar Orientation="Vertical" HorizontalAlignment="Right" Minimum="0" Maximum="{TemplateBinding ScrollViewer.ScrollableHeight}" Value="{TemplateBinding ScrollViewer.VerticalOffset}" ViewportSize="{TemplateBinding ScrollViewer.ViewportHeight}" Name="PART_VerticalScrollBar" Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}" />
  <ScrollBar Orientation="Horizontal" VerticalAlignment="Bottom" Minimum="0" Maximum="{TemplateBinding ScrollViewer.ScrollableWidth}" Value="{TemplateBinding ScrollViewer.HorizontalOffset}" ViewportSize="{TemplateBinding ScrollViewer.ViewportWidth}" Name="PART_HorizontalScrollBar" Visibility="{TemplateBinding ScrollViewer.ComputedHorizontalScrollBarVisibility}"/>
</Grid>

现在滚动条覆盖在内容上，因此它们在可见时不会占用额外的空间。当然内容现在应该为内容保留空间。

【讨论】：

这样做的缺点是滚动条会出现在内容的顶部，并且可能会掩盖其中的一些内容。

【解决方案3】：

正如你在问题中所说，你只需要保留垂直滚动条的宽度，下面的 XAML 代码会给你一些想法。

<ScrollViewer VerticalScrollBarVisibility="Auto">
    <Grid> 
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="30"/> <!-- reserved for the vertical scrollbar -->
        </Grid.ColumnDefinitions>

        <Listbox .../>
    </Grid>
</ScrollViewer>

【讨论】：