C#Xamarin.Formsでスマホ開発#19 LoadとCloseに代わるもの

ページイベントに関して
実装例
PageEventPageの追加
コードビハインド側の実装
実行

ページイベントに関して

今回はページのイベントに関して少しだけ解説します。ページの起動時と終了時のイベントです。WindowsFormsなどでは起動時はLoadイベントがあり，終了時はClosedなどのイベントがありましたがXamarinではそのような名前のものはありません。Xamarinでそれらに代わるものとして，起動時は「Appearing」，終了時は「Disappearing」というものになります。全然名前が違うので驚いてしまいますよね。出現と消滅というような意味のようです。発音も難しいですが「アピアリング」と「ディサピアリング」という感じの発音かと思います。

実装例

検証用のページをPageEventPageという名前で作成します。その前にそのページを呼び出す実装をMenuPageにします。メニューから呼び出さずに，この機能を単体で確認したければ， PageEventPageを直接起動画面にしたり，適当なボタンを設置してクリックイベントでPageEventPageを呼び出してもOKです。

using System.Collections.Generic;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using XSample.Objects;

namespace XSample.Pages
{
	[XamlCompilation(XamlCompilationOptions.Compile)]
	public partial class MenuPage : ContentPage
	{
		public MenuPage ()
		{
			InitializeComponent ();

            var items = new List<MenuDto>();
            items.Add(new MenuDto("CarouselMainPage", "カルーセルページ：左右にスワイプしてページを移動する", "mail.png"));
            items.Add(new MenuDto("MessageBoxPage", "メッセージの表示", "mail.png"));
            items.Add(new MenuDto("DisplayActionSheetPage", "選択リストから選べる問い合わせ", "mail.png"));
            items.Add(new MenuDto("DeviceSwichPage", "デバイスごとの切り替え", "mail.png"));
            items.Add(new MenuDto("PageEventPage", "LoadとCloseに代わるもの", "mail.png"));
            MyListView.ItemsSource = items; 
        }

        private void MyListView_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            var item = e.Item as MenuDto;
            if (item.Title == "CarouselMainPage")
            {
                Navigation.PushAsync(new CarouselMainPage());
            }
            else if (item.Title == "MessageBoxPage")
            {
                Navigation.PushAsync(new MessageBoxPage());
            }
            else if (item.Title == "DisplayActionSheetPage")
            {
                Navigation.PushAsync(new DisplayActionSheetPage());
            }
            else if (item.Title == "DeviceSwichPage")
            {
                Navigation.PushAsync(new DeviceSwichPage());
            }
            else if (item.Title == "PageEventPage")
            {
                Navigation.PushAsync(new PageEventPage());
            }
        }
    }
}

using System.Collections.Generic;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

using XSample.Objects;

namespace XSample.Pages

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class MenuPage : ContentPage

{

public MenuPage ()

{

InitializeComponent ();

var items = new List<MenuDto>();

items.Add(new MenuDto("CarouselMainPage", "カルーセルページ：左右にスワイプしてページを移動する", "mail.png"));

items.Add(new MenuDto("MessageBoxPage", "メッセージの表示", "mail.png"));

items.Add(new MenuDto("DisplayActionSheetPage", "選択リストから選べる問い合わせ", "mail.png"));

items.Add(new MenuDto("DeviceSwichPage", "デバイスごとの切り替え", "mail.png"));

items.Add(new MenuDto("PageEventPage", "LoadとCloseに代わるもの", "mail.png"));

MyListView.ItemsSource = items;

}

private void MyListView_ItemTapped(object sender, ItemTappedEventArgs e)

{

var item = e.Item as MenuDto;

if (item.Title == "CarouselMainPage")

{

Navigation.PushAsync(new CarouselMainPage());

}

else if (item.Title == "MessageBoxPage")

{

Navigation.PushAsync(new MessageBoxPage());

}

else if (item.Title == "DisplayActionSheetPage")

{

Navigation.PushAsync(new DisplayActionSheetPage());

}

else if (item.Title == "DeviceSwichPage")

{

Navigation.PushAsync(new DeviceSwichPage());

}

else if (item.Title == "PageEventPage")

{

Navigation.PushAsync(new PageEventPage());

}

PageEventPageの追加

PageEventPageを追加します。新規追加でコンテンツページを作成してください。デフォルトで作成される「ようこそザマリン」ラベルはそのままにしておいて実装していきましょう。実装する場所は，最初のContentPageの行からずらずらっと名前空間なんかが書かれている場所の一番最後を改行してAppearingとDisappearingイベントを追加します。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XSample.Pages.PageEventPage"
             Appearing="ContentPage_Appearing"
             Disappearing="ContentPage_Disappearing">
    <ContentPage.Content>
        <StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="XSample.Pages.PageEventPage"

Appearing="ContentPage_Appearing"

Disappearing="ContentPage_Disappearing">

<ContentPage.Content>

</StackLayout>

</ContentPage.Content>

</ContentPage>

コードビハインド側の実装

コードビハインド側のAppearingとDisappearingイベントでDisplayAlertを実装し，実際にイベントが発生するタイミングを実験してみましょう。

using System;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XSample.Pages
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class PageEventPage : ContentPage
    {
        public PageEventPage()
        {
            InitializeComponent();
        }

        private async void ContentPage_Appearing(object sender, EventArgs e)
        {
            await DisplayAlert("ContentPage_Appearing", "起動時", "OK");
        }

        private async void ContentPage_Disappearing(object sender, EventArgs e)
        {
            await DisplayAlert("ContentPage_Disappearing", "終了時", "OK");
        }
    }
}

using System;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

namespace XSample.Pages

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class PageEventPage : ContentPage

{

public PageEventPage()

{

InitializeComponent();

}

private async void ContentPage_Appearing(object sender, EventArgs e)

{

await DisplayAlert("ContentPage_Appearing", "起動時", "OK");

}

private async void ContentPage_Disappearing(object sender, EventArgs e)

{

await DisplayAlert("ContentPage_Disappearing", "終了時", "OK");

}

実行

起動時と終了時にそれぞれイベントが発生しているのが確認できると思います。

Xamarin.Formsでスマホアプリ開発

C#を正しい3層構造で造れてますか？

非売品コースを受け取る