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

SheoNarayan
Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 5660 red flag

In this article, we are going to learn the usage of Listbox controls in Silverlight.

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.

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)