Header Configuration in Xamarin Backdrop Page (SfBackdropPage)

31 Oct 20192 minutes 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());
        
    }
    
    #endregion

    NOTE
    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"?>
    <backdrop:SfBackdropPage
        xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:backdrop="clr-namespace:Syncfusion.XForms.Backdrop;assembly=Syncfusion.SfBackdrop.XForms"
        x:Class="BackdropGettingStarted.BackdropSamplePage"
        OpenIcon="open.png"
        CloseIcon="close.png">
    </backdrop:SfBackdropPage>
    using Syncfusion.XForms.Backdrop;	
    namespace BackdropGettingStarted
    {
        public partial class BackdropSamplePage : SfBackdropPage
        {
            public BackdropSamplePage()
            {
                InitializeComponent();
                this.OpenIcon = "open.png";
                this.CloseIcon = "close.png";
            }
        }
    }

    Open Custom icons