locked
ToolBarItems Left side RRS feed

  • Question

  • User2496 posted

    Is it possible to specify toolbar button items to go to the left side ?

    Thursday, June 12, 2014 3:09 PM

All replies

  • User1004 posted

    no, not right now

    Friday, June 13, 2014 7:35 AM
  • User39602 posted

    @StephaneDelcroix? you mean "no, not left now"? Duck and run :-)

    Friday, June 13, 2014 12:06 PM
  • User1004 posted

    :)

    Friday, June 13, 2014 12:56 PM
  • User54879 posted

    Important issue for iOS. For example, it's impossible now to implement commonly used Save/Cancel modal views.

    Tuesday, July 15, 2014 10:04 AM
  • User54879 posted

    It would be possible to workaround this issue if we find a way to override ToolbarRenderer. Created a separate question here: http://forums.xamarin.com/discussion/20467/how-to-override-toolbarrenderer

    Tuesday, July 15, 2014 1:12 PM
  • User4685 posted

    @StephaneDelcroix? @rene_ruppert? bump on this one.

    Has this been fixed? Or has the ability to override been fixed?

    This a basic requirement for pretty much every mobile application in iOS.

    Wednesday, August 6, 2014 1:40 AM
  • User20490 posted

    It's not pretty, but I showed my approach on another thread.

    Wednesday, August 6, 2014 4:08 AM
  • User4685 posted

    Update: If you follow Angel Anton Yebra instructions on this page you can work around the issue: http://forums.xamarin.com/discussion/20467/how-to-override-toolbarrenderer

    Wednesday, August 6, 2014 5:54 AM
  • User37827 posted

    Bringing this issue up again. I would like to see it formally supported.

    Thursday, October 2, 2014 10:29 PM
  • User48980 posted

    +1

    Wednesday, November 12, 2014 12:33 AM
  • User74604 posted

    +1

    Wednesday, December 17, 2014 3:55 PM
  • User311 posted

    +1

    Wednesday, December 17, 2014 6:32 PM
  • User112 posted

    It'd be nice if Forms were a little bit more open to let handle these "exotic" requirements by ourselves.

    Wednesday, December 17, 2014 6:41 PM
  • User118856 posted

    +1 Has this been solved recently?

    Monday, May 4, 2015 8:55 AM
  • User3944 posted

    Currently when you add toolbar items, the first one will be rendered on the left side for iOS.

    You can customize the behavior using a custom renderer. In this case a NavigationRenderer.

    Monday, May 4, 2015 11:09 AM
  • User118856 posted

    This doesn't seem to apply for ToolbarItems set through XAML.

    Monday, May 4, 2015 11:16 AM
  • User5881 posted

    +5. Non-bindable Items property on the Picker, now this. Not happy finding that basic stuff just doesn't work in a usable fashion. Am starting to wonder if I am making a mistake using Xamarin Forms. Coming from Silverlight/WPF I absolutely love the potential but I am seeing way too many threads in this forum dating back 12 months with no suitable response from Xamarin. And on top of that, such unstable usage in Visual Studio, I had to move my solution back to the mac in order to get any sort of development going. I believe there is a service pack coming very shortly so I'll reserve judgement until then. I need to purchase the Android version of Xamarin but am not prepared to do so with where Xamarin is at the moment. Come on Xamarin, do you want my money?!

    Tuesday, June 9, 2015 11:16 AM
  • User19820 posted

    @JeffButterworth See http://forums.xamarin.com/discussion/comment/67784/#Comment_67784 Very very hackish but it works

    Tuesday, June 9, 2015 11:54 AM
  • User5881 posted

    @AndreiNitescu I did see that thread. It's been a very long few days trying to get an app framework together. I guess I am a bit over having to dig deep into ugly hacks everytime I turn around to do something new. At this stage I am ending up with a working app but damn its ugly. At some stage I will need to go through all these hacks to get something that looks decent but focusing on getting something working right now.

    Tuesday, June 9, 2015 12:02 PM
  • User19820 posted

    @JeffButterworth I have same issues, I share your pain. I wanted to help by making sure everyone's on this thread sees that "workaround".

    Tuesday, June 9, 2015 12:07 PM
  • User173258 posted

    Has this been solved in the latest release?

    Friday, December 11, 2015 9:25 AM
  • User149478 posted

    up

    Thursday, May 26, 2016 8:01 PM
  • User193689 posted

    up

    Wednesday, July 27, 2016 10:32 AM
  • User211830 posted

    Any changes here?

    Tuesday, August 2, 2016 1:15 PM
  • User139131 posted

    Would be nice if this was updated.

    Thursday, August 11, 2016 5:47 AM
  • User249115 posted

    +1

    Friday, August 12, 2016 8:12 AM
  • User64909 posted

    +1000000

    Thursday, September 1, 2016 4:26 AM
  • User31582 posted

    Hey guys,

    The left toolbar item makes sense only in iOS. There is no left button in Android. So basically you need a collection in the base page like LeftToolbarItems that will add a ToolbarItem in the left on iOS only:

        public class BasePage: ContentPage
            {
                public ObservableCollection<ToolbarItem> LeftToolbarItems { get; set; }
    
                public BasePage()
                {
                    LeftToolbarItems = new ObservableCollection<ToolbarItem>();
                }
            }
    

    All you need now is the renderer in the iOS. Pierce Boggan from Xamarin has implemented this very elegantly HERE.

    To use it in Xamarin.Forms:

    var cancelItem = new ToolbarItem();
    
    if (Device.OS != TargetPlatform.iOS)
    {
        ToolbarItems.Add(cancelItem);
    }
    else
    {
        LeftToolbarItems.Add(cancelItem);
    }
    
    Friday, September 2, 2016 10:36 PM
  • User202091 posted

    I disagree with you, look at google application on Android (inbox for example) you will see button on the navbar on the left side.

    We are in 2016 and there is still no easy way to do it?

    Thursday, September 22, 2016 9:03 AM
  • User240159 posted

    I'd recommend Telerik RadSideDrawer solution: http://docs.telerik.com/devtools/xamarin/controls/sidedrawer/sidedrawer-overview + custom toolbar.

    Best solution, if you want top toolbar + menu, looking same on each platform.

    Thursday, September 22, 2016 11:28 AM
  • User1786 posted

    Can we just replace the toolbar with a Grid? Is there a way to keep the grid fixed while we navigate the content pages?

    Thursday, September 22, 2016 12:40 PM
  • User89714 posted

    @EmanueleSabetta - That's my plan when I get around to replacing the built-in toolbar.

    Thursday, September 22, 2016 1:25 PM
  • User212305 posted

    Thanks @Lush, works brilliantly!

    Thursday, September 22, 2016 3:27 PM
  • User31568 posted

    still no solution form Xamarin?!

    Thursday, November 30, 2017 11:43 PM
  • User39602 posted

    Xamarin.Forms will never support every possible native feature but it is relatively easy to add support. You could use a custom renderer or create an Effect which does the same.

    Friday, December 1, 2017 7:55 AM
  • User29264 posted

    I was fiddling with this problem and then suddenly reliazed that ToolbarItem had a function called ToUIBarButtonItem. Then based on other posts here we can make a custom renderer that doesnt base itself on existing UIBarButtonItems but just create new ones. I havent tested it with hamburger-menu and stuff like that but it works the same way as the other examples around.

    I just created a general renderer for all my content-pages but you can specify pages-type if you want to changing the first typeof in the ExportRenderer.

    This is for iOS but you can adjust it for andoid too i guess.

    To use it you just use the priority - negative numbers will be on left side and positive on right side. Example XAML: <ContentPage.ToolbarItems> <ToolbarItem Name="Cancel" Priority="-1" Order="Primary" /><!-- Negative goes on the left side --> <ToolbarItem Name="Save" Priority="1" Order="Primary" /><!-- Positive priority goes on the right side --> </ContentPage.ToolbarItems>

    Only thing you have to do is adding this file to your iOS project (you also have to edit the namespace ProjectName to fit your project): ``` using System; using System.Collections.Generic; using System.Linq; using System.Text;

    using Foundation; using UIKit;

    using Xamarin.Forms; using Xamarin.Forms.Platform.iOS;

    [assembly: ExportRenderer(typeof(ContentPage), typeof(ProjectName.iOS.CustomContentPageRenderer))]

    namespace ProjectName.iOS { class CustomContentPageRenderer : PageRenderer { public new ContentPage Element { get { return (ContentPage)base.Element; } }

        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);
            List<UIBarButtonItem> LeftNavList = new List<UIBarButtonItem>();
            List<UIBarButtonItem> RightNavList = new List<UIBarButtonItem>();
            List<ToolbarItem> ToolbarList = new List<ToolbarItem>();
    
            UINavigationItem navigationItem = this.NavigationController.TopViewController.NavigationItem;
    
            // Add to new list for sorting
            foreach (ToolbarItem itm in Element.ToolbarItems)
            {
                ToolbarList.Add(itm);
            }
    
            // Sort the list
            ToolbarList.Sort((ToolbarItem i1, ToolbarItem i2) =>
            {
                return i1.Priority > i2.Priority ? -1 : 1;
            });
    
            foreach (ToolbarItem itm in ToolbarList)
            {
                if (itm.Priority < 0)
                {
                    LeftNavList.Add(itm.ToUIBarButtonItem());
                }
                else
                {
                    RightNavList.Add(itm.ToUIBarButtonItem());
                }
            }
            navigationItem.SetLeftBarButtonItems(LeftNavList.ToArray(), false);
            navigationItem.SetRightBarButtonItems(RightNavList.ToArray(), false);
        }
    }
    

    } ```

    I am kinda new to Xamarin in general so feedback are welcome :)

    Wednesday, December 6, 2017 10:39 AM
  • User29264 posted

    (double post deleted)

    Wednesday, December 6, 2017 10:39 AM
  • User171749 posted

    @SveinLarsen said: I was fiddling with this problem and then suddenly reliazed that ToolbarItem had a function called ToUIBarButtonItem. Then based on other posts here we can make a custom renderer that doesnt base itself on existing UIBarButtonItems but just create new ones. I havent tested it with hamburger-menu and stuff like that but it works the same way as the other examples around.

    I just created a general renderer for all my content-pages but you can specify pages-type if you want to changing the first typeof in the ExportRenderer.

    This is for iOS but you can adjust it for andoid too i guess.

    To use it you just use the priority - negative numbers will be on left side and positive on right side. Example XAML: <ContentPage.ToolbarItems> <ToolbarItem Name="Cancel" Priority="-1" Order="Primary" /><!-- Negative goes on the left side --> <ToolbarItem Name="Save" Priority="1" Order="Primary" /><!-- Positive priority goes on the right side --> </ContentPage.ToolbarItems>

    Only thing you have to do is adding this file to your iOS project: ``` using System; using System.Collections.Generic; using System.Linq; using System.Text;

    using Foundation; using UIKit;

    using Xamarin.Forms; using Xamarin.Forms.Platform.iOS;

    [assembly: ExportRenderer(typeof(ContentPage), typeof(ProjectName.iOS.CustomContentPageRenderer))]

    namespace ProjectName.iOS { class CustomContentPageRenderer : PageRenderer { public new ContentPage Element { get { return (ContentPage)base.Element; } }

      public override void ViewWillAppear(bool animated)
      {
          base.ViewWillAppear(animated);
          List<UIBarButtonItem> LeftNavList = new List<UIBarButtonItem>();
          List<UIBarButtonItem> RightNavList = new List<UIBarButtonItem>();
          List<ToolbarItem> ToolbarList = new List<ToolbarItem>();
    
          UINavigationItem navigationItem = this.NavigationController.TopViewController.NavigationItem;
    
          // Add to new list for sorting
          foreach (ToolbarItem itm in Element.ToolbarItems)
          {
              ToolbarList.Add(itm);
          }
    
          // Sort the list
          ToolbarList.Sort((ToolbarItem i1, ToolbarItem i2) =>
          {
              return i1.Priority > i2.Priority ? -1 : 1;
          });
    
          foreach (ToolbarItem itm in ToolbarList)
          {
              if (itm.Priority < 0)
              {
                  LeftNavList.Add(itm.ToUIBarButtonItem());
              }
              else
              {
                  RightNavList.Add(itm.ToUIBarButtonItem());
              }
          }
          navigationItem.SetLeftBarButtonItems(LeftNavList.ToArray(), false);
          navigationItem.SetRightBarButtonItems(RightNavList.ToArray(), false);
      }
    

    } } ```

    I am kinda new to Xamarin in general so feedback are welcome :)

    Looks nice, Nice contribution thanks!

    Wednesday, December 6, 2017 12:00 PM
  • User332065 posted

    Since Xamarin may have already added a menu item to the left, as in the case of a master-detail layout, the code below is streamlined and handles this variation keeping the left menu that's already there.

    using System.Linq;
    using UIKit;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.iOS;
    
    [assembly: ExportRenderer(typeof(ContentPage), typeof(ProjectName.iOS.Renderers.CustomContentPageRenderer))]
    namespace ProjectName.iOS.Renderers
    {
        class CustomContentPageRenderer : PageRenderer
        {
            public new ContentPage Element
            {
                get { return (ContentPage)base.Element; }
            }
    
            public override void ViewWillAppear(bool animated)
            {
                base.ViewWillAppear(animated);
    
                ConfigureToolbarItems();
            }
    
            private void ConfigureToolbarItems()
            {
                if (NavigationController != null)
                {
                    UINavigationItem navigationItem = NavigationController.TopViewController.NavigationItem;
                    var orderedItems = Element.ToolbarItems.OrderBy(x => x.Priority);
    
                    // add right side items
                    var rightItems = orderedItems.Where(x => x.Priority >= 0).Select(x => x.ToUIBarButtonItem()).ToArray();
                    navigationItem.SetRightBarButtonItems(rightItems, false);
    
                    // add left side items, keep any already there
                    var leftItems = orderedItems.Where(x => x.Priority < 0).Select(x => x.ToUIBarButtonItem()).ToArray();
                    if (navigationItem.LeftBarButtonItems != null)
                        leftItems = navigationItem.LeftBarButtonItems.Union(leftItems).ToArray();
                    navigationItem.SetLeftBarButtonItems(leftItems, false);
                }          
            }
        }
    }
    
    Tuesday, February 27, 2018 1:39 AM
  • User366027 posted

    This looks like exactly what I need, but I am brand new to Xamarin Forms and need some guidance on how to customize the code for Android. To start with, how do I need to change it to address the error below?

    PageRenderer.PageRenderer() is obsolete. This constructor is obsolete as of version 2.5. Please use PageRenderer(Context) instead.

    Monday, March 5, 2018 8:09 PM
  • User367223 posted

    @CodeGrue this works perfectly for iOS, can you help us with the code for Android also?

    Thursday, August 30, 2018 1:53 PM
  • User332065 posted

    Android renders are structured slightly differently but the concept should be transferable. However, Android may already support this natively, I'm not sure.

    Thursday, August 30, 2018 2:52 PM