01.MasterDetailPageを使用するには？

MasterDetailPageは、項目の一覧を表示するMasterPageと、一覧で選択された項目の詳細を表示するDetailPageの2つで構成されます。

MasterDetailPageを実装するページのコードビハインドは、以下のようにMasterDetailPageクラスを継承する必要があります。

マスターページは項目の一覧を表示するので、一般的にListViewを使用します(13行目)。

またListViewで選択された項目が選択された時にDetailPageに移動するように作成します（16〜23行目）。IsPresentedプロパティにfalseを設定すると、マスターページの上に詳細ページが表示されます（22行目）。

MainPage.xaml.cs

    namespace MasterDetailPageSample
{
    public partial class MainPage : MasterDetailPage
    {
        public MainPage()
        {
            InitializeComponent();

            // メニューに表示する文字列の作成
            var menu = new[] { "リンゴ", "ミカン", "バナナ", "スイカ", "メロン" };

            // マスターページの一覧にフルーツをセット
            listView.ItemsSource = menu;

            // ListViewの項目選択時の処理
            listView.ItemSelected += (sender, args) =>
            {
                //MasterPageで選択したフルーツを表示する
                this.lblFruitName.Text = args.SelectedItem.ToString();

                // DetailPage を表示
                this.IsPresented = false;
            };
        }
    }
}

次に、上記コードビハインドに合わせてMainPage.xamlを以下のように編集します。

MainPage.xamlファイルでは、MasterDetailPageの中にマスターページ用の<MasterDetaiPage.Master> (8〜21行目) と詳細ページ用の<MasterDetailPage.Detail> (24〜37行目) を配置します。

<MasterDetaiPage.Master> には、ListViewを配置し(18行目)、コードビハインドから項目を表示します。

<MasterDetailPage.Detail> では、マスターページから選択された項目を表示できるようにLabelを配置しています(28〜32行目)。 /p>

MainPage.xaml

  <?xml version="1.0" encoding="utf-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" 
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
              xmlns:local="clr-namespace:MasterDetailPageSample" 
              x:Class="MasterDetailPageSample.MainPage">

  <!--MasterPageの設定-->
  <MasterDetailPage.Master>
    <ContentPage Title="＜マスターページへ">
      <ContentPage.Padding>
        <OnPlatform x:TypeArguments = "Thickness" iOS = "0, 50, 0, 0" />
      </ContentPage.Padding>
  
      <StackLayout HorizontalOptions="Center">
        <Label Text="マスターページです"
                FontSize="Large"
                HorizontalOptions="Center"/>
        <ListView x:Name="listView"/>
      </StackLayout>
    </ContentPage>
  </MasterDetailPage.Master>
  
  <!--DetailPageの設定-->
  <MasterDetailPage.Detail>
    <NavigationPage>
      <x:Arguments>
        <ContentPage>
          <Label x:Name="lblFruitName"
                  HorizontalOptions="Center"
                  VerticalOptions="Center"
                  FontSize="20"
                  TextColor="Blue"/>
        </ContentPage>
      </x:Arguments>
    </NavigationPage>
  </MasterDetailPage.Detail>
</MasterDetailPage>

実行例を以下に示します。