xaml - Get native iOS system tab bar icons for TabbedPage on Xamarin.Forms

Question

I am new to Xamarin.Forms and XAML. I am trying to get tab icons to display for ONLY IOS for the my different pages in my TabbedPage. I did a bit of search and I have come to know that UIKit has a reference to system icons available on IOS at UITabBarSystem. How can I make use of the elements in that enum without having to get those icons from the internet? The TabbedPage is the root with children pages that are ContentPages and ListView pages. So as you will see from the attached sample, I would like the "IconImageSource" property for FavouritesPage to get the image from the iOS UIKit. Is that possible?

 <?xml version="1.0" encoding="utf-8" ?>
 <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:PhoneApp.Views"
             x:Class="PhoneApp.Views.MainPage">
     <TabbedPage.Title>
    
     </TabbedPage.Title>
     <TabbedPage.Children>
         <views:FavouritesPage Title="Favourites" IconImageSource=""/>
         <views:RecentsPage Title="Recents"/>
         <views:ContactsPage Title="Contacts"/>
         <views:KeypadPage Title="Keypad"/>
         <views:VoicemailPage Title="Voicemail"/>
     </TabbedPage.Children>
 </TabbedPage>

question from:https://stackoverflow.com/questions/65643027/get-native-ios-system-tab-bar-icons-for-tabbedpage-on-xamarin-forms

Answer 1

I think I found the right solution for you. If you want to use native Api's on Xamarin controls, you can use custom renderer for them which are great! Here is the renderer for the TabedPage:

[assembly: ExportRenderer(typeof(MainPage), typeof(MyTabbedPageRenderer))]
namespace TestApp.iOS
{
    public class MyTabbedPageRenderer : TabbedRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);

            if (TabBar?.Items == null) return;

            //Setting the Icons
            TabBar.Items[0].Image = GetTabIcon(UITabBarSystemItem.Search);
            TabBar.Items[1].Image = GetTabIcon(UITabBarSystemItem.Downloads);
            TabBar.Items[2].Image = GetTabIcon(UITabBarSystemItem.Bookmarks);
        }

        private UIImage GetTabIcon(UITabBarSystemItem systemItem)
        {
            //Convert UITabBarItem to UIImage
            UITabBarItem item = new UITabBarItem(systemItem, 0);

            return UIImage.FromImage(item.SelectedImage.CGImage, item.SelectedImage.CurrentScale, item.SelectedImage.Orientation);
        }
    }
}

I created a sample for you, which you can find here. If you have any questions, please ask!

Regards