mk-toolブログ

エンジニアと家のことをごちゃごちゃと書いてます

【Xamarin】邪道だけど試してみる

自分で初期状態のプロジェクトをぐちゃぐちゃいじることでXamarinに触れていこうと思います。

まず、プロジェクトを作ったばかりの状態で実行をすると以下のような画面になります。
f:id:gamushiroS:20160511162252p:plain

この状態にいろいろ部品を付けていきたいと思います。
その際に、共通化されているプロジェクトの中の「project名.cs」というファイルを見てみると以下のようになっています。
(Appメソッドだけを抜き出し)

		public App ()
		{
			// The root page of your application
			MainPage = new ContentPage {
				Content = new StackLayout {
					VerticalOptions = LayoutOptions.Center,
					Children = {
						new Label {
							XAlign = TextAlignment.Center,
							Text = "Welcome to Xamarin Forms!"
						}
					}
				}
			};
		}

ここで画面の基本的な設定を行っているため、ここに対していろいろと書き込んでいきます。

まず、ボタンの追加です。

		public App ()
		{
			// The root page of your application
			MainPage = new ContentPage {
				Content = new StackLayout {
					VerticalOptions = LayoutOptions.Center,
					Children = {
						new Label {
							XAlign = TextAlignment.Center,
							Text = "Welcome to Xamarin Forms!"
						},
						new Button {
							Text = "Click Me!",
							Font = Font.SystemFontOfSize(NamedSize.Large),
							BorderWidth = 1,
							HorizontalOptions = LayoutOptions.Center,
							VerticalOptions = LayoutOptions.CenterAndExpand
						}
					}
				}
			};
		}

new Labelに羅列する形でカンマ区切りでnew Button{いろいろ設定}を行います。
このような設定値を選択した理由はdocumentに書いてあったからだけです。
そのようにすると以下のような画面になります。

f:id:gamushiroS:20160511162945p:plain

ボタンが付きましたね!

追加の仕方がわかったところで、このメソッドないで「Content = new StackLayout」という文があります。
このStackLayoutというのはXamarin.Formsのレイアウトクラスの1つのようです(全部で7種類ある)。
スタックレイアウトは、子要素を縦(デフォルト)または横に並べるレイアウトらしく、このサイトが非常にためになります。
今回のカンマ区切りでボタンをつけた際にラベルの下に追加されたのもこれで納得ですね。