UWP 中的数据绑定到嵌套集合答案

【问题标题】：Data binding in UWP to nested collectionUWP 中的数据绑定到嵌套集合
【发布时间】：2017-12-19 17:24:28
【问题描述】：

我需要在 UWP 中挖掘一个嵌套的 observable 集合，其中包含另一个 observable 集合，然后将其绑定到我的 XAML。

我该怎么做？

【问题讨论】：

标签： c# uwp uwp-xaml

【解决方案1】：

Allen Rufolo 的解决方案有效。但这是解决此问题的另一种方法。

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 为您提供了一种绑定嵌套 Observable 集合的简单方法

输出

【讨论】：

我们可以删除那些主要项目和子项目之间的空格（从左到右）吗？表示子项应垂直位于主项之下。
@nsds 默认情况下 ListViewItem 在左侧有默认的 12px 边距。因此，如果您想删除它，您可以重新模板 ListViewItem 或在第二个 DataTemplate 上添加 Margin="-12,0,0,0"

【解决方案2】：

你的可观察集合的代码示例会有所帮助，但你可以做这样的事情......

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>

在此示例中，第二个 Grid 的 DataContext 绑定到 ListView1 中的选定项。

【讨论】：

'DataContext="{Binding ElementName=ListView1, Path=SelectedItem}"' 如果用户没有选择 ListView 中的项目但数据仍应显示怎么办？
这是一个很好的观点。这个问题没有给出太多的具体性，所以我假设用户会在一个列表中选择一个项目，然后它会在第二个列表中向下钻取。在您的情况下，一个选项是设置 SelectedIndex = 0;在 OnNavigatedTo 方法后面的代码中将上下文设置为列表中的第一项。

【解决方案3】：

我不确定我是否得到了你需要的东西，但我想它可能与 WPF 相同。

查看下一个问题的问题和答案：

【讨论】：