0

我一直在使用 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.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 控件是否有首选的默认高度？）。

4

2 回答 2

2

虽然我必须深入研究代码才能找到确切的原因，但最有可能的嫌疑人是 ListView。StackLayout 不仅适合屏幕，它还会扩展以包含其中的所有内容。

由于 VerticalOptions="Fill"，ListView 很可能比预期的要大，因此占用了您所看到的所有空间。如果您更改 ListView 上的背景颜色，您将看到它占用的区域。但是您可以更改屏幕上所有容器的背景颜色，这通常是查看占用空间的最佳方式。

另一方面， Grid 只会填充屏幕上的确切空间，并且它的行会根据内部可用空间进行拆分。

总而言之，StackLayout 扩展到屏幕之外以适应其中包含的内容。默认情况下，Grid 将填充到其父级（例如屏幕）的大小，然后分割其中的空间。

于 2017-05-07T11:12:12.557 回答
1

我已更改您的 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 的网格。

于 2017-05-08T11:41:21.067 回答