Partager via


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.

    NoteNote:

    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

Concepts