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>
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; }}
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:
