Question

I need to implement control with header and items pane. This control should have scrolling behaviour similar to DataGrid. Header should scroll horizontally along with items, but should be fixed while vertical scrolling. How do I implement such behaviour?

Answer 1

I would use two ScrollViewers, not one

Here’s the control layout I would use

<DockPanel>
    <ScrollViewer x:Name="HeaderScrollViewer" DockPanel.Dock="Top">
        <Grid x:Name="Headers" />
    </ScrollViewer>
    <ScrollViewer x:Name="ContentScrollViewer">
        <Grid x:Name="Content" />
    </ScrollViewer>
</DockPanel>

There are a few things to note to make this work correctly.

• Hide the ScrollBars on the HeaderScrollViewer. The ScrollViewer is only there for the functionality – the User won’t actually interact with it.

• When the ContentScrollViewer scrolls horizontally, manually scroll the HeaderScrollViewer the same distance.

• Use Grid.IsSharedSizeScope and Grid.SharedSizeGroup to align your header Grid columns with your content Grid columns