How to: Display Data in a ListBox

Microsoft Silverlight will reach end of support after October 2021. Learn more.

There are many different ways to display data in a ListBox control. ListBox is an ItemsControl, which means that you can add items directly to the list box using XAML, or set its ItemsSource property to a collection. When you set the ItemsSource property, you can also set an ItemTemplate to customize how each ListBoxItem will display. The following procedures show some of the ways you can specify ListBox content.

To populate a ListBox using XAML Elements

• Create XAML elements as direct children of the ListBox.

  <ListBox Width="150" Margin="0,5,0,10">
      <TextBlock Text="TextBlock" />
      <TextBox Text="TextBox" />
      <Button Content="Button"  />
      <Rectangle Fill="LightBlue" Height="20" Width="100"  Margin="2,2,2,2"/>
      <Ellipse Fill="Coral" Height="20" Width="150"  Margin="2,2,2,2"/>
  </ListBox>
  

To populate a ListBox using the ItemsSource Property

• Set the ItemsSource property to the collection you want to display. Optionally, set the DisplayMemberPath to specify the property to display in the ListBox.

  <UserControl x:Class="ListBoxSnippetEx.Page"
      xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:src="clr-namespace:ListBoxSnippetEx"
       >
  
  
  ...
  
  
  <Grid>
      <Grid.Resources>
          <src:Customers x:Key="customers"/>
      </Grid.Resources>
      <ListBox ItemsSource="{StaticResource customers}" Width="250" Margin="0,5,0,10" 
         DisplayMemberPath="LastName"/>
  </Grid>
  
  
  ...
  
  
  </UserControl>
  

  Public Class Customer
      Private _firstName As String
      Private _lastName As String
      Private _address As String
  
      Public Property FirstName() As String
          Get
              Return _firstName
          End Get
  
          Set(ByVal value As String)
              _firstName = value
          End Set
      End Property
  
      Public Property LastName() As String
          Get
              Return _lastName
          End Get
  
          Set(ByVal value As String)
              _lastName = value
          End Set
      End Property
  
      Public Property Address() As String
          Get
              Return _address
          End Get
  
          Set(ByVal value As String)
              _address = value
          End Set
      End Property
  
      Public Sub New(ByVal firstName As String, ByVal lastName As String, ByVal address As String)
          Me.FirstName = firstName
          Me.LastName = lastName
          Me.Address = address
      End Sub
  
  End Class
  
  Public Class Customers
      Inherits ObservableCollection(Of Customer)
  
      Public Sub New()
          Add(New Customer("Michael", "Anderberg", "12 North Third Street, Apartment 45"))
          Add(New Customer("Chris", "Ashton", "34 West Fifth Street, Apartment 67"))
          Add(New Customer("Cassie", "Hicks", "56 East Seventh Street, Apartment 89"))
          Add(New Customer("Guido", "Pica", "78 South Ninth Street, Apartment 10"))
      End Sub
  
  End Class
  

  public class Customer
  {
      public String FirstName { get; set; }
      public String LastName { get; set; }
      public String Address { get; set; }
  
      public Customer(String firstName, String lastName, String address)
      {
          this.FirstName = firstName;
          this.LastName = lastName;
          this.Address = address;
      }
  
  }
  
  public class Customers : ObservableCollection<Customer>
  {
      public Customers()
      {
          Add(new Customer("Michael", "Anderberg",
                  "12 North Third Street, Apartment 45"));
          Add(new Customer("Chris", "Ashton",
                  "34 West Fifth Street, Apartment 67"));
          Add(new Customer("Cassie", "Hicks",
                  "56 East Seventh Street, Apartment 89"));
          Add(new Customer("Guido", "Pica",
                  "78 South Ninth Street, Apartment 10"));
      }
  
  }
  

To format items in a ListBox

1. Set the ItemsSource property to the collection you want to display.

2. Set the ItemTemplate property to the DataTemplate that formats the items.

   Note:
   Make sure to add a reference to the local namespace in the XAML file like the following.

   xmlns:src="clr-namespace:ListBoxSnippetEx"
   

   <UserControl x:Class="ListBoxSnippetEx.Page"
       xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:src="clr-namespace:ListBoxSnippetEx"
        >
   
   
   ...
   
   
   <Grid>
       <Grid.Resources>
           <src:Customers x:Key="customers"/>
       </Grid.Resources>
   
       <ListBox ItemsSource="{StaticResource customers}" Width="350" Margin="0,5,0,10">
           <ListBox.ItemTemplate>
               <DataTemplate>
                   <StackPanel Orientation="Horizontal">
                       <TextBlock Padding="5,0,5,0"
             Text="{Binding FirstName}" />
                       <TextBlock Text="{Binding LastName}" />
                       <TextBlock Text=", " />
                       <TextBlock Text="{Binding Address}" />
                   </StackPanel>
               </DataTemplate>
           </ListBox.ItemTemplate>
       </ListBox>
   </Grid>
   
   
   ...
   
   
   </UserControl>
   

   Public Class Customer
       Private _firstName As String
       Private _lastName As String
       Private _address As String
   
       Public Property FirstName() As String
           Get
               Return _firstName
           End Get
   
           Set(ByVal value As String)
               _firstName = value
           End Set
       End Property
   
       Public Property LastName() As String
           Get
               Return _lastName
           End Get
   
           Set(ByVal value As String)
               _lastName = value
           End Set
       End Property
   
       Public Property Address() As String
           Get
               Return _address
           End Get
   
           Set(ByVal value As String)
               _address = value
           End Set
       End Property
   
       Public Sub New(ByVal firstName As String, ByVal lastName As String, ByVal address As String)
           Me.FirstName = firstName
           Me.LastName = lastName
           Me.Address = address
       End Sub
   
   End Class
   
   Public Class Customers
       Inherits ObservableCollection(Of Customer)
   
       Public Sub New()
           Add(New Customer("Michael", "Anderberg", "12 North Third Street, Apartment 45"))
           Add(New Customer("Chris", "Ashton", "34 West Fifth Street, Apartment 67"))
           Add(New Customer("Cassie", "Hicks", "56 East Seventh Street, Apartment 89"))
           Add(New Customer("Guido", "Pica", "78 South Ninth Street, Apartment 10"))
       End Sub
   
   End Class
   

   public class Customer
   {
       public String FirstName { get; set; }
       public String LastName { get; set; }
       public String Address { get; set; }
   
       public Customer(String firstName, String lastName, String address)
       {
           this.FirstName = firstName;
           this.LastName = lastName;
           this.Address = address;
       }
   
   }
   
   public class Customers : ObservableCollection<Customer>
   {
       public Customers()
       {
           Add(new Customer("Michael", "Anderberg",
                   "12 North Third Street, Apartment 45"));
           Add(new Customer("Chris", "Ashton",
                   "34 West Fifth Street, Apartment 67"));
           Add(new Customer("Cassie", "Hicks",
                   "56 East Seventh Street, Apartment 89"));
           Add(new Customer("Guido", "Pica",
                   "78 South Ninth Street, Apartment 10"));
       }
   
   }
   

See Also

Reference

ComboBox

Concepts

Control Content Models