We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SfBackdropPage Icon

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

3 Replies

MP Michael Prabhu M Syncfusion Team December 31, 2018 03:45 AM

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 



MA Muhammad Aftab Amjad replied to Michael Prabhu M March 10, 2019 06:29 AM

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";
}


BK Bharathiraja K Syncfusion Team March 11, 2019 05:28 AM

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.

Loader.
Live Chat Icon For mobile
Up arrow icon