Xamarin.Froms AbsoluteLayout レイアウト中心・左上・右上・左下・右下

AbsoluteLayout を使うと画像の上にボタンやラベルといったコントロールを重ねることができデバイスサイズや縦横に関わらず View の中心に配置したり非常に簡単に書けますのでお勧めです。絶対座標を計算しなくても良いので助かります。

ファイル --> 新規作成 --> プロジェクト(P)... --> Cross-Platform --> Xamarin-Forms で作成
AbsoluteLayout01

HomePage.cs 追加

HomePage.cs Code例

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace AbsoluteLayout01
{
public partial class HomePage : ContentPage
{
public HomePage()
{
//InitializeComponent();

BackgroundColor = Color.Blue;

AbsoluteLayout absoluteLayout = new AbsoluteLayout
{
VerticalOptions = LayoutOptions.FillAndExpand
};

// Labelを生成する
Label label = new Label
{
Text = "中心",
FontSize = 40,
TextColor = Color.Yellow,
};

// Labelを生成する
Label label1 = new Label
{
Text = "左上",
FontSize = 40,
TextColor = Color.Yellow,
};

// Labelを生成する
Label label2 = new Label
{
Text = "右上",
FontSize = 40,
TextColor = Color.Yellow,
};

// Labelを生成する
Label label3 = new Label
{
Text = "左下",
FontSize = 40,
TextColor = Color.Yellow,
};

// Labelを生成する
Label label4 = new Label
{
Text = "右下",
FontSize = 40,
TextColor = Color.Yellow,
};

// ラベルを配置
absoluteLayout.Children.Add(label); // 中心
absoluteLayout.Children.Add(label1); // 左上
absoluteLayout.Children.Add(label2); // 右上
absoluteLayout.Children.Add(label3); // 左下
absoluteLayout.Children.Add(label4); // 右下

// 中心
AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// 左上
AbsoluteLayout.SetLayoutFlags(label1, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label1, new Rectangle(0, 0, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// 右上
AbsoluteLayout.SetLayoutFlags(label2, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label2, new Rectangle(1, 0, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// 左下
AbsoluteLayout.SetLayoutFlags(label3, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label3, new Rectangle(0, 1, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// 右下
AbsoluteLayout.SetLayoutFlags(label4, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label4, new Rectangle(1, 1, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// absoluteLayoutを配置
Content = absoluteLayout;
}
}
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace AbsoluteLayout01
{
public partial class Page1 : ContentPage
{
public Page1()
{
//InitializeComponent();

BackgroundColor = Color.Blue;

AbsoluteLayout absoluteLayout = new AbsoluteLayout
{
VerticalOptions = LayoutOptions.FillAndExpand
};

// Labelを生成する
Label label = new Label
{
Text = "中心(0.5,0.5)",
FontSize = 22,
TextColor = Color.Yellow,
};

// Labelを生成する
Label label1 = new Label
{
Text = "左上(0,0)",
FontSize = 24,
TextColor = Color.Yellow,
};

// Labelを生成する
Label label2 = new Label
{
Text = "右上(1,0)",
FontSize = 24,
TextColor = Color.Yellow,
};

// Labelを生成する
Label label3 = new Label
{
Text = "左下(0,1)",
FontSize = 24,
TextColor = Color.Yellow,
};

// Labelを生成する
Label label4 = new Label
{
Text = "右下(1,1)",
FontSize = 24,
TextColor = Color.Yellow,
};

// Labelを生成する
Label label01 = new Label
{
Text = "上(0.5,0)",
FontSize = 24,
TextColor = Color.Yellow,
};

// Labelを生成する
Label label02 = new Label
{
Text = "左中心(0,0.5)",
FontSize = 22,
TextColor = Color.Yellow,
};

// Labelを生成する
Label label03 = new Label
{
Text = "右中心(1,0.5)",
FontSize = 22,
TextColor = Color.Yellow,
};

// Labelを生成する
Label label04 = new Label
{
Text = "下(0.5,1)",
FontSize = 24,
TextColor = Color.Yellow,
};

// ラベルを配置
absoluteLayout.Children.Add(label); // 中心
absoluteLayout.Children.Add(label1); // 左上
absoluteLayout.Children.Add(label2); // 右上
absoluteLayout.Children.Add(label3); // 左下
absoluteLayout.Children.Add(label4); // 右下

absoluteLayout.Children.Add(label01); // 上
absoluteLayout.Children.Add(label02); // 左中心
absoluteLayout.Children.Add(label03); // 右中心
absoluteLayout.Children.Add(label04); // 下

// 左上
AbsoluteLayout.SetLayoutFlags(label1, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label1, new Rectangle(0, 0, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// 上
AbsoluteLayout.SetLayoutFlags(label01, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label01, new Rectangle(0.5, 0, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// 右上
AbsoluteLayout.SetLayoutFlags(label2, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label2, new Rectangle(1, 0, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// 左中心
AbsoluteLayout.SetLayoutFlags(label02, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label02, new Rectangle(0, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// 中心
AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// 右中心
AbsoluteLayout.SetLayoutFlags(label03, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label03, new Rectangle(1, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// 左下
AbsoluteLayout.SetLayoutFlags(label3, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label3, new Rectangle(0, 1, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// 下
AbsoluteLayout.SetLayoutFlags(label04, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label04, new Rectangle(0.5, 1, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// 右下
AbsoluteLayout.SetLayoutFlags(label4, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(label4, new Rectangle(1, 1, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// absoluteLayoutを配置
Content = absoluteLayout;
}
}
}