Xamarin

Xamarin.Forms の TabbedPage について

More than 3 years have passed since last update.

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 から参照できそうな感じがします。


App.cs

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;


こんな感じです。

スクリーンショット 2014-06-16 00.24.14.png

以上です。