xamarin 表单中的 Listview 未使用完整的表单空间答案

【问题标题】：Listview in xamarin form not using full space of formxamarin 表单中的 Listview 未使用完整的表单空间
【发布时间】：2017-09-28 07:01:35
【问题描述】：

我正在开发 Xamarin 表单跨平台应用程序。我有一个表单，我需要在列表视图中显示数据。

数据正在显示，但它没有使用整个空间，导致底部保留不需要的空间。

我的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"
             x:Class="BMTHomesApp.Views.ImportantAppointments">
    <ContentPage.Content>
        <StackLayout VerticalOptions="StartAndExpand">
            <ListView HasUnevenRows="True" RowHeight="100" HeightRequest="-1" x:Name="ListViewAppointments" VerticalOptions="StartAndExpand">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid Padding="20,0,0,0" ColumnSpacing="20">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="40"></RowDefinition>
                                    <RowDefinition Height="40"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="40"></ColumnDefinition>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>

                                <!--<BoxView Color="#f7f7f7" Grid.Column="0" Grid.RowSpan="2"/>
                                <BoxView Color="#ffffff" Grid.Column="1" Grid.RowSpan="2"/>-->
                                <Image Grid.RowSpan="2" Grid.Column="0" x:Name="ImageAppointmentIcon" Source="AppointmentsIcon.png" Aspect="AspectFit"></Image>
                                <Label TextColor="#00344e" FontAttributes="Bold" Text="{Binding Subject}" Grid.Row="0" Grid.Column="1" VerticalTextAlignment="End"></Label>
                                <Label TextColor="#0073ae" Text="{Binding StartDate}" Grid.Row="1" Grid.Column="1" VerticalTextAlignment="Start"></Label>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <ActivityIndicator x:Name="ActLoder"  HorizontalOptions="CenterAndExpand" Color="#ffffff" VerticalOptions="CenterAndExpand"  />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

【问题讨论】：

标签： xamarin xamarin.ios xamarin.forms

【解决方案1】：

可能是ListView之后的ActivityIndicator。它们被封闭在 StackLayout 中，因此都将垂直占用空间。

如果您希望 ActivityIndicator 出现在 ListView 的顶部，请将 StackLayout 替换为 Grid。

不确定 HeightRequest=-1 的用途。

【讨论】：

我设置了 HeightRequest=-1 以查看是否通过使用它会使用表单高度但没有工作......即使我删除了活动指示器......然后也是同样的结果
把activity indicator和stack layout都去掉，看看listview是否占满整个页面。此外，您应该设置 HasUnevenRows = true 或 RowHeight=100 您不需要两者。
可能 RowHeight=100 看看您是如何硬编码行高的。
解决占用空间的技巧是将每个控件的背景颜色设置为花哨的颜色。所以ContentPage、StackLayout、ListView、ActivityIndicator。空间是什么颜色的？
尝试将 StackLayout VerticalOptions 设置为 FillAndExpand

【解决方案2】：

我猜StackLayout 会导致您的布局问题。您将Listview 堆叠在ActivityIndicator 之上

如果您希望ActivityIndicator 出现在与Listview 相同的空间但居中，那么您可以尝试以下操作：

<ContentPage.Content>
    <Grid>
        <ListView HasUnevenRows="True" RowHeight="100" x:Name="ListViewAppointments" VerticalOptions="StartAndExpand">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="20,0,0,0" ColumnSpacing="20">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40"></RowDefinition>
                                <RowDefinition Height="40"></RowDefinition>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="40"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>

                            <!--<BoxView Color="#f7f7f7" Grid.Column="0" Grid.RowSpan="2"/>
                            <BoxView Color="#ffffff" Grid.Column="1" Grid.RowSpan="2"/>-->
                            <Image Grid.RowSpan="2" Grid.Column="0" x:Name="ImageAppointmentIcon" Source="AppointmentsIcon.png" Aspect="AspectFit"></Image>
                            <Label TextColor="#00344e" FontAttributes="Bold" Text="{Binding Subject}" Grid.Row="0" Grid.Column="1" VerticalTextAlignment="End"></Label>
                            <Label TextColor="#0073ae" Text="{Binding StartDate}" Grid.Row="1" Grid.Column="1" VerticalTextAlignment="Start"></Label>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <ActivityIndicator x:Name="ActLoder"  HorizontalOptions="CenterAndExpand" Color="#ffffff" VerticalOptions="CenterAndExpand"  />
    </Grid>
</ContentPage.Content>

【讨论】：