MVVM WPF Creating Child Elements

Question

I have a Customer object which has a List of Orders. Now, using MVVM pattern I am displaying a list of customers which is part of the CustomerOrderViewModel and "CustomerOrderView". The customers are shown using a listbox as implemented below:

  <ListBox BorderThickness="0" Grid.Column="0" Grid.Row="0" ItemsSource="{Binding Path=Customers}">                
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                        <view:CustomerView />                
                       </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>                
            </ListBox>

Now I also need to display the orders but I need to display it outside the ListBox. Like this:

 <StackPanel Grid.Column="1" Grid.Row="0" Margin="10">

                <ItemsControl ItemsSource="{Binding Path=Orders}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Path=Name}" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

            </StackPanel>

This does not work because There is no property on CustomerOrderViewModel for Orders. The Orders is a collection on the Customer object. How can I achieve it?

Here is the updated example:

<ListBox BorderThickness="0" Grid.Column="0" Grid.Row="0" ItemsSource="{Binding Path=Customers}">                
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                        <view:CustomerView />

                            <StackPanel Margin="20">

                                <ItemsControl ItemsSource="{Binding Path=Orders}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <view:OrderView />
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>

                            </StackPanel>

                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>                
            </ListBox>

I don't want to display the orders for all the customers. I just want to display the order of the currently selected customer.

Answer 1

You could use a master-detail binding.

HTH, Kent

Answer 2

I would suggest you to add an additional List to your window and bind its DataContext to the currently selected customer in your ListBox. It will be something like that:

        <ListBox BorderThickness="0" Grid.Column="0" Grid.Row="0"
            ItemsSource="{Binding Path=Customers}"
            x:Name="CustomerList">
            <ListBox.ItemTemplate>  
                <DataTemplate>  
                    <view:CustomerView />
                </DataTemplate>  
            </ListBox.ItemTemplate>                  
        </ListBox> 

        <ListBox Grid.Column="1" Grid.Row="0" DataContext="{Binding ElementName=CustomersList, Path=SelectedItem}">
           <ListBox.ItemTemplate>
               <DataTemplate>
                   <view:Order DataContext="{Binding Path=Orders}" />
               </DataTemplate>
           </ListBox.ItemTemplate>
        </ListBox>