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

Shakra · Accepted Answer · 2016-11-24 09:57:22Z

2

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.

edited Nov 24, 2016 at 9:57

answered Nov 24, 2016 at 5:43

Shakra

5012 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steven Dao Over a year ago

It doesn't work from "binding timeline.groups". I use "datacontext = this" in main class, is it right?

Shakra Over a year ago

Updated answer.

jessenich · Accepted Answer · 2016-11-24 05:24:53Z

0

Try capitalizing the appropriate members. WPF is case sensitive.

answered Nov 24, 2016 at 5:24

jessenich

2081 silver badge5 bronze badges

Collectives™ on Stack Overflow

C# data binding nested ItemsControl wpf

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related