Xamarin中的嵌套列表视图与MVVM形成xaml

时间:2017-07-31 13:36:44

标签: xaml listview mvvm xamarin.forms

我希望在xamarin表单中嵌套列表视图如下所示

enter image description here

我正在使用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; }

    }

在此组中,税是我的主要税名,它包含子税(VAT,GST)。

修改

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

但是没有用。请帮助我解决我的错误。提前致谢

1 个答案:

答案 0 :(得分:0)

<强>解决

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

我的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;