C# WPF: prevent last item cover by horizontal scrollbar in ListView with Height property set to “Auto”

Question

I have a WPF ListView inside StackPanel, with Height="Auto". It's great that it does what I wanted to - changes it's height according to the all items contained in ListView. I have also HorizontalScrollBarVisiblity="Auto" on my ListView, which suits my needs.

The problem occurs when the whole width of columns of my ListView is greater than width of ListView control (i.e. user decreases width of a window and this control). In that case obviously horizontal scrollbar appears - thats ok. The problem is that this scrollbar covers last (bottom) item of the ListView's items so it is partially not visible.

Vertical scrollbar doesn't appear and this is ok - I don't want it. I just want to have my ListView height beeing calculated properly, so it considers the height of shown horizontal scrollbar and includes it in calculation so all items are wholy visible.

Xaml code example:

<ListView Name="lvProcedures" ItemsSource="{Binding Path=Procedures}" SelectionMode="Single">
 <ListView.View>
     <GridView AllowsColumnReorder="False" ColumnHeaderToolTip="Lista zabiegów">
         <GridViewColumn DisplayMemberBinding="{Binding Path=procedure}" Header="A" Width="150" />
         <GridViewColumn DisplayMemberBinding="{Binding Path=location}" Header="B" Width="100" />
         <GridViewColumn DisplayMemberBinding="{Binding Path=material}" Header="C" Width="180" />
         <GridViewColumn DisplayMemberBinding="{Binding Path=other}" Header="D" Width="180" />
         <GridViewColumn DisplayMemberBinding="{Binding Path=description}" Header="E" Width="400" />
     </GridView>
  </ListView.View>
</ListView>

I've now hanged on idea to create user control (maybe only ListView's derieved class??) which overrides MeasureOverride but I don't think it is good way to solve such a small but iritating "bug" and it also still makes me trouble to implement the solution.

Can somebody provide some elegant solution for this problem? Any idea would be appreciated.

Answer 1

@bartivo: I'm not getting the same result as you - the bottom horizontal scrollbar doesn't appear to obscure the lowest item. I'm wondering if you're using a custom ControlTemplate for your ListView and ScrollViewer, b/c the default ScrollViewer template has two rows the ScrollContentPresenter in the first (Height="*") and the HorizontalScrollBar in the 2nd row (Height="Auto") thus ensuring that the one doesn't overlap the other.

Maybe you could try using these styles for your ListView and ScrollViewer and see if that problem still occurs:

        <SolidColorBrush x:Key="ListBorder" Color="#828790"/>
    <Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="{x:Type ScrollViewer}">
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <DockPanel Margin="{TemplateBinding Padding}">
                            <ScrollViewer Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" DockPanel.Dock="Top">
                                <GridViewHeaderRowPresenter Margin="2,0,2,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" AllowsColumnReorder="{Binding TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderContainerStyle="{Binding TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderContextMenu="{Binding TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderStringFormat="{Binding TemplatedParent.View.ColumnHeaderStringFormat, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderTemplate="{Binding TemplatedParent.View.ColumnHeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderTemplateSelector="{Binding TemplatedParent.View.ColumnHeaderTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderToolTip="{Binding TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}" Columns="{Binding TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}"/>
                            </ScrollViewer>
                            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Local" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}"/>
                        </DockPanel>
                        <ScrollBar x:Name="PART_HorizontalScrollBar" Cursor="Arrow" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Row="1" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0.0" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}"/>
                        <ScrollBar x:Name="PART_VerticalScrollBar" Cursor="Arrow" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0.0" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" Orientation="Vertical" ViewportSize="{TemplateBinding ViewportHeight}"/>
                        <DockPanel Background="{Binding Background, ElementName=PART_VerticalScrollBar}" Grid.Column="1" Grid.Row="1" LastChildFill="false">
                            <Rectangle Fill="White" Width="1" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" DockPanel.Dock="Left"/>
                            <Rectangle Fill="White" Height="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" DockPanel.Dock="Top"/>
                        </DockPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ListViewStyle1" TargetType="{x:Type ListView}">
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="#FF042271"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListView}">
                    <Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" RenderMouseOver="{TemplateBinding IsMouseOver}">
                        <ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}" Padding="{TemplateBinding Padding}">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                    </Microsoft_Windows_Themes:ListBoxChrome>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>