XamarinForms RelativeLayout：无法获得相对布局以连续正确调整大小

这是我的问题：

红色块有时是人的化身，蓝色气球是聊天消息 . 聊天消息对象是一个RelativeLayout，其中Label和一个Image位于彼此的顶部，但不管我做什么，我都无法让它居中 . 我只有一个视图：

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace TestChat
{
    public partial class ChatPage : ContentPage
    {
        public ChatPage ()
        {
            this.Title = "Chat page";
            InitializeComponent ();
        }

        void OnChatClick (object sender, EventArgs args) { 
            Image pic = new Image {
                Source = "bubble.png",
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Aspect = Aspect.Fill
            };

            Label textLabel = new Label {
                Text = "Hello",
                TextColor = Color.White,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.EndAndExpand
            };

            Frame picFrame = new Frame {
                HasShadow = false,
                BackgroundColor = Color.Red,
                Padding = new Thickness (0),
                Content = pic
            };

            Frame textFrame = new Frame {
                HasShadow = false,
                BackgroundColor = Color.Transparent,
                Padding = new Thickness (0,0,15,0),
                Content = textLabel
            };

            RelativeLayout overlayLayout = new RelativeLayout { BackgroundColor = Color.Blue, HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand };

            overlayLayout.Children.Add (picFrame,
                xConstraint: Constraint.RelativeToParent((parent) => parent.X),
                yConstraint: Constraint.RelativeToParent((parent) => parent.Y),
                widthConstraint: Constraint.RelativeToParent((parent) => parent.Width-2),
                heightConstraint: Constraint.RelativeToParent((parent) => parent.Height-2)
            );

            overlayLayout.Children.Add (textFrame,
                xConstraint: Constraint.RelativeToParent((parent) => parent.X),
                yConstraint: Constraint.RelativeToParent((parent) => parent.Y),
                widthConstraint: Constraint.RelativeToParent((parent) => parent.Width-2),
                heightConstraint: Constraint.RelativeToParent((parent) => parent.Height-2)
            );

            Frame overlayContainerFrame = new Frame {
                HasShadow = false,
                BackgroundColor = Color.Red,
                Padding = new Thickness(1),
                HeightRequest = 100,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                Content = overlayLayout
            };

            StackLayout horizontalLayout = new StackLayout {
                Orientation = StackOrientation.Horizontal
            };

            BoxView avatarImage = new BoxView {
                Color = Color.Red,
                HeightRequest = 50,
                WidthRequest = 50
            };

            horizontalLayout.Children.Add (avatarImage);

            horizontalLayout.Children.Add (overlayContainerFrame);

            ChatScrollViewStackLayout.Children.Add (horizontalLayout);

            //ChatStackLayout.Children.Add (pic);
        }

        void CreateChatBubble() {

        }
    }   
}

有没有人有任何想法为什么我可以't get the relative layout to resize accordingly so it doesn'超出屏幕范围？我尝试将其WidthConstraint设置为parent.With-52以弥补水平占据50个单位的头像，但我得到了这个：

我几乎没有想法 . 任何提示将非常感谢 . 这是项目的git repo，所以你可以克隆它，如果你想测试任何东西：https://github.com/sgarcia-dev/xamarin-chat.git

任何帮助都将非常感激，如果你可以复制我想要的东西，如果它看起来很乱，可以完全忽略我的代码 . （左侧是一个图像，右侧是带有基础图像背景的消息气泡）