How to customize xamarin master detail page

Question

Hello,

How can I customize the master-detail page?
I want to delete the top blue bar and put the top left button in the center-left of the screen!

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

Firstly, you should can use NavigationPage.HasNavigationBar="False" to delete the top blue bar. For example, I have a details page called HomePage, add this line in <ContentPage> tag. And you want to move the top left button in the center-left of the screen and change the icon, you can use ImageButton to replace it. Here is my HomePage code(you can add other controls to the StackLayout or add AbsoluteLayout ). If you want to every details page have an icon in center-left of the screen, you need to add ImageButton to every details pages

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
                NavigationPage.HasNavigationBar="False"  
                x:Class="App65.HomePage">  
       <ContentPage.Content>  
           <AbsoluteLayout>  
               
               <StackLayout    
                   AbsoluteLayout.LayoutBounds="0.5,0.5,110,25"  
                  AbsoluteLayout.LayoutFlags="PositionProportional"  
                   >  
                   <Label Text="HomePage" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />  
     
               </StackLayout>  
     <ImageButton   
                     
                   AbsoluteLayout.LayoutBounds="0,0.5,25,100"  
                    AbsoluteLayout.LayoutFlags="PositionProportional"  
                     
                   Source="icon.png" BackgroundColor="Transparent"  Clicked="ImageButton_Clicked"></ImageButton>  
     
           </AbsoluteLayout>  
     
       </ContentPage.Content>  
   </ContentPage>  

Here is HomePage's background code. We send I MessagingCenter, because we use this message to control master page hide or show when you click the icon

   [XamlCompilation(XamlCompilationOptions.Compile)]  
       public partial class HomePage : ContentPage  
       {  
           public HomePage()  
           {  
               InitializeComponent();  
           }  
     
           private void ImageButton_Clicked(object sender, EventArgs e)  
           {  
               MessagingCenter.Send<App, string>(App.Current as App, "OneMessage", "");  
           }  
       }  

Open your MasterDetailPage's XAML, You can use IsPresented property to control master page hide or show, so I make him binding a property.

   <?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="App65.MainPage" IsPresented="{Binding isPresent,Mode=TwoWay}" >  
     
       <MasterDetailPage.Master >  
           <ContentPage Padding="10" BackgroundColor="Gray" Title="Master">  
               <ContentPage.Content>  
                   <StackLayout Margin="5,30,5,5">  
                       <Label Text="Master page Menu"></Label>  
                       <Button Text="Add Employee" BackgroundColor="Yellow" Clicked="Button_Clicked"></Button>  
                       <Button Text="List Employee" BackgroundColor="Yellow" Clicked="Button_Clicked2"></Button>  
                       <Button Text="About Us" BackgroundColor="Yellow" Clicked="Button_Clicked3"></Button>  
                       <Button Text="Contact" BackgroundColor="Yellow" Clicked="Button_Clickded4"></Button>  
                   </StackLayout>  
               </ContentPage.Content>  
           </ContentPage>  
       </MasterDetailPage.Master>  
       <MasterDetailPage.Detail>  
           <ContentPage Padding="10">  
               <ContentPage.Content>  
                   <StackLayout Margin="5,30,5,5">  
                       <Label Text="Detail Page"></Label>  
                   </StackLayout>  
               </ContentPage.Content>  
           </ContentPage>  
       </MasterDetailPage.Detail>  
     
   </MasterDetailPage>  

Open your MasterDetailPage's background code. I add isPresent property and add BindingContext = this; to binding it. when we receive the message, we set the isPresent property to true, MasterPage will appear.

   using System;  
   using System.Collections.Generic;  
   using System.ComponentModel;  
   using System.Linq;  
   using System.Text;  
   using System.Threading.Tasks;  
   using Xamarin.Forms;  
     
   namespace App65  
   {  
       public partial class MainPage : MasterDetailPage  
       {  
            
     
           bool _isPresent = false;  
           public bool isPresent  
           {  
               get  
               {  
                   return _isPresent;  
               }  
     
               set  
               {  
                   if (_isPresent != value)  
                   {  
                       _isPresent = value;  
                       OnPropertyChanged("isPresent");  
     
                   }  
               }  
     
           }  
     
           public MainPage()  
           {  
               InitializeComponent();  
     
               BindingContext = this;  
               Detail = new NavigationPage(new HomePage());  
               IsPresented = false;  
     
     
               MessagingCenter.Subscribe<App, string>(App.Current, "OneMessage", (snd, arg) =>  
               {  
                   isPresent = true;  
               });  
     
     
           }  
     
           private void Button_Clicked(object sender, EventArgs e)  
           {  
               Detail = new NavigationPage(new AddEmployee());  
               IsPresented = false;  
           }  
           private void Button_Clicked2(object sender, EventArgs e)  
           {  
               Detail = new NavigationPage(new ListEmployee());  
               IsPresented = false;  
           }  
     
           private void Button_Clicked3(object sender, EventArgs e)  
           {  
               Detail = new NavigationPage(new AboutUs());  
               IsPresented = false;  
           }  
           private void Button_Clickded4(object sender, EventArgs e)  
           {  
               Detail = new NavigationPage(new ContactUs());  
               IsPresented = false;  
           }  
     
           private void MasterDetailPage_IsPresentedChanged(object sender, EventArgs e)  
           {  
     
           }  
       }  
   }  

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.