こんにちは。エクセルソフトの田淵です。
TabbedPage でページ遷移したい場合、NavigationPage と組み合わせる必要があります。ただし、画面上部に NavigationBar が出てしまうので困っていました。気になったのでエントリー書きました。
2016/5/31 追記
コメントいただいたので。PushModalAsyncで Modal ダイアログを表示する場合はNavigation経由で呼び出す必要はありません。タブ使っているならケースとしては少ないかもしれませんが、タブ内でページ遷移したい場合にご利用ください。
環境
2016/5/30 時点の最新版 Xamarin.Forms 2.2.0.43 です。
TabbedPage の使い方
最初は TabbedPage です。こんな感じのやつです。
UWP では、上にタブっぽいのができるようです。
XAML で書く場合、次の手順が必要です。
- ［Forms XAML Page］を作成します。
- XAML の
<ContentPageを<TabbedPageに変更します。 - コードビハインドの
ContentPageの継承をTabbedPageに変更します。 - 別のページを読み込むには、
xmlns:local="clr-namespace:XF_TabbedPage;assembly=XF_TabbedPage"を追加しておきます。 - iOS 用にアイコンファイルが必要です。
こんな感じ。
<?xml version="1.0" encoding="utf-8" ?> <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:XF_TabbedPage;assembly=XF_TabbedPage" x:Class="XF_TabbedPage.TabbedPageXaml" Title="Xaml TabbedPage"> <TabbedPage.Padding> <OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0"/> </TabbedPage.Padding> <TabbedPage.Children> <!-- ChildrenにPageを列挙していきます。Pageを参照しても直接書いてもOK。 --> <!-- iOSにだけIconが必要で、白のアイコンでFILENAME@2xを48px、FILENAME@3xを72pxで用意します。--> <local:Page1 Icon="ic_one.png"/> <ContentPage Title="TabPage 2" Icon="ic_two.png" BackgroundColor="#eeffee"> <Label Text="Hello Tabbed Page 2!" TextColor="#666666" VerticalOptions="Center" HorizontalTextAlignment="Center"/> </ContentPage> </TabbedPage.Children> </TabbedPage>
C# の場合は次のように
public class TabbedPageCS : TabbedPage { public TabbedPageCS() { this.Title = "C# TabbedPage"; this.Padding = new Thickness(0, Device.OnPlatform(0, 20, 0), 0, 0); // ChildrenにPageを列挙していきます。Pageを参照しても直接書いてもOK。 // iOSにだけIconが必要で、白のアイコンでFILENAME@2xを48px、FILENAME@3xを72pxで用意します。 this.Children.Add(new Page1() { Title = "TabPage 1", Icon = "ic_one.png", }); this.Children.Add(new ContentPage { Title = "TabPage 2", Icon = "ic_two.png", BackgroundColor = Color.FromHex("#eeffee"), Content = new Label { Text = "Hello Tabbed Page 2!", TextColor = Color.FromHex("#666666"), VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalTextAlignment = TextAlignment.Center } }); } }
NavigationPage との組み合わせ
TabbedPage 内で Navigation したい時は各タブ内で NavigationPage 経由でページを呼び出します。
上記の3番目のタブとして、
<NavigationPage Title="TabPage 3" Icon="ic_three.png"> <x:Arguments> <local:Page3 Title="TabPage3" Icon="ic_three.png"/> </x:Arguments> </NavigationPage>
を追加します。<x:Arguments> 内に最初に呼び出すページを記載します。C# は通常と同じく NavigationPage で包みます。
this.Children.Add(new NavigationPage(new Page3()) { Title = "TabPage 3", Icon = "ic_three.png" });
例えば App で MainPage = new NavigationPage(new TabbedPage()); のように TabbedPage 全体を NavigationPage で包んでしまうと遷移した時にタブごと消えてしまうのでご注意ください。
NavigationPage の NavigationBar を消す
ただし、NavigationPage 経由でページを呼び出すと、NavigationBar が表示されてしまいます。
これを消すには、呼び出す対象ページを修正します。XAML の場合は <ContentPage NavigationPage.HasNavigationBar="False"> を、C# の場合は NavigationPage.SetHasNavigationBar(this, false); を追加すれば OK です。遷移先のページすべてでこの設定をしておかないといけませんのでご注意ください。
@muak_x さん、ありがとうございます！
@ytabuchi NavigationPage.SetHasNavigationBar(this, false); または
— かむ (@muak_x) 2016年5月30日
<ContentPage NavigationPage.HasNavigationBar="False">
だったような。
サンプルは
にアップしておきました。
Xamarin 気になった方は
是非 ダウンロード して触ってみてください。Visual Studio 2015 をご利用の方は Update 2 にアップデートする際にカスタムインストールで Xamarin を追加しましょう。 学習用リソース や JXUG リンクページ に参考資料を纏めてますので併せてどうぞ。
Xamarin の情報が欲しい方はこのブログも購読いただいたり、私のTwitterアカウントをフォローいただいたりすると嬉しいです。
私が所属している エクセルソフト の宣伝を少しさせてください。弊社は開発者向けの様々なソフトウェアを扱っています。おなじみの ReSharper (JetBrains)、 や Atlassian の JIRA, Confluence、Office/PDF ファイルを .NET/Java で操作するライブラリ Aspose（アスポーズ）、Windows アプリ、Web ページ、iOS/Android アプリの UI テストができる TestComplete などお勧めです(^^) また、Visual Studio Professional/Enterprise with MSDN も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば 弊社ページ を覗いてみてください。
以上です。
