How to list items in custom format within ListBox and how to customize the ItemsPanel of the ListBox control?

ListBox

How to list items in custom format within ListBox?

In case we want to customize the items in the ListBox, we can follow this approach.

This article is the continuation of my last article in Silverlight controls series, read last article here.

Get 500+ ASP.NET web development Tips & Tricks and ASP.NET Online training here.

Code

<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<DataTemplate x:Name="ListTemplate">
<StackPanel Background="AliceBlue">
<TextBlock Text="{Binding FirstName}" />
</StackPanel>
</DataTemplate>
</Grid.Resources>
<ListBox x:Name="ListBox1" ItemTemplate="{StaticResource ListTemplate}" />
</Grid>

In the above code snippet, we have a DataTemplate that has been associated to the ListBox control using its ItemTemplate property.

By default, ListBox control arranges its items in the StackPanel (Vertical), however we can customize this as well and we shall see this later on.

Code behind

void ListBoxTemplate_Loaded(object sender, RoutedEventArgs e)
{
this.FillData();
}
private void FillData()
{
IList<Person> list = new List<Person>();
 
Person p = new Person
{
Age = 1,
FirstName = "Joe",
LastName = "Elan",
IsActive = true
};
Person p1 = new Person
{
Age = 15,
FirstName = "Mike",
LastName = "Bull",
IsActive = true
};
Person p2 = new Person
{
Age = 51,
FirstName = "Mukul",
LastName = "Alwa",
IsActive = true
};
Person p3 = new Person
{
Age = 31,
FirstName = "Sheo",
LastName = "Narayan",
IsActive = true
};
list.Add(p);
list.Add(p1);
list.Add(p2);
list.Add(p3);
ListBox1.ItemsSource = list;
}
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
public bool IsActive { get; set; }
}

Output

How to customize the ItemsPanel of the ListBox control?

In order to customize the Items panel of the ListBox control, we can follow this approach.

Code

<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<DataTemplate x:Name="ListTemplate">
<Grid>
<TextBlock Text="{Binding FirstName}" />
</Grid>
</DataTemplate>
</Grid.Resources>
 
<ListBox x:Name="ListBox1" ItemTemplate="{StaticResource ListTemplate}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>istBox>
</ListBox>
</Grid>

Customizing ItemsPanel let us define the panel style in which the ListBox items shall render. In the above code snippet, we have defined the DataTemplate and the same DataTemplate is being used in the ListBox control.

However as we wish to customize the items panel, so here we have used ItemsPanelTemplate and specified the Orientation as Horizontal that lists the ListBox items horizontally.

Code behind

void ListBoxTemplate_Loaded(object sender, RoutedEventArgs e)
{
this.FillData();
}
private void FillData()
{
IList<Person> list = new List<Person>();
 
Person p = new Person
{
Age = 1,
FirstName = "Joe",
LastName = "Elan",
IsActive = true
};
Person p1 = new Person
{
Age = 15,
FirstName = "Mike",
LastName = "Bull",
IsActive = true
};
Person p2 = new Person
{
Age = 51,
FirstName = "Mukul",
LastName = "Alwa",
IsActive = true
};
Person p3 = new Person
{
Age = 31,
FirstName = "Sheo",
LastName = "Narayan",
IsActive = true
};
list.Add(p);
list.Add(p1);
list.Add(p2);
list.Add(p3);
ListBox1.ItemsSource = list;
}
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
public bool IsActive { get; set; }
}

Output

To get the selected item value from the code behind, we can use SelectedItem property of the ListBox.

Hope this article was useful. Thanks for reading, hope you liked it.

Keep a watch on forth coming articles on Silverlight. To read my series of articles,click here.