C# data binding nested ItemsControl wpf

Question

I want to build a UserInterface like this (a timeline for a video editor)

and I have all classes:

public class Timeline
    {
        public Timeline()
        {
            groups = new ObservableCollection<Group>();
        }
        public ObservableCollection<Group> groups { get; set; }

    }

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

    public TrackGroup()
    {
        tracks = new List<Track>();
    }

    public List<Track> tracks { get; set; }
}

public class Track
{
    public Track()
    {
        units= new ObservableCollection<Unit>();
    }
    public ObservableCollection<Unit> units { get; set; }
}

public class Unit
{
    public string unitName { get; set; }
}

And in Main I have this:

public Timeline timeline = new Timeline();
public Unit unit = new Unit();
public Track track = new Track();
public Group group = new Group();
track.units.Add(unit);
group.tracks.Add(track);
timeline.groups.Add(group);

And in Main.xaml(not complete because it doesn't work)

<ListBox
        HorizontalContentAlignment="Stretch"
        ItemsSource="{Binding timeline.groups}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <DockPanel LastChildFill="True">
                            <ItemsControl ItemsSource="{Binding timeline.groups.tracks}">
                                <ItemsControl.ItemTemplate >
                                    <ItemsControl ItemsSource="{Binding timeline.groups.tracks.units}">
                                        <ItemsControl.ItemTemplate >
                                        </ItemsControl.ItemTemplate >
                                    </ItemsControl>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </DockPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

How can I binding each itemssource? because timeline, group, track all are list, so I need to show them in ItemsControl. I was very confused

Answer 1

You don't need to use 'full' path for bindings at inner lists.

Because when you bind some ItemControl and try to style it's item remember that each item already an example of collection that you used as ItemsSource

Edit1:
Window.xaml.cs file:

Timeline timeline = new Timeline();
Unit unit1 = new Unit() {unitName = "1"};
Unit unit2 = new Unit() {unitName = "2"};
Track track = new Track();
Group group = new Group();
track.units.Add(unit1);
track.units.Add(unit2);
group.tracks.Add(track);
timeline.groups.Add(group);
list.DataContext = timeline;

here i didn't use VM if you want to use VM just add it to data context of your window and bind list to it. Xaml:

<ListBox HorizontalContentAlignment="Stretch"
             Name="list"
             ItemsSource="{Binding groups}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <DockPanel LastChildFill="True">
                    <ItemsControl ItemsSource="{Binding tracks}">
                        <ItemsControl.ItemTemplate >
                            <DataTemplate>
                                <ItemsControl ItemsSource="{Binding units}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <TextBox Text="{Binding unitName}"/>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DockPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Just style, tested it. If you'll use VM with Timeline property change binding to 'timelinePropertyName'.groups

And read more about bindings.