Post
Ask Question

WPF ListView Tutorial

Introduction

The ListView element in XAML represents a WPF ListView control. This tutorial explains how to use a ListView control in WPF with code examples. 

  1. <ListView></ListView>  

The Width and Height properties represent the width and the height of a ListView. The Name property represents the name of the control, which is a unique identifier of a control. The Margin property tells the location of a ListView on the parent control. The HorizontalAlignment and VerticalAlignment properties are used to set horizontal and vertical alignments.

The following code snippet sets the name, height, and width of a ListView control. The code also sets horizontal alignment to left and vertical alignment to top.

  1. <ListView Margin="10,10,0,13" Name="ListView1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="194" Height="200" />  

Adding ListView Items

A ListView control hosts a collection of ListViewItem. The following code snippet adds items to a ListView control.

  1. <ListView Margin="10,10,0,13" Name="ListView1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="194" Height="200">  
  2.     <ListViewItem Content="Coffie"></ListViewItem>  
  3.     <ListViewItem Content="Tea"></ListViewItem>  
  4.     <ListViewItem Content="Orange Juice"></ListViewItem>  
  5.     <ListViewItem Content="Milk"></ListViewItem>  
  6.     <ListViewItem Content="Iced Tea"></ListViewItem>  
  7.     <ListViewItem Content="Mango Shake"></ListViewItem>  
  8. </ListView>  

The above code generates Figure 1. 

ListView with items
Figure 1. ListView with items

Adding ListView Items Dynamically

In the previous section, we saw how to add items to a ListView at design-time from XAML. We can add items to a ListView from the code.

Now we change our UI and add a TextBox and a button control to the page. The XAML code for the TextBox and Button controls look like following:

  1. <TextBox Height="23" HorizontalAlignment="Left" Margin="8,14,0,0" Name="textBox1" VerticalAlignment="Top" Width="127" />  
  2. <Button Height="23" Margin="140,14,0,0" Name="button1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="76" Click="button1_Click"> Add Item </Button>  

The final UI looks like Figure 2.

final UI
Figure 2.

On button click event handler, we add the content of TextBox to the ListView by calling ListView.Items.Add method. The following code adds TextBox contents to the ListView items.

  1. privatevoid button1_Click(object sender, RoutedEventArgs e) {  
  2.     ListView1.Items.Add(textBox1.Text);  
  3. }  

On button click event handler, we add the contents of TextBox to the ListView by calling ListView.Items.Add method.

Now if you enter text in the TextBox and click Add Item button, it will add contents of the TextBox to the ListView.

Adding ListView items dynamically
Figure 3. Adding ListView items dynamically

Deleting ListView Items

We can use ListView.Items.Remove or ListView.Items.RemoveAt method to delete an item from the collection of items in the ListView. The RemoveAt method takes the index of the item in the collection.

Now, we modify our application and add a new button called Delete Item. The XAML code for this button looks like below.

  1. <Button Height="23" Margin="226,14,124,0" Name="DeleteButton" VerticalAlignment="Top" Click="DeleteButton_Click"> Delete Item</Button>  

The button click event handler looks like following. On this button click, we find the index of the selected item and call ListView.Items.RemoveAt method as following.

  1. privatevoid DeleteButton_Click(object sender, RoutedEventArgs e) {  
  2.     ListView1.Items.RemoveAt(ListView1.Items.IndexOf(ListView1.SelectedItem));  
  3. }  

Formatting and Styling - Formatting ListView Items

The Foreground and Background attributes of ListViewItem represents the background and foreground colors of the item. The following code snippet sets background and foreground color of a ListViewItem.

  1. <ListViewItem Background="LightCoral" Foreground="Red" Content="Coffie"></ListViewItem>  

The FontFamily, FontSize, and FontWeight are used to set a font of a ListViewItem. The following code snippet sets font verdana, size 12, and bold of a ListViewItem.

  1. <ListViewItem Background="LightCoral" Foreground="Red" Content="Coffie" FontFamily="Verdana" FontSize="12" FontWeight="Bold"></ListViewItem>  

I set the following properties of ListViewItems.

  1. <ListViewItem Background="LightCoral" Foreground="Red" Content="Coffie" FontFamily="Verdana" FontSize="12" FontWeight="Bold"></ListViewItem>  
  2. <ListViewItem Background="LightGray" Foreground="Black" Content="Tea" FontFamily="Georgia" FontSize="14" FontWeight="Bold"></ListViewItem>  
  3. <ListViewItem Background="LightBlue" Foreground="Purple" Content="Orange Juice" FontFamily="Verdana" FontSize="12" FontWeight="Bold"></ListViewItem>  
  4. <ListViewItem Background="LightGreen" Foreground="Green" Content="Milk" FontFamily="Georgia" FontSize="14" FontWeight="Bold"></ListViewItem>  
  5. <ListViewItem Background="LightBlue" Foreground="Blue" Content="Iced Tea" FontFamily="Verdana" FontSize="12" FontWeight="Bold"></ListViewItem>  
  6. <ListViewItem Background="LightSlateGray" Foreground="Orange" Content="Mango Shake" FontFamily="Georgia" FontSize="14" FontWeight="Bold"></ListViewItem>  

The new ListView looks like Figure 4. 

Formatted ListView 
Figure 4. Formatted ListView

Displaying Images in a ListView

We can put any controls inside a ListViewItem such as an image and text. To display an image side by side some text, I simply put an Image and TextBlock control within a StackPanel. The Image.Source property takes the name of the image you would like to display in the Image control and TextBlock.Text property takes a string that you would like to display in the TextBlock.

The following code snippet adds an image and text to a ListViewItem.

  1. <ListViewItem Background="LightCoral" Foreground="Red" FontFamily="Verdana" FontSize="12" FontWeight="Bold">  
  2.     <StackPanel Orientation="Horizontal">  
  3.         <Image Source="coffie.jpg" Height="30"></Image>  
  4.         <TextBlock Text="Coffie"></TextBlock>  
  5.     </StackPanel>  
  6. </ListViewItem>  

After changing my code for all 5 ListViewItems, the ListView looks like Figure 5.

ListViewItems with Image and text
Figure 5. ListViewItems with Image and text

ListView with CheckBoxes

If you put a CheckBox control inside ListViewItems, you generate a ListView control with checkboxes in it. The CheckBox can host controls within it as well. For instance, we can put an image and text block as content of a CheckBox.

The following code snippet adds a CheckBox with an image and text to a ListViewItem.

  1. <ListViewItem Background="LightCoral" Foreground="Red" FontFamily="Verdana" FontSize="12" FontWeight="Bold">  
  2.     <CheckBox Name="CoffieCheckBox">  
  3.         <StackPanel Orientation="Horizontal">  
  4.             <Image Source="coffie.jpg" Height="30"></Image>  
  5.             <TextBlock Text="Coffie"></TextBlock>  
  6.         </StackPanel>  
  7.     </CheckBox>  
  8. </ListViewItem>  

I change the code of ListViewItems and add following CheckBoxes to the items. As you may see, I have set the name of the CheckBoxes using Name property. If you need to access these CheckBoxes, you may access them in the code using their Name property.

  1. <ListViewItem Background="LightCoral" Foreground="Red" FontFamily="Verdana" FontSize="12" FontWeight="Bold">  
  2.     <CheckBox Name="CoffieCheckBox">  
  3.         <StackPanel Orientation="Horizontal">  
  4.             <Image Source="coffie.jpg" Height="30"></Image>  
  5.             <TextBlock Text="Coffie"></TextBlock>  
  6.         </StackPanel>  
  7.     </CheckBox>  
  8. </ListViewItem>  
  9. <ListViewItem Background="LightGray" Foreground="Black" FontFamily="Georgia" FontSize="14" FontWeight="Bold">  
  10.     <CheckBox Name="TeaCheckBox">  
  11.         <StackPanel Orientation="Horizontal">  
  12.             <Image Source="tea.jpg" Height="30"></Image>  
  13.             <TextBlock Text="Tea"></TextBlock>  
  14.         </StackPanel>  
  15.     </CheckBox>  
  16. </ListViewItem>  
  17. <ListViewItem Background="LightBlue" Foreground="Purple" FontFamily="Verdana" FontSize="12" FontWeight="Bold">  
  18.     <CheckBox Name="OrangeJuiceCheckBox">  
  19.         <StackPanel Orientation="Horizontal">  
  20.             <Image Source="OrangeJuice.jpg" Height="40"></Image>  
  21.             <TextBlock Text="OrangeJuice"></TextBlock>  
  22.         </StackPanel>  
  23.     </CheckBox>  
  24. </ListViewItem>  
  25. <ListViewItem Background="LightGreen" Foreground="Green" FontFamily="Georgia" FontSize="14" FontWeight="Bold">  
  26.     <CheckBox Name="MilkCheckBox">  
  27.         <StackPanel Orientation="Horizontal">  
  28.             <Image Source="Milk.jpg" Height="30"></Image>  
  29.             <TextBlock Text="Milk"></TextBlock>  
  30.         </StackPanel>  
  31.     </CheckBox>  
  32. </ListViewItem>  
  33. <ListViewItem Background="LightBlue" Foreground="Blue" FontFamily="Verdana" FontSize="12" FontWeight="Bold">  
  34.     <CheckBox Name="IcedTeaCheckBox">  
  35.         <StackPanel Orientation="Horizontal">  
  36.             <Image Source="IcedTea.jpg" Height="30"></Image>  
  37.             <TextBlock Text="Iced Tea"></TextBlock>  
  38.         </StackPanel>  
  39.     </CheckBox>  
  40. </ListViewItem>  
  41. <ListViewItem Background="LightSlateGray" Foreground="Orange" FontFamily="Georgia" FontSize="14" FontWeight="Bold">  
  42.     <CheckBox Name="MangoShakeCheckBox">  
  43.         <StackPanel Orientation="Horizontal">  
  44.             <Image Source="MangoShake.jpg" Height="30"></Image>  
  45.             <TextBlock Text="Mango Shake"></TextBlock>  
  46.         </StackPanel>  
  47.     </CheckBox>  
  48. </ListViewItem>  

Now, the new ListView looks like Figure 6.

ListView with CheckBoxes 
Figure 6. ListView with CheckBoxes

Data Binding in ListView

The ItemsSource property of ListView is used to bind a collection of IEnuemerable such as an ArrayList to the ListView control. 

The following code snippet creates an ArrayList object.

  1. ///<summary>  
  2. /// Generate data. This method can bring data from a database or XML file  
  3. /// or from a Web service or generate data dynamically  
  4. ///</summary>  
  5. ///<returns></returns>  
  6. privateArrayList LoadListViewData() {  
  7.     ArrayList itemsList = newArrayList();  
  8.     itemsList.Add("Coffie");  
  9.     itemsList.Add("Tea");  
  10.     itemsList.Add("Orange Juice");  
  11.     itemsList.Add("Milk");  
  12.     itemsList.Add("Mango Shake");  
  13.     itemsList.Add("Iced Tea");  
  14.     itemsList.Add("Soda");  
  15.     itemsList.Add("Water");  
  16.     return itemsList;  
  17. }  

On the Window loaded event, we create and load data items to the ListView by setting the ItemsSource property to an ArrayList.

  1. privatevoid Window_Loaded(object sender, RoutedEventArgs e) {  
  2.     // Get data from somewhere and fill in my local ArrayList  
  3.     myDataList = LoadListViewData();  
  4.     // Bind ArrayList with the ListView  
  5.     LeftListView.ItemsSource = myDataList;  
  6. }  

The collection items are being displayed in Figure 7.

ListView bound to a collection object
Figure 7. ListView bound to a collection object

Summary

In this article, I discussed how to create and use a ListView control available in WPF. We saw how we can add items to a ListView, change item properties, add images add check boxes. In the end of this article, we saw how data binding works in ListView.


Similar Articles
Mindcracker
Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.