How to define a DataGrid using ListView in WPF?

If you want to have a very nice looking DataGrid you have to use ListView control. It enables you to use ControlTemplate for both the header and the column and also has built in functionality for scrolling through the list. So here is how you can build a DataGrid using ListView.

First you need to define the ListView:

<ListView Name="listSearchResult" Height="150" SelectionMode="Single" Style="{StaticResource ListViewStyle}" MouseDoubleClick="Selected">

     <ListView.View>

            <GridView ColumnHeaderContainerStyle="{StaticResource HeaderStyle}" >

                 <GridViewColumn Header="Header1">

                         <GridViewColumn.CellTemplate>

                                <DataTemplate>

                                        <TextBlock Text="{Binding Path=Name}"></TextBlock>

                                </DataTemplate>

                          </GridViewColumn.CellTemplate>

                 </GridViewColumn>

           <GridViewColumn Header="Header2" >

           <GridViewColumn.CellTemplate>

                    <DataTemplate>

                               <TextBlock Text="{Binding Path=Number}"></TextBlock>

                           </DataTemplate>

                    </GridViewColumn.CellTemplate>

           </GridViewColumn>

      </GridView>

   </ListView.View>

</ListView>

As you may have noticed I added one event handler for MouseDoubleClick event, That is how you can enable selection feature in the list by just setting the MouseDoubleClick or any other event on the ListView.

And this is what the select event handler looks like:

void Selected(object sender, RoutedEventArgs e)

{

      ListView cmd = (ListView)sender;

      string selectedItem = (string)(((System.Data.DataRowView)(cmd.SelectedItem)).Row[0]);

}

It just seems easier to define Style as resource for me, so here is the style for the ListView. I need to note that if your list is too big you will need to enable the Scroll feature enable. This is how you should do this: just set ScrollViewer.HorizontalScrollBarVisibility to Visible. The ScrollViewer embedded in the ListView will use this property accordingly.

<Style x:Key="ListViewStyle" TargetType="ListView">

          <Setter Property="Margin" Value="5"/>

          <Setter Property="HorizontalAlignment" Value="Stretch" />

          <Setter Property="VerticalAlignment" Value="Top" />

          <Setter Property="ScrollViewer.CanContentScroll" Value ="True" />

          <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value ="Visible" />

          <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible" />

</Style>

Now you have a very nice DataGrid. If you are interested to make your datagrid’s look more interesting, you can use ControlTemplate like what I am using here:

<ControlTemplate x:Key="HeaderTemplate" TargetType="{x:Type GridViewColumnHeader}">

          <Border BorderThickness="1" CornerRadius="3" TextBlock.Foreground="Chocolate"

TextBlock.TextAlignment="Center" Width="{TemplateBinding Width}"

BorderBrush="Chocolate" Background="AntiqueWhite" >

                   <ContentPresenter Content="{TemplateBinding Content}" ></ContentPresenter>

          </Border>

</ControlTemplate>

And of course you can apply this template through the style of the Header or column.

<Style x:Key="HeaderStyle" TargetType="GridViewColumnHeader">

          <Setter Property="Template" Value="{StaticResource HeaderTemplate}" />

          <Setter Property="Height" Value="25"/>

          <Setter Property="Padding" Value="2"/>

</Style>

Comments

• Anonymous
  May 16, 2008
  Hi Martha I went through the article of yours.Iam working on WPF DataGrid (dev. by ComponentOne) with Visual Studio 2008. I wish to provide facility to user to select "Columns" of a Table using ListBox(if possible, by clicking on Checkboxes within the ListBox/ListView) and the Report will be generated based on those selected "Columns" only. Selection to be made at run time ! Could you help ? regards Arijit