読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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を見た気がする)