How to bind to collection 2 deep?

Question

I have the following collection structure and need to bind a combo box to it:

MainCollection.Items

Items contains a list of elements I'd like to display as choices in a combo box. MainCollection is of type List. Items is of type List. There is a Name property on the Item class that I'd like to display in the combo box.

The layout will be setup as a grid. Each row will have a combo box.

I'm not sure how to access properties on Item elements inside the Items collection.

<ComboBox ItemsSource="{Binding MainCollection}"></ComboBox>

How should this be setup?

Answer 1

So If I understand the question correctly, you would like to have a DataGrid, with each row containing a Combobox, and the values available inside must be the Name property of the Item objects that are in the List Items

You didn't said what kind of data you want to show in each row, let's take a simple User :

public class User
{
    public int Id { get; set; }
    public string Name { get; set; }
    public Item Item { get; set; }
}

With Item having a Name (let's keep it simple for the example) :

public class Item
{
    public string Name { get; set; }
}

Now that we have the models, we can set the DataContext with random Users and Items :

public partial class MainWindow : Window
{
    // Could also be
    // public ObservableCollection<Item> Items { get; set; }
    public List<Item> Items { get; set; }
    public List<User> Users { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        // Creating our list of Items
        Items = new List<Item> { 
            new Item { Name = "firstItem" },
            new Item { Name = "secondItem" },
            new Item { Name = "thirdItem" },
        };

        // Somes users for the example
        Users = new List<User>{
            new User { Id = 1, Name = "Bill", Item = new Item { Name = "firstItem" }},
            new User { Id = 2, Name = "Steeve", Item = new Item { Name = "secondItem" }}
        };

        // Don't forget to set the datacontext
        DataContext = this;
    }
}

And now the XAML :

<Grid>
    <DataGrid Name="testGrid" AutoGenerateColumns="False" ItemsSource="{Binding Users}">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Id" Binding="{Binding Id}"/>
            <DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
            <DataGridComboBoxColumn 
                DisplayMemberPath="Name"
                SelectedValuePath="Name"
                SelectedValueBinding="{Binding Item.Name}"
                Header="Item">
                <DataGridComboBoxColumn.ElementStyle>
                    <Style TargetType="{x:Type ComboBox}">
                        <Setter Property="ItemsSource" Value="{Binding Path=Items, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
                    </Style>
                </DataGridComboBoxColumn.ElementStyle>
                <DataGridComboBoxColumn.EditingElementStyle>
                    <Style TargetType="{x:Type ComboBox}">
                        <Setter Property="ItemsSource" Value="{Binding Path=Items, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
                    </Style>
                </DataGridComboBoxColumn.EditingElementStyle>
            </DataGridComboBoxColumn>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

The result :

Hope that the answer you were looking for :)