ListView scrollbar messes up my layout

Question

Hi all,

I have a WPF ListBox that typically shows 4 or 5 items. For my application that means I almost never have to display a scrollbar (there is enough space).

However, in case there are more items in the list, I need to show the vertical scroll bar, but as a result my content has less space and doesn't look nice anymore on a "backdrop" I've created behind the listbox.

I like to "reserve" room in my layout for the scrollbar to appear. Is there a way to do that? (maybe having the scrollbar overlayed on the content)

Answer 1

What about wrapping it with a ScrollViewr?

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

Answer 2

Alright, found a solution.

I've created a new default style for the ScrollViewer by following this MSDN article. Then I've changed the part where the scrollbars are placed.

Original behaviour

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

New behaviour

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

Now the scrollbars are overlayed on the content so they don't take additional space when visible. Of course the content should now reserve space for the content.