Header Configuration

31 Oct 20191 minute to read

Add backdrop page as a children of NavigationPage in App.xaml.cs class. Also, BarBackgroundColor, BarTextColor and other properties of NavigationPage can be set to customize the default appearance of header.

  • C#
  • // In App.xaml.cs 
    #region Constructor
    public App()
      MainPage = new NavigationPage(new BackdropSamplePage());

    Page header for the backdrop will appear only when adding backdrop as a children of NavigationPage.

    Icon customization

    The default icons in the navigation header can be customized using the following ways:

    Default icons in NavigationPage

    When the backdrop page contained within the NavigationPage , hamburger icon and close icon (X mark ) will be used by default.

    Hamburger icon

    Default icons in MasterDetailsPage

    When the backdrop page placed in the MasterDetailPage, down arrow icon and up arrow icon will be used by default.

    Arrow icon

    Custom icons

    You can customize the default icons in the navigation header by setting the OpenIcon and CloseIcon properties in SfBackdropPage.

    <?xml version="1.0" encoding="UTF-8"?>
    using Syncfusion.XForms.Backdrop;	
    namespace BackdropGettingStarted
        public partial class BackdropSamplePage : SfBackdropPage
            public BackdropSamplePage()
                this.OpenIcon = "open.png";
                this.CloseIcon = "close.png";

    Open Custom icons