TabbedPage

  • [アーティクル]

.NET MAUI TabbedPage.

.NET マルチプラットフォーム アプリ UI (.NET MAUI) TabbedPage メイン型Pageの子のコレクションが含まれ、そのうちの 1 つだけが一度に完全に表示されます。 各子は、ページの上部または下部にある一連のタブによって識別されます。 通常、各子は a ContentPage になり、そのタブが選択されると、ページコンテンツが表示されます。

TabbedPage は次の特性を定義します。

  • BarBackgroundは、タブ Brushバーの背景を定義します。
  • BarBackgroundColorは Color、タブ バーの背景色を定義します。
  • BarTextColorは、 Colorタブ バーのテキストの色を表します。
  • SelectedTabColor( 型 Color) は、選択されているタブの色を示します。
  • UnselectedTabColorは、 Color選択されていないタブの色を表します。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

タブのタイトルは子ページの Page.Title プロパティによって定義され、タブ アイコンは子ページのプロパティによって Page.IconImageSource 定義されます。

TabbedPage では、TabbedPage の構築時に各 Page オブジェクトが作成されます。 これにより、特にアプリのルート ページである場合に、ユーザー エクスペリエンスが低下する可能性 TabbedPage があります。 ただし、.NET MAUI Shell を使用すると、ナビゲーションに応じて、タブ バーからアクセスするページをオンデマンドで作成できます。 シェル アプリの詳細については、「シェル」を参照してください。

警告

TabbedPage は .NET MAUI Shell アプリと互換性がありません。シェル アプリで使用 TabbedPage しようとすると例外がスローされます。

TabbedPage を作成する

TabbedPage を作成するには、次の 2 つの方法を使用することができます。

重要

A TabbedPage には、オブジェクトのみを設定NavigationPageContentPageする必要があります。

アプローチに関係なく、a TabbedPage 内のタブ バーの場所はプラットフォームに依存します。

  • iOS では、タブの一覧が画面の下部に表示され、ページの内容が上に表示されます。 各タブは、タイトルとアイコンで構成されます。 縦長の向きでは、タブ バーのアイコンがタブ タイトルの上に表示されます。 横長の向きでは、アイコンとタイトルが横に並んで表示されます。 また、デバイスと向きに応じて、ノーマルまたはコンパクトなタブ バーが表示される場合があります。 6 個以上のタブがある場合、[その他] タブが表示され、これを使用して追加のタブにアクセスできます。
  • Android では、タブの一覧が画面の上部に表示され、ページの内容が下に表示されます。 各タブは、タイトルとアイコンで構成されます。 タブは、プラットフォーム固有で画面の下部に移動できます。 6 個以上のタブがあり、画面の下部にタブ リストがある場合、[その他] タブが表示され、これを使用して追加のタブにアクセスできます。 タブを画面の下部に移動する方法については、「Android での TabbedPage ツール バーの配置」を参照してください。
  • Windows では、タブの一覧が画面の上部に表示され、ページの内容が下に表示されます。 各タブは、タイトルで構成されます。

ページ コレクションを使って TabbedPage を作成する

A TabbedPage には、通常ContentPageはオブジェクトである子Pageオブジェクトのコレクションを設定できます。 これは、オブジェクトを次の子として追加 ContentPage することによって実現されます TabbedPage。

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageWithNavigationPage"
            x:Class="TabbedPageWithNavigationPage.MainPage">
    <local:TodayPage />
    <local:SchedulePage />
    <local:SettingsPage />
</TabbedPage>

Page の子要素 TabbedPage として追加されるオブジェクトがコレクションに Children 追加されます。 TabbedPage の派生元である、MultiPage<T> クラスの Children プロパティは、MultiPage<T> の ContentProperty です。 そのため、XAML では、Page オブジェクトを Children プロパティに明示的に割り当てる必要はありません。

次のスクリーンショットは、結果のタブ バーの外観を TabbedPage示しています。

.NET MAUI tab bar on a TabbedPage.

タブが選択されると、タブのページ コンテンツが表示されます。

TabbedPage に DataTemplate を設定する

TabbedPageは、ItemsSourceクラスからMultiPage<T>バインドItemTemplate可能なプロパティをSelectedItem継承します。 これらのプロパティを使用すると、データ バインディングに適したパブリック プロパティを持つオブジェクトのコレクションにIEnumerableプロパティを設定ItemsSourceし、プロパティをItemTemplateルート要素としてページ型を持つ a DataTemplate に設定することで、子を動的に生成TabbedPageできます。

次の例は、子を動的に生成する方法を TabbedPage 示しています。

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageDemo"
            x:Class="TabbedPageDemo.MainPage"
            ItemsSource="{x:Static local:MonkeyDataModel.All}">
    <TabbedPage.ItemTemplate>
        <DataTemplate>
            <ContentPage Title="{Binding Name}"
                         IconImageSource="monkeyicon.png">
                <StackLayout Padding="5, 25">
                    <Label Text="{Binding Name}"
                           FontAttributes="Bold"
                           FontSize="18"
                           HorizontalOptions="Center" />
                    <Image Source="{Binding PhotoUrl}"
                           HorizontalOptions="Center"
                           WidthRequest="200"
                           HeightRequest="200" />
                    <StackLayout Padding="50, 10">
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Family: "
                                   FontAttributes="Bold" />
                            <Label Text="{Binding Family}" />
                        </StackLayout>
                        ...
                    </StackLayout>
                </StackLayout>
            </ContentPage>
        </DataTemplate>
    </TabbedPage.ItemTemplate>
</TabbedPage>

この例では、各タブは、Image および Label オブジェクトを使用してタブのデータを表示する ContentPage オブジェクトで構成されています。

Screenshot of a .NET MAUI TabbedPage.

ナビゲーションは、オブジェクトがオブジェクトにラップされている場合 ContentPage に、タブ内で NavigationPage 実行できます。

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageWithNavigationPage"
            x:Class="TabbedPageWithNavigationPage.MainPage">
    <local:TodayPage />
    <NavigationPage Title="Schedule"
                    IconImageSource="schedule.png">
        <x:Arguments>
            <local:SchedulePage />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

この例では、TabbedPage に 2 つの Page オブジェクトが設定されています。 最初の子はオブジェクトでありContentPage、2 番目の子はオブジェクトをNavigationPageContentPage含むオブジェクトです。

a ContentPage がラップされているNavigationPage場合は、オブジェクトのプロパティに対してメソッドをPushAsync呼び出すことによって、転送ページナビゲーションをContentPageNavigation実行できます。

await Navigation.PushAsync(new UpcomingAppointmentsPage());

クラスを使用してNavigationPageナビゲーションを実行する方法の詳細については、「NavigationPage」を参照してください。

警告

NavigationPage を TabbedPage に配置することはできますが、TabbedPage を NavigationPage に配置することはお勧めしません。