Share via

How to write a Scrollable Data Grid in WPF?

  • Article

If you want to display a large number of rows in a grid you will definitely need a scroll feature in your grid but does the grid control in WPF has this feature? The answer is pretty straight, NO.

Hmm, then how I am supposed to display 100 records in a grid? Well the first answer to that is just use the ScrollViewer control around the grid. That would be a short time solution, once run your app you will come to agreement that is not really what you want. You will notice that the header part of the grid will get included in the ScrollViewer as well, which is not very pleasant to the user basically when the user scrolls down, the header gets disappear.

Is there any other solution? Yes, there is a nicer way. It is just not very obvious at first but you will get used to that after using it for couple times. Here are the steps: First of all you need to have two grids one for the header and the other one for the main body. The main grid will be in the ScrollViewer control as you would also guess. So this will solve the problem, very simple!!!

<Grid Name="grid1" TextBlock.Foreground="Chocolate">

   <Grid.Resources>

          <Style TargetType="{x:Type Border}">

                   <Setter Property="BorderThickness" Value="1" />

                   <Setter Property="Background" Value="AntiqueWhite" />

                   <Setter Property="BorderBrush" Value="Gray" />

          </Style>

   </Grid.Resources>

   <Grid.ColumnDefinitions>

          <ColumnDefinition Width="0.2*"/>

          <ColumnDefinition Width="0.2*"/>

          <ColumnDefinition Width="0.2*"/>

          <ColumnDefinition Width="0.2*"/>

   </Grid.ColumnDefinitions>

   <Border Grid.Column="0" >

          <TextBlock>Role</TextBlock>

   </Border>

   <Border Grid.Column="1" >

          <TextBlock>Name</TextBlock>

   </Border>

  <Border Grid.Column="2" >

          <TextBlock>Start Date</TextBlock>

   </Border>

   <Border Grid.Column="3" >

  <TextBlock>End Date</TextBlock>

   </Border>

</Grid>

<ScrollViewer Height="100" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" >

  <Grid Name="grid2" >

    <Grid.ColumnDefinitions>

          <ColumnDefinition Width="0.08*"/>

          <ColumnDefinition Width="0.1*"/>

          <ColumnDefinition Width="0.14*"/>

          <ColumnDefinition Width="0.14*"/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

          <RowDefinition Height="0.2*" />

          <RowDefinition Height="0.2*" />

    </Grid.RowDefinitions>

          <TextBlock Grid.Row="0" Grid.Column="0">Role1</TextBlock>

          <TextBlock Grid.Row="0" Grid.Column="1">

                   <Hyperlink NavigateUri="Page1.xaml">Name1</Hyperlink>

          </TextBlock>

          <TextBlock Grid.Row="0" Grid.Column="2">01/01/2006</TextBlock>

          <TextBlock Grid.Row="0" Grid.Column="3">01/01/2007</TextBlock>

          <TextBlock Grid.Row="1" Grid.Column="0">Role2</TextBlock>

          <TextBlock Grid.Row="1" Grid.Column="1">

                   <Hyperlink NavigateUri="Page2.xaml">Name2</Hyperlink>

          </TextBlock>

          <TextBlock Grid.Row="1" Grid.Column="2">01/01/2007</TextBlock>

          <TextBlock Grid.Row="1" Grid.Column="3">01/01/2008</TextBlock>

   </Grid>

</ScrollViewer>

But now there is another issue that is the size of the header columns doesn’t match the size of the main grid columns. To fix this you just need to simply use this grid property SharedSizeGroup. Set this property on every column on the header grid to the unique name and then set the use the same names to set this property on the main grid columns. That simple!!!

    <Grid.ColumnDefinitions>

          <ColumnDefinition Width="0.08*" SharedSizeGroup="Role"/>

          <ColumnDefinition Width="0.1*" SharedSizeGroup="Name"/>

          <ColumnDefinition Width="0.14*" SharedSizeGroup="StartDate"/>

          <ColumnDefinition Width="0.14*" SharedSizeGroup="EndDate"/>

    </Grid.ColumnDefinitions>

One last thing that you will notice is that the size of the last column on the header does not match the last column on the main grid. Hmm, now you need to this last trick to fix this issue. First you need to add one more ColumnDefinition to your header grid by setting its width to Auto:

<ColumnDefinition Width="Auto" />

Then add this item to be the last column in the header grid and set the width to this DynamicResource.

   <FrameworkElement Grid.Column="4" Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />

Done! You have built the pretty nice looking grid that can scroll nicely.