Привязка данных в UWP к вложенной коллекции

Мне нужно покопаться во вложенной наблюдаемой коллекции в UWP, которая состоит из другой наблюдаемой коллекции внутри нее, а затем привязать ее к моему XAML.

Как я мог это сделать?


person Monish Koyott    schedule 12.09.2016    source источник


Ответы (3)


Пример кода ваших наблюдаемых коллекций мог бы помочь, но вы могли бы сделать что-то вроде этого ...

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

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

И в вашем XAML вы можете привязать эту коллекцию, как это

<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>

В этом примере DataContext второй Grid привязан к выбранному элементу в ListView1.

person Allen Rufolo    schedule 12.09.2016
comment
'DataContext = {Binding ElementName = ListView1, Path = SelectedItem}' Что делать, если пользователь не выбирает элемент в ListView, но данные все равно должны отображаться? - person AVK; 12.09.2016
comment
Это хороший момент. Вопрос не имел особой конкретики, поэтому я предположил, что пользователь выберет элемент в одном списке, а он развернется во втором списке. Вариант в вашем случае - установить SelectedIndex = 0; в методе OnNavigatedTo кода позади, чтобы установить контекст для первого элемента в списке. - person Allen Rufolo; 12.09.2016

Решение Аллена Руфоло работает. Но вот другой подход к этому.

x: Bind - это недавно реализован и доступен для UWP. Мой ответ основан на x: Bind

Примеры занятий

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

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

Образцы данных

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);
}

Мой 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 дает вам простой способ привязать вашу вложенную наблюдаемую коллекцию

Вывод

введите здесь описание изображения

person AVK    schedule 12.09.2016
comment
можем ли мы удалить пробел (слева) между основным элементом и подпунктом? означает, что подпункт должен вертикально находиться под основным элементом. - person nsds; 23.02.2018
comment
@nsds по умолчанию ListViewItem имеет поле по умолчанию 12 пикселей слева. Поэтому, если вы хотите удалить его, вы можете либо повторно создать шаблон ListViewItem, либо добавить Margin = -12,0,0,0 на втором DataTemplate - person AVK; 03.03.2018

Я не уверен, что получу то, что вам нужно, но я предполагаю, что это может быть то же самое, что и для WPF.

Ознакомьтесь с вопросами и ответами на следующие вопросы:

person RredCat    schedule 12.09.2016