Xamarin.Forms - 将元素置于另一个元素之上。答案

【问题标题】：Xamarin.Forms - position element on top of another.Xamarin.Forms - 将元素置于另一个元素之上。
【发布时间】：2017-09-17 19:28:25
【问题描述】：

我的 Xamarin.Forms 项目中有一个页面，我需要看起来像这样：

我可以定位红色和蓝色框，没问题。但我不知道如何创建绿色的。

我使用的 XAML 如下：

<StackLayout HorizontalOptions="FillAndExpand">
    <StackLayout VerticalOptions="FillAndExpand" BackgroundColor="Red">   
         //I'm thinking the green box should be positioned absolutely in here or something?         
    </StackLayout>
    <StackLayout VerticalOptions="End" BackgroundColor="Blue">
        <Grid VerticalOptions="EndAndExpand">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Text="Button" HorizontalOptions="FillAndExpand" BorderRadius="0" VerticalOptions="EndAndExpand" HeightRequest="50" TextColor="White" BackgroundColor="#85C034"></Button>
        </Grid>
    </StackLayout>
</StackLayout>

【问题讨论】：

标签： xaml xamarin xamarin.forms

【解决方案1】：

Grid 是实现此行为的最佳布局控件。您可以使用* 扩展一行以填充，将文本标签嵌套在第一行的内容视图中，然后将第二行设置为所需的高度。

EG：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Grids"
    x:Class="Grids.GridsPage">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="60"/>
        </Grid.RowDefinitions>
        <ContentView 
            BackgroundColor="Red" Grid.Row="0">
            <Label TextColor="Black"
                Text="Text"
                Margin="0,0,0,10"
                BackgroundColor="#00FF02"
                VerticalOptions="End"
                HorizontalOptions="Center"/>
        </ContentView>
        <ContentView BackgroundColor="Blue" Grid.Row="1"/>
    </Grid>
</ContentPage>

【讨论】：

对，快到了。但是，我还需要一些覆盖红色背景的东西。像图像或 BoxView 或其他东西，绿色文本框应该在它上面可见。出于某种原因，当我在红色的 ContentView 中放置诸如之类的东西时，它不会显示。