如何删除此 Xamarin 网格布局顶部的空间？

Question

我需要一个遥控器应用程序上的方形按钮嵌套，经过多次尝试，创建了以下内容页面和类。

请问我怎样才能摆脱网格顶部的空间（在屏幕截图中显示为红色）？

内容页面

     <StackLayout BackgroundColor="Black" VerticalOptions="StartAndExpand">

      <Label x:Name="MyAwesomeLabel" FontSize="60" FontAttributes="Bold"  Text="Label" TextColor="White" HorizontalTextAlignment="End" VerticalTextAlignment="Center"  LineBreakMode="NoWrap" BackgroundColor="Blue" Margin="12, 12, 12, 0"/>

      <Grid x:Name="MyAwesomeGrid" RowSpacing="1" ColumnSpacing="1" Padding="0, -40, 0, 0" Margin="0" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand" BackgroundColor="Red">

          <Grid.RowDefinitions>
               <RowDefinition Height="1"/>
               <RowDefinition Height="1"/>
               <RowDefinition Height="1"/>
               <RowDefinition Height="1"/>
               <RowDefinition Height="1"/>
          </Grid.RowDefinitions>

          <Grid.ColumnDefinitions>
               <ColumnDefinition Width="1"/>
               <ColumnDefinition Width="1"/>
               <ColumnDefinition Width="1"/>
               <ColumnDefinition Width="1"/>
          </Grid.ColumnDefinitions>

          <ImageButton Grid.Row="1" Grid.Column="0" Source="A.xml"/>
          <ImageButton Grid.Row="1" Grid.Column="1" Source="B.xml"/>
          <ImageButton Grid.Row="1" Grid.Column="2" Source="C.xml"/>
          <ImageButton Grid.Row="1" Grid.Column="3" Source="D.xml"/>

          <ImageButton Grid.Row="2" Grid.Column="0" Source="E.xml"/>   
          <ImageButton Grid.Row="2" Grid.Column="1" Source="F.xml"/>
          <ImageButton Grid.Row="2" Grid.Column="2" Source="G.xml"/>
          <ImageButton Grid.Row="2" Grid.Column="3" Source="H.xml"/>

          <ImageButton Grid.Row="3" Grid.Column="0" Source="I.xml"/>
          <ImageButton Grid.Row="3" Grid.Column="1" Source="J.xml"/>
          <ImageButton Grid.Row="3" Grid.Column="2" Source="K.xml"/>
          <ImageButton Grid.Row="3" Grid.Column="3" Source="L.xml"/>

          <ImageButton Grid.Row="4" Grid.Column="0" Source="M.xml"/>   
          <ImageButton Grid.Row="4" Grid.Column="1" Source="N.xml"/>
          <ImageButton Grid.Row="4" Grid.Column="2" Source="O.xml"/>
          <ImageButton Grid.Row="4" Grid.Column="3" Source="P.xml"/>

          <ImageButton Grid.Row="5" Grid.Column="0" Source="Q.xml"/>
          <ImageButton Grid.Row="5" Grid.Column="1" Source="R.xml"/>
          <ImageButton Grid.Row="5" Grid.Column="2" Source="S.xml"/>
          <ImageButton Grid.Row="5" Grid.Column="3" Source="T.xml"/>
      </Grid>
 </StackLayout>

页面类

      public MyAwesomeApp()
  {
       InitializeComponent();
       double size = DeviceDisplay.MainDisplayInfo.Width / 12;
       foreach(ColumnDefinition col in buttons.ColumnDefinitions)
       {
            col.Width = size;
       }
       foreach(RowDefinition row in buttons.RowDefinitions)
       {
            row.Height = size;
       }
  }

结果

网格背景颜色为红色，因此空间绝对是网格的一部分。

Answer 1

这是你的罪魁祸首

您从 Row="1" 而不是 Row="0"

开始

<ImageButton Grid.Row="1" Grid.Column="0" Source="A.xml"/>

顶部的空间是第 0 行，网格自动创建第 6 行，现在您的页面有 6 行而不是 5 行。

将 1 更改为 0，将 2 更改为 1 等等......您将获得所需的结果并删除不再需要的负填充。

<ImageButton Grid.Row="0" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="1" BackgroundColor="LightBlue"/>
...
<ImageButton Grid.Row="1" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="1" BackgroundColor="LightBlue"/>
...
<ImageButton Grid.Row="2" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="1" BackgroundColor="LightBlue"/>
...
<ImageButton Grid.Row="3" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="1" BackgroundColor="LightBlue"/>
...
<ImageButton Grid.Row="4" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="1" BackgroundColor="LightBlue"/>

Answer 2

您可以使用 View-to-View 绑定来设置 ImageButton 的大小。这样你就不需要再在后面的代码中设置它了。

<StackLayout BackgroundColor="Black" VerticalOptions="StartAndExpand">

        <Label x:Name="MyAwesomeLabel" FontSize="60" FontAttributes="Bold"  Text="Label" TextColor="White" HorizontalTextAlignment="End" VerticalTextAlignment="Center"  LineBreakMode="NoWrap" BackgroundColor="Blue" Margin="12, 12, 12, 0"/>

        <Grid x:Name="MyAwesomeGrid" RowSpacing="1" ColumnSpacing="1" Padding="1"  HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Red">

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <ImageButton x:Name="btn1" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Row="0" Grid.Column="0" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="0" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="1" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="0" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="2" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="0" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="3" BackgroundColor="LightBlue"/>

            <ImageButton Grid.Row="1" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="0" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="1" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="1" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="1" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="2" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="1" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="3" BackgroundColor="LightBlue"/>

            <ImageButton Grid.Row="2" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="0" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="2" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="1" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="2" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="2" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="2" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="3" BackgroundColor="LightBlue"/>

            <ImageButton Grid.Row="3" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="0" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="3" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="1" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="3" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="2" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="3" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="3" BackgroundColor="LightBlue"/>

            <ImageButton Grid.Row="4" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="0" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="4" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="1" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="4" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="2" BackgroundColor="LightBlue"/>
            <ImageButton Grid.Row="4" HeightRequest="{Binding Width, Source={x:Reference btn1}}" Grid.Column="3" BackgroundColor="LightBlue"/>
        </Grid>
    </StackLayout>