RelativeLayoutでBoxViewの中央にLabelを設置したい[Xamarin.Forms]

Question

###発生している問題
BoxViewの上にLabelを設置するRelativeLayoutを作成したいのですが、RelativeLayoutのView設置の基準点が左上になっているため、大きさの変化するLabelを常にBoxViewの中央に設置することができません。

	public class TestPage : ContentPage
	{
		public TestPage()
		{
			var boxView = new BoxView { WidthRequest = 100, HeightRequest = 100, Color = Color.Aqua};
			var label = new Label { FontSize = 30, TextColor = Color.White };
			var slider = new Slider { Minimum = 0, Maximum = 100 };
			slider.ValueChanged += (sender, e) => { label.Text = ((int)slider.Value).ToString(); };

			var rl = new RelativeLayout();
			rl.Children.Add(
				boxView,
				Constraint.Constant(0),
				Constraint.Constant(0));
			rl.Children.Add(
				label,
				Constraint.RelativeToView(boxView, (parent, sibling) => boxView.Width / 2 - label.Width / 2),
				Constraint.RelativeToView(boxView, (parent, sibling) => boxView.Height / 2 - label.Height / 2));

			Content = new StackLayout { Children = { rl, slider } };
		}
	}

LabelのWidthとHeightから位置を調整したのですが、画像のようにLabelの大きさが変化した際に反映されませんでした(水色の部分がBoxView、数値を表示しているのがLabel)。

その後Labelの大きさが変化せずに内容だけ変化した場合は、中央に移動してくれました。

###回答してほしいこと
RelativeLayoutに限らなくても良いので、大きさが変化しても常に中央に設置する方法を教えてください。

Answer 1

BoxViewとLabelを個別にレイアウトするよりも、ContentViewで一纏めにして扱う方が簡単かと思います。

var boxView = new BoxView
{
    Color = Color.Aqua,
    // 親Viewいっぱいのサイズ
    HorizontalOptions = LayoutOptions.Fill,
    VerticalOptions = LayoutOptions.Fill,
};

var label = new Label
{
    FontSize = 30,
    TextColor = Color.White,
    // 親Viewいっぱいのサイズ
    HorizontalOptions = LayoutOptions.Fill,
    VerticalOptions = LayoutOptions.Fill,
    // 文字列は中央揃え
    VerticalTextAlignment = TextAlignment.Center,
    HorizontalTextAlignment = TextAlignment.Center,
    // 余白をとりたい場合はMarginを使う
    //Margin = new Thickness(5),
};

var boxLabel = new ContentView
{
    WidthRequest = 100,
    HeightRequest = 100,
    // GridでBoxViewとLabelを重ねる
    Content = new Grid
    {
        Children = {
            boxView,
            label,
        },
    },
};

Comments

[shiita]

回答ありがとうございます。P3PPPさんのブログには何度も助けてもらってます。
Gridって要素を重ねることができるんですね。無事解決しました。

Answer 2

HorizontalOptionsを設定してみてはいかがでしょうか？
横いっぱいにFillしてExpandする方法があるはず…

で、Labelに表示するテキストを中央にすれば、ご要望の動作をするのではないでしょうか。

(すみません、実機検証出来る状態にないので、もしかしたらダメかもしれません…間違っていたらごめんなさい。)

Comments

[shiita]

質問の仕方が悪かったですね、ごめんなさい。
水色の部分がBoxViewで、数値だけを表示しているのがLabelです。
BoxViewに対するLabelの相対座標の求め方についてなので、LayoutOprionsは関係ないです。