Create Lists Inside Another List With Binding

Today, I'm going to show you how you can display a few lists either in an expandable ListView or ListBox.

Introduction

Once, when I was thinking about a problem in my developer project, I needed to initialize a list with some groups. GroupList would not work because there wouldn't be enough independence and I wanted separation of responsibility in the final result. Obviously, we need to do this with tough binding - x:Bind.

What is work environment?

1. Project will start in VS 2015

2. Type of app is UWP

What is the idea?

If we want to create one List inside another List, we need to use two types of models. Simple.

1. Students will be inner List.

2. GroupStudents outer List, which contains instances of inner List (Student).

Let's Go,

Step 1

Creating Student Model,

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

Just a name. Nothing else.

Step 2

Creating GroupStudent Model,

public class GroupStudent {
    public string HeaderListView {
        get;
        set;
    }
    public List < Student > StudentItems {
        get;
        set;
    }
}

• HeaderListView as you can see it will be a Header for each ListView.
• StudentItems list with type of our first model. 

Step 3

Creating ViewModel

public class ViewModel {
    private List < Student > _students {
        get;
        set;
    } = new List < Student > ();
    private ObservableCollection < GroupStudent > _groupstudents {
        get;
        set;
    } = new ObservableCollection < GroupStudent > ();
    public ObservableCollection < GroupStudent > GroupStudents {
        get {
            return _groupstudents;
        }
    }
    public void FillBothList() {
        _students.Add(new Student {
            Name = "Mike"
        });
        _students.Add(new Student {
            Name = "John"
        });
        _students.Add(new Student {
            Name = "Bob"
        });
        GroupStudents.Add(new GroupStudent {
            HeaderListView = "First ListView",
                StudentItems = new List < Student > (_students)
        });
        GroupStudents.Add(new GroupStudent {
            HeaderListView = "Second ListView",
                StudentItems = new List < Student > (_students)
        });
    }
}

We have to make two Lists here.

• _students Inner private list with type Student
• GroupStudent ObservebleCollection with type GroupStudent, which will contain inside Header and instance of Inner List (_students). 

And one method FillBothList (I'm trying to do this simply). This method is adding three times instance to _students List. Then we are creating two instances of our outer GroupStudents list with two properties,

1. HeaderListView.
2. Instance of our inner list.

Step 4 

Organize MainPage 

In MainPage.xaml.cs we are creating viewmodel and calling method - FillBothList from eventhandler.

public sealed partial class MainPage: Page {
    ViewModel viewmodel;
    public MainPage() {
        this.InitializeComponent();
        viewmodel = new ViewModel();
    }
    private void Button_Click(object sender, RoutedEventArgs e) {
        viewmodel.FillBothList();
    }
}

Step 5 

Write a markup language

XAML code is an important part of all these steps. Understanding this is key to recognize binding.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="800" />
        <RowDefinition/> </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="300" />
        <ColumnDefinition/> </Grid.ColumnDefinitions>
    <Button Grid.Row="1" Width="200" Height="50" HorizontalAlignment="Center" Content="Press" Click="Button_Click" />
    <ListView Grid.Column="1" // Outer ListView Grid.Row="1" SelectionMode="None" Width="800" ItemsSource="{x:Bind viewmodel.GroupStudents}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Horizontal" /> </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:GroupStudent">
                <ListView Header="{x:Bind HeaderListView}" // Inner ListView ItemsSource="{x:Bind StudentItems}" Width="200">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="local:Student">
                            <TextBlock Text="{x:Bind Name}" Width="200" /> </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

Step by step,

1. Create the Button for starting process.
2. Outer ListView with ItemSoucre of GroupStudents.
3. ItemsWrapGrid - for horizontal initialize. Or you can use GridView.
4. DataType of outer list.
5. Inner ListView with Header property and ItemSource StudentItems, which was included like the property of GroupStudent list.
6. DataType of inner list.
7. TextBlock with one field Name which was included inside Student type.

ResultView

 

That's a scheme for a good understanding. I'll put it with high quality in the zip