XamarinForms的RelativeLayout：無法獲取相對佈局在一行

Question

這裏正確調整大小是我的問題：

紅塊，就是要了一段時間的人的頭像，和藍色氣球聊天消息。聊天消息對象是一個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() { 

     } 
    } 
} 

沒有人有任何想法，爲什麼我不能得到相對佈局進行相應調整，因此不出去的屏幕的範圍是多少？我想它的WidthConstraint設置parent.With-52彌補化身佔用50個單位的水平，而是我得到這個：

我一直停留在此爲至少8小時，現在，我幾乎沒有想法。任何提示將非常感謝。下面是該項目的混帳回購協議，所以你可以克隆它，如果你想測試什麼： 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); 
    } 

如果你需要長時間文本自動調整聊天消息的高度取消所有五條評論線的評論。