【问题标题】：how to set a label object above an object image Xamarin forms如何在 Xamarin 形式的对象图像上方设置标签对象
【发布时间】：2017-05-23 16:25:55
【问题描述】：

我尝试了几种解决方案，但仍然如下，我所做的测试是： first solution

<RelativeLayout x:Name="locationLayout" Grid.Row="0" Grid.Column="0" VerticalOptions="End" HorizontalOptions="End">
   <Image x:Name="locationIcon"/>
   <Label Text="Posizione" x:Name="posizioneLabel" TextColor="#fff" HorizontalTextAlignment="Center" FontSize="Medium"></Label>
</RelativeLayout>

我希望标签在图片上方，我必须制作悬停效果。

你能找到一个解决方案，在图像上动态保留标签对象在底部吗？

【问题讨论】：

开发者先生您好！如果以下答案之一解决了您的问题，请将其标记为已回答。这将帮助未来的开发者解决同样的问题！

标签： c# image xamarin xamarin.forms label

【解决方案1】：

您可以尝试将对象放在同一个Grid

<Grid>
   <Image x:Name="locationIcon"/>
   <Label Text="Posizione" x:Name="posizioneLabel" TextColor="#fff" HorizontalTextAlignment="Center" FontSize="Medium"></Label>
</Grid>

这将在后面渲染图像，而顶部的文本在顶部水平居中

【讨论】：

【解决方案2】：

回答

实现这一点的最佳方法是在 C# 代码隐藏中创建视图，因为在代码隐藏中，我们可以利用 Funcs 来动态调整 UI 大小并相对于对齐 UI其他元素。

这篇 Stack Overflow 帖子包含有关如何在 Xamarin.Forms 中居中 UI 元素的更多信息：

Xamarin.Forms: How to center views using Relative Layout? `Width` and `Height` return -1

示例代码

using System;

using Xamarin.Forms;

namespace SampleApp
{
    public class App : Application
    {
        public App()
        {
            var floatingLabel = new Label
            {
                Text = "This Label Is Centered"
            };

            var circleImage = new Image
            {
                Source = "circle"
            };

            var relativeLayout = new RelativeLayout();

            Func<RelativeLayout, double> getfloatingLabelHeight = (p) => floatingLabel.Measure(p.Width, p.Height).Request.Height;
            Func<RelativeLayout, double> getfloatingLabelWidth = (p) => floatingLabel.Measure(p.Width, p.Height).Request.Width;

            Func<RelativeLayout, double> getCircleImageHeight = (p) => circleImage.Measure(p.Width, p.Height).Request.Height;
            Func<RelativeLayout, double> getCircleImageWidth = (p) => circleImage.Measure(p.Width, p.Height).Request.Width;

            relativeLayout.Children.Add(circleImage,
                Constraint.RelativeToParent(parent => parent.Width / 2 - getCircleImageWidth(parent) / 2),
                Constraint.RelativeToParent(parent => parent.Height / 2 - getCircleImageHeight(parent) / 2)
            );
            relativeLayout.Children.Add(floatingLabel,
                Constraint.RelativeToView(circleImage, (parent, view) => view.X + getCircleImageWidth(parent) / 2 - getfloatingLabelWidth(parent) / 2),
                Constraint.RelativeToView(circleImage, (parent, view) => view.Y + getCircleImageHeight(parent) / 2 - getfloatingLabelHeight(parent) / 2)
            );
            
            MainPage = new ContentPage { Content = relativeLayout };
        }
    }
}

【讨论】：