Export (0) Print
Expand All

How to: Display Data in a ListBox

Silverlight

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://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
    
    
    

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 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://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
    
    
    

Community Additions

ADD
Show:
© 2015 Microsoft