7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Xamarinの共通コードでとりあえずボタンを置いたり、アラートを出したり

Posted at

ボタン置いたり、押したらアラート出るようにしようぜ!

Xamarin Studioで、少しアプリらしいことしたい

インストールや、動作確認方法は、下の記事で紹介しました。
Mac + Xamarin Studioで、クロスプラットフォーム開発環境を試す

今回は**もう少しアプリっぽいことしようぜ!**ということで、

  1. ラベルを追加してみる
  2. ボタンを置いてみる
  3. ボタンを押したらアラート出るようにしてみる
    以上を試します。

##1. ラベルを追加してみようぜ

Xamarin Form(Xamarin.Forms)の、共通コードのcsファイルの内容は、
以下のような感じだと思います。

test1.cs
using System;

using Xamarin.Forms;

namespace test1
{
	public class App : Application
	{
		public App()
		{
			// The root page of your application
			 new ContentPage
			{
				Title = "helloxamarin",
				Content = new StackLayout
				{
					VerticalOptions = LayoutOptions.Center,
					Children = {
						new Label {
							HorizontalTextAlignment = TextAlignment.Center,
							Text = "Welcome to Xamarin Forms!"
						}
					}
				},

			};

			MainPage = new NavigationPage(content);
		}
	}

/* 略 */	
}

なんとなくわかるとは思うのですが、要素の追加するには、
ContentPage内部のStackLayoutの、
Childrenに、要素を追記することで可能です。

test1.cs
/* 略 */
		private Label label1; // label1を定義
		public App()
		{

			label1 = new Label // label1を初期化
			{
				Text = "一個目のラベル",
				BackgroundColor = Color.Red,
				FontSize = 20,
			};
/* 略 */
					Children = {
						new Label {
							HorizontalTextAlignment = TextAlignment.Center,
							Text = "Welcome to Xamarin Forms!"
						},
						label1, // ここに追記
					}
			MainPage = new NavigationPage(content);
		}
/* 略 */

2. ボタンを追加するぜ

殆ど同じですので、コードのみ

test1.cs
/* 略 */
		private Label label1;
		private Button button1;
		public App()
		{
			label1 = new Label
			{
				Text = "一個目のラベル",
				BackgroundColor = Color.Red,
				FontSize = 20,
			};
			button1 = new Button { // button1初期化
				Text = "button" ,
			};

/* 略 */
					Children = {
						new Label {
							HorizontalTextAlignment = TextAlignment.Center,
							Text = "Welcome to Xamarin Forms!"
						},
						label1,
						button1, // 追記
/* 略 */

3. タップ→アラートだぜ

ボタンのクリックイベントを拾う

イベントの追加には、下記の様にしてやればいいです。
(一旦、ラベルの色を変更するサンプルです)

test1.cs
		button1.Clicked += delegate // button1はButtonインスタンス
		{
				label1.TextColor = Color.Aqua;
		};

Buttonには、Clickedというパラメータがあり、そこにdelegateを追加しています。
delegateは、なんとなく、Javaのラムダをイメージしてもらえればよいかと思います。
(delegateは型であったりと、厳密には異なります)
詳しくはMSDNのこちらを参考に...

アラートを鳴らすには、ContentPageクラスに実装されている
DisplayAlert()を叩けばよいです。
今回の場合、Buttonインスタンスを生成した後、ContentPageインスタンスを作成しています。
そのため、少しわかりづらいのですが、
content(ContentPage) の初期化後に、イベントを定義する事になります。

test1.cs
/* 略 */
			button1 = new Button {
				Text = "button" ,
			};

			// The root page of your application
			var content = new ContentPage
			{
				Title = "helloxamarin",
				Content = new StackLayout
				{
					VerticalOptions = LayoutOptions.Center,
					Children = {
						new Label {
							HorizontalTextAlignment = TextAlignment.Center,
							Text = "Welcome to Xamarin Forms!"
						},
						label1,
						button1,
					}
				},

			};
// これ以降でイベントの定義
			button1.Clicked += delegate
			{
				label1.TextColor = Color.Aqua;
				content.DisplayAlert("これはタイトルです", "これは表示するメッセージです", "はい");
			};

			MainPage = new NavigationPage(content);
/* 略 */

これで、クリックイベントを拾って、アラートを出せる様になった。はず。

7
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?