Xamarin.Forms シェルのタブ Shell Tabs

サンプルのダウンロードサンプルのダウンロードDownload Sample Download the sample

アプリケーションのナビゲーション パターンに、ポップアップが含まれている場合、アプリケーションにおける次のレベルのナビゲーションは、下部のタブ バーです。When the navigation pattern for an application includes a flyout, the next level of navigation in the application is the bottom tab bar. さらに、ポップアップを閉じた場合、下部のタブ バーを最上位のナビゲーションと見なすことができます。In addition, when the flyout is closed the bottom tab bar can be considered to be the top level of navigation.

または、アプリケーションのナビゲーション パターンを下部のタブから始めて、ポップアップを使用しないようにすることができます。Alternatively, the navigation pattern for an application can begin with bottom tabs and make no use of a flyout. このシナリオでは、Shell オブジェクトの子を、下部のタブ バーを表す TabBar オブジェクトにする必要があります。In this scenario, the child of the Shell object should be a TabBar object, which represents the bottom tab bar.

注意

TabBar 型では、ポップアップが無効になります。The TabBar type disables the flyout.

FlyoutItem または TabBar オブジェクトには 1 つ以上の Tab オブジェクトを含めることができ、各 Tab オブジェクトは下部のタブ バー上の 1 つのタブを表します。Each FlyoutItem or TabBar object can contain one or more Tab objects, with each Tab object representing a tab on the bottom tab bar. Tab オブジェクトには 1 つ以上の ShellContent オブジェクトを含めることができ、各 ShellContent オブジェクトにより 1 つの ContentPage オブジェクトが表示されます。Each Tab object can contain one or more ShellContent objects, and each ShellContent object will display a single ContentPage object. 複数の ShellContent オブジェクトが Tab オブジェクト内にある場合は、上部タブから ContentPage オブジェクトをナビゲートできます。When more than one ShellContent object is present in a Tab object, the ContentPage objects will be navigable by top tabs.

ContentPage オブジェクト内で、追加の ContentPage オブジェクトに移動できます。Within each ContentPage object, additional ContentPage objects can be navigated to. ナビゲーションの詳細については、「Xamarin.Forms シェルのナビゲーション」を参照してください。For more information about navigation, see Xamarin.Forms Shell Navigation.

シングル ページ アプリケーションSingle page application

最もシンプルなシェル アプリケーションはシングル ページ アプリケーションです。これは TabBar オブジェクトに Tab オブジェクトを 1 つ追加することで作成できます。The simplest Shell application is a single page application, which can be created by adding a single Tab object to a TabBar object. Tab オブジェクト内で、ShellContent オブジェクトを ContentPage オブジェクトに設定する必要があります。Within the Tab object, a ShellContent object should be set to a ContentPage object:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
        <Tab>
            <ShellContent>
                <views:CatsPage />
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

このコード例により、次のシングル ページ アプリケーションが得られます。This code example results in the following single page application:

iOS および Android 上のシェル シングル ページ アプリのスクリーンショットScreenshot of a Shell single page app, on iOS and Android

注意

必要に応じてナビゲーション バーを非表示にすることができます。それには、ContentPage オブジェクト上で Shell.NavBarIsVisible 添付プロパティを false に設定します。The navigation bar can be hidden, if required, by setting the Shell.NavBarIsVisible attached property to false on the ContentPage object.

シェルには暗黙的な変換演算子が備わっています。これにより、ビジュアル ツリーに追加のビューを導入することなくシェルの視覚階層を単純化できます。Shell has implicit conversion operators that enable the Shell visual hierarchy to be simplified, without introducing additional views into the visual tree. これが可能になるのは、サブクラス化された Shell オブジェクトには FlyoutItem オブジェクトまたは TabBar オブジェクトしか含めることができず、それには Tab オブジェクトしか含めることができず、それには ShellContent オブジェクトしか含めることができないためです。This is possible because a subclassed Shell object can only ever contain FlyoutItem objects or a TabBar object, which can only ever contain Tab objects, which can only ever contain ShellContent objects. このような暗黙的な変換演算子を使って、前の例から TabBarTabShellContent オブジェクトを削除することができます。These implicit conversion operators can be used to remove the TabBar, Tab, and ShellContent objects from the previous example:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell"
       FlyoutBehavior="Disabled">
    <views:CatsPage />
</Shell>

この暗黙的な変換では、ContentPage オブジェクトが自動的に ShellContent オブジェクトでラップされ、それが Tab オブジェクトでラップされ、それが FlyoutItem オブジェクトでラップされます。This implicit conversion automatically wraps the ContentPage object in a ShellContent object, which is wrapped in a Tab object, which is wrapped in a FlyoutItem object. シングル ページ アプリケーションではポップアップは不要です。そのため、Shell.FlyoutBehavior プロパティを Disabled に設定しています。A flyout is unnecessary in a single page application, and therefore the Shell.FlyoutBehavior property is set to Disabled.

重要

シェル アプリケーションでは、ShellContent オブジェクトの子である各 ContentPage は、アプリケーションの起動中に作成されます。In a Shell application, each ContentPage that's a child of a ShellContent object is created during application startup. この手法を利用してその他の ShellContent オブジェクトを追加すると、アプリケーションの起動時に追加のページが作成され、起動エクスペリエンスの低下を引き起こす場合があります。Adding additional ShellContent objects using this approach will result in additional pages being created during application startup, which can lead to a poor startup experience. ただし、シェルでは、ナビゲーションに応答して、必要に応じてページを作成することも可能です。However, Shell is also capable of creating pages on demand, in response to navigation. 詳細については、「効率的なページの読み込み」をご覧ください。For more information, see Efficient page loading.

下部のタブBottom tabs

1 つの TabBar オブジェクト内に複数の Tab オブジェクトがある場合、Tab オブジェクトは下部のタブとしてレンダリングされます。Tab objects are rendered as bottom tabs, provided that there are multiple Tab objects in a single TabBar object:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       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>
                <views:CatsPage />
            </ShellContent>
        </Tab>
        <Tab Title="Dogs"
             Icon="dog.png">
            <ShellContent>
                <views:DogsPage />
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

タブのタイトルとアイコンは各 Tab オブジェクト上で設定され、下部のタブに表示されます。Tab titles and icons are set on each Tab object, and displayed on the bottom tabs:

下部タブが表示された、iOS および Android 上のシェル 2 ページ アプリのスクリーンショットScreenshot of a Shell two page app with bottom tabs, on iOS and Android

6 個以上のタブがある場合、 [その他] タブが表示され、これを使用して追加のタブにアクセスできます。When there are more than five tabs, a More tab will appear, which can be used to access the additional tabs:

[その他] タブが表示された、iOS および Android 上のシェル アプリのスクリーン ショットScreenshot of a Shell app with a More tab, on iOS and Android

または、シェルの暗黙的な変換演算子を使って、前の例から ShellContent および Tab オブジェクトを削除することができます。Alternatively, Shell's implicit conversion operators can be used to remove the ShellContent and Tab objects from the previous example:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
        <views:CatsPage IconImageSource="cat.png" />
        <views:DogsPage IconImageSource="dog.png" />
    </TabBar>
</Shell>

この暗黙的な変換では、各 ContentPage オブジェクトが自動的に ShellContent オブジェクトでラップされ、今度はそれが両方とも Tab オブジェクトでラップされます。This implicit conversion automatically wraps each ContentPage object in a ShellContent object, which are then both wrapped in a Tab object.

重要

シェル アプリケーションでは、ShellContent オブジェクトの子である各 ContentPage は、アプリケーションの起動中に作成されます。In a Shell application, each ContentPage that's a child of a ShellContent object is created during application startup. この手法を利用してその他の ShellContent オブジェクトを追加すると、アプリケーションの起動時に追加のページが作成され、起動エクスペリエンスの低下を引き起こす場合があります。Adding additional ShellContent objects using this approach will result in additional pages being created during application startup, which can lead to a poor startup experience. ただし、シェルでは、ナビゲーションに応答して、必要に応じてページを作成することも可能です。However, Shell is also capable of creating pages on demand, in response to navigation. 詳細については、「効率的なページの読み込み」をご覧ください。For more information, see Efficient page loading.

Tab クラスTab class

Tab クラスには、タブの外観と動作を制御する次のプロパティが含まれています。The Tab class includes the following properties that control tab appearance and behavior:

  • CurrentItem: ShellContent 型、選択された項目。CurrentItem, of type ShellContent, the selected item.
  • FlyoutDisplayOptions: FlyoutDisplayOptions 型、ポップアップで項目とその子を表示する方法を定義します。FlyoutDisplayOptions, of type FlyoutDisplayOptions, defines how the item and its children are displayed in the flyout. 既定値は AsSingleItem です。The default value is AsSingleItem.
  • FlyoutIcon: ImageSource 型、ポップアップに表示するアイコンを定義します。FlyoutIcon, of type ImageSource, defines the icon that will be displayed in the flyout.
  • Icon: ImageSource 型、ポップアップではないクロムのパーツに表示するアイコンを定義します。Icon, of type ImageSource, defines the icon to display in parts of the chrome which are not the flyout.
  • IsChecked: boolean 型、現在ポップアップで項目を強調表示するかどうかを定義します。IsChecked, of type boolean, defines if the item is currently highlighted in the flyout.
  • IsEnabled: boolean 型、クロム内の項目を選択できるかどうかを定義します。IsEnabled, of type boolean, defines if the item is selectable in the chrome.
  • IsTabStop: bool 型、タブのナビゲーションに Tab を含めるかどうかを指定します。IsTabStop, of type bool, indicates whether a Tab is included in tab navigation. 既定値は true で、値を false にすると、Tab は、TabIndex が設定されているかどうかにかかわらず、タブ ナビゲーション インフラストラクチャによって無視されます。Its default value is true, and when its value is false the Tab is ignored by the tab-navigation infrastructure, irrespective if a TabIndex is set.
  • Items: IList<ShellContent> 型、Tab 内のすべてのコンテンツを定義します。Items, of type IList<ShellContent>, defines all the content within a Tab.
  • TabIndex: int 型、ユーザーが Tab キーを押して項目間を移動するときに、Tab オブジェクトがフォーカスを受け取る順序を指定します。TabIndex, of type int, indicates the order in which Tab objects receive focus when the user navigates through items by pressing the Tab key. このプロパティの既定値は 0 です。The default value of the property is 0.
  • Title: string 型、UI のタブに表示するタイトル。Title, of type string, the title to display on the tab in the UI.

シェル コンテンツShell content

すべての Tab オブジェクトの子は ShellContent オブジェクトで、その Content プロパティは ContentPage に設定されます。The child of every Tab object is a ShellContent object, whose Content property is set to a ContentPage:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       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>
                <views:CatsPage />
            </ShellContent>
        </Tab>
        <Tab Title="Dogs"
             Icon="dog.png">
            <ShellContent>
                <views:DogsPage />
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

ContentPage オブジェクト内で、追加の ContentPage オブジェクトに移動できます。Within each ContentPage object, additional ContentPage objects can be navigated to. ナビゲーションの詳細については、「Xamarin.Forms シェルのナビゲーション」を参照してください。For more information about navigation, see Xamarin.Forms Shell Navigation.

注意

ShellContent オブジェクトの BindingContext は、親 Tab オブジェクトから継承されます。The BindingContext of each ShellContent object is inherited from the parent Tab object.

ShellContent クラスShellContent class

ShellContent クラスには、タブのコンテンツの外観と動作を制御する次のプロパティが含まれています。The ShellContent class includes the following properties that control tab content appearance and behavior:

  • Content: object 型、ShellContent のコンテンツ。Content, of type object, the content of the ShellContent.
  • ContentTemplate: DataTemplate 型、ShellContent のコンテンツを動的に拡張するために使うテンプレート。ContentTemplate, of type DataTemplate, the template used to dynamically inflate the content of the ShellContent.
  • FlyoutIcon: ImageSource 型、ポップアップに表示するアイコンを定義します。FlyoutIcon, of type ImageSource, defines the icon that will be displayed in the flyout.
  • Icon: ImageSource 型、ポップアップではないクロムのパーツに表示するアイコンを定義します。Icon, of type ImageSource, defines the icon to display in parts of the chrome which are not the flyout.
  • IsChecked: boolean 型、現在ポップアップで項目を強調表示するかどうかを定義します。IsChecked, of type boolean, defines if the item is currently highlighted in the flyout.
  • IsEnabled: boolean 型、クロム内の項目を選択できるかどうかを定義します。IsEnabled, of type boolean, defines if the item is selectable in the chrome.
  • MenuItems: MenuItemCollection 型、この ShellContent が表示ページであるときに、ポップアップに表示するメニュー項目。MenuItems, of type MenuItemCollection, the menu items to display in the flyout when this ShellContent is the presented page.
  • Title: string 型、UI に表示するタイトル。Title, of type string, the title to display in the UI.

これらのプロパティはすべて、BindableProperty オブジェクトを基盤としています。つまり、プロパティはデータ バインディングの対象にすることができます。All of these properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

下部と上部のタブBottom and top tabs

Tab オブジェクト内に複数の ShellContent オブジェクトがある場合、下部のタブに上部タブ バーが追加されます。これを使って ContentPage オブジェクトを移動できます。When more than one ShellContent object is present in a Tab object, a top tab bar is added to the bottom tab, through which the ContentPage objects are navigable:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
        <Tab Title="Domestic"
             Icon="domestic.png">
            <ShellContent>
                <views:CatsPage />
            </ShellContent>
            <ShellContent>
                <views:DogsPage />
            </ShellContent>
        </Tab>
        <Tab Title="Monkeys"
             Icon="monkey.png">
            <ShellContent>
                <views:MonkeysPage />
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

これで、次のスクリーンショットに示すようなレイアウトになります。This results in the layout shown in the following screenshots:

上部タブと下部タブが表示された、iOS および Android 上のシェル 2 ページ アプリのスクリーンショットScreenshot of a Shell two page app with top and bottom tabs, on iOS and Android

または、シェルの暗黙的な変換演算子を使って、前の例から ShellContent オブジェクトと 2 つ目の Tab オブジェクトを削除することができます。Alternatively, Shell's implicit conversion operators can be used to remove the ShellContent objects, and the second Tab object from the previous example:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
        <Tab Title="Domestic"
             Icon="domestic.png">
            <views:CatsPage />
            <views:DogsPage />
        </Tab>
        <views:MonkeysPage IconImageSource="monkey.png" />
    </TabBar>
</Shell>

この暗黙的な変換では、MonkeysPage が自動的に ShellContent オブジェクトでラップされ、それが Tab オブジェクトでラップされます。This implicit conversion automatically wraps MonkeysPage in a ShellContent object, which is then wrapped in a Tab object. さらに、CatsPageDogsPage は暗黙的に ShellContent オブジェクトでラップされます。In addition, CatsPage and DogsPage are implicitly wrapped in ShellContent objects.

効率的なページの読み込みEfficient page loading

シェル アプリケーションでは、ShellContent オブジェクト内の ContentPage オブジェクトは、すべてアプリケーションの起動中に作成されます。これにより、起動エクスペリエンスが低下するおそれがあります。In a Shell application, every ContentPage object in a ShellContent object is created during application startup, which can lead to a poor startup experience. しかし、シェルでは、ページの作成を必要に応じて、ナビゲーションへの応答として行うこともできます。However, Shell also allows pages to be created on demand, in response to navigation. これを実現するには、DataTemplate マークアップ拡張を使って各 ContentPageDataTemplate に変換した後、その結果を ShellContent.ContentTemplate プロパティ値として設定します。This can be accomplished by using the DataTemplate markup extension to convert each ContentPage into a DataTemplate, and then setting the result as the ShellContent.ContentTemplate property value:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       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>

この XAML では CatsPage を作成して表示していますが、それは、これがサブクラス化された Shell オブジェクト内で宣言されたコンテンツの最初の項目であるためです。This XAML creates and displays CatsPage, because it's the first item of content declared in the subclassed Shell object. 下部のタブを使って CatsPageMonkeysPage に移動できます。そのページは、ユーザーがそれらに移動したときにのみ作成されます。CatsPage and MonkeysPage can be navigated to via bottom tabs, and these pages are only created when the user navigates to them. この方法の利点は、起動エクスペリエンスの低下を回避できることです。ページが、アプリケーションの起動時ではなく、必要に応じてナビゲーションへの応答として作成されるためです。The advantage of this approach is that the poor startup experience is avoided, as pages are created on demand in response to navigation, rather than at application startup.

タブの外観Tab appearance

Shell クラスでは、タブの外観を制御する次の添付プロパティを定義しています。The Shell class defines the following attached properties that control the appearance of tabs:

  • TabBarBackgroundColor:Color 型、タブ バーの背景色を定義します。TabBarBackgroundColor, of type Color, that defines the background color for the tab bar. プロパティが設定されていない場合、BackgroundColor プロパティ値が使われます。If the property is unset, the BackgroundColor property value is used.
  • TabBarDisabledColor:Color 型、タブ バーの無効な色を定義します。TabBarDisabledColor, of type Color, that defines the disabled color for the tab bar. プロパティが設定されていない場合、DisabledColor プロパティ値が使われます。If the property is unset, the DisabledColor property value is used.
  • TabBarForegroundColor:Color 型、タブ バーの前景色を定義します。TabBarForegroundColor, of type Color, that defines the foreground color for the tab bar. プロパティが設定されていない場合、ForegroundColor プロパティ値が使われます。If the property is unset, the ForegroundColor property value is used.
  • TabBarTitleColor:Color 型、タブ バーのタイトルの色を定義します。TabBarTitleColor, of type Color, that defines the title color for the tab bar. プロパティが設定されていない場合、TitleColor プロパティ値が使われます。If the property is unset, the TitleColor property value will be used.
  • TabBarUnselectedColor:Color 型、タブ バーの選択されていない色を定義します。TabBarUnselectedColor, of type Color, that defines the unselected color for the tab bar. プロパティが設定されていない場合、UnselectedColor プロパティ値が使われます。If the property is unset, the UnselectedColor property value is used.

これらのプロパティはすべて、BindableProperty オブジェクトを基盤としています。つまり、プロパティをデータ バインディングの対象にして、スタイル設定することができます。All of these properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings, and styled.

次の例は、さまざまなタブの色のプロパティを設定する XAML スタイルを示しています。The following example shows a XAML style that sets different tab color properties:

<Style x:Key="BaseStyle"
       TargetType="Element">
    <Setter Property="Shell.TabBarBackgroundColor"
            Value="#3498DB" />
    <Setter Property="Shell.TabBarTitleColor"
            Value="White" />
    <Setter Property="Shell.TabBarUnselectedColor"
            Value="#B4FFFFFF" />
</Style>

さらに、タブはカスケード スタイル シート (CSS) を使ってスタイル設定することもできます。In addition, tabs can also be styled using Cascading Style Sheets (CSS). 詳細については、「Xamarin.Forms シェル固有のプロパティ」を参照してください。For more information, see Xamarin.Forms Shell specific properties.