Xamarin.forms Xamarin表单：如何将一个布局放置在另一个布局之上

我正在尝试创建一个如下所示的用户界面：

<RelativeLayout>
    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
         <Grid>
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="33.3*" />
               <ColumnDefinition Width="33.4*" />
               <ColumnDefinition Width="33.3*" />
             </Grid.ColumnDefinitions>
             <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
                <Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
             </StackLayout>

              <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" Margin="-10">
                  <Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
               </StackLayout>

               <StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" Margin="-10">
                  <Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>
            </Grid>
         </StackLayout>

         <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" >
             <Grid>
                 <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="33.3*" />
                    <ColumnDefinition Width="33.4*" />
                    <ColumnDefinition Width="33.3*" />
                 </Grid.ColumnDefinitions>
                  <Image Source="ic_daily_reading_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
                  <Image Source="ic_saint_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
                   <Image Source="ic_quiz_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
                 </Grid>
           </StackLayout>
     </RelativeLayout>

我的代码：

<RelativeLayout>
    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
         <Grid>
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="33.3*" />
               <ColumnDefinition Width="33.4*" />
               <ColumnDefinition Width="33.3*" />
             </Grid.ColumnDefinitions>
             <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
                <Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
             </StackLayout>

              <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" Margin="-10">
                  <Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
               </StackLayout>

               <StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" Margin="-10">
                  <Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>
            </Grid>
         </StackLayout>

         <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" >
             <Grid>
                 <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="33.3*" />
                    <ColumnDefinition Width="33.4*" />
                    <ColumnDefinition Width="33.3*" />
                 </Grid.ColumnDefinitions>
                  <Image Source="ic_daily_reading_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
                  <Image Source="ic_saint_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
                   <Image Source="ic_quiz_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
                 </Grid>
           </StackLayout>
     </RelativeLayout>

电流输出：

<RelativeLayout>
    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
         <Grid>
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="33.3*" />
               <ColumnDefinition Width="33.4*" />
               <ColumnDefinition Width="33.3*" />
             </Grid.ColumnDefinitions>
             <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
                <Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
             </StackLayout>

              <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" Margin="-10">
                  <Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
               </StackLayout>

               <StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" Margin="-10">
                  <Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>
            </Grid>
         </StackLayout>

         <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" >
             <Grid>
                 <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="33.3*" />
                    <ColumnDefinition Width="33.4*" />
                    <ColumnDefinition Width="33.3*" />
                 </Grid.ColumnDefinitions>
                  <Image Source="ic_daily_reading_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
                  <Image Source="ic_saint_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
                   <Image Source="ic_quiz_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
                 </Grid>
           </StackLayout>
     </RelativeLayout>

---

如何创建类似顶部的布局？要实现这一点，需要使用相对布局的哪些属性？

事实上非常简单，在图像视图中使用

TranslationY

属性：

<Image Grid.Column="0" 
       TranslationY="-20"
       Source="ic_daily_reading_icon_xx.png" 
       WidthRequest="30" 
       HeightRequest="30" />

---

同意@Roubachof。也可以将stacklayouts放在同一网格单元中

<Grid>

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

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

        <StackLayout Grid.Row="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
            <Grid HeightRequest="30">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="33.3*" />
                    <ColumnDefinition Width="33.4*" />
                    <ColumnDefinition Width="33.3*" />
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" >
                    <Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>

                <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" >
                    <Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>

                <StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" >
                    <Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>
            </Grid>
        </StackLayout>

        <StackLayout Grid.Row="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" >
            <Grid HeightRequest="30">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="33.3*" />
                    <ColumnDefinition Width="33.4*" />
                    <ColumnDefinition Width="33.3*" />
                </Grid.ColumnDefinitions>
                <Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
                <Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
                <Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
            </Grid>
        </StackLayout>
</Grid>

您可以选择绝对或相对布局，您应该good@FreakyAli我已经将整个布局放在了Relativelayout中，但是Relativelayout需要使用什么属性来实现我想要的输出呢？这在tab设备中效果好吗？目前，我没有Mac的测试权限。在移动设备中按预期工作。您能否查看以下线程的最后一条评论？你能看一下下面帖子的最后一条评论吗？你可以创建一个新的线程并提供更多细节（示例）。我会检查我的答案。