locked
Navigation Bar left Toolbar button RRS feed

  • Question

  • User55553 posted

    Does anyone know any way to add a toolbar item to the left side of a navigation bar instead of the right?

    Wednesday, July 23, 2014 2:38 PM

All replies

  • User23564 posted

    I wanted to ask the same question but I think you can't the only was is to make a custom renderer.

    Wednesday, July 23, 2014 3:42 PM
  • User7157 posted

    I'm interested in this as well.

    Thursday, July 31, 2014 5:53 PM
  • User14 posted

    No, you cannot add a toolbar button to the left side of the navigation bar using Xamarin.Forms.

    Thursday, July 31, 2014 5:54 PM
  • User2496 posted

    You will need a custom render, here's how i have done it in IOS: (the thing is no way to you to get info from tamarin forms for the UIToolbarItem, so you can use the title to get the button u want or hardcode.

    (this code, shows moving the 1st button to the left, leaving the other 2 buttons on the right) attached a screenshot

    Create a custom PageRenderer to the page type where you want to access,

    [assembly: ExportRenderer(typeof(CategoriesPage), typeof(CategoriesPageRenderer))]

    and add

        bool updatedButtons = false;
            public override void ViewWillAppear(bool animated)
            {
                base.ViewWillAppear (animated);
    
                if (!updatedButtons)
                    MoveButtonToLeft ();
            }
    
    
            protected void MoveButtonToLeft()
            {
    
                var infoButton = NavigationController.TopViewController.NavigationItem.RightBarButtonItems[0];
                NavigationController.TopViewController.NavigationItem.LeftBarButtonItem = infoButton;
    
                var favButton = NavigationController.TopViewController.NavigationItem.RightBarButtonItems[1];
                var musicButton = NavigationController.TopViewController.NavigationItem.RightBarButtonItems[2];
                NavigationController.TopViewController.NavigationItem.RightBarButtonItems = new UIBarButtonItem[2] {favButton, musicButton };
    
                updatedButtons = true;
            }
    
    Friday, August 1, 2014 12:14 AM
  • User7157 posted

    This is my custom implementation for iOS. This will add the ToolbarItem with Priority 0 to the left, and the ones with Priority 1 with "Done" style:

    ContentPageRenderer.cs

        [assembly:ExportRenderer(typeof(ContentPage), typeof(ContentPageRenderer))]
        namespace {namespace}
        {
            public class ContentPageRenderer : PageRenderer
            {
                public override void ViewWillAppear(bool animated)
                {
                    base.ViewWillAppear(animated);
    
                    var itemsInfo = (this.Element as ContentPage).ToolbarItems;
    
                    var navigationItem = this.NavigationController.TopViewController.NavigationItem;
                    var leftNativeButtons = (navigationItem.LeftBarButtonItems ?? new UIBarButtonItem[]{ }).ToList();
                    var rightNativeButtons = (navigationItem.RightBarButtonItems ?? new UIBarButtonItem[]{ }).ToList();
    
                    rightNativeButtons.ForEach(nativeItem =>
                    {
                        var info = GetButtonInfo(itemsInfo, nativeItem.Title);
    
                        if (info == null || info.Priority != 0)
                        {
                            if (info.Priority == 1)
                                nativeItem.Style = UIBarButtonItemStyle.Done;
    
                            return;
                        }
    
                        rightNativeButtons.Remove(nativeItem);
                        leftNativeButtons.Add(nativeItem);
                    });
    
                    navigationItem.RightBarButtonItems = rightNativeButtons.ToArray();
                    navigationItem.LeftBarButtonItems = leftNativeButtons.ToArray();
                }
    
                private ToolbarItem GetButtonInfo(IList<ToolbarItem> items, string name)
                {
                    if (string.IsNullOrEmpty(name) || items == null)
                        return null;
    
                    return items.ToList().Where(itemData => name.Equals(itemData.Name)).FirstOrDefault();
                }
            }
        }
    

    CustomPage.xaml

    <ContentPage.ToolbarItems>
        <ToolbarItem Name="Cancel" Order="Primary" Priority="0" />
        <ToolbarItem Name="Next" Order="Primary" Priority="1" />
    </ContentPage.ToolbarItems>
    

    Hope it helps!

    Tuesday, August 12, 2014 9:39 PM
  • User36353 posted

    Hey Murally,

    Nice snippet, I just added these lines after the base. ViewWillAppear() call:

            if (NavigationController == null)
                return;
    

    This will prevent crashes on pages without the Navigation bar.

    Tuesday, September 2, 2014 1:13 AM
  • User69196 posted

    Thanks for posting this. I'm trying to figure out how to customize the nav bar as well, for button position and other things, and this has been helpful. A couple of comments/questions:

    1. There's a bug in @Murally?'s code: right after the check for info == null there's another if (info.Priority == 1). I hit this right off the bat when I tried this out.

    2. The GetButtonInfo method isn't working for me, nativeItem.Title is always null although the ToolbarItem does have a name. For now I'm instead relying on matching order in the collections, but I suspect that's liable to break.

    3. Any idea how to customize the Action Bar produced by NavigationPage in Android? I'd like to try to do a custom renderer there but I have found no documentation on Xamarin's renderers.

    David

    Tuesday, October 7, 2014 11:29 PM
  • User96291 posted

    Hi, can you Guys help me to solve it? http://forums.xamarin.com/discussion/31347/modal-screen-in-forms-xamarin

    Wednesday, January 21, 2015 2:04 PM
  • User74975 posted

    Hi, I implemented above custom renderer to show left bar button but, the navigation leftNativeButtons and rightNativeButtons count is always coming 0, and a while page is loading. can you guys please help me to short out this.

    Monday, February 2, 2015 8:21 PM
  • User103535 posted

    How can we achieve this in android ..?

    Please help on this.

    Wednesday, February 11, 2015 11:33 AM
  • User102245 posted

    Modified @Murally solution with reflection to get the original toolbaritem from private property. Works well on my iOS Simulator with Xamarin Forms 1.3.4

    https://gist.github.com/alexlau811/f1fff9e726333e6b4a2f

    Sunday, February 22, 2015 4:46 AM
  • User102245 posted

    @madhukar.4849, the ActionBar in Android have no space on the left hand side. What would you expect the layout in Android if you move the buttons to the left?

    Wednesday, February 25, 2015 3:03 PM
  • User96012 posted

    Hi, @Murally and @AlexLau I tried above solution and its working perfect in content page but it's not working in tabbed page. When click on tab every time it added buttons repeatedly even i use in tabbed page. Please help me figure out this problem.

    Thursday, March 19, 2015 7:33 AM
  • User77866 posted

    Hi.

    I used this solution and it worked great. However, ran into an issue on a page where I was adding/removing toolbar items dynamically based on content on the page. Example: Show a toolbar item on the left, content changes on page so remove the item, change content again so toolbar item is added again. The second time the toolbar item is added, it shows on the right so end up having the item displayed twice (left and right). Is there another event besides ViewWillAppear that can be hooked into to pick up when menu items are added/removed?

    thanks

    Wednesday, April 1, 2015 4:01 PM
  • User67614 posted

    Hi, Everyone

    My issue at hand seems related so I will ask it here. I use a master detail page to display menu and the detail page is a NavigationPage wrapping ContentPage.

    Initially the toolbar will display the "menu"(or sandwich?) button to the left and when tapped the master menu view will be showing which is perfect. But once I start to navigate to another page, the "menu" button gets replaced by what seems to be a "back" button, as it will bring you back to previous page.

    This confuses users as they may need to tap multiply times in order to get to the menu view, (there is swipe action you can use but it is less obvious).

    Is there a way to display both buttons at same time wherever makes sense.(and maybe hide the back button if it is already at root).

    Above behavior is observed on android as I don't get a change to run it under ios yet.

    Thanks a lot.

    Wednesday, April 1, 2015 7:37 PM
  • User130023 posted

    @AlexLau Thanks for posting your code. I have two questions. 1. On pages that do not have toolbar items, I am losing the image that used to be rendered and 2. I am getting a System.InvalidOperationException the second time i hit the top of your loop (rightNativeButtons)., "Collection was modified; enumeration operation may not execute."

    Thanks

    Thursday, August 13, 2015 7:04 PM
  • User130023 posted

    Losing my image was a coincidence, had nothing to do with ContentPageRenderer code.

    Thursday, August 13, 2015 7:23 PM
  • User130023 posted

    I'm using the custom renderer code posted by @Murally and @AlexLau to move the left most toolbar item to the left of the title - which works great once I moved the updating of the left and right lists out of the loop. However, I'm also attempting to load my icons here as well, because if I place my icons in the toolbar in xaml I still get solid blue circles. When I try to add them in the renderer I get what appear to be very large and duplicated (vertically) icons. Any help would be greatly appreciated. Thanks. Using code nativeItem.SetBackgroundImage( UIImage.FromBundle("minus.png"), UIControlState.Normal, UIBarMetrics.Default);

    Monday, August 24, 2015 1:06 PM
  • User5881 posted

    @Kevin.2891 and @UddhaoPachrne did you ever get a solution to your issue? Uddhao, I am having exact same issue as you in the tabbed pages. I added some code to check whether the button exists on the left before moving it over, but now I seem to have ended up with same issue as Kevin. Very frustrating.

    Tuesday, December 1, 2015 9:49 AM
  • User5881 posted

    @KevinKramer, see previous comment (the @ tag didn't work correctly).

    Tuesday, December 1, 2015 9:50 AM
  • User198768 posted

    Any way to add toolbar item to the leftmost side of navigation bar in Android ?

    Friday, February 26, 2016 8:24 AM
  • User103333 posted

    best solution so far here

    Thursday, October 6, 2016 10:20 PM
  • User266789 posted

    So can anyone show me what a sample PageRenderer class would look like? I am confused on how to create the base class for this and not sure what Bindable Properties to use.

    Thursday, March 9, 2017 9:30 PM
  • User327267 posted

    Hey there, sorry for upping this old thread but i got a little issue here. Bringing the item to the left works for me with the code from @rmarinho , but for some reason my TabBar completely disappears (i got the toolbar nested in a TabbedPage). Any solution for that?

    EDIT: Sorry! All i had to do is rename public class ContentPageRenderer : PageRenderer and write TabbedRenderer instead of PageRenderer Stupid me!

    Thursday, June 1, 2017 2:31 PM
  • User307736 posted

    Had to put it in

    public override void ViewDidAppear(bool animated)
    

    for this to work properly when switching between pages in a tabbed navigation.

    Saturday, September 9, 2017 2:18 PM
  • User365157 posted

    @MURAL said:
    var navigationItem = this.NavigationController.TopViewController.NavigationItem; Here NavigationController showing null reference exception for me.

    Wednesday, May 2, 2018 7:07 AM