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

7fhtutme 于 2023-06-03 发布在 .NET

关注(0)|答案(1)|浏览(329)

我试图使一个页面有一个顶行（工具栏），在中间的主要内容，然后沿着屏幕底部的状态栏。如果主要内容太大，那么我希望它滚动。应该很简单吧？
下面是我一直在使用的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>

xaml

来源：https://stackoverflow.com/questions/76338099/how-do-i-make-a-full-screen-grid-in-net-maui

1条答案

按热度按时间

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;

      ...
  }

赞(0）回复(0）举报 2023-06-03

我来回答

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

1条答案

相关问题

热门标签

最新问答