0

I'm using a custom renderer to use iOS system icons in the navigation bar. It works fine, except that if the page is a TabbedPage, only the navigation icons for the default tab's page get their system icons. On other tabs, the system icons don't appear.

My current approach is to override PushViewController. The problem seems to be that when it's called, only the button items for that first tab are available. How can the custom renderer detect when the buttons on the navigation bar are changing? Or is there a better approach?

Current implementation:

/// <summary>
/// Sets system icons on the navigation bar that match the item text.
/// </summary>
class SystemIconNavigationRenderer : NavigationRenderer
{
    public override void PushViewController(UIViewController viewController, bool animated)
    {
        base.PushViewController(viewController, animated);

        // If any buttons are customized, replaces the list. Editing individual items doesn't work because UIBarButtonItem.Image is null for a new UIBarButtonItem created from a system item.
        var items = viewController.NavigationItem.RightBarButtonItems;
        bool changed = false;
        var newItems = new UIBarButtonItem[items.Length];
        for (int i = 0; i < items.Length; ++i) {
            var item = items[i];
            UIBarButtonSystemItem systemItem = (UIBarButtonSystemItem)(-1);
            switch (item.Title) {
                case nameof(UIBarButtonSystemItem.Add): systemItem = UIBarButtonSystemItem.Add; break;
                // More icons...
            }
            if (systemItem >= 0) {
                newItems[i] = new UIBarButtonItem(systemItem) { Action = item.Action, Target = item.Target };
                changed = true;
            } else
                newItems[i] = item;
        }
        if (changed) viewController.NavigationItem.RightBarButtonItems = newItems;
    }
}
Edward Brey
  • 40,302
  • 20
  • 199
  • 253
  • For tabbed page you need custom renderer as shown here https://stackoverflow.com/questions/29560305/can-one-use-system-icons-on-tabs-in-xamarin-forms/45494801#45494801 Please upvote if helps – Yuri S Aug 28 '17 at 18:55
  • @YuriS The question you linked to deals with system icons on on the tab bar. I'm asking about system icons on the navigation bar. – Edward Brey Aug 28 '17 at 19:01
  • You said "On other tabs, the system icon's don't appear". I am confused of what you trying to do. Navigation bar itself can have only one icon. Are you talking about Toolbar. Can you clarify or post an image of what you are trying to achieve? – Yuri S Aug 28 '17 at 19:04
  • Also look here. That might help: https://forums.xamarin.com/discussion/52337/navigationpage-settitleicon – Yuri S Aug 28 '17 at 20:56
  • [System icons](https://developer.apple.com/ios/human-interface-guidelines/graphics/system-icons/) apply to Navigation Bar, Toolbar, Tab Bar, and Quick Action. I have system icons working for the Tab Bar (at the bottom of the screen). I also have system icons working in the Navigation Bar (top of the screen), but only for pages that don't have tabs. This question is about getting system icons to work in the Navigation Bar (top of the screen) when there are tabs. – Edward Brey Aug 29 '17 at 12:57

0 Answers0