Xamarin.Forms（XAML）：縮放到較小的屏幕

Question

我一直在開發使用Xamarin Forms的應用程序，並且在較小的屏幕尺寸（例如480x640和480x800）上遇到問題。 基本上，表單的內容被剪切...

請注意，底部的按鈕已被裁剪。

在XAML中，我沒有指定任何尺寸，因此我希望表格能夠適應可用的尺寸...

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

    <StackLayout>

        <StackLayout VerticalOptions="Start">
            <Label HorizontalTextAlignment="Center" Text="Type barcode manually if required" />
            <Entry Text="{Binding Path=BarcodeContent}" />
            <Button Command="{Binding Path=OkCommand}" HorizontalOptions="Center" Text="Ok" />
        </StackLayout>

        <ListView ItemsSource="{Binding Path=History}" VerticalOptions="Fill">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Path=BarcodeContent}">
                        <TextCell.ContextActions>
                            <MenuItem Command="{Binding Path=BindingContext.EnquiryCommand, Source={x:Reference MyPage}}" CommandParameter="{Binding}" Text="Enquiry" />
                            <MenuItem Command="{Binding Path=BindingContext.RaiseCommand, Source={x:Reference MyPage}}" CommandParameter="{Binding}" Text="Raise" />
                        </TextCell.ContextActions>
                    </TextCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <Grid VerticalOptions="End">

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

            <Button Grid.Column="1" Command="{Binding Path=CancelCommand}" Text="Cancel" />
            <Button Grid.Column="3" Command="{Binding Path=ContinueCommand}" Text="Complete" />

        </Grid>

    </StackLayout>

</ContentPage>

在1080 x 1920像素顯示屏上顯示時，一切都很好。

我在這里想念什么？

編輯：

如果我將外部StackView替換為Grid，一切都將適合...

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>

    <StackLayout Grid.Row="0">
    </StackLayout>

    <ListView Grid.Row="1" ...>
    </ListView>

    <Grid Grid.Row="2">
    </Grid>

</Grid>

因此，我有一個解決方法，但仍然不明白為什么原始StackView版本不起作用（例如，ListView控件是否具有首選的默認高度？）。

Answer 1

雖然我必須深入研究代碼以找到確切原因，但最有可能的懷疑對象是ListView。 StackLayout不僅適合屏幕，還可以擴展以包含其中的所有內容。

由於VerticalOptions =“ Fill”，ListView很有可能比預期的要大，因此占用了您看到的所有空間。 如果您在ListView上更改背景顏色，則將看到它占用的區域。 但是，您可以更改屏幕上所有容器的背景顏色，這通常是查看占用空間的最佳方法。

另一方面，網格將僅填滿屏幕上的確切空間，並且將其行與內部可用空間分開。

總而言之，StackLayout擴展到屏幕之外以適合其中包含的內容。 默認情況下，網格將填充為其父對象（例如屏幕）的大小，然后在其中拆分空間。

Answer 2

我已經更改了您的XAML。 您能檢查一下嗎，可能對您有幫助

<StackLayoutSpacing="2"> <StackLayout> <Label HorizontalTextAlignment="Center" Text="Type barcode manually if required" /> <Entry Text="{Binding Path=BarcodeContent}" /> <Button Command="{Binding Path=OkCommand}" HorizontalOptions="Center" Text="Ok" /> </StackLayout> <ListView ItemsSource="{Binding Path=History}"> <ListView.ItemTemplate> <DataTemplate> <TextCell Text="{Binding Path=BarcodeContent}"> <TextCell.ContextActions> <MenuItem Command="{Binding Path=BindingContext.EnquiryCommand, Source={x:Reference MyPage}}" CommandParameter="{Binding}" Text="Enquiry" /> <MenuItem Command="{Binding Path=BindingContext.RaiseCommand, Source={x:Reference MyPage}}" CommandParameter="{Binding}" Text="Raise" /> </TextCell.ContextActions> </TextCell> </DataTemplate> </ListView.ItemTemplate> </ListView> <StackLayout HeightRequest="55" Padding="10" Orientation="Horizontal" BackgroundColor="#E3714D" >
<Button Command="{Binding Path=CancelCommand}" Text="Cancel" /> <Button Command="{Binding Path=ContinueCommand}" Text="Complete" /> </StackLayout> </StackLayout>

您也可以在包含按鈕的StackLayout內部/而不是StackLayout中使用網格。