Xamarin.Forms FlyoutPageXamarin.Forms FlyoutPage

• 12/01/2017
• • d
  • o

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

通常、ポップアップ ページには、次のスクリーンショットのように、項目の一覧が表示されます。A flyout page typically displays a list of items, as shown in the following screenshots:

項目の一覧の場所は各プラットフォームで同じであり、いずれかの項目を選択すると対応する詳細ページに移動します。The location of the list of items is identical on each platform, and selecting one of the items will navigate to the corresponding detail page. さらに、ポップアップ ページのナビゲーション バーに含まれるボタンを使用してアクティブな詳細ページに移動することもできます。In addition, the flyout page also features a navigation bar that contains a button that can be used to navigate to the active detail page:

• iOS では、ナビゲーション バーはページの上部にあり、詳細ページに移動するボタンが含まれます。On iOS, the navigation bar is present at the top of the page and has a button that navigates to the detail page. さらに、ポップアップを左にスワイプすることで、アクティブな詳細ページに移動できます。In addition, the active detail page can be navigated to by swiping the flyout to the left.
• Android では、ナビゲーション バーはページの上部にあり、タイトル、アイコン、詳細ページに移動するボタンが表示されます。On Android, the navigation bar is present at the top of the page and displays a title, an icon, and a button that navigates to the detail page. アイコンは、Android プラットフォーム固有プロジェクトにおいて MainActivity クラスを修飾する [Activity] 属性で定義されています。The icon is defined in the [Activity] attribute that decorates the MainActivity class in the Android platform-specific project. さらに、ポップアップ ページを左にスワイプするか、画面右端の詳細ページをタップするか、画面の下部にある [戻る] ボタンをタップすることによって、アクティブな詳細ページに移動できます。In addition, the active detail page can be navigated to by swiping the flyout page to the left, by tapping the detail page at the far right of the screen, and by tapping the Back button at the bottom of the screen.
• ユニバーサル Windows プラットフォーム (UWP) では、ナビゲーション バーはページの上部にあり、詳細ページに移動するボタンが含まれます。On the Universal Windows Platform (UWP), the navigation bar is present at the top of the page and has a button that navigates to the detail page.

次のスクリーンショットのように、詳細ページには、ポップアップ ページで選択されている項目に対応するデータと、詳細ページの主要コンポーネントが表示されます。A detail page displays data that corresponds to the item selected on the flyout page, and the main components of the detail page are shown in the following screenshots:

詳細ページにはナビゲーション バーが含まれ、その内容はプラットフォームによって異なります。The detail page contains a navigation bar, whose contents are platform-dependent:

• iOS では、ナビゲーション バーはページの上部に存在し、タイトルが表示されています。また、詳細ページのインスタンスが NavigationPage インスタンスにラップされている場合は、ポップアップ ページに戻るボタンがあります。On iOS, the navigation bar is present at the top of the page and displays a title, and has a button that returns to the flyout page, provided that the detail page instance is wrapped in the NavigationPage instance. さらに、ポップアップ ページには、詳細ページを右にスワイプすることによって戻ることができます。In addition, the flyout page can be returned to by swiping the detail page to the right.
• Android では、ナビゲーション バーはページの上部にあり、タイトル、アイコン、ポップアップ ページに戻るボタンが表示されます。On Android, a navigation bar is present at the top of the page and displays a title, an icon, and a button that returns to the flyout page. Android プラットフォーム固有プロジェクトでは、アイコンは MainActivity クラスを修飾する [Activity] 属性で定義されています。The icon is defined in the [Activity] attribute that decorates the MainActivity class in the Android platform-specific project.
• UWP では、ナビゲーション バーはページの上部にあり、タイトルが表示され、ポップアップ ページに戻るボタンがあります。On UWP, the navigation bar is present at the top of the page and displays a title, and has a button that returns to the flyout page.

ナビゲーションの動作Navigation behavior

ポップアップ ページと詳細ページの間のナビゲーション エクスペリエンスの動作は、プラットフォームによって異なります。The behavior of the navigation experience between flyout and detail pages is platform dependent:

• iOS では、ポップアップ ページが左から "スライド" してくると、詳細ページは右にスライドしますが、詳細ページの左の部分はまだ表示されています。On iOS, the detail page slides to the right as the flyout page slides from the left, and the left part of the detail page is still visible.
• Android では、詳細ページとポップアップ ページは相互に "オーバーレイ" されます。On Android, the detail and flyout pages are overlaid on each other.
• UWP では、ポップアップ ページが左からスライドして詳細ページの一部を覆います。ただし、FlyoutLayoutBehavior プロパティが Popover に設定されている場合です。On UWP, the flyout page slides from the left over part of the detail page, provided that the FlyoutLayoutBehavior property is set to Popover.

横モードでの動作も同様ですが、iOS と Android のポップアップ ページは縦モードのポップアップ ページと同じ幅なので、表示される詳細ページの部分が多くなります。Similar behavior will be observed in landscape mode, except that the flyout page on iOS and Android has a similar width as the flyout page in portrait mode, so more of the detail page will be visible.

ナビゲーション動作の制御の詳細については、「詳細ページのレイアウト動作を制御する」をご覧ください。For information about controlling the navigation behavior, see Control the detail page layout behavior.

FlyoutPage を作成するCreate a FlyoutPage

FlyoutPage には Flyout プロパティと Detail プロパティ (どちらも Page 型) が含まれ、それぞれ、ポップアップ ページと詳細ページの取得と設定に使用されます。A FlyoutPage contains Flyout and Detail properties that are both of type Page, which are used to get and set the flyout and detail pages respectively.

次の XAML コード例では、Flyout プロパティと Detail プロパティを設定する FlyoutPage を示します。The following XAML code example shows a FlyoutPage that sets the Flyout and Detail properties:

<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:FlyoutPageNavigation;assembly=FlyoutPageNavigation"
            x:Class="FlyoutPageNavigation.MainPage">
    <FlyoutPage.Flyout>
        <local:FlyoutMenuPage x:Name="flyoutPage" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:ContactsPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

次のコード例は、同じ FlyoutPage を C# で作成します。The following code example shows the equivalent FlyoutPage created in C#:

public class MainPageCS : FlyoutPage
{
    FlyoutMenuPageCS flyoutPage;

    public MainPageCS()
    {
        flyoutPage = new FlyoutMenuPageCS();
        Flyout = flyoutPage;
        Detail = new NavigationPage(new ContactsPageCS());
        ...
    }
    ...
}    

Flyout プロパティには、ContentPage インスタンスが設定されます。The Flyout property is set to a ContentPage instance. Detail プロパティには、ContentPage インスタンスを含む NavigationPage が設定されます。The Detail property is set to a NavigationPage containing a ContentPage instance.

ポップアップ ページを作成するCreate the flyout page

次に示す XAML のコード例は、FlyoutMenuPage オブジェクトの宣言です。このオブジェクトは、Flyout プロパティを通して参照されます。The following XAML code example shows the declaration of the FlyoutMenuPage object, which is referenced through the Flyout property:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="using:FlyoutPageNavigation"
             x:Class="FlyoutPageNavigation.FlyoutMenuPage"
             Padding="0,40,0,0"
             IconImageSource="hamburger.png"
             Title="Personal Organiser">
    <StackLayout>
        <ListView x:Name="listView" x:FieldModifier="public">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type local:FlyoutPageItem}">
                    <local:FlyoutPageItem Title="Contacts" IconSource="contacts.png" TargetType="{x:Type local:ContactsPage}" />
                    <local:FlyoutPageItem Title="TodoList" IconSource="todo.png" TargetType="{x:Type local:TodoListPage}" />
                    <local:FlyoutPageItem Title="Reminders" IconSource="reminders.png" TargetType="{x:Type local:ReminderPage}" />
                </x:Array>
            </ListView.ItemsSource>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="5,10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30"/>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding IconSource}" />
                            <Label Grid.Column="1" Text="{Binding Title}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

ページは、ItemsSource プロパティに FlyoutPageItem オブジェクトの配列を設定することによって XAML のデータを設定された ListView で構成されます。The page consists of a ListView that's populated with data in XAML by setting its ItemsSource property to an array of FlyoutPageItem objects. 各 FlyoutPageItem では、Title、IconSource、および TargetType プロパティが定義されています。Each FlyoutPageItem defines Title, IconSource, and TargetType properties.

各 FlyoutPageItem を表示するため、DataTemplate が ListView.ItemTemplate プロパティに割り当てられます。A DataTemplate is assigned to the ListView.ItemTemplate property, to display each FlyoutPageItem. DataTemplate には、Image と Label で構成される ViewCell が含まれます。The DataTemplate contains a ViewCell that consists of an Image and a Label. 各 FlyoutPageItem について、Image では IconSource プロパティの値が表示され、Label では Title プロパティの値が表示されます。The Image displays the IconSource property value, and the Label displays the Title property value, for each FlyoutPageItem.

ページでは、Title プロパティと IconImageSource プロパティが設定されます。The page has its Title and IconImageSource properties set. 詳細ページにタイトル バーがある場合は、アイコンが詳細ページに表示されます。The icon will appear on the detail page, provided that the detail page has a title bar. iOS では、詳細ページのインスタンスを NavigationPage インスタンスにラップすることによって、これを有効にする必要があります。This must be enabled on iOS by wrapping the detail page instance in a NavigationPage instance.

次に示すのは、C# で作成された同等のページのコード例です。The following code example shows the equivalent page created in C#:

public class FlyoutMenuPageCS : ContentPage
{
    ListView listView;
    public ListView ListView { get { return listView; } }

    public FlyoutMenuPageCS()
    {
        var flyoutPageItems = new List<FlyoutPageItem>();
        flyoutPageItems.Add(new FlyoutPageItem
        {
            Title = "Contacts",
            IconSource = "contacts.png",
            TargetType = typeof(ContactsPageCS)
        });
        flyoutPageItems.Add(new FlyoutPageItem
        {
            Title = "TodoList",
            IconSource = "todo.png",
            TargetType = typeof(TodoListPageCS)
        });
        flyoutPageItems.Add(new FlyoutPageItem
        {
            Title = "Reminders",
            IconSource = "reminders.png",
            TargetType = typeof(ReminderPageCS)
        });

        listView = new ListView
        {
            ItemsSource = flyoutPageItems,
            ItemTemplate = new DataTemplate(() =>
            {
                var grid = new Grid { Padding = new Thickness(5, 10) };
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(30) });
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });

                var image = new Image();
                image.SetBinding(Image.SourceProperty, "IconSource");
                var label = new Label { VerticalOptions = LayoutOptions.FillAndExpand };
                label.SetBinding(Label.TextProperty, "Title");

                grid.Children.Add(image);
                grid.Children.Add(label, 1, 0);

                return new ViewCell { View = grid };
            }),
            SeparatorVisibility = SeparatorVisibility.None
        };

        IconImageSource = "hamburger.png";
        Title = "Personal Organiser";
        Padding = new Thickness(0, 40, 0, 0);
        Content = new StackLayout
        {
            Children = { listView }
        };
    }
}

次のスクリーンショットでは、各プラットフォームでのポップアップ ページを示します。The following screenshots show the flyout page on each platform:

詳細ページを作成して表示するCreate and display the detail page

FlyoutMenuPage インスタンスに含まれる ListView プロパティによって公開されるその ListView インスタンスにより、MainPage の FlyoutPage インスタンスは ItemSelected イベントを処理するためのイベント ハンドラーを登録できます。The FlyoutMenuPage instance contains a ListView property that exposes its ListView instance so that the MainPage FlyoutPage instance can register an event-handler to handle the ItemSelected event. これにより、MainPage のインスタンスは、Detail プロパティに、選択された ListView 項目を表示するページを設定できます。This enables the MainPage instance to set the Detail property to the page that represents the selected ListView item. 次に示すのは、イベント ハンドラーのコード例です。The following code example shows the event-handler:

public partial class MainPage : FlyoutPage
{
    public MainPage()
    {
        ...
        flyoutPage.listView.ItemSelected += OnItemSelected;
    }

    void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as FlyoutPageItem;
        if (item != null)
        {
            Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
            flyoutPage.listView.SelectedItem = null;
            IsPresented = false;
        }
    }
}

OnItemSelected メソッドでは、次の操作が実行されます。The OnItemSelected method performs the following actions:

• ListView のインスタンスから SelectedItem を取得し、それが null でない場合は、詳細ページに、FlyoutPageItem の TargetType プロパティに格納されているページ種類の新しいインスタンスを設定します。It retrieves the SelectedItem from the ListView instance, and provided that it's not null, sets the detail page to a new instance of the page type stored in the TargetType property of the FlyoutPageItem. FlyoutMenuPage の IconImageSource プロパティを通して参照されているアイコンが iOS の詳細ページに表示されるように、ページの種類を NavigationPage のインスタンス内にラップします。The page type is wrapped in a NavigationPage instance to ensure that the icon referenced through the IconImageSource property on the FlyoutMenuPage is shown on the detail page in iOS.
• 次に FlyoutMenuPage が表示されるときにどの ListView 項目も選択されていないように、ListView の選択済み項目を null に設定します。The selected item in the ListView is set to null to ensure that none of the ListView items will be selected next time the FlyoutMenuPage is presented.
• FlyoutPage.IsPresented プロパティを false に設定することにより、ユーザーに詳細ページを表示します。The detail page is presented to the user by setting the FlyoutPage.IsPresented property to false. このプロパティによって、ポップアップまたは詳細ページのいずれを表示するかが制御されます。This property controls whether the flyout or detail page is presented. ポップアップ ページを表示するには true に、詳細ページを表示するには false に、設定する必要があります。It should be set to true to display the flyout page, and to false to display the detail page.

次のスクリーンショットでは、ContactPage の詳細ページを示します。これは、ポップアップ ページで選択された後に表示されます。The following screenshots show the ContactPage detail page, which is shown after it's been selected on the flyout page:

詳細ページのレイアウト動作を制御するControl the detail page layout behavior

FlyoutPage によるポップアップと詳細の各ページの管理方法は、アプリケーションがスマートフォンまたはタブレットのどちらで実行されているか、デバイスの向き、および FlyoutLayoutBehavior プロパティの値によって異なります。How the FlyoutPage manages the flyout and detail pages depends on whether the application is running on a phone or tablet, the orientation of the device, and the value of the FlyoutLayoutBehavior property. このプロパティでは、詳細ページの表示方法が決まります。This property determines how the detail page will be displayed. 次の値を指定できます。It's possible values are:

• Default – ページは、プラットフォームの既定値を使用して表示されます。Default – The pages are displayed using the platform default.
• Popover – 詳細ページによってポップアップ ページがカバーまたは部分的にカバーされます。Popover – The detail page covers, or partially covers the flyout page.
• Split – ポップアップ ページが左側に、詳細ページが右側に表示されます。Split – The flyout page is displayed on the left and the detail page is on the right.
• SplitOnLandscape – デバイスが横長の向きの場合は、分割画面が使用されます。SplitOnLandscape – A split screen is used when the device is in landscape orientation.
• SplitOnPortrait – デバイスが縦長の向きの場合は、分割画面が使用されます。SplitOnPortrait – A split screen is used when the device is in portrait orientation.

次の XAML コードの例では、FlyoutPage で FlyoutLayoutBehavior プロパティを設定する方法を示します。The following XAML code example demonstrates how to set the FlyoutLayoutBehavior property on a FlyoutPage:

<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="FlyoutPageNavigation.MainPage"
            FlyoutLayoutBehavior="Popover">
  ...
</FlyoutPage>

次のコード例は、同じ FlyoutPage を C# で作成します。The following code example shows the equivalent FlyoutPage created in C#:

public class MainPageCS : FlyoutPage
{
    FlyoutMenuPageCS flyoutPage;

    public MainPageCS()
    {
        ...
        FlyoutLayoutBehavior = FlyoutLayoutBehavior.Popover;
    }
}

関連リンクRelated links

• ページの変数Page Varieties
• FlyoutPage (サンプル)FlyoutPage (sample)
• FlyoutPage APIFlyoutPage API