XAML 如何在毛伊岛.net中制作全屏网格?

7fhtutme  于 2023-06-03  发布在  .NET
关注(0)|答案(1)|浏览(324)

我试图使一个页面有一个顶行(工具栏),在中间的主要内容,然后沿着屏幕底部的状态栏。如果主要内容太大,那么我希望它滚动。应该很简单吧?
下面是我一直在使用的XAML,但似乎不能让它工作。更准确地说-我不能让它在iOS上工作。它在Android上运行良好,但在iOS中,它只是从屏幕底部展开,所以我看不到它。
有什么建议吗?

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition />
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <BoxView Grid.Column="0" Grid.Row="0" Color="Green"/>

    <Label Text="Row 0, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />

    <BoxView Grid.Row="1" Color="Teal" />

    <ScrollView Grid.Row="1" VerticalOptions="FillAndExpand">
        <StackLayout>
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
        </StackLayout>
    </ScrollView>
    <BoxView Grid.Row="2"  Color="Red" />
    <Label Grid.Row="2" Text="Row 2, Columns 0 and 1" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
w8f9ii69

w8f9ii691#

Ewerspej对问题的评论链接到已知问题。
在解决此问题之前,解决方法是在网格行上设置数字高度。
您必须手动减去其他内容的高度。在您的情况下,从屏幕高度减去200:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="{Binding ScrollViewRowHeight, Source={RelativeSource Self}" />
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>

代码隐藏:

public double ScrollViewRowHeight { get; set; }

  ...
  // constructor
  public MyPageNameHere()
  {
      InitializeComponent();

      var screenHeight = Microsoft.Maui.Devices.DeviceDisplay.MainDisplayInfo.Height;
      ScrollViewRowHeight = screenHeight - 200;

      ...
  }

相关问题