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

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

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

问题

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

以下是我一直在使用的XAML，但似乎无法使其正常工作。更准确地说，我无法在iOS上使其正常工作。在Android上它可以正常工作，但在iOS上它会扩展到屏幕底部，所以我看不到它。

有什么建议吗？

  1.  <Grid>
  2. 	<Grid.RowDefinitions>
  3. 		<RowDefinition Height="100"/>
  4. 		<RowDefinition />
  5. 		<RowDefinition Height="100"/>
  6. 	</Grid.RowDefinitions>
  7. 	<Grid.ColumnDefinitions>
  8. 		<ColumnDefinition/>
  9. 	</Grid.ColumnDefinitions>
  11. 	<BoxView Grid.Column="0" Grid.Row="0" Color="Green"/>
  13. 	<Label Text="Row 0, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
  15. 	<BoxView Grid.Row="1" Color="Teal" />
  17. 	<ScrollView Grid.Row="1" VerticalOptions="FillAndExpand">
  18. 		<StackLayout>
  19. 			<Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
  20. 			<Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
  21. 			<!-- 这里是其他标签的重复部分，已经截取 -->
  22. 		</StackLayout>
  23. 	</ScrollView>
  24. 	<BoxView Grid.Row="2"  Color="Red" />
  25. 	<Label Grid.Row="2" Text="Row 2, Columns 0 and 1" HorizontalOptions="Center" VerticalOptions="Center" />
  26. </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?

  1.  &lt;Grid&gt;
  2. 	&lt;Grid.RowDefinitions&gt;
  3. 		&lt;RowDefinition Height=&quot;100&quot;/&gt;
  4. 		&lt;RowDefinition /&gt;
  5. 		&lt;RowDefinition Height=&quot;100&quot;/&gt;
  6. 	&lt;/Grid.RowDefinitions&gt;
  7. 	&lt;Grid.ColumnDefinitions&gt;
  8. 		&lt;ColumnDefinition/&gt;
  9. 	&lt;/Grid.ColumnDefinitions&gt;
  11. 	&lt;BoxView Grid.Column=&quot;0&quot; Grid.Row=&quot;0&quot; Color=&quot;Green&quot;/&gt;
  13. 	&lt;Label Text=&quot;Row 0, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  15. 	&lt;BoxView Grid.Row=&quot;1&quot; Color=&quot;Teal&quot; /&gt;
  17. 	&lt;ScrollView Grid.Row=&quot;1&quot; VerticalOptions=&quot;FillAndExpand&quot;&gt;
  18. 		&lt;StackLayout&gt;
  19. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  20. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  21. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  22. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  23. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  24. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  25. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  26. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  27. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  28. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  29. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  30. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  31. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  32. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  33. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  34. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  35. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  36. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  37. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  38. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  39. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  40. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  41. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  42. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  43. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  44. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  45. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  46. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  47. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  48. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  49. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  50. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  51. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  52. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  53. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  54. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  55. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  56. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  57. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  58. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  59. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  60. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  61. 			&lt;Label  Text=&quot;Row 1, Column 0&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; /&gt;
  62. 		&lt;/StackLayout&gt;
  63. 	&lt;/ScrollView&gt;
  64. 	&lt;BoxView Grid.Row=&quot;2&quot;  Color=&quot;Red&quot; /&gt;
  65. 	&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;
  66. &lt;/Grid&gt;

答案1

得分: 0

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

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

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

  1. <Grid>
  2.     <Grid.RowDefinitions>
  3.         <RowDefinition Height="100"/>
  4.         <RowDefinition Height="{Binding ScrollViewRowHeight, Source={RelativeSource Self}}"/>
  5.         <RowDefinition Height="100"/>
  6.     </Grid.RowDefinitions>

代码后台（code-behind）：

  1. public double ScrollViewRowHeight { get; set; }
  3. ...
  4. // 构造函数
  5. public MyPageNameHere()
  6. {
  7.     InitializeComponent();
  9.     var screenHeight = Microsoft.Maui.Devices.DeviceDisplay.MainDisplayInfo.Height;
  10.     ScrollViewRowHeight = screenHeight - 200;
  12.     ...
  13. }
英文:

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:

  1. &lt;Grid&gt;
  2.     &lt;Grid.RowDefinitions&gt;
  3.         &lt;RowDefinition Height=&quot;100&quot;/&gt;
  4.         &lt;RowDefinition Height=&quot;{Binding ScrollViewRowHeight, Source={RelativeSource Self}&quot; /&gt;
  5.         &lt;RowDefinition Height=&quot;100&quot;/&gt;
  6.     &lt;/Grid.RowDefinitions&gt;

code-behind:

  1.   public double ScrollViewRowHeight { get; set; }
  3.   ...
  4.   // constructor
  5.   public MyPageNameHere()
  6.   {
  7.       InitializeComponent();
  9.       var screenHeight = Microsoft.Maui.Devices.DeviceDisplay.MainDisplayInfo.Height;
  10.       ScrollViewRowHeight = screenHeight - 200;
  12.       ...
  13.   }

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:

确定