【Xamarin.Forms】RelativeLayoutで中央に配置する

RelativeLayout の子要素に XConstraint , YConstraint Attached Property をセットすることでレイアウト位置を調整できます。 これはXY座標、つまり左上原点の指定となるため中央に配置するには一手間必要です。(AbsoluteLayoutの場合はいい感じに中央配置しれくるんですけどねー)

サイズ固定の場合

<ActivityIndicator 
    HeightRequest="44"
    WidthRequest="44"
    RelativeLayout.XConstraint =
    "{ConstraintExpression Type=RelativeToParent,
        Property=Width, Factor=0.5, Constant=-22}"
    RelativeLayout.YConstraint =
    "{ConstraintExpression Type=RelativeToParent,
        Property=Height, Factor=0.5, Constant-22}" />

Factor=0.5 指定でViewの左上がRelativeLayoutの中央となるので Constant=-22 で幅高さの半分ずらす。

内容によってサイズが変わる場合

<Label
    x:Name="button"
    Text="{Binding Hoge}" 
    RelativeLayout.XConstraint =
    "{ConstraintExpression Type=RelativeToParent,
        Property=Width, Factor=0.5}"
    RelativeLayout.YConstraint =
    "{ConstraintExpression Type=RelativeToParent,
        Property=Height, Factor=0.5}" />

// Pageのコンストラクタ

InitializeComponent ();
// 中央揃えに見せるトリック
button.SizeChanged += (sender, e) => {
    button.TranslationX = -(button.Width / 2);
    button.TranslationY = -(button.Height / 2);
};

C#側でSizeChangedイベントをハンドリングし、TranslationX / Y を幅高さの半分ずらす。 XAMLで完結させたい場合は、この処理をBehaviorにまとめる。

そもそも

RelativeLayoutへの追加、Constraintの設定を全てC#で行えば問題なく中央に配置できる。(Constraint設定時に座標を返す式を渡すため)