(Xamarin Forms) 2.MasterDetailPage

MsaterDetailPage 는 마스터 페이지와 마스터 정보에 대한 하위 수준의 세부 정보를 표시하는 세부 정보 페이지를 관리할때 사용됩니다.

쉽게 말하면 왼쪽 슬라이드 메뉴에 마스터 정보가 표시되고 해당 항목을 클릭하면 마스터의 세부정보가

전체 화면으로 보여지게되는 것입니다.

아래처럼 왼쪽 메뉴에 마스터 정보가 표시되고 Page1 마스터 항목을 클릭하게되면

아래 처럼 해당 항목에 대한 세부 내용이 표시되는 것입니다.

위 내용은 제가 만든게 아니라 프로젝트에서 추가>새항목>MasterDetailPage 을 하게되면 위처럼 화면에 표시가 되도록 기본 구성됩니다.

MasterDetailPage1Master : 마스터 정보(왼쪽 슬라이드 메뉴)의 구성을 나타냅니다. (page.Title 항목이 반드시 있어야합니다.)

MasterDetailPage1MenuItem : MasterDetailPage1Master 에서 사용되는 메뉴 구조가 정의됩니다.

MasterDetailPage1Detail : 마스터 정보가 선택되면 나타나는 세부 정보 입니다.

 

아래는 XAML 로만 구성한 방식입니다.

XamarinFormsStudy 의 MainPage (ContentPage) 를 세부 항목 창으로 사용하는 예제입니다.

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

    <MasterDetailPage.Master>
        <ContentPage Title="MasterDetailPage">
            <StackLayout Orientation="Vertical">
                <Button Text="자기소개"/>
                <Button Text="경력" />
                <Button Text="자격증"/>
                <Button Text="집주소"/>
            </StackLayout>
        </ContentPage>
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <local:MainPage/>
    </MasterDetailPage.Detail>
   
</MasterDetailPage>

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamarinFormsStudy
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MasterDetailTestPage : MasterDetailPage
    {
        public MasterDetailTestPage()
        {
            InitializeComponent();
        }
    }
}

 

참고

https://www.youtube.com/watch?v=yaC0-C942wk

https://developer.xamarin.com/api/type/Xamarin.Forms.MasterDetailPage/

GitHub > https://github.com/knagjun/XamarinForms