Xamarin.Forms の Grid レイアウトを活用するには

こんにちは。エクセルソフトの田淵です。

まだ纏まったエントリーが出てなかったっぽいので、Grid の記事を書きます。

公式ドキュメントは Grid - Xamarin です。

Grid

いわゆる表組みを提供するレイアウトコントロールです。

f:id:ytabuchi:20161230171115p:plain:w150

公式ドキュメントでこの画像で説明されてるやつですね。

この Grid はただのレイアウトで、WPF／UWP の Grid とは異なります。また、少し書き方が特殊なのでとっつきづらい方もいるかと思います。以下を参考にして下さい。

Grid の仕組み／Definitions

行／列を指定、取得する GetRow, SetRow, GetColumn, SetColumn が Attached Property として提供されていて、各コントロールに対して行／列を指定しくことで、用意した Grid の枠内にコントロールを配置していきます。

行／列のサイズは RowDefinition、ColumnDefinition を使用して指定します。指定方法には

絶対値

<RowDefinition Height="100" />

var row = new RowDefinition() { Height = new GridLength(100) };

Auto

<RowDefinition Height="Auto" />

var row = new RowDefinition() {Height = new GridLength(1, GridUnitType.Auto)};

Star

<RowDefinition Height="2.5*" />

var row = new RowDefinition() { Height = new GridLength(2.5, GridUnitType.Star) };

があります。Auto は内包するコントロールのうち、最大のものに併せてサイズが変わります。絶対値、Auto の残りのレイアウトを Star で分け合います。例えば、以下のような Defenition の場合、

gist.github.com

Row は３行ありますが、下が 200（各プラットフォームや端末で実 pixel 数は異なります。）で、残りのレイアウトを上と下で２：１のサイズに分配します。Column は２列で Auto は内包するコントロールの最大サイズに合致し、残りを * で埋める形です。下のような図になります。

f:id:ytabuchi:20161231142504p:plain:w450

Grid Spacing

Grid には Spacing のプロパティがあります。

<Grid RowSpacing="5" ColumnSpacing="5">

var grid = new Grid
{
    RowSpacing = 5,
    ColumnSpacing = 5
};

Grid 間のスペースを作りたい場合は指定します。なお、デフォルトで少し Spacing が設定されていますので、隙間なしにぴっちり埋める場合は、RowSpacing と ColumnSpacing をそれぞれ 0 に指定して下さい。

コントロールの配置

後は中にコントロールを配置していきます。Span の設定方法が C# だと少し特殊な感じがしますね。XAML では Attached Property なので各コントロールに対してそのまま Span を指定します。

gist.github.com

f:id:ytabuchi:20161231163936p:plain:w300

こんな感じに表示されます。

予め決まったレイアウトであればかなり細かく設定できますので、Grid 使ってみて下さい。

Xamarin 気になった方は

是非ダウンロードして触ってみてください。Visual Studio 2015 をご利用の方は Update 3 にアップデートする際にカスタムインストールで Xamarin を追加しましょう。学習用リソースや JXUG リンクページに参考資料を纏めてますので併せてどうぞ。

Xamarin の導入支援サービスを始めました。ベースは基本的なアプリを一緒に作ることで Xamarin を使えるようになって頂く内容ですが、ご要望に応じて講習内容のカスタマイズも可能です。詳しくは田淵までお問い合わせください(^^)

有償セミナー、トレーニング | Xamarin : XLsoft エクセルソフト

Xamarin の情報が欲しい方はこのブログも購読いただいたり、私のTwitterアカウントをフォローいただいたりすると嬉しいです。

私が所属しているエクセルソフトの宣伝を少しさせてください。弊社は開発者向けの様々なソフトウェアを扱っています。おなじみの ReSharper (JetBrains)、や Atlassian の JIRA, Confluence、Office/PDF ファイルを .NET/Java で操作するライブラリ Aspose（アスポーズ）、Windows アプリ、Web ページ、iOS/Android アプリの UI テストができる TestComplete などお勧めです(^^) また、Visual Studio Professional/Enterprise with MSDN も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば弊社ページを覗いてみてください。

以上です。