Xamarin 中的嵌套列表视图使用 MVVM 形成 xaml答案

【问题标题】：Nested List view in Xamarin forms xaml with MVVMXamarin 中的嵌套列表视图使用 MVVM 形成 xaml
【发布时间】：2017-07-31 13:36:43
【问题描述】：

我想要 xamarin 表单中的嵌套列表视图，如下所示

我正在使用 XAML 并希望使用 MVVM 进行绑定

我的模型如下

public class LineItemTaxDto 
    {
        public int InvoiceLineItemId { get; set; }
        public int InvoiceId { get; set; }
        public int TaxId { get; set; }
        public decimal TaxRate { get; set; }
        public decimal TaxAmount { get; set; }
        public string TaxName { get; set; }
        public ObservableCollection<LineItemTaxDto> SubTaxes { get; set; }

    }

在这个集团税是我的主要税名，它包含子税（增值税、消费税）。

编辑

我的 xaml 代码如下

<ListView x:Name="TaxListView" ItemsSource="{Binding Invoice.Taxgroup}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" SeparatorVisibility="None" HasUnevenRows="false" RowHeight="35">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid RowSpacing="0" ColumnSpacing="0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                     <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="150" />
                                </Grid.ColumnDefinitions>
                                <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Spacing="0" HorizontalOptions="End">
                                    <Label Text="{Binding Source={x:Reference TaxListView}, Path=BindingContext.CurrentOutlet.ReceiptTemplate.TaxLable, StringFormat='{0} ('}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" Margin="0,5,0,5" />
                                    <Label Text="{Binding TaxName, StringFormat='{0})'}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" HorizontalTextAlignment="End" Margin="0,5,0,5" />
                                </StackLayout>
                                <Label Grid.Row="0" Grid.Column="1" Text="{Binding TaxAmount, Converter={Helpers:CurrencyAmountConverter}}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" Margin="0,5,0,5" />


                                 <ListView x:Name="TaxListView2" ItemsSource="{Binding Invoice.Taxgroup}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" SeparatorVisibility="None" HasUnevenRows="false" RowHeight="35">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <ViewCell>
                                                <Grid RowSpacing="0" ColumnSpacing="0">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="Auto" />
                                                    </Grid.RowDefinitions>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="*" />
                                                        <ColumnDefinition Width="150" />
                                                    </Grid.ColumnDefinitions>
                                                    <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Spacing="0" HorizontalOptions="End">
                                                        <Label Text="{Binding TaxName}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" HorizontalTextAlignment="End" Margin="0,5,0,5" />
                                                    </StackLayout>
                                                    <Label Grid.Row="0" Grid.Column="1" Text="{Binding TaxAmount, Converter={Helpers:CurrencyAmountConverter}}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" Margin="0,5,0,5" />
                                                </Grid>
                                            </ViewCell>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

但是不工作。请帮助我解决我的问题。提前致谢

【问题讨论】：

嵌套列表视图不是一个好的选择。如果您需要分组，则分组（请参阅此示例：developer.xamarin.com/samples/xamarin-forms/…）。
@DiegoRafaelSouza，请查看我的模型并告诉我是否可以在其中进行分组？
你的模型对我来说似乎不完整。分组是一个双手策略，在 viewmodel 的其他页面上......您可以编辑您的问题以简化场景吗？或许我可以帮忙。

标签： xaml listview mvvm xamarin.forms

【解决方案1】：

已解决

我使用单个列表解决上述结果，无需嵌套列表视图。我的代码如下。

我的 xaml 代码如下所示：

<ListView 
                x:Name="TaxListView"
                ItemsSource="{Binding Invoice.ReceiptTaxList}" 
                Grid.Row="2" 
                Grid.Column="0" 
                Grid.ColumnSpan="2"
                VerticalOptions="FillAndExpand" 
                HorizontalOptions="FillAndExpand"
                SeparatorVisibility="None"
                HasUnevenRows="false"
                RowHeight="35"
                >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid RowSpacing="0" ColumnSpacing="0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="150" />
                                </Grid.ColumnDefinitions>
                                <Label Grid.Row="0" Grid.Column="0" Text="{Binding TaxName}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" HorizontalTextAlignment="End" Margin="0,5,0,5" />
                                <Label Grid.Row="0" Grid.Column="1" Text="{Binding TaxAmount, Converter={Helpers:CurrencyAmountConverter}}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" Margin="0,5,0,5" />
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

我的视图模型代码如下：

    var TMPTaxList = invoice.InvoiceLineItems.Where(x => x.TaxId > 1).Select(x =>
              {
                  return new KeyValuePair<LineItemTaxDto, ObservableCollection<LineItemTaxDto>>(new LineItemTaxDto()
                  {
                      InvoiceLineItemId = x.Id,
                      InvoiceId = x.InvoiceId,
                      TaxId = x.TaxId,
                      TaxRate = x.TaxRate,
                      TaxAmount = x.TaxAmount,
                      TaxName = "Tax (" + x.TaxName + ")"
                  }, x.LineItemTaxes);
              });

        var taxes = new ObservableCollection<LineItemTaxDto>();
        foreach (var tax in TMPTaxList.GroupBy(tax => tax.Key.TaxId)
  .Select(grp => grp.First()))
        {
            taxes.Add(tax.Key);
            foreach (var subtax in tax.Value.Where(x => x.TaxId > 0))
            {
                taxes.Add(subtax);
            }
        }

        invoice.ReceiptTaxList = taxes;

【讨论】：