locked
New too Xamarin Forms - I would like to add a 'Refresh' and 'Add' button toolbar RRS feed

  • Question

  • User109544 posted

    In iOS I can use UIBarButtonSystemItem enumeration and use the system built icons. Does Xamarin Forms support this cross platforms? If not where is the best place to get free icons and then I can use the Icon property of the ToolbarItems.

    Wednesday, April 15, 2015 8:10 AM

Answers

  • User62190 posted

    hi there,

    there is no build in functionality to use the UIBarButtonSystemItem from XF.

    I created a custom renderer to use them, changing the toolbar item when the title has a certain value.

    On your page:

    this.ToolbarItems.Add(new ToolbarItem("add", Device.OnPlatform(string.Empty, "ic_action_new.png", string.Empty), () => 
    {
            // Some action
    });
    

    The renderer

    public class CustomToolbarRenderer : NavigationRenderer
        {
            public override void PushViewController(UIViewController viewController, bool animated)
            {
                base.PushViewController(viewController, animated);
    
                List<UIBarButtonItem> newItems = new List<UIBarButtonItem>();
    
                foreach (UIBarButtonItem i in TopViewController.NavigationItem.RightBarButtonItems)
                {
                    if (i.Title != null)
                    {
    
                        if (i.Title.Equals("add"))
                        {
                            UIBarButtonItem newItem = new UIBarButtonItem(UIBarButtonSystemItem.Add);
                            newItem.Action = i.Action;
                            newItem.Target = i.Target;
    
                            newItems.Add(newItem);
                        }
                        else if (i.Title.Equals("save"))
                        {
                            UIBarButtonItem newItem = new UIBarButtonItem(UIBarButtonSystemItem.Save);
                            newItem.Action = i.Action;
                            newItem.Target = i.Target;
    
                            newItems.Add(newItem);
                        }
                        else if (i.Title.Equals("done"))
                        {
                            UIBarButtonItem newItem = new UIBarButtonItem(UIBarButtonSystemItem.Done);
                            newItem.Action = i.Action;
                            newItem.Target = i.Target;
    
                            newItems.Add(newItem);
                        }
                        else
                            newItems.Add(i);
                    }
                    else
                        newItems.Add(i);
                }
    
                TopViewController.NavigationItem.RightBarButtonItems = newItems.ToArray();
    
    
            }
        }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, April 15, 2015 8:20 AM
  • User62190 posted

    also note that you have to export the custom renderer like this:

    [assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomToolbarRenderer))]

    see more here:

    developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, April 15, 2015 8:24 AM
  • User62190 posted

    for android i simply use the android design icons.

    https://developer.android.com/design/downloads/index.html

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, April 15, 2015 8:32 AM

All replies

  • User62190 posted

    hi there,

    there is no build in functionality to use the UIBarButtonSystemItem from XF.

    I created a custom renderer to use them, changing the toolbar item when the title has a certain value.

    On your page:

    this.ToolbarItems.Add(new ToolbarItem("add", Device.OnPlatform(string.Empty, "ic_action_new.png", string.Empty), () => 
    {
            // Some action
    });
    

    The renderer

    public class CustomToolbarRenderer : NavigationRenderer
        {
            public override void PushViewController(UIViewController viewController, bool animated)
            {
                base.PushViewController(viewController, animated);
    
                List<UIBarButtonItem> newItems = new List<UIBarButtonItem>();
    
                foreach (UIBarButtonItem i in TopViewController.NavigationItem.RightBarButtonItems)
                {
                    if (i.Title != null)
                    {
    
                        if (i.Title.Equals("add"))
                        {
                            UIBarButtonItem newItem = new UIBarButtonItem(UIBarButtonSystemItem.Add);
                            newItem.Action = i.Action;
                            newItem.Target = i.Target;
    
                            newItems.Add(newItem);
                        }
                        else if (i.Title.Equals("save"))
                        {
                            UIBarButtonItem newItem = new UIBarButtonItem(UIBarButtonSystemItem.Save);
                            newItem.Action = i.Action;
                            newItem.Target = i.Target;
    
                            newItems.Add(newItem);
                        }
                        else if (i.Title.Equals("done"))
                        {
                            UIBarButtonItem newItem = new UIBarButtonItem(UIBarButtonSystemItem.Done);
                            newItem.Action = i.Action;
                            newItem.Target = i.Target;
    
                            newItems.Add(newItem);
                        }
                        else
                            newItems.Add(i);
                    }
                    else
                        newItems.Add(i);
                }
    
                TopViewController.NavigationItem.RightBarButtonItems = newItems.ToArray();
    
    
            }
        }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, April 15, 2015 8:20 AM
  • User62190 posted

    also note that you have to export the custom renderer like this:

    [assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomToolbarRenderer))]

    see more here:

    developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, April 15, 2015 8:24 AM
  • User109544 posted

    Thanks and for Android what is best practice

    Wednesday, April 15, 2015 8:28 AM
  • User62190 posted

    for android i simply use the android design icons.

    https://developer.android.com/design/downloads/index.html

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, April 15, 2015 8:32 AM
  • User109544 posted

    Thank you

    Wednesday, April 15, 2015 8:39 AM
  • User109544 posted

    Just hit an issue with NavigationRenderer, it works when the application starts up. The problem is that when I switch to another tab and then come back, it now shows the Text 'Add' rather than '+'. Any idea?

    Wednesday, April 15, 2015 11:01 AM
  • User62190 posted

    so you have a navigation page on the screen with a tabbed page as content?

    Wednesday, April 15, 2015 11:06 AM
  • User109544 posted

    Correct

    Wednesday, April 15, 2015 11:24 AM
  • User62190 posted

    never actually tested it with that scenario. if you can provide me a sample or something i can try to take a look later this day.

    Wednesday, April 15, 2015 11:50 AM
  • User109544 posted

    Will see how easy its for me to provide a sample

    Wednesday, April 15, 2015 11:54 AM
  • User109544 posted

    I've resolved the problem by adding a PageRenderer and overriding the ViewWillLayoutSubviews method and put the toolbar code inside there.

    Wednesday, April 15, 2015 2:22 PM