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 像素显示器上显示时，一切正常。

我在这里错过了什么？

编辑：

如果我用 Grid 替换外部 StackView，一切都适合...

<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 很可能比预期的要大，因此占用了您所看到的所有 space。如果您更改 ListView 的背景颜色，您将看到它占用的区域。但是您可以更改屏幕上所有容器的背景颜色，这通常是查看发生了什么的最佳方式 space。

另一方面，网格将恰好填满屏幕上的 space，并且其行与内部可用的 space 分开。

总而言之，StackLayout 扩展到屏幕之外以适应其中包含的内容。网格将填充到其父级的大小，例如屏幕，默认情况下，然后在其中拆分 space。

Answer 2

我已经改变了你的XAML。你能看看这个吗，可能对你有帮助

<StackLayoutSpacing="2"> <堆栈布局> <Label HorizontalTextAlignment="Center" Text="Type barcode manually if required" /> <Entry Text="{Binding Path=BarcodeContent}" /> <Button Command="{Binding Path=OkCommand}" HorizontalOptions="Center" Text="Ok" /> </堆栈布局> <ListView ItemsSource="{Binding Path=History}"> <ListView.ItemTemplate> <数据模板> <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> </数据模板> </ListView.ItemTemplate> </列表视图> <StackLayout HeightRequest="55" Padding="10" Orientation="Horizontal" BackgroundColor="#E3714D" ><br> <Button Command="{Binding Path=CancelCommand}" Text="Cancel" /> <Button Command="{Binding Path=ContinueCommand}" Text="Complete" /> </堆栈布局> </StackLayout>

您还可以使用包含按钮的 StackLayout 的网格 inside/instead。

Xamarin.Forms (XAML)：缩放到更小的屏幕

Xamarin.Forms (XAML): scaling to smaller screens

android

xamarin.android

xamarin.forms

xamarin.forms-styles