かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Xamarin.Formsでタブページを使う

TabbedPageを使うといいということみたいです。

TabbedPage内にはタブとして表示したいページを置いて行って、タブのタイトルにはPageのTitleが表示されるという動きをしています。 意外と簡単だった。

Prismを使ってNavigationPage内にTabbedPageをネストして初期表示ページを指定して画面遷移するには以下のような感じのコードでOK.

using Prism.Unity;
using PrismUnityApp14.Views;
using Xamarin.Forms;

namespace PrismUnityApp14
{
    public partial class App : PrismApplication
    {
        public App(IPlatformInitializer initializer = null) : base(initializer) { }

        protected override void OnInitialized()
        {
            InitializeComponent();

            NavigationService.NavigateAsync("NavigationPage/MainPage/AboutPage");
        }

        protected override void RegisterTypes()
        {
            this.Container.RegisterTypeForNavigation<NavigationPage>();
            this.Container.RegisterTypeForNavigation<MainPage>();
            this.Container.RegisterTypeForNavigation<HomePage>();
            this.Container.RegisterTypeForNavigation<AboutPage>();
        }
    }
}

MainPageがTabbedPageを拡張したページで以下のようなXAMLを書いています。

<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
            xmlns:Views="clr-namespace:PrismUnityApp14.Views"
            prism:ViewModelLocator.AutowireViewModel="True"
            x:Class="PrismUnityApp14.Views.MainPage"
            Title="SampleApp">
  <Views:HomePage />
  <Views:AboutPage />
</TabbedPage>

実行すると以下のような感じ。

f:id:okazuki:20161206123916p:plain

いい感じですね。

Prism.Formsで使うときの注意点

タブ切り替えではタブ内ページのViewModelで実装しているINavigationAwareのOnNavigatedFromとOnNavigatedToは動かないので、自分でどうにかしないといけない点が要注意です。

今後のバージョンで改善されるといいな(そんなIssueを見た気がする)