Create a multi-column ListBox in Silverlight using Templates

To create a multi-column UI, you should usually go in for the DataGrid Silverlight control. However if you have a requirement, where you want to do the same using a Silverlight ListBox control, use the following code:

XAML

<UserControl x:Class="MultiColumnListBox.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid x:Name="LayoutRoot" Background="White">

<ListBox x:Name="CustomerList" >

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal">

<TextBlock Width="50" Text="{Binding ID}"/>

<TextBlock Width="50" Text="{Binding FName}" />

<TextBlock Width="50" Text="{Binding LName}" />

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

</UserControl>

C#

public partial class Page : UserControl

{

    public Page()

    {

        InitializeComponent();

        List<Customers> cust = new List<Customers>();

        cust.Add(new Customers(1, "Harry", "Smith"));

        cust.Add(new Customers(2, "Tim", "Goldberg"));

        cust.Add(new Customers(3, "Jenny", "McKallan"));

        CustomerList.ItemsSource = cust;

    }

}

public class Customers

{

    public Customers(int id, string fnm, string lnm)

    {

        ID = id;

        FName = fnm;

        LName = lnm;

    }

    public int ID { get; set; }

    public string FName { get; set; }

    public string LName { get; set; }

}

VB.NET

Partial Public Class Page

    Inherits UserControl

    Public Sub New()

        InitializeComponent()

        Dim cust As List(Of Customers) = _

                New List(Of Customers)()

        cust.Add(New Customers(1, "Harry", "Smith"))

        cust.Add(New Customers(2, "Tim", "Goldberg"))

        cust.Add(New Customers(3, "Jenny", "McKallan"))

        CustomerList.ItemsSource = cust

    End Sub

End Class

Public Class Customers

    Public Sub New(ByVal id As Integer, _

    ByVal fnm As String, ByVal lnm As String)

        id = id

        FName = fnm

        LName = lnm

    End Sub

    Private privateID As Integer

    Public Property ID() As Integer

        Get

            Return privateID

        End Get

        Set(ByVal value As Integer)

            privateID = value

        End Set

    End Property

    Private privateFName As String

    Public Property FName() As String

        Get

            Return privateFName

        End Get

        Set(ByVal value As String)

            privateFName = value

        End Set

    End Property

    Private privateLName As String

    Public Property LName() As String

        Get

            Return privateLName

        End Get

        Set(ByVal value As String)

            privateLName = value

        End Set

    End Property

End Class

All we have done here is change the template of the ListBox and defined our own. We then bind the List with the ListBox to display multiple columns. The ListBox will look similar to as shown below:



'Like' us on our FaceBook page if you find this blog useful. Thanks!

Did you like this post?

			Save on Delicious
	subscribe via rss		subscribe via e-mail
	print this post		follow me on twitter

About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal