How to get started with WPF ListView control?

The 'ListView' control provides you the base to display a set of data items in a WPF (Windows Presentation Foundation) application in different layouts or views. In case you are working to show a dataset in your WPF app, this post will help you to get started with it.

In this blog post, we will learn about the ListView control with a basic layout followed by advance layout with a GridView. Continue reading further.

The 'ListView' control part of the 'System.Windows.Controls' namespace, represents a control that displays a list of data items. It is basically inherited from the basic 'ListBox' control and as a result the basic ListView control actually looks just like a ListBox.

When you start adding specialized views to it, the List View starts adding more details and customization options to it.

A simple basic ListView control contains ListViewItem, where you can either display a simple string or can add complex items/elements in the view. As the ListViewItem derives from the ContentControl class, we can specify a WPF control as its content. A basic XAML code for ListView is as below:

<ListView>
    <ListViewItem>Kunal Chowdhury</ListViewItem>
    <ListViewItem>Ranjit Sahoo</ListViewItem>
    <ListViewItem>Sukomal Biswas</ListViewItem>
    <ListViewItem>Prasenjit Sengupta</ListViewItem>
    <ListViewItem>Ramesh Muthaiya</ListViewItem>
</ListView>

When you go for an advance ListView, you can specify different layout/view as per your business need. You can also insert a GridView control as a view of the ListView control and display data items in a table and/or sort its columns.

To specify a view mode for the content of a ListView control, you have to set the View property. The GridView can have multiple GridViewColumn binded to your properties. The 'Header' property of the GridViewColumn sets the header text of the column. By using DisplayMemberBinding, you can data bind the column with your properties.

Here's a simple GridView in a ListView control with few columns binded to the backend:

<ListView ItemsSource="{Binding Employees, ElementName=window}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="ID" DisplayMemberBinding="{Binding ID}"/>
            <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn Header="Designation" DisplayMemberBinding="{Binding Role}"/>
        </GridView>
    </ListView.View>
</ListView>

When you populate the data and run the above code example, you will see the app running with the data in a tabular form. This will just look like a data table or data grid. Here's a screenshot of the sample code:

You can further customize it by tuning the template and exploring various properties that the control exposes.

Some points to remember:

• On the ListView control, you can use the ItemTemplate, ItemTemplateSelector and ItemContainerStyle properties.
• To avoid alignment issues between cells in a GridView, do not use the ItemContainerStyle to set properties or add content that affects the width of an item in a ListView.
• Do not use the HorizontalContentAlignment and VerticalContentAlignment properties for ListView content that is displayed by using a GridView.
• To specify the alignment of content in a column of a GridView, define a CellTemplate.