Xamarin.Forms で Collection を使って TabbedPage を作る

Xamarin.Forms には TabbedPage というタブが搭載されたページを作成することができます。通常はこんな感じで使用します。

<?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="http://prismlibrary.com"
            prism:ViewModelLocator.AutowireViewModel="True"
            x:Class="TabbedPageCollection.Views.SingleTabbedPage">

  <ContentPage Title="Tab1">
    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
      <Label Text="Page1"/>
    </StackLayout>
  </ContentPage>

  <ContentPage Title="Tab2">
    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
      <Label Text="Page2"/>
    </StackLayout>
  </ContentPage>

  <ContentPage Title="Tab3">
    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
      <Label Text="Page3"/>
    </StackLayout>
  </ContentPage>

  <ContentPage Title="Tab2">
    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
      <Label Text="Page4"/>
    </StackLayout>
  </ContentPage>

</TabbedPage>

Android

※実はスワイプでも Tab の切り替え可能。

ただ、今回はこのやり方ではなく、 Collection で TabbedPage を作る方法を調べてみました。正直記事にする必要もないぐらい簡単だったのですが、意外にも日本語の記事がみつからなかったので残しておきます。隙間産業っていうな。

サンプル

github.com

環境

Xamarin.Forms 4.6.0.800
ReactiveProperty 7.0.1
Prism.Unity.Forms 7.2.0.1422

参考ドキュメント

docs.microsoft.com

ItemsSource に Collection を Bind すればいい

めんどくさそーだなと思ったんですがなんてことはなかった。ListView とかと同じように TabbedPage の ItemsSource に Binding するだけです。こんな感じ。

<?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="http://prismlibrary.com"
            prism:ViewModelLocator.AutowireViewModel="True"
            x:Class="TabbedPageCollection.Views.TabbedCollectionPage1"
            Title="TabbedCollectionPage1"
            ItemsSource="{Binding CategoryViewModels}">

  <TabbedPage.ItemTemplate>
    <DataTemplate>
      <ContentPage Title="{Binding Name.Value}" >
        <CollectionView ItemsSource="{Binding PersonViewModels}">
          <CollectionView.ItemTemplate>
            <DataTemplate>
              <StackLayout>
                <Entry Text="{Binding Name.Value}" />
              </StackLayout>
            </DataTemplate>
          </CollectionView.ItemTemplate>
        </CollectionView>
      </ContentPage>
    </DataTemplate>
  </TabbedPage.ItemTemplate>
  
</TabbedPage>

Android

ViewModel や Model は省略します。気になる方はサンプルをご覧ください。

二段構えにもできる

これだと Collection 以外も同時に扱いたいとき困るので、こんな風に二段構えにするといいことがあるかもしれません。

<?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="http://prismlibrary.com"
            prism:ViewModelLocator.AutowireViewModel="True"
            x:Class="TabbedPageCollection.Views.TabbedCollectionPage2"
            Title="TabbedCollectionPage2">

  <ContentPage Title="ContentPage">
    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
      <Label Text="ContentPage"/>
    </StackLayout>
  </ContentPage>

  <TabbedPage Title="TabbedPage" ItemsSource="{Binding CategoryViewModels}">
    <TabbedPage.ItemTemplate>
      <DataTemplate>
        <ContentPage Title="{Binding Name.Value}" >
          <CollectionView ItemsSource="{Binding PersonViewModels}">
            <CollectionView.ItemTemplate>
              <DataTemplate>
                <StackLayout>
                  <Entry Text="{Binding Name.Value}" />
                </StackLayout>
              </DataTemplate>
            </CollectionView.ItemTemplate>
          </CollectionView>
        </ContentPage>
      </DataTemplate>
    </TabbedPage.ItemTemplate>
  </TabbedPage>

</TabbedPage>

Android

まとめ

調べてみると思いのほか簡単って事、あるよね！