Xamarin Forms RelativeLayout：无法让 relativelayout 连续正确调整大小

Question

这是我的问题：

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

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 存储库，因此如果您想测试任何内容，您可以克隆它： 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);
    }

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

Xamarin Forms RelativeLayout：无法让 relativelayout 连续正确调整大小

XamarinForms RelativeLayout: Can't get relative layout to resize correctly in a row

c#

xamarin

xamarin-studio

xamarin.forms