代码之家 › 专栏 › 技术社区 › FernandoPaiva

如何在ListView上创建多行。页眉和ListView。Xamarin中的ItemTemplate?

xamarin listview

FernandoPaiva · 技术社区 · 5 年前

我正在尝试在上创建多行 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>-->

0 回复 | 直到 5 年前

Rajendra Razz 5 年前

请检查下面的代码,它可能会帮助你实现你的目标:

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

输出:

谢谢

Wendy Zang - MSFT 5 年前

如果你想使用listview标题的模板,你可以使用 ListView.HeaderTemplate .

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

Xaml:

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