How to get started with WPF ListView control?

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.

 

Get started with WPF ListView control (www.kunal-chowdhury.com)

 

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:

 

WPF ListView Demo (www.kunal-chowdhury.com)

 

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.

 


If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter, Facebook, Google+ and LinkedIn. I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.

0 comments

 
© 2008-2017 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury
Back to top