SfBackdropPage Icon

[Aaron Khan]

Is it possible to change the hamburger icon that reveals the backlayer to another icon?

[Michael Prabhu M]

Hi Aaron, 

Greetings from Syncfusion. 

Hamburger icon is added in the ToolbarItems of Page, so you can change the hamburger icon that reveals the backlayer by changing the Icon property of ToolbarItem at load time and in Clicked event of ToolbarItem. Please refer the below code snippets. 

Code snippets for changing hamburger icon at load time: 

public BackdropSample() 

{ 

    InitializeComponent(); 

    // add the below code to change the hamburger icon in load time 

    var toolbarItem = ToolbarItems[0]; 

    // Note: hamburger icon will be displayed only when IsBackLayerRevealed is set as false, by default it is false. 

    toolbarItem.Icon = "icon.png"; // to change the hamburger icon  

    toolbarItem.Clicked += OnToolbarItemClicked; 

} 

 

Code snippets for changing hamburger icon on clicking ToolbarItem: 

private void OnToolbarItemClicked(object sender, EventArgs e) 

{ 

    if (this.IsBackLayerRevealed) 

    { 

        // to change the close icon. 

    } 

    else 

    { 

        // to change the hamburger icon 

        (sender as ToolbarItem).Icon = "icon.png"; 

    } 

} 

 

Sample: BackdropSample 

 

Note: We would like to let you know that we have planned to provide direct support for this and it will be available in our upcoming Vol 1 2019 release which is scheduled to be rolled out at mid of March 2019.   

Please let us know if you need any further assistance. 

Regards, 

Michael 

[Muhammad Aftab Amjad]

Hi Aaron, 

Greetings from Syncfusion. 

Hamburger icon is added in the ToolbarItems of Page, so you can change the hamburger icon that reveals the backlayer by changing the Icon property of ToolbarItem at load time and in Clicked event of ToolbarItem. Please refer the below code snippets. 

Code snippets for changing hamburger icon at load time: 

public BackdropSample() 

{ 

    InitializeComponent(); 

    // add the below code to change the hamburger icon in load time 

    var toolbarItem = ToolbarItems[0]; 

    // Note: hamburger icon will be displayed only when IsBackLayerRevealed is set as false, by default it is false. 

    toolbarItem.Icon = "icon.png"; // to change the hamburger icon  

    toolbarItem.Clicked += OnToolbarItemClicked; 

} 

 

Code snippets for changing hamburger icon on clicking ToolbarItem: 

private void OnToolbarItemClicked(object sender, EventArgs e) 

{ 

    if (this.IsBackLayerRevealed) 

    { 

        // to change the close icon. 

    } 

    else 

    { 

        // to change the hamburger icon 

        (sender as ToolbarItem).Icon = "icon.png"; 

    } 

} 

 

Sample: BackdropSample 

 

Note: We would like to let you know that we have planned to provide direct support for this and it will be available in our upcoming Vol 1 2019 release which is scheduled to be rolled out at mid of March 2019.   

Please let us know if you need any further assistance. 

Regards, 

Michael 

Hi, I am in the same shoes as I have a white navigation bar and a white icon does not appear.  I also tried the provided solution but it works after the first trigger like I press the invisible icon then the event OnToolbarItemClicked works fine and icon changes to the provided one otherwise it remains invisible. The complete solution is also add the following code

protected override async void OnAppearing()

{

     var toolbarItem = ToolbarItems[0];

     toolbarItem.Icon = "more.png";

}

[Bharathiraja K]

Hi Muhammad, 

 

Thanks for your workaround. We have included this feature in our Volume1 release which will be available in the mid of March 2019. 

 

Regards, 

 Bharathi.