Xamarin Forms Grid 未在图像顶部放置标签答案

【问题标题】：Xamarin Forms Grid not placing label on top of imageXamarin Forms Grid 未在图像顶部放置标签
【发布时间】：2017-05-13 16:34:27
【问题描述】：

我正在尝试使用网格将文本放置在图像上。但是，Xamarin 似乎出于某种奇怪的原因将标签放在图像上方。

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Image Grid.Column="0" Source="profile_banner.png" HorizontalOptions="CenterAndExpand"/>
  <Label Grid.Column="0" Text="{Binding ProfileName, StringFormat='Welcome, {0}'}" FontSize="Large" FontAttributes="Bold" HorizontalOptions="CenterAndExpand" TextColor="White" />
</Grid>

这是正在发生的事情的图片：

我想在其下方的黑色横幅中获取文本。我做错了什么？

【问题讨论】：

标签： xaml xamarin xamarin.forms

【解决方案1】：

在这种情况下，GridView 不是要使用的正确布局类型。
您应该改用RelativeLayout。
这是来自Xamarin Forum 的一个很好的例子：

public static Page GetMainPage ()
{   
    var myLabel = new Label () {
        Text = "Hello World",
        Font = Font.SystemFontOfSize (20),
        TextColor = Color.White,
        XAlign = TextAlignment.Center,
        YAlign = TextAlignment.Center
    };

    var myImage = new Image () {
        Source = FileImageSource.FromUri (
            new Uri("http://xamarin.com/content/images/pages/index/hero-slide.jpg"))
    };

    RelativeLayout layout = new RelativeLayout ();

    layout.Children.Add (myImage, 
        Constraint.Constant (0), 
        Constraint.Constant (0),
        Constraint.RelativeToParent ((parent) => { return parent.Width; }),
        Constraint.RelativeToParent ((parent) => { return parent.Height; }));

    layout.Children.Add (myLabel, 
        Constraint.Constant (0), 
        Constraint.Constant (0),
        Constraint.RelativeToParent ((parent) => { return parent.Width; }),
        Constraint.RelativeToParent ((parent) => { return parent.Height; }));

    return new ContentPage { 
        Content = layout
    };
}

【讨论】：

【解决方案2】：

@EvZ 我认为网格布局是正确的...

你可以试试

1- 也定义 RowDefinition 2- 为图像和标签设置 Grid.Row = "0"

祝你好运

【讨论】：

很可能它会起作用，但如果您需要更大的灵活性，我会选择RelativeLayout。让一个 Grid 在另一个 View 的顶部绘制一个 View 是没有意义的。