如何在 .NET Maui 中创建一个全屏的网格？

huangapple
go评论70阅读模式
英文:

How do I make a full screen grid in .net Maui?

问题

我试图创建一个页面，顶部有一行工具栏，中间是主要内容，然后屏幕底部有一个状态栏。如果主要内容太大，我希望它可以滚动。应该很容易，对吧？

以下是我一直在使用的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" />
			<!-- 这里是其他标签的重复部分，已经截取 -->
		</StackLayout>
	</ScrollView>
	<BoxView Grid.Row="2"  Color="Red" />
	<Label Grid.Row="2" Text="Row 2, Columns 0 and 1" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>

希望这可以帮助你解决问题。

英文:

I am trying to make a page which has a top row (toolbar), main content in the middle, then a status bar along the bottom of the screen. If the main content is too large then I want it to scroll. Should be easy - right?

Below is the XAML I have been using but just can't seem to get it to work. More accurately - I can't get it to work on iOS. It works fine on Android but in iOS it just expands off the bottom of the screen so I can't see it.

Any suggestions?

 &lt;Grid&gt;
	&lt;Grid.RowDefinitions&gt;
		&lt;RowDefinition Height=&quot;100&quot;/&gt;
		&lt;RowDefinition /&gt;
		&lt;RowDefinition Height=&quot;100&quot;/&gt;
	&lt;/Grid.RowDefinitions&gt;
	&lt;Grid.ColumnDefinitions&gt;
		&lt;ColumnDefinition/&gt;
	&lt;/Grid.ColumnDefinitions&gt;

	&lt;BoxView Grid.Column=&quot;0&quot; Grid.Row=&quot;0&quot; Color=&quot;Green&quot;/&gt;

	&lt;Label Text=&quot;Row 0, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;

	&lt;BoxView Grid.Row=&quot;1&quot; Color=&quot;Teal&quot; /&gt;

	&lt;ScrollView Grid.Row=&quot;1&quot; VerticalOptions=&quot;FillAndExpand&quot;&gt;
		&lt;StackLayout&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
		&lt;/StackLayout&gt;
	&lt;/ScrollView&gt;
	&lt;BoxView Grid.Row=&quot;2&quot;  Color=&quot;Red&quot; /&gt;
	&lt;Label Grid.Row=&quot;2&quot; Text=&quot;Row 2, Columns 0 and 1&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
&lt;/Grid&gt;

答案1

得分: 0

Ewerspej的评论链接到已知问题。

在这个问题得到修复之前，可以使用一个解决方法，即在网格行上设置一个数值高度。

您将需要手动减去其他内容的高度。在您的情况下，从屏幕高度中减去200：

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

代码后台（code-behind）：

public double ScrollViewRowHeight { get; set; }

...
// 构造函数
public MyPageNameHere()
{
    InitializeComponent();

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

    ...
}
英文:

Ewerspej's comment on question links to the known issue.

Until this is fixed, a work-around is to set a numeric height on the grid row.

You'll have to manually subtract the heights of other content. In your case, subtract 200 from the screen height:

&lt;Grid&gt;
    &lt;Grid.RowDefinitions&gt;
        &lt;RowDefinition Height=&quot;100&quot;/&gt;
        &lt;RowDefinition Height=&quot;{Binding ScrollViewRowHeight, Source={RelativeSource Self}&quot; /&gt;
        &lt;RowDefinition Height=&quot;100&quot;/&gt;
    &lt;/Grid.RowDefinitions&gt;

code-behind:

  public double ScrollViewRowHeight { get; set; }

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

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

      ...
  }

huangapple
  • 本文由 发表于 2023年5月26日 14:20:21
  • 转载请务必保留本文链接：https://go.coder-hub.com/76338099.html
  • c#
  • maui
  • xaml
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定