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 属性，它们指定控件的放置方式。（在我的例子中，对象固定在左上角）

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

Answer 4

为了补充 Alex Logvin 的解决方案，我能够在我的 gammaDog 应用程序中将具有透明度的图像和文本叠加到照片上：

  <Grid>
    <ffimageloading:CachedImage
        x:Name="MyImage"
        Source="{Binding MyImage}" >
    </ffimageloading:CachedImage>

    <Image HorizontalOptions="Center"
           VerticalOptions="Center"
           Rotation="{Binding Heading}"
           Source="arrow.png"
           Margin="75"
           x:Name="ImageArrow"/>
    <Image HorizontalOptions="FillAndExpand"
           VerticalOptions="FillAndExpand"
           Rotation="{Binding HeadingCompass}"
           Source="compass.png"/>
    <Label Text="{Binding MyTitle, StringFormat='{0}'}"
           FontSize="Large" TextColor="Red"
           HorizontalTextAlignment="Center"></Label>
    <Label Text="{Binding MyNote, StringFormat='{0}'}"
           FontSize="Large" TextColor="Red"
           HorizontalTextAlignment="Center"
           VerticalTextAlignment="Bottom"></Label>
  </Grid>

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

Xamarin Forms: How to place one layout on top of another layout

xamarin.forms

android-relativelayout