Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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
    {
        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 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
    {
        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"));
        }
    
    }
    
    
    
Was this page helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

Show:
© 2014 Microsoft