Xamarin.Forms シェル アプリケーションを作成するCreate a Xamarin.Forms Shell Application

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

Xamarin.Forms シェル アプリケーションを作成するプロセスは次のとおりです。The process for creating a Xamarin.Forms Shell application is as follows:

  1. 新しい Xamarin.Forms アプリケーションを作成するか、シェル アプリケーションに変換したい既存のアプリケーションを読み込む。Create a new Xamarin.Forms application, or load an existing application that you want to convert to a Shell application.
  2. Shell クラスがサブクラス化された XAML ファイルを共有コード プロジェクトに追加する。Add a XAML file to the shared code project, that subclasses the Shell class. 詳細については、「Shell クラスをサブクラス化する」をご覧ください。For more information, see Subclass the Shell class.
  3. アプリケーションの App クラスの MainPage プロパティをサブクラス化された Shell オブジェクトに設定する。Set the MainPage property of the application's App class to the subclassed Shell object. 詳細については、「シェル アプリケーションをブートストラップする」をご覧ください。For more information, see Bootstrap the Shell application.
  4. サブクラス化された Shell クラスにアプリケーションのビジュアル階層を記述する。Describe the visual hierarchy of the application in the subclassed Shell class. 詳細については、「アプリケーションのビジュアル階層を記述する」をご覧ください。For more information, see Describe the visual hierarchy of the application.

Shell クラスをサブクラス化するSubclass the Shell class

Xamarin.Forms シェル アプリケーションを作成する最初の手順は、Shell クラスをサブクラス化する XAML ファイルを共有コード プロジェクトに追加することです。The first step in creating a Xamarin.Forms Shell application is to add a XAML file to the shared code project that subclasses the Shell class. このファイルには任意の名前を付けることができますが、AppShell がお勧めです。This file can be named anything, but AppShell is recommended. 次のコード例は、新しく作成した AppShell.xaml ファイルを示しています。The following code example shows a newly created AppShell.xaml file:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="Xaminals.AppShell">

</Shell>

次の例は、分離コード ファイル AppShell.xaml.cs を示しています。The following example shows the code-behind file, AppShell.xaml.cs:

using Xamarin.Forms;

namespace Xaminals
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }
}

シェル アプリケーションをブートストラップするBootstrap the Shell application

Shell オブジェクトがサブクラス化された XAML ファイルを作成した後は、App クラスの MainPage プロパティをサブクラス化された Shell オブジェクトに設定する必要があります。After creating the XAML file that subclasses the Shell object, the MainPage property of the App class should be set to the subclassed Shell object:

namespace Xaminals
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            MainPage = new AppShell();
        }
        ...
    }
}

この例では、AppShell クラスは Shell クラスから派生した XAML ファイルです。In this example, the AppShell class is the XAML file that derives from the Shell class.

注意

空のシェル アプリケーションはビルドできますが、それを実行すると InvalidOperationException がスローされます。While a blank Shell application builds, running it will result in a InvalidOperationException being thrown.

アプリケーションのビジュアル階層を記述するDescribe the visual hierarchy of the application

Xamarin.Forms シェル アプリケーション作成の最後の手順は、サブクラス化された Shell クラス内に、アプリケーションのビジュアル階層を記述することです。The final step in creating a Xamarin.Forms Shell application is to describe the visual hierarchy of the application, in the subclassed Shell class. サブクラス化された Shell クラスは、次の 3 つの主な階層オブジェクトで構成されています。A subclassed Shell class consists of three main hierarchical objects:

  • FlyoutItem または TabBarFlyoutItem or TabBar. FlyoutItem ではポップアップ内の 1 つまたは複数の項目を表します。これは、アプリケーションのナビゲーション パターンにポップアップが含まれている場合に使う必要があります。A FlyoutItem represents one or more items in the flyout, and should be used when the navigation pattern for the application includes a flyout. TabBar では下部にあるタブ バーを表します。これは、アプリケーションのナビゲーション パターンが下部のタブから開始される場合に使う必要があります。A TabBar represents the bottom tab bar, and should be used when the navigation pattern for the application begins with bottom tabs. FlyoutItem オブジェクトまたは TabBar オブジェクトは、すべて Shell オブジェクトの子です。Every FlyoutItem object or TabBar object is a child of the Shell object.
  • Tab。これは、下部のタブによって移動できるグループ化されたコンテンツを表します。Tab, which represents grouped content, navigable by bottom tabs. Tab オブジェクトはすべて、FlyoutItem オブジェクトか TabBar オブジェクトの子です。Every Tab object is a child of a FlyoutItem object or a TabBar object.
  • ShellContent。これは、アプリケーションの ContentPage オブジェクトを表します。ShellContent, which represents the ContentPage objects in your application. ShellContent オブジェクトはすべて、Tab オブジェクトの子です。Every ShellContent object is a child of a Tab object. 複数の ShellContent オブジェクトが Tab にある場合は、上部のタブによってそのオブジェクトをナビゲートできます。When more than one ShellContent object is present in a Tab, the objects will be navigable by top tabs.

これらのオブジェクトはどれも、ユーザー インターフェイスではなく、アプリケーションのビジュアル階層の編成を表しています。None of these objects represent any user interface, but rather the organization of the application's visual hierarchy. シェルでは、これらのオブジェクトを取得して、コンテンツのナビゲーション ユーザー インターフェイスを生成します。Shell will take these objects and produce the navigation user interface for the content.

次の XAML では、サブクラス化された Shell クラスの例を示します。The following XAML shows an example of a subclassed Shell class:

<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">
    ...
    <FlyoutItem Title="Animals"
                FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic"
             Icon="paw.png">
            <ShellContent Title="Cats"
                          Icon="cat.png">
                <views:CatsPage />
            </ShellContent>
            <ShellContent Title="Dogs"
                          Icon="dog.png">
                <views:DogsPage />
            </ShellContent>
        </Tab>
        <ShellContent Title="Monkeys"
                      Icon="monkey.png">
            <views:MonkeysPage />
        </ShellContent>
        <ShellContent Title="Elephants"
                      Icon="elephant.png">  
            <views:ElephantsPage />
        </ShellContent>
        <ShellContent Title="Bears"
                      Icon="bear.png">
            <views:BearsPage />
        </ShellContent>
    </FlyoutItem>
    ...
</Shell>

実行すると、この XAML により CatsPage が表示されます。サブクラス化された Shell クラスで宣言されたコンテンツの最初の項目であるためです。When run, this XAML displays the CatsPage, because it's the first item of content declared in the subclassed Shell class:

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

ハンバーガー アイコンを押すか、左からスワイプして、ポップアップを表示します。Pressing the hamburger icon, or swiping from the left, displays the flyout:

iOS および Android 上のシェル フライアウトのスクリーンショットScreenshot of a Shell flyout, on iOS and Android

重要

シェル アプリケーションでは、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. 詳細については、「Xamarin.Forms シェルのタブ」ガイドにある「効率的なページの読み込み」を参照してください。For more information, see Efficient page loading in the Xamarin.Forms Shell Tabs guide.