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

Jethro Djan 1 Reputation point
2021-01-09T12:48:01.113+00:00

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>
Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,363 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Cole Xia (Shanghai Wicresoft Co,.Ltd.) 6,751 Reputation points
    2021-01-11T08:51:50.227+00:00

    Hello,

    Welcome to Microsoft Q&A!

    If the image is from local , you can set it directly in Forms project .

    //xaml of tabbedPage

       <ContentPage Title="Tab 1" IconImageSource="item1.png"/>  
           <ContentPage Title="Tab 2" IconImageSource="item2.png"/>  
    

    ---

    If the image comes from internet , you need to override the icon in custom renderer, try the following code .

       [assembly: ExportRenderer(typeof(TabbedPage), typeof(MyRenderer))]  
       namespace FormsApp.iOS  
       {  
           class MyRenderer : TabbedRenderer  
           {  
         
               public override void ViewDidLayoutSubviews()  
               {  
                   base.ViewDidLayoutSubviews();  
         
                   UITabBarItem[] items = this.TabBar.Items;  
         
                   var item1 = items[0];  
                   item1.Image = UIImage.LoadFromData(NSData.FromUrl(NSUrl.FromString("url1")));  
         
                   var item2 = items[1];  
                   item2.Image = UIImage.LoadFromData(NSData.FromUrl(NSUrl.FromString("url2")));  
               }  
           }  
       }  
    

    Thank you.


    If the response is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.