Xamarin 形成网格大小问题

Question

我是 Xamarin 的新手，如果这很明显，请原谅。

我在我的 ContentPage 中添加了一个网格。我希望网格占据整个 ContentPage，我假设它是设备的全尺寸。就我而言，我正在测试 iPhone 6S 模拟器。 第一行应占 Grid 总高度的 7.58%，最后一行应填充其余部分。我添加标签以查看最后一行的底部在哪里，并在顶部显示所有内容。看起来它距顶部约 7%，这意味着它位于第一行的底部。

  <Grid x:Name="layoutGrid" HorizontalOptions="Fill" VerticalOptions="Fill">

<Grid.RowDefinitions>
  <RowDefinition Height=".0758*"/>
  <!-- Logo -->

  <!-- Remaining Space -->
  <RowDefinition  Height="*"/>    
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
  <ColumnDefinition Width=".154*" />
  <ColumnDefinition Width="*" />
  <ColumnDefinition Width=".154*" />
</Grid.ColumnDefinitions>

<Image Aspect="Fill" Source="{local:ImageResource App1.Resources.background.png}" Grid.ColumnSpan="3" Grid.RowSpan="11"/>
<Image Aspect="AspectFit" x:Name="settingsImage" Grid.Column="2" Grid.Row="0" Source="{local:ImageResource App1.Resources.settings-17-xxl.png}" HorizontalOptions="End"/>

<Label x:Name="lblTest" Grid.Row="1" Text="Bottom" TextColor="White" VerticalOptions="End" HorizontalOptions="Center" FontSize="18"/>  

Answer 1

看起来您将两个项目放置在同一个空间中，而这在网格中是无法做到的。 IOW XAML 中的第一个图像（似乎您希望在整个网格中使用此图像？）没有设置行和列，但默认为行/列 0。那么您的列跨度为 3，行跨度为 11（？） .你只有两行，所以这没有意义。此外，您也不能将第二张图像放在第 0 行第 2 列中，因为它已经被第一张图像占用。您可能希望将第一个图像设置为页面背景。或者使用绝对或相对布局，您可以在其中覆盖项目。据我所知，网格不允许叠加项目。您还可以将标签的垂直选项设置为“结束”，这会将其放置在第 1 行的底部，而不是顶部。试试下面的 XAML 看看是否更接近你想要的：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:App1"
    x:Class="App1.MainPage"
    BackgroundImage="{local:ImageResource App1.Resources.background.png}">

    <Grid x:Name="layoutGrid" HorizontalOptions="Fill" VerticalOptions="Fill">

        <Grid.RowDefinitions>
            <RowDefinition Height=".0758*"/>
             <!-- Logo -->

             <!-- Remaining Space -->
             <RowDefinition  Height="*"/>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width=".154*" />
             <ColumnDefinition Width="*" />
             <ColumnDefinition Width=".154*" />
         </Grid.ColumnDefinitions>

         <Image Aspect="AspectFit" x:Name="settingsImage" Grid.Column="2" Grid.Row="0" Source="{local:ImageResource App1.Resources.settings-17-xxl.png}" HorizontalOptions="End"/>

         <Label x:Name="lblTest" Grid.Row="1" Text="Bottom" TextColor="White" VerticalOptions="Start" HorizontalOptions="Center" FontSize="18"/>
     </Grid>
</ContentPage>