如何在 Xamarin 中的 ListView.Header 和 ListView.ItemTemplate 上创建多行？

Question

我正在尝试在ListView.Header和ListView.ItemTemplate上创建多行，但我没有找到任何示例。

我怎么能这样做？

需要

              HEADER
____________________________________
|  col1  | col2   |  col3   | col4 |
------------------------------------
| col5 | col6 | col7 | col8 | col9 |
------------------------------------
        ITEMTEMPLATE like header

试

<StackLayout HorizontalOptions="FillAndExpand">

            <ListView x:Name="ListGraosRomaneios"
                      SeparatorVisibility="Default">

                <ListView.Header>
                    <Grid HorizontalOptions="FillAndExpand" BackgroundColor="#335D3B">

                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition><!--row 1-->
                            <RowDefinition></RowDefinition><!--row 2-->                            
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition><!--col 1-->
                            <ColumnDefinition Width="*"></ColumnDefinition><!--col 2-->
                            <ColumnDefinition Width="*"></ColumnDefinition><!--col 3-->
                            <ColumnDefinition Width="*"></ColumnDefinition><!--col 4-->
                            <ColumnDefinition Width="*"></ColumnDefinition><!--col 5-->
                            <ColumnDefinition Width="*"></ColumnDefinition><!--col 6-->
                        </Grid.ColumnDefinitions>

                        <!--margin (left, top, right, bottom)-->
                        <!--row 1-->
                        <Label Grid.Row="0" Grid.Column="0" Margin="2, 2, 0, 2" FontAttributes="Bold" Text="ROMANEIO"   TextColor="White" HorizontalOptions="StartAndExpand"></Label>
                        <Label Grid.Row="0" Grid.Column="1" Margin="0, 2, 0, 2" FontAttributes="Bold" Text="DATA" TextColor="White" HorizontalOptions="CenterAndExpand"></Label>
                        <Label Grid.Row="0" Grid.Column="2" Margin="0, 2, 0, 2" FontAttributes="Bold" Text="L/KG"    TextColor="White" HorizontalOptions="CenterAndExpand"></Label>
                        <Label Grid.Row="0" Grid.Column="3" Margin="0, 2, 0, 2" FontAttributes="Bold" Text="SACAS"    TextColor="White" HorizontalOptions="EndAndExpand"></Label>

                        <!--row 2 -->
                        <Label Grid.Row="1" Grid.Column="0" Margin="2, 2, 0, 2" FontAttributes="Bold" Text="%UMI"   TextColor="White" HorizontalOptions="Center"></Label>
                        <Label Grid.Row="1" Grid.Column="1" Margin="0, 2, 0, 2" FontAttributes="Bold" Text="%IMP"   TextColor="White" HorizontalOptions="Center"></Label>
                        <Label Grid.Row="1" Grid.Column="2" Margin="0, 2, 0, 2" FontAttributes="Bold" Text="%AVA"   TextColor="White" HorizontalOptions="Center"></Label>
                        <Label Grid.Row="1" Grid.Column="3" Margin="0, 2, 0, 2" FontAttributes="Bold" Text="%ESV"   TextColor="White" HorizontalOptions="Center"></Label>
                        <Label Grid.Row="1" Grid.Column="4" Margin="0, 2, 0, 2" FontAttributes="Bold" Text="%OUT"   TextColor="White" HorizontalOptions="Center"></Label>
                        <Label Grid.Row="1" Grid.Column="5" Margin="0, 2, 0, 2" FontAttributes="Bold" Text="%QBR"   TextColor="White" HorizontalOptions="Center"></Label>
                    </Grid>

                </ListView.Header>

                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>

                            <Grid HorizontalOptions="FillAndExpand">
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition><!--row 1-->
                                    <RowDefinition></RowDefinition><!--row 2-->
                                </Grid.RowDefinitions>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"></ColumnDefinition><!--col 1-->
                                    <ColumnDefinition Width="*"></ColumnDefinition><!--col 2-->
                                    <ColumnDefinition Width="*"></ColumnDefinition><!--col 3-->
                                    <ColumnDefinition Width="*"></ColumnDefinition><!--col 4-->
                                    <ColumnDefinition Width="*"></ColumnDefinition><!--col 5-->
                                    <ColumnDefinition Width="*"></ColumnDefinition><!--col 6-->
                                </Grid.ColumnDefinitions>

                                <!--row 1-->
                                <Label Grid.Row="0" Grid.Column="0" Text="{Binding app_num_romaneio}" HorizontalOptions="Start"></Label>
                                <Label Grid.Row="0" Grid.Column="1" Text="{Binding app_data, StringFormat='{}{0:dd/MM/yyyy}'}" HorizontalOptions="Start"></Label>
                                <Label Grid.Row="0" Grid.Column="2" Text="{Binding app_qtde_kg_liquido, StringFormat=' {0:###,###.##}' }" HorizontalOptions="Start"></Label>
                                <Label Grid.Row="0" Grid.Column="3" Text="{Binding app_quantidade_saca, StringFormat=' {0:###,###.##}' }" HorizontalOptions="EndAndExpand"></Label>

                                <!--row 2-->
                                <Label Grid.Row="1" Grid.Column="0" Text="{Binding app_num_romaneio}" HorizontalOptions="Start"></Label>
                                <Label Grid.Row="1" Grid.Column="1" Text="{Binding app_percfator_umidade, StringFormat=' {0:###,###.##}' }" HorizontalOptions="Start"></Label>
                                <Label Grid.Row="1" Grid.Column="2" Text="{Binding app_percfator_impureza, StringFormat=' {0:###,###.##}' }" HorizontalOptions="Start"></Label>
                                <Label Grid.Row="1" Grid.Column="3" Text="{Binding app_percfator_avariados, StringFormat=' {0:###,###.##}' }" HorizontalOptions="Start"></Label>
                                <Label Grid.Row="1" Grid.Column="4" Text="{Binding app_percfator_esverdeados, StringFormat=' {0:###,###.##}' }" HorizontalOptions="Start"></Label>
                                <Label Grid.Row="1" Grid.Column="5" Text="{Binding app_percfator_outros, StringFormat=' {0:###,###.##}' }" HorizontalOptions="Start"></Label>
                                <Label Grid.Row="1" Grid.Column="6" Text="{Binding app_percfator_partidos_quebrados, StringFormat=' {0:###,###.##}' }" HorizontalOptions="Start"></Label>

                            </Grid>

                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>



            </ListView>


        </StackLayout><!--/principal>-->

Answer 1

请检查下面的代码可能会帮助你你想要什么：

                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition><!--row 1-->
                        <RowDefinition></RowDefinition><!--row 2-->                            
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition><!--col 1-->
                        <ColumnDefinition Width="*"></ColumnDefinition><!--col 2-->
                        <ColumnDefinition Width="*"></ColumnDefinition><!--col 3-->
                        <ColumnDefinition Width="*"></ColumnDefinition><!--col 4-->
                        <ColumnDefinition Width="*"></ColumnDefinition><!--col 5-->
                    </Grid.ColumnDefinitions>

                    <!--margin (left, top, right, bottom)-->
                    <!--row 1-->
                    <Label Grid.Row="0" Grid.Column="0" FontAttributes="Bold" Text="ROMANEIO"   TextColor="White" HorizontalOptions="Center"></Label>
                    <Label Grid.Row="0" Grid.Column="1" FontAttributes="Bold" Text="DATA" TextColor="White" HorizontalOptions="Center"></Label>
                    <Label Grid.Row="0" Grid.Column="2" FontAttributes="Bold" Text="L/KG"    TextColor="White" HorizontalOptions="Center"></Label>
                    <Label Grid.Row="0" Grid.Column="3" FontAttributes="Bold" Text="SACAS"    TextColor="White" HorizontalOptions="Center"></Label>
                    <Label Grid.Row="0" Grid.Column="4" FontAttributes="Bold" Text="%UMI"    TextColor="White" HorizontalOptions="Center"></Label>


                    <!--row 2 -->
                    <Label Grid.Row="1" Grid.Column="0" FontAttributes="Bold" Text="%IMP"   TextColor="White" HorizontalOptions="Center"></Label>
                    <Label Grid.Row="1" Grid.Column="1" FontAttributes="Bold" Text="%AVA"   TextColor="White" HorizontalOptions="Center"></Label>
                    <Label Grid.Row="1" Grid.Column="2" FontAttributes="Bold" Text="%ESV"   TextColor="White" HorizontalOptions="Center"></Label>
                    <Label Grid.Row="1" Grid.Column="3" FontAttributes="Bold" Text="%OUT"   TextColor="White" HorizontalOptions="Center"></Label>
                    <Label Grid.Row="1" Grid.Column="4" FontAttributes="Bold" Text="%QBR"   TextColor="White" HorizontalOptions="Center"></Label>                        
                </Grid>

            </ListView.Header>

输出 ：

谢谢

Answer 2

如果你想使用列表视图标题的模板，你可以使用ListView.HeaderTemplate 。

我制作了一个简单的代码示例供您参考。

Xml：

 <ListView Header="{Binding}" ItemsSource="{Binding list}">
            <ListView.HeaderTemplate>
                <DataTemplate>
                    <StackLayout BackgroundColor="Accent">
                        <Label Text="{Binding listCount, StringFormat='Items Total : {0}'}" />
                    </StackLayout>

                </DataTemplate>
            </ListView.HeaderTemplate>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label Text="{Binding Country}" />
                            <Label Text="{Binding Name}" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

代码：

 public partial class Page2 : ContentPage
{
    public ObservableCollection<Person> list { get; set; }
    public int listCount { get; set; }
    public Page2()
    {
        InitializeComponent();
        list = new ObservableCollection<Person>()
        {
            new Person(){ Country="CountryA",  Name="AA" },
            new Person(){ Country="CountryB", Name="BB"}
        };
        listCount = list.Count;

        this.BindingContext = this;
    }
}
public class Person
{
    public string Country { get; set; }

    public string Name { get; set; }
}