c# - Xamarin 窗体 RelativeLayout : Can't get relative layout to resize correctly in a row

Question

这是我的问题:

红色方 block 表示某个人的头像，蓝色气球表示聊天消息。聊天消息对象是一个带有标签的 RelativeLayout 和一个位于彼此顶部的图像，但无论我做什么，我都无法将其居中。我只有一个 View :

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() {

        }
    }   
}

有没有人知道为什么我无法让相对布局相应地调整大小以使其不超出屏幕范围？我尝试将其 WidthConstraint 设置为 parent.With-52 以弥补水平占用 50 个单位的头像，但我得到的是:

我现在已经被困在这个问题上至少 8 个小时了，而且我几乎没有想法。任何提示将非常感谢。这是项目的 git repo，所以如果你想测试任何东西，你可以克隆它: https://github.com/sgarcia-dev/xamarin-chat.git

任何帮助将不胜感激，如果您可以复制我想要的内容，如果它看起来很乱，请完全忽略我的代码。 (左边是一张图片，右边是带有底层图片背景的消息气泡)

Answer 1

检查这个实现

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

        var textLabel = new Label {
            Text = "Hello",
            TextColor = Color.White,
            VerticalOptions = LayoutOptions.Center,
            LineBreakMode = LineBreakMode.WordWrap
        };

        var relativeLayout = new RelativeLayout {
            BackgroundColor = Color.Navy,
//          HeightRequest = 1000
        };

        var absoluteLayout = new AbsoluteLayout { 
            VerticalOptions = LayoutOptions.Center,
            BackgroundColor = Color.Blue
        };

        var frame = new Frame {
            BackgroundColor = Color.Red
        };

        absoluteLayout.Children.Add (pic,
            new Rectangle (0, 0, 1, 1),
            AbsoluteLayoutFlags.All);

        absoluteLayout.Children.Add (textLabel,
            new Rectangle (0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize),
            AbsoluteLayoutFlags.PositionProportional);

//      textLabel.SizeChanged += (object label, EventArgs e) => {
//          relativeLayout.HeightRequest = textLabel.Height + 30;
//          absoluteLayout.HeightRequest = textLabel.Height + 30;
//      };

        relativeLayout.Children.Add (frame,
            heightConstraint: Constraint.RelativeToParent (parent => parent.Height),
            widthConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.3));

        relativeLayout.Children.Add (absoluteLayout,
            xConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.3),
            widthConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.7));


        ChatScrollViewStackLayout.Children.Add (relativeLayout);
    }

如果您需要为长文本自动调整聊天消息的高度，请取消注释所有五个注释行。