Xamarin MasterDetailPage

サイドメニューを表示する

MasterPageの作成

ラベルとリストビューを表示するMasterPage(メニュー)を作成する
※Titleが必要

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MasterDetailTest01.MasterPage" Title="MasterPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Menu"/>
            <ListView x:Name="listView1" x:FieldModifier="public"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
 
public MasterPage()
{
    InitializeComponent();

    string[] list = { "北海道", "東京", "四国", "九州", "沖縄" };
    listView1.ItemsSource = list;
}
 

DetailPageの作成

メニューで選択された項目を表示するラベルのみ追加

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MasterDetailTest01.DetailPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Master Detail Page Test" 
                   x:Name="label1"                
                   VerticalOptions="CenterAndExpand"                 
                   HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
 

MainPageの修正

<?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:MasterDetailTest01"
             x:Class="MasterDetailTest01.MainPage">
    <MasterDetailPage.Master>
        <local:MasterPage x:Name="masterPage" />
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:DetailPage />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>
    public partial class MainPage : MasterDetailPage
    {
        public MainPage()
        {
            InitializeComponent();

            masterPage.listView1.ItemSelected += ListView1_ItemSelected;
        }

        private void ListView1_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if (e.SelectedItem != null)
            {
                detailPage.label1.Text = e.SelectedItem.ToString();

                masterPage.listView1.SelectedItem = null;

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください