ボタン置いたり、押したらアラート出るようにしようぜ!
Xamarin Studioで、少しアプリらしいことしたい
インストールや、動作確認方法は、下の記事で紹介しました。
Mac + Xamarin Studioで、クロスプラットフォーム開発環境を試す
今回は**もう少しアプリっぽいことしようぜ!**ということで、
- ラベルを追加してみる
- ボタンを置いてみる
- ボタンを押したらアラート出るようにしてみる
以上を試します。
##1. ラベルを追加してみようぜ
Xamarin Form(Xamarin.Forms)の、共通コードの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に、要素を追記することで可能です。
/* 略 */
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. ボタンを追加するぜ
殆ど同じですので、コードのみ
/* 略 */
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. タップ→アラートだぜ
ボタンのクリックイベントを拾う
イベントの追加には、下記の様にしてやればいいです。
(一旦、ラベルの色を変更するサンプルです)
button1.Clicked += delegate // button1はButtonインスタンス
{
label1.TextColor = Color.Aqua;
};
Buttonには、Clickedというパラメータがあり、そこにdelegateを追加しています。
delegateは、なんとなく、Javaのラムダをイメージしてもらえればよいかと思います。
(delegateは型であったりと、厳密には異なります)
詳しくはMSDNのこちらを参考に...
アラートを鳴らすには、ContentPageクラスに実装されている
DisplayAlert()
を叩けばよいです。
今回の場合、Buttonインスタンスを生成した後、ContentPageインスタンスを作成しています。
そのため、少しわかりづらいのですが、
content(ContentPage) の初期化後に、イベントを定義する事になります。
/* 略 */
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);
/* 略 */
これで、クリックイベントを拾って、アラートを出せる様になった。はず。