StackLayout 中的 ListView:如何自动调整 ListView 的大小? [英] ListView inside StackLayout: How to auto resize the ListView?

问题描述

我在它后面放了一个 ListView 和一个标签，但在屏幕上，ListView 和带有 Text 的标签之间有一个空白空间毫秒.

I put a ListView and a Label, immediately after it, but on screen, there is a Empty space between the ListView and the Label with the Text ms.

当项目存在时，我希望 ListView 自动展开.或者是否有一个ItemsControl，比如WPF?

I would like the ListView to expand automatically, when the items are present. Or is there an ItemsControl, like WPF?

我有这个 XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Forms"             
             x:Class="Forms.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <local:MyConverter x:Key="MyConverter"></local:MyConverter>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ScrollView Orientation="Vertical">
        <StackLayout Padding="10,10,10,10">
            <Label FontSize="20" FontAttributes="Bold">Cartão de Ponto</Label>
            <Label>Nome:</Label>
            <Label Text="{Binding Path=Pessoa.Nome}" />
            <Label>CPF:</Label>
            <Label Text="{Binding Path=Pessoa.CPF}" />

            <Grid Padding="0" MinimumHeightRequest="40">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="35" />
                    <ColumnDefinition Width="60" />
                    <ColumnDefinition Width="60" />
                    <ColumnDefinition Width="60" />
                </Grid.ColumnDefinitions>
                <Label FontSize="10" Text="Data" FontAttributes="Bold" VerticalTextAlignment="End" />
                <Label FontSize="10" Grid.Column="1" Text="Dia" FontAttributes="Bold" VerticalTextAlignment="End" />
                <Label FontSize="10" Grid.Column="2" Text="Hora Entrada" FontAttributes="Bold" VerticalTextAlignment="End" />
                <Label FontSize="10" Grid.Column="3" Text="Hora Saída" FontAttributes="Bold" VerticalTextAlignment="End" />
                <Label FontSize="10" Grid.Column="4" Text="Horas Trabalhadas" HorizontalTextAlignment="End" FontAttributes="Bold" />
            </Grid>

            <!-- HeightRequest="0"-->
            <ListView x:Name="lv1" ItemsSource="{Binding Path=Pontos}" 
                      VerticalOptions="FillAndExpand"
                        HasUnevenRows="False"
                      >
                <ListView.Header>
                    <StackLayout HeightRequest="0" />
                </ListView.Header>
                <!-- ItemTemplate -->
                <ListView.Footer>
                    <StackLayout HeightRequest="0" />
                </ListView.Footer>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="70" />
                                        <ColumnDefinition Width="35" />
                                        <ColumnDefinition Width="60" />
                                        <ColumnDefinition Width="60" />
                                        <ColumnDefinition Width="60" />
                                    </Grid.ColumnDefinitions>
                                    <Label FontSize="12" Text="{Binding Path=Data, StringFormat='{0:dd/MM/yyyy}'}" />
                                    <Label FontSize="12" Grid.Column="1" Text="{Binding Path=DiaSemana}" />
                                    <Label FontSize="12" Grid.Column="2" Text="{Binding Path=HoraEntrada}" />
                                    <Label FontSize="12" Grid.Column="3" Text="{Binding Path=HoraSaida}" />
                                    <Label FontSize="12" Grid.Column="4" Text="{Binding Path=HorasTrabalhadas, Converter={StaticResource MyConverter}}}" />
                                </Grid>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <!-- Why is this White space on screen? -->
            <StackLayout Orientation="Horizontal">
                <Label x:Name="lbl1" />
                <Label>ms</Label>
            </StackLayout>

            <Button x:Name="ButtonPegaCartaoPonto" Text="Carregar" />

            <Label></Label>
            <Label></Label>
        </StackLayout>
    </ScrollView>
</ContentPage>

但是 ListView lv1 不会自动水平扩展以适应 Items.

But the ListView lv1 does not automatically expand Horizontally to fit the Items.

如何做到这一点?

推荐答案

设置 ListView 的 RowHeight 属性并使用构造函数中的代码更新列表的高度，如下所示:

Set RowHeight property of your ListView and update height of list using code behind in your constructor like this:

lv1.PropertyChanged += (object sender, System.ComponentModel.PropertyChangedEventArgs e) =>
            {
                if (e.PropertyName == "ItemsSource")
                {
                    try
                    {
                        if (lv1.ItemsSource != null)
                        {
                            var tmp = (IList) lv1.ItemsSource;
                            lv1.HeightRequest = tmp.Count * lv1.RowHeight;
                        }
                    }
                    catch (Exception ex)
                    {

                    }
                }
            };

或

您还可以根据行高设置特定高度.

You can also put specific heigh based on row height.

lv1.PropertyChanged += (object sender, System.ComponentModel.PropertyChangedEventArgs e) =>
                {
                    if (e.PropertyName == "ItemsSource")
                    {
                        try
                        {
                            if (lv1.ItemsSource != null)
                            {
                                var tmp = (IList) lv1.ItemsSource;
                                lv1.HeightRequest = tmp.Count * 40;
                            }
                        }
                        catch (Exception ex)
                        {

                        }
                    }
                };

这篇关于StackLayout 中的 ListView:如何自动调整 ListView 的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！