Question

I want to create the content of the each item inside a ListBox dynamically – think of it as a list of items. Or think of a phone book application with contacts and each contact has one or more phone numbers that are displayed beneath the name; the name is one field, the phone numbers is a second field. But the content of the phone number field would obviously depend on the number of phone number the contact has.

Like:

Andrew Adams   <-- TextBlock for name
650-123-2222   <-- "Item" for numbers
490-222-3333

Benny Benjamin
650-123-3333

I have tried to solve this by creating a second ListBox for the numbers item inside the main ListBox item. But I don’t know how I can populate this second ListBox with a model from C#.

   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >

            <ListBox Name="ContactResultsData" ItemsSource="{Binding Contacts}" Margin="24,0" Height="620">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Name="ContactName" Text="{Binding ContactName}" Style="{StaticResource PhoneTextLargeStyle}" />
                            <ListBox Name="NumbersList" ItemsSource="{Binding NumbersList}">
                                <TextBlock Name="Number" Text="{Binding Number}" Style="{StaticResource PhoneTextSmallStyle}" />
                            </ListBox>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
    </Grid>
</Grid>

Question would be: How can I set NumbersList ItemsSource from C#? Or can I solve my problem with some other better approach?

Answer 1

You need to set the ItemTemplate for your second ListBox. It should look like:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >

        <ListBox Name="ContactResultsData" ItemsSource="{Binding Contacts}" Margin="24,0" Height="620">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Name="ContactName" Text="{Binding ContactName}" Style="{StaticResource PhoneTextLargeStyle}" />
                        <ListBox Name="NumbersList" ItemsSource="{Binding NumbersList}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Name="Number" Text="{Binding Number}" Style="{StaticResource PhoneTextSmallStyle}" />
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
</Grid>

On a side note, don’t give your UI elements name (Name or x:Name) unless you need to use them in code behind or from xaml. This is especially true for items within an ItemTemplate.