放浪軍師のアプリ開発局

Xamarin.Formsを使ってAndroid,iOS,UWP,WPFで動くアプリを開発したりしています。Unityも始めます。尚、このブログはわからないところを頑張って解決するブログであるため、正しい保証がありませんのでご注意ください。

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

始まりました放浪軍師のアプリ開発。しばらく更新が止まっていた分、加速したい。

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
f:id:roamschemer:20200520224956g:plain:w250

※実はスワイプでも 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
f:id:roamschemer:20200520225930g:plain:w250

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
f:id:roamschemer:20200520230638g:plain:w250

まとめ

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