1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to use the sample of master page

How to use the sample of master page

Hi. I have implement an app through sample on this forum.

And I added some sample page through Essential UIKit for Xamarin.forms.

What I want is:

The app start from tabbed login page.

After press login button. The app open up a master detail page.

And the default detail page is "HealthCarePage"

Attached file is my try. Can you help me on how to setup the  master detail page?

Thank you!

Attachment: Sample_b62f45b7.7z

5 Replies 1 reply marked as answer
RS Ramya Soundar Rajan Syncfusion Team July 23, 2020 02:52 PM UTC

Hi iliketaiko, 
 
Greetings from Syncfusion. 
 
We have checked you provided sample. We have modified your sample to keep the MasterDetailedPage with keeping the MasterPage (from UIKit) in Master page, HealthCarePage(from UIKit) in Detailed page of MasteDetailedPage and it has been shown while tapping the Login button in Tabbed Login page.  
  
Please find the modified sample in below 
 
 
Please let us know if you have any concerns. 
 
Regards, 
Ramya S 


IL iliketaiko July 23, 2020 05:27 PM UTC

Hi. Thank you!

Can you help me on these.

1. How can I show the navigation drawer by click the menu icon in health care page?

2. How could I change the detail by click one item in the drawer?(Such as click on production. It show another page)

Thank you!

RS Ramya Soundar Rajan Syncfusion Team July 24, 2020 03:05 PM UTC

Hi iliketaiko,  
 
Query 1: How can I show the navigation drawer by click the menu icon in health care page? 
 
We have analyzed your requirement and we suspect that when selecting the menu icon on the health care page to show the list (Home, Production etc). Instead of using the navigation drawer you can show the master page when selecting the menu icon as like in the below. 
 
[XAML] 
 
MasterDetailPage1.xaml 
 
   …. 
 
                <dashboard:HealthCarePage > 
                    <dashboard:HealthCarePage.BindingContext> 
                        <viewModel:HealthCareViewModel MasterPage="{x:Reference masterDeatiledPage}" /> 
                    </dashboard:HealthCarePage.BindingContext> 
                </dashboard:HealthCarePage> 
 
 …. 
 
 
C#: 
 
HealthCareViewModel.cs 
   
  … 
 
        private void MenuClicked(object obj) 
        { 
            if(MasterPage != null) 
            { 
                (MasterPage as Xamarin.Forms.MasterDetailPage).IsPresented = !(MasterPage as Xamarin.Forms.MasterDetailPage).IsPresented; 
            } 
        } 
 
  … 
 
 
Please find the modified sample below. 
 
 
Query 2: How could I change the detail by click one item in the drawer? (Such as click on production. It show another page) 
 
When selecting the item (such as home, production), you can navigate to another page using corresponding button command in the MasterPageViewModel.  
 
Regards, 
Ramya S 


Marked as answer
IL iliketaiko July 26, 2020 04:14 AM UTC

Thank you for your help.

Yes. I know I can modify the method there.

But I tried some code. Failed to change the detail of the MasteDetailedPage when I click on a button.

Sometime it give me some exception.

Such as in "BookmarkButtonClicked"

Can you teach me how to change the detail on current screen?

Thank you!

Attachment: Sample_eaca404a.7z

RS Ramya Soundar Rajan Syncfusion Team July 27, 2020 12:21 PM UTC

 
We have modified the sample to change the detail page of MasterDetailPage in BookMarkButtonClicked. Please find the code snippet below. 
 
        private void BookmarkButtonClicked(object obj) 
        { 
            this.UpdateSelectedItemColor(obj); 
            (Application.Current.MainPage as MasterDetailPage).Detail = new Views.Bookmarks.BookmarksPage(); 
 
        } 
 
 
If you need to show the master page by swiping from left to right as shown in above video. 
 
Regards, 
Ramya S 


Loader.
Up arrow icon