Working With Collections in XAML?

Question

Introduction

XAML provides UI element objects that can host child collection items. XAML also provides support to work with .NET collection types as data sources.

XAML Collections

A collection element usually is a parent control with child collection elements. The child collection elements are an ItemCollection that implements IList<object>. A ListBox element is a collection of ListBoxItem elements.

The code listing in Listing 1 creates a ListBox with a few ListBoxItems.

 

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

 

Listing 1

The code listed above in Listing 1 generates Figure 1.

Figure 1

Add Collection Items

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

Let's change our UI and add a TextBox and a button control to the page. See Listing 2.

 

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

 

Listing 2

The final UI looks like Figure 2.

Figure 2.

We can access collection items using the Items property. On the button click event handler, we add the content of the TextBox to the ListBox by calling the ListBox.Items.Add method. The code in Listing 3 adds the TextBox content to the ListBox items.

 

1. private void button1_Click(object sender, RoutedEventArgs e)  
2. {  
3. listBox1.Items.Add(textBox1.Text);  
4. }  

 

Listing 3

Now if you enter text into the TextBox and click the Add Item button, it will add the contents of the TextBox to the ListBox. See Figure 3.

Figure 3

Delete Collection Items

We can use the ListBox.Items.Remove or ListBox.Items.RemoveAt method to delete an item from the collection of items in the ListBox. 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 as in the following.

 

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

 

Listing 4

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

 

1. private void DeleteButton_Click(object sender, RoutedEventArgs e)  
2. {  
3. listBox1.Items.RemoveAt  
4. (listBox1.Items.IndexOf(listBox1.SelectedItem));  
5. }  

 

Listing 5

Collection Types

XAML allows developers to access .NET class library collection types from the scripting language. The code snippet in the Listing creates an array of String types, a collection of strings. To use the Array and String types, we must import the System namespace.

The code listing in Listing 6 creates an Array of String objects in XAML. As you may noticed in Listing 2, you must import the System namespace in XAML using the xmlns.

 

1. <Window x:Class="XamlCollectionsSample.MainWindow"  
2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4. xmlns:sys="clr-namespace:System;assembly=mscorlib"  
5. Title="MainWindow" Height="402.759" Width="633.345">  
6.   
7. <Window.Resources>  
8. <x:Array x:Key="AuthorList" Type="{x:Type sys:String}">  
9. <sys:String>Mahesh Chand</sys:String>  
10. <sys:String>Praveen Kumar</sys:String>  
11. <sys:String>Raj Beniwal</sys:String>  
12. <sys:String>Neel Beniwal</sys:String>  
13. <sys:String>Sam Hobbs</sys:String>  
14. </x:Array>  
15. </Window.Resources>  
16.   
17. </Window>  

 

Listing 6

The ItemsSource property if ListBox in XAML is used to bind the ArrayList. See Listing 7.

 

1. <ListBox Name="lst" Margin="5" ItemsSource="{StaticResource AuthorList}" />  

 

Listing 7

Summary

XAML supports collections including collection items and working with .NET collection types. In this article, we saw how to create a control with collection items and how to access its items dynamically.