.NET の [MAUI Shell] タブ

サンプルを参照します。サンプルを参照する

.NET マルチプラットフォームアプリ UI (.NET MAUI) シェルによって提供されるナビゲーションエクスペリエンスは、ポップアップとタブに基づいています。シェルアプリのナビゲーションの最上位レベルは、アプリのナビゲーション要件に応じて、ポップアップまたは下部タブバーのいずれかです。アプリのナビゲーションエクスペリエンスが下部タブで始まる場合、サブクラス化された Shell オブジェクトの子は、下部のタブバーを表す TabBar オブジェクトである必要があります。

TabBar オブジェクトには 1 つ以上のTab オブジェクトを含めることができます。各Tab オブジェクトは、下部のタブバーのタブを表します。各 Tab オブジェクトには 1 つ以上の ShellContent オブジェクトを含めることができます。各 ShellContent オブジェクトには 1 つの ContentPageが表示されます。 ShellContent オブジェクトに複数のTab オブジェクトが存在する場合、ContentPage オブジェクトは上部のタブでナビゲートできます。タブ内で、詳細ページと呼ばれる他の ContentPage オブジェクトに移動できます。

Important

TabBarの種類では、ポップアップが無効になります。

ヒント

複数の ShellContent オブジェクトを FlyoutItem オブジェクトまたは Tab オブジェクトに追加することで、ポップアップと共にタブを表示できます。詳細については、「 .NET MAUI Shell ポップアップ」を参照してください。

1 ページ

Tab オブジェクトにTabBar オブジェクトを追加することで、単一ページのシェルアプリを作成できます。 Tab オブジェクト内では、ShellContent オブジェクトを ContentPage オブジェクトに設定する必要があります。

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </TabBar>
</Shell>

この例では、次のシングルページアプリが作成されます。

シェルシングルページアプリのスクリーンショット。

シェルには暗黙的な変換演算子があり、ビジュアルツリーにビューを追加することなく、シェルのビジュアル階層を簡略化できます。サブクラス化されたShell オブジェクトには、FlyoutItem オブジェクトまたはTabBar オブジェクトのみを含めることができるため、この簡略化は可能です。このオブジェクトには、Tab オブジェクトのみを含めることができるShellContentオブジェクトのみを含めることができます。これらの暗黙的な変換演算子を使用して、前の例から Tab オブジェクトを削除できます。

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
    </Tab>
</Shell>

この暗黙的な変換により、 ShellContent オブジェクトが Tab オブジェクトに自動的にラップされ、 TabBar オブジェクトにラップされます。

Important

シェルアプリでは、ナビゲーションに応じてページがオンデマンドで作成されます。これを行うには、DataTemplateマークアップ拡張機能を使用して、各ContentTemplate オブジェクトのShellContent プロパティをContentPage オブジェクトに設定します。

下部タブ

1 つのTab オブジェクトに複数のTabBar オブジェクトがある場合、Tab オブジェクトは下部タブとしてレンダリングされます。

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab Title="Cats"
            Icon="cat.png">
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
       <Tab Title="Dogs"
            Icon="dog.png">
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </TabBar>
</Shell>

Title型の string プロパティは、タブタイトルを定義します。 Icon型の ImageSource プロパティは、タブアイコンを定義します。

下部タブを含むシェル 2 ページアプリのスクリーンショット。

TabBarに 5 つ以上のタブがある場合は、[その他] タブが表示され、他のタブにアクセスできます。

[その他] タブが表示されたシェルアプリのスクリーンショット。

さらに、シェルの暗黙的な変換演算子を使用して、前の例から ShellContent オブジェクトと Tab オブジェクトを削除できます。

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <ShellContent Title="Cats"
                     Icon="cat.png"
                     ContentTemplate="{DataTemplate views:CatsPage}" />
       <ShellContent Title="Dogs"
                     Icon="dog.png"
                     ContentTemplate="{DataTemplate views:DogsPage}" />
    </TabBar>
</Shell>

この暗黙的な変換は、ShellContent オブジェクト内の各Tab オブジェクトを自動的にラップします。

Important

下と上のタブ

ShellContent オブジェクトに複数のTab オブジェクトが存在する場合、一番上のタブバーが下部タブに追加され、ContentPage オブジェクトがナビゲート可能になります。

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab Title="Domestic"
            Icon="paw.png">
           <ShellContent Title="Cats"
                         ContentTemplate="{DataTemplate views:CatsPage}" />
           <ShellContent Title="Dogs"
                         ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
       <Tab Title="Monkeys"
            Icon="monkey.png">
           <ShellContent ContentTemplate="{DataTemplate views:MonkeysPage}" />
       </Tab>
    </TabBar>
</Shell>

このコードは、次のスクリーンショットに示されているレイアウトになります。

上部と下部のタブを含むシェル 2 ページアプリのスクリーンショット。

さらに、シェルの暗黙的な変換演算子を使用して、前の例から 2 番目の Tab オブジェクトを削除できます。

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab Title="Domestic"
            Icon="paw.png">
           <ShellContent Title="Cats"
                         Icon="cat.png"
                         ContentTemplate="{DataTemplate views:CatsPage}" />
           <ShellContent Title="Dogs"
                         Icon="dog.png"
                         ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
       <ShellContent Title="Monkeys"
                     Icon="monkey.png"
                     ContentTemplate="{DataTemplate views:MonkeysPage}" />
    </TabBar>
</Shell>

この暗黙的な変換により、3 番目の ShellContent オブジェクトが Tab オブジェクトに自動的にラップされます。

タブの外観

Shell クラスは、タブの外観を制御する次の添付プロパティを定義します。

TabBarBackgroundColorタブバーの背景色を定義する Colorの種類です。プロパティが設定されていない場合は、 BackgroundColor プロパティ値が使用されます。
TabBarDisabledColorタブバーの無効色を定義するColor型の。プロパティが設定されていない場合は、 DisabledColor プロパティ値が使用されます。
TabBarForegroundColorは、タブバーの前景色を定義するColor型のものです。プロパティが設定されていない場合は、 ForegroundColor プロパティ値が使用されます。
TabBarTitleColorはタブバーのタイトルの色を定義するColor型です。プロパティが設定されていない場合は、 TitleColor プロパティ値が使用されます。
TabBarUnselectedColor、Color型のタブバーの選択されていない色を定義します。プロパティが設定されていない場合は、 UnselectedColor プロパティ値が使用されます。

これらのプロパティはすべて、 BindableProperty オブジェクトによってサポートされます。つまり、プロパティはデータバインディングのターゲットにすることができ、スタイルを設定できます。

タブの色に最も影響を与える 3 つのプロパティは、 TabBarForegroundColor、 TabBarTitleColor、および TabBarUnselectedColorです。

TabBarTitleColorプロパティのみが設定されている場合、その値は、選択したタブのタイトルとアイコンの色付けに使用されます。TabBarTitleColorが設定されていない場合、タイトルの色は TabBarForegroundColor プロパティの値と一致します。
TabBarForegroundColor プロパティが設定されていて、TabBarUnselectedColor プロパティが設定されていない場合は、TabBarForegroundColor プロパティの値を使用して、選択したタブのタイトルとアイコンの色が設定されます。
TabBarUnselectedColorプロパティのみが設定されている場合、その値は、選択されていないタブのタイトルとアイコンの色付けに使用されます。

例えば次が挙げられます。

TabBarTitleColorプロパティがGreenに設定されている場合、選択したタブのタイトルとアイコンが緑色になり、選択されていないタブがシステムの色と一致します。
TabBarForegroundColorプロパティがBlueに設定されている場合、選択したタブのタイトルとアイコンが青になり、選択されていないタブがシステムの色と一致します。
TabBarTitleColorプロパティがGreenに設定され、TabBarForegroundColorプロパティがBlueに設定されている場合、タイトルは緑色で、選択したタブのアイコンは青で、選択されていないタブはシステムの色と一致します。
TabBarTitleColorプロパティがGreenに設定され、Shell.ForegroundColorプロパティがBlueに設定されている場合、タイトルは緑色で、選択したタブのアイコンは青で、選択されていないタブはシステムの色と一致します。これは、 Shell.ForegroundColor プロパティの値が TabBarForegroundColor プロパティに伝達されるために発生します。
TabBarTitleColor プロパティが Green に設定されている場合、TabBarForegroundColor プロパティは Blue に設定され、TabBarUnselectedColor プロパティはRedに設定され、タイトルは緑になり、選択したタブのアイコンは青になり、選択されていないタブのタイトルとアイコンは赤になります。

次の例は、さまざまなタブバーの色プロパティを設定する XAML スタイルを示しています。

<Style TargetType="TabBar">
    <Setter Property="Shell.TabBarBackgroundColor"
            Value="CornflowerBlue" />
    <Setter Property="Shell.TabBarTitleColor"
            Value="Black" />
    <Setter Property="Shell.TabBarUnselectedColor"
            Value="AntiqueWhite" />
</Style>

さらに、カスケードスタイルシート (CSS) を使用してタブのスタイルを設定することもできます。詳細については、「 .NET MAUI Shell 固有のプロパティ」を参照してください。

タブの選択

タブバーを使用するシェルアプリを最初に実行すると、サブクラス化されたShell.CurrentItem オブジェクトの最初のTab オブジェクトにShell プロパティが設定されます。ただし、次の例に示すように、プロパティを別の Tabに設定できます。

<Shell ...
       CurrentItem="{x:Reference dogsItem}">
    <TabBar>
        <ShellContent Title="Cats"
                      Icon="cat.png"
                      ContentTemplate="{DataTemplate views:CatsPage}" />
        <ShellContent x:Name="dogsItem"
                      Title="Dogs"
                      Icon="dog.png"
                      ContentTemplate="{DataTemplate views:DogsPage}" />
    </TabBar>
</Shell>

次の使用例は、CurrentItem プロパティを ShellContent という名前のdogsItem オブジェクトに設定します。その結果、プロパティが選択されて表示されます。この例では、暗黙的な変換を使用して、ShellContent オブジェクト内の各Tab オブジェクトをラップします。

ShellContentという名前のdogsItem オブジェクトを指定すると、同等の C# コードは次のようになります。

CurrentItem = dogsItem;

この例では、サブクラス化された CurrentItem クラスで Shell プロパティが設定されています。または、 CurrentItem プロパティは、 Shell.Current 静的プロパティを使用して任意のクラスで設定できます。

Shell.Current.CurrentItem = dogsItem;

TabBar と Tab の表示設定

既定では、タブバーとタブはシェルアプリに表示されます。ただし、 Shell.TabBarIsVisible 添付プロパティを false に設定すると、タブバーを非表示にできます。

このプロパティはサブクラス化された Shell オブジェクトで設定できますが、通常は、タブバーを非表示にする任意の ShellContent または ContentPage オブジェクトに設定されます。

<TabBar>
   <Tab Title="Domestic"
        Icon="paw.png">
       <ShellContent Title="Cats"
                     ContentTemplate="{DataTemplate views:CatsPage}" />
       <ShellContent Shell.TabBarIsVisible="false"
                     Title="Dogs"
                     ContentTemplate="{DataTemplate views:DogsPage}" />
   </Tab>
   <Tab Title="Monkeys"
        Icon="monkey.png">
       <ShellContent ContentTemplate="{DataTemplate views:MonkeysPage}" />
   </Tab>
</TabBar>

この例では、上部の [犬 ] タブが選択されていると、タブバーが非表示になります。

さらに、バインド可能なプロパティTabIsVisibleに設定することで、falseオブジェクトを非表示にできます。

<TabBar>
    <ShellContent Title="Cats"
                  Icon="cat.png"
                  ContentTemplate="{DataTemplate views:CatsPage}" />
    <ShellContent Title="Dogs"
                  Icon="dog.png"
                  ContentTemplate="{DataTemplate views:DogsPage}"
                  IsVisible="False" />
    <ShellContent Title="Monkeys"
                  Icon="monkey.png"
                  ContentTemplate="{DataTemplate views:MonkeysPage}" />
</TabBar>

この例では、2 番目のタブは非表示になっています。

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-12-16

次の方法で共有

.NET の [MAUI Shell] タブ

1 ページ

下部タブ

下と上のタブ

タブの外観

タブの選択

TabBar と Tab の表示設定

フィードバック

その他のリソース