How do I bind a Silverlight ItemsControl inside of a databound ListBox.ItemTemplate?

Question

I'm writing a Silverlight application. I want a Listbox that displays the rows vertically. Then for each row there should be a header column on the row and then a horizontal list of panels. I have the layout figured out. My problem is with the data binding.

The ListBox is being bound to a collection. Each item in that collection will be a row in the listbox. Each item in the collection has a collection as well which will be what is bound to the ItemsControl ItemsSource inside of each ListBox row.

For example

[Header][x][y][z] [Header][x2][y2][z2] [Header][x3][y3][z3]

What is the binding syntax that I need to be using?

<ListBox Name="listRuleSteps" Height="150" Loaded="ListBox_Loaded" ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="150"></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0" Orientation="Vertical" Height="50">
                            <dataInput:Label Content="{Binding StepID}"></dataInput:Label>
                        </StackPanel>

                        <StackPanel Grid.Column="1" Orientation="Vertical">
                            <ItemsControl ItemsSource="{Binding SelectedItem.RuleEngineParts, ElementName=listRuleSteps}" >
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <controlToolkit:WrapPanel Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <controlToolkit:WrapPanel Width="100">
                                            <dataInput:Label Content="Text1"></dataInput:Label>
                                        </controlToolkit:WrapPanel>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>

                            </ItemsControl>                           

                        </StackPanel>
                    </Grid>
                </DataTemplate>

            </ListBox.ItemTemplate>
        </ListBox>

I think the problem is on this line. I obviously don't want to use the SelectedItem but I'm not sure what to bind the ItemsSource.

<ItemsControl ItemsSource="{Binding SelectedItem.RuleEngineParts, ElementName=listRuleSteps}" >

If you think I'm totally wrong in the way I'm doing this, please let me know. I'm really new to Silverlight.

Answer 1

First of all I don't think the datainput:Label control is needed here a simple TextBlock with a binding on its Text property would work just as well without the extra baggage.

In the inner ItemsControl you can simply bind like this:-

<ItemsControl ItemsSource="{Binding RuleEngineParts}"

Now you can bind the inner TextBlocks Text property to an appropriate property of what ever objects are found in the RuleEngineParts collection.