Xamarin.Forms布局问题

Question

I am trying to produce a simple form within Xamarin.Forms that will display a ListView with a custom header (allowing data entry) and a custom footer (containing "Cancel"/"Continue" buttons). I cannot however get the ListView to fill the form vertically (I want the "Cancel"/"Continue" buttons at the bottom of the form, irrespective of the length of the list.

Where I am going wrong? I have tried nearly every combination of VerticalOptions against the ListView but I always end up with the "Cancel"/"Continue" buttons sitting directly under the "OK" button...

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="MyCompany.Views.MyPage"
                         xmlns="http://xamarin.com/schemas/2014/forms"
                         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                         Title="{Binding Path=Title}">

    <ListView Margin="15" VerticalOptions="FillAndExpand">

        <ListView.HeaderTemplate>
            <DataTemplate>

                <StackLayout VerticalOptions="Start">
                    <Label HorizontalTextAlignment="Center" Text="Type something" />
                    <Entry />
                    <Button HorizontalOptions="Center" Text="Ok" />
                </StackLayout>

            </DataTemplate>
        </ListView.HeaderTemplate>

        <ListView.FooterTemplate>
            <DataTemplate>

                <Grid VerticalOptions="End">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="2*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="2*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Button Grid.Column="1" Text="Cancel" />
                    <Button Grid.Column="3" Text="Complete" />

                </Grid>

            </DataTemplate>
        </ListView.FooterTemplate>

    </ListView>

</ContentPage>

For the record, the application is running (currently) on Android though I do not expect this to make any difference.

Answer 1

I can't quite get it going either using the Header and Footer. Alternatively you could also just wrap it in a Grid like so:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <StackLayout Grid.Row="0" VerticalOptions="Start">
        <Label HorizontalTextAlignment="Center" Text="Type something" />
        <Entry />
        <Button HorizontalOptions="Center" Text="Ok" />
    </StackLayout>
    <ListView Grid.Row="1" ItemsSource="{Binding .}" Margin="15" VerticalOptions="FillAndExpand" />
    <Grid Grid.Row="2" VerticalOptions="End" HeightRequest="40">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Column="1" Text="Cancel" />
        <Button Grid.Column="3" Text="Complete" />
    </Grid>
</Grid>

UPDATE: The behavior I've noticed with ListView is that it puts the footer directly after the last item in the ListView . So if your ListView has only 4 items it puts the header directly after it. Try giving the footer and the ListView a background color and you'll probably see something like this:

I don't think this behaviour can be altered without going the Grid route I suggested.