Xamarin
Xamarin.Forms
Prism.Forms

Prism for Xamarin.FormsでTabbedPageを実装したので備忘録

はじめに

はじめての投稿になります。今回は、MVVMライブラリ(?)のPrismを使ってTabbedPageを実装したのでその備忘録として書こうかと思います。需要があるかはさておき、文献が少なく、あまり親切ではなかったので今後の糧くらいにはなるかと思います。

環境

Mac OS High Sierra10.13.6
Visual Studio Community 2017 for Mac
Xamarin.Forms 3.1.0.637273
Prism.DryIoc.Forms 7.0.0.396

したこと

Prismのプロジェクトを作成

ここは、他の文献と少し異なります。Windowsで作業したときには、templateパックみたいなものがあると思いますが、そもそもMacだとBlankかQuickStartしかありません。QuickStartの方はよくわからなかったので、とりあえずBlankAppを作成します。スクリーンショット 2018-07-15 1.45.32.png
今回のアプリ名は適当に「TestPrismTab」にしておきます。

App.xaml.csの書き換え

公式によると、まずApp.xaml.csのResisterTypesに書き加えないといけないみたいです。なので、もとあるものに付け加えるとこんな感じ。

protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
            containerRegistry.RegisterForNavigation<TabbedPage>();
            containerRegistry.RegisterForNavigation<NavigationPage>();
            containerRegistry.RegisterForNavigation<MainPage>();
            containerRegistry.RegisterForNavigation<HomePage>();
            containerRegistry.RegisterForNavigation<AboutPage>();
        }

まあ書くだけですね。それから上部にあるawait NavigationService.Navigationasyncも書き換えました。ここは正直あってるかわからないので教えてください。

await NavigationService.NavigateAsync("TabbedPage?createTab=HomePage&createTab=AboutPage");

MainPage.xamlの書き換え

あ、言い忘れてましたが、今回はTabbedPageでHomePageとAboutPageを切り替えます。TabbedPageはMainPageです。
ではMainPage.xamlをいじります。

MainPage.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:TestPrismTab.Views"
            prism:ViewModelLocator.AutowireViewModel="True"
            x:Class="TestPrismTab.Views.MainPage"
            Title="MainPage">
    <Views:HomePage />
    <Views:AboutPage />
</TabbedPage>

初期状態だと、コードビハインドでMainPageはContentPageかなにかを継承してるので、ここをTabbedPageに書き換えます。

HomePageとAboutPageを追加する

ここが割と厄介でここでハマりました。PrismではPageとViewModelをセットで生成してくれる、とても親切なテンプレートがあります。
それでHomePageとAboutPageを生成します。
スクリーンショット 2018-07-15 2.10.23.png
ただこれで生成してしまうと、HomePage.xamlとHomePage.xaml.cs、AboutPage.xamlとAboutPage.xaml.csがそれぞれで生成されてしまうのです。
つまり、最初に生成されていた、Mainpageのように、xamlとcsファイルが別々に生成されていました。
これがバージョンによるバグかはわかりませんが、これによってずっとxamlが見つからないよって怒られてました。
なので、一度prismにたよって生成して(ViewModelが欲しいので)、そのあと、Viewの方は削除して、新しいContentPageをXamarinの標準の方で作ってしまうのがよさそうです。
ここに関してはいい意見があったらください。

ようやくビルド

それではビルドしてみますScreenshot_20180715-021540.jpg
TabbedPageはうまく表示されていて、ちゃんとTabも切り替わります。
しかし、中のコンテンツが表示されません。
これは困りました。
ということでここで力尽きたので誰か助けてくれると助かります。
念のため、このプロジェクトは設計図共有サイトにあげておくので、ぜひ活用してください。
それでは。

参考記事

https://prismlibrary.github.io/docs/xamarin-forms/Working-With-TabbedPages.html