Silverlight 4 Scrolling Grid with Fixed Header

After much searching and frustration I have come up with a solution of how to render a Grid in Silverlight with a fixed header, other solutions I have come across did not meet my requirements as the grid in question is built dynamically in code do to requirements. Anyway the solution use two grids! Simple really.

I have created a container grid to hold both the header and body grids, this has two row definitions the first has a height of Auto for the header the second is left to resize to the container. The first row contains my header grid and the second row contains a scrollviewer inside of which is the body grid. To get all the columns to line up correctly between the grids I have found it is required to set the border thickness and padding of the scrollviewer to 0.

 

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" x:Name="LayoutHeader"></Grid>
    <ScrollViewer Grid.Row="1" BorderThickness="0" Padding="0">
        <Grid x:Name="LayoutBody"></Grid>
    </ScrollViewer>
</Grid>

 

In the code behind where the columndefinitions are dynamically created they are now added to both the header and body grids. After both grids have been generated I have added a handler for the sizechanged of the body grid.

this.LayoutBody.SizeChanged += new SizeChangedEventHandler(LayoutBody_SizeChanged);

This then loops through the body columndefinitions and sets the matching columndefinition width of the header to the actualwidth of the body columndefinition.

void LayoutBody_SizeChanged(object sender, SizeChangedEventArgs e)
{
    int index = 0;
    foreach (ColumnDefinition def in LayoutBody.ColumnDefinitions)
    {
        LayoutHeader.ColumnDefinitions[index].Width = new GridLength(def.ActualWidth);

        index++;
    }
}

I am not suggesting this will be the best solution for all but for me it saved a really big headache and appears to have no performance issues with rendering or resizing, I hope someone else fins this useful.

Leave a Reply

Your email address will not be published. Required fields are marked *