Xamarin Forms：如何将一个布局放置在另一个布局之上

Question

我正在尝试创建如下所示的UI：

我的代码：

<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>

当前输出：

如何创建顶部的布局？要实现此目标，需要使用相对布局的什么属性？

Answer 1

实际上，这非常简单，请在图像视图上使用TranslationY属性：

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

Answer 2

同意@Roubachof。或者，您可以将堆栈布局放在同一网格单元中。

<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>

Answer 3

你可以这样做：

<Grid>
    <Button HeightRequest="50" WidthRequest="100" HorizontalOptions="Start" VerticalOptions="Start" BackgroundColor="Red"/>
    <Button HeightRequest="100" WidthRequest="50" HorizontalOptions="Start" VerticalOptions="Start" BackgroundColor="Green"/>
</Grid>

注意 HorizontalOptions 和 VerticalOptions 属性，它们指定控件的放置方式。 （在我的情况下，对象锚定在左上角）

并控制订单事项。你可以看到绿色按钮在红色按钮之上，这是因为在代码中它放在红色按钮之后。