CODEWITHSUNDEEP
c#uwpuwp-xaml
Monish Koyott
Monish Koyott

Reputation: 374

Data binding in UWP to nested collection

I need to dig into a nested observable collection in UWP, which consists another observable collection inside it, and then bind it to my XAML.

How could I do it?

Upvotes: 3

Views: 2236

Answers (3)

AVK
AVK

Reputation: 3923

Allen Rufolo's Solution works. But Here is another way of approaching this.

x:Bind is newly implemented and available for UWP. My Answer is based on x:Bind

Sample Classes

public class MainItems
{
    public string ItemName { get; set; }
    public ObservableCollection<SubItems> SubItemsList { get; set; }
}

public class SubItems
{
    public string SubItemName { get; set; }
}

Sample Data

ObservableCollection<MainItems> _data = new ObservableCollection<MainItems>();
for (int i = 1; i <= 5; i++)
{
    MainItems _mainItems = new MainItems();
    _mainItems.ItemName = "Main" + i.ToString();
    _mainItems.SubItemsList = new ObservableCollection<SubItems>();
    for (int j = 1; j <= 3; j++)
    {
        SubItems _subItems = new SubItems()
        {
            SubItemName = "SubItem" + i.ToString()
        };
        _mainItems.SubItemsList.Add(_subItems);
    }
    _data.Add(_mainItems);
}

My XAML

<ListView x:Name="MyMainList">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:MainItems">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Text="{x:Bind ItemName}" />
                <ListView ItemsSource="{x:Bind SubItemsList}" Grid.Row="1">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="local:SubItems">
                            <TextBlock Foreground="Red" Text="{x:Bind SubItemName}"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

x:Bind gives you an easy way to Bind your Nested Observable Collection

Output

enter image description here

Upvotes: 4

Allen Rufolo
Allen Rufolo

Reputation: 1202

A code example of your observable collections would help but you could do something like this...

public class MyViewModel
{
    public ObservableCollection<MyObject> MyObjectCollection { get; set;}
}

public class MyObject
{
    public string ObjectName {get; set;}
    public ObservableCollection<AnotherObject> AnotherObjectCollection { get; set; }
}

And in your XAML you can bind to these collection similar to this

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <ListView x:Name="ListView1" Grid.Column="0" 
              ItemsSource="{Binding MyObjectCollection}">
        <ListView.ItemTemplate>
            <Datatemplate>
                <TextBlock Text="{Binding ObjectName}"/>
            </Datatemplate
        </ListView.ItemTemplate>
    </ListView>
    <Grid Grid.Column=1 DataContext="{Binding ElementName=ListView1, Path=SelectedItem}"> 
        <ListView ItemsSource="{Binding AnotherObjectCollection}"/>
    </Grid>
</Grid>

In this example, the DataContext of the second Grid is bound to the selected item in ListView1.

Upvotes: 2

RredCat
RredCat

Reputation: 5421

I am not sure that I get what do you need, but I guess that it could be the same as for WPF.

Check out questions and answers for the next questions:

Upvotes: 1

Related Questions