Change Icons on tab change

[Mohib Sheth]

Hi,
I want to create TabView with 3 tab items. Tab items contain an image only which change colors when the tab is switched. 

I'm unable to figure out a way to set an image. Is there a way to set UIImageView directly to SfTabItem? I tried setting the ImageSource but that doesnt work as well.
I want to set my custom images. 

Also can you please help me with changing images when the tab is switched?

Looking forward to the reply. Thank you. 


Code snippet:

var calendar = new SfTabItem()

                        {

                            ImageSource = "ic_calendar_white.png",

                            Content = _calendarTabView.View

                        };

[Sakthivel Palaniyappan]

Hi Mohib,

Greetings from Syncfusion.

Query 1: Is there a way to set UIImageView directly to SfTabItem?

We have analyzed your query and you can achieve your requirement by using HeaderContent property of SfTabItem as like below code snippet.

Code:

 

           var tabItems = new TabItemCollection 

            { 

                new SfTabItem() 

                { 

                   HeaderContent = new UIImageView(){ Image = UIImage.FromFile("image1.jpg") }, 

                    Title="Tab1", 

                    Content = new UIView(){BackgroundColor= UIColor.White} 

                }, 

  

                new SfTabItem() 

                { 

                     HeaderContent = new UIImageView(){ Image = UIImage.FromFile("image2.jpg") }, 

                    Title="Tab2", 

                    Content = new UIView(){BackgroundColor= UIColor.Green} 

                }, 

  

                new SfTabItem() 

                { 

                    HeaderContent = new UIImageView(){ Image = UIImage.FromFile("image3.jpg") }, 

                    Title="Tab3", 

                    Content = new UIView(){BackgroundColor= UIColor.Red} 

                }, 

            }; 

We have created sample based on this, please find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewiOS957631816.zip

Query 2: Changing images when the tab is switched

You can change the images by using TabItemTapped event of SfTabview. Please find the code snippet for this.

 

 

  private void TabView_TabItemTapped(object sender, TabItemTappedEventArgs e)
        {
            if (e.TabItem.Title == "Tab1")
            {
                e.TabItem.HeaderContent = new UIImageView() { Image = UIImage.FromFile("image4.jpg"), ContentMode = UIViewContentMode.ScaleAspectFit };
            }
        } 

 

Please let us know if you have any other queries.

Regards,
Sakthivel P.