How to write a Scrollable Data Grid in WPF?

 

Ifyou want to display a large number of rows in a grid you willdefinitely need a scroll feature in your grid but does the grid controlin 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 firstanswer 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 toagreement that is not really what you want.  Youwill notice that the header part of the grid will get included in theScrollViewer as well, which is not very pleasant to the user basicallywhen the user scrolls down, the header gets disappear.

 

Isthere any other solution? Yes, there is a nicer way. It is just notvery obvious at first but you will get used to that after using it forcouple times. Here are the steps: First of all you need to have twogrids one for the header and the other one for the main body. The maingrid will be in the ScrollViewer control as you would also guess. Sothis 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*" />

      <RowDefinition Height="0.2*" />

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

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

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

            <Hyperlink NavigateUri="Page3.xaml">Name3</Hyperlink>

      </TextBlock>

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

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

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

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

            <Hyperlink NavigateUri="Page4.xaml">Name4</Hyperlink>

      </TextBlock>

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

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

      <TextBlock Grid.Row="4"  Grid.Column="0">Role5</TextBlock>

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

            <Hyperlink NavigateUri="Page5.xaml">Name5</Hyperlink>

      </TextBlock>

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

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

   </Grid>

</ScrollViewer>

 

Butnow there is another issue that is the size of the header columnsdoesn’t match the size of the main grid columns. To fix this you justneed to simply use this grid property SharedSizeGroup. Set thisproperty on every column on the header grid to the unique name and thenset the use the same names to set this property on the main gridcolumns. 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>

 

Onelast thing that you will notice is that the size of the last column onthe header does not match the last column on the main grid. Hmm, nowyou need to this last trick to fix this issue. First you need to addone more ColumnDefinition to your header grid by setting its width toAuto:

 

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