Xamarin.Forms の TabbedPage について

Xamarin.Forms のタブページについて調べましたので備忘録として残します。

タブページの実装方法は Xamarin のサンプル Form Gallery の TabbedPageDemoPage のように ItemSource, ItemTemplate を使用する方法と、 以下のサンプルのように TabbedPage を new して、Children にそれぞれのページを指定する方法があるようです。

iOS プロジェクトの Resources/xxx.png を配置し、各ページの Icon Property にファイル名を指定すると iOS のタブのアイコンになります。png のサイズは良く分かっていませんが、30px だとちょうどいい感じでした。(iOS は 40px が普通ですかね？)

なお、この画像リソースは同じファイルを Android プロジェクトの Resources/drawable/xxx.png に配置しておけば PCL から参照できそうな感じがします。

using Xamarin.Forms;

public static Page GetMainPage ()
{   

    var tabPage1 = new ContentPage () { 
        Title = "Page 1",
        Icon = "1.png",
        Content = new Label { 
            Text = "Page 1 Label",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center,
        },
    };

    var label = new Label { 
        Text = "Page 2 Label",
        TextColor = Color.White,
        HorizontalOptions = LayoutOptions.Center,
    };

    var button = new Button {
        Text = "Page Name",
        HorizontalOptions = LayoutOptions.CenterAndExpand,
    };

    var tabPage2 = new ContentPage () { 
        Title = "Page 2",
        Icon = "2.png",
        Content = new StackLayout {
            Children = {
                label,
                button,
            },
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center,
        },
        BackgroundColor = Color.FromHex("666666"),
    };

    var mainPage = new TabbedPage { 
        Children = {
            tabPage1,
            tabPage2,
        },
    };

    button.Clicked += (sender, e) => {
        mainPage.DisplayAlert("Alert Title", mainPage.CurrentPage.Title + " is selected.", "OK", "Cancel");
    };

    return mainPage;

こんな感じです。

以上です。