Xamarin Forms - TabbedPage platform specific xaml code to code-behind

Question

Im trying to change the color on the icons in a tabpage. Im able to do that, with a cast to android:TabbedPage.BarItemColor="Red".

But the color on the icons have to change, based on the page its currently showing.

Ive managed to make this method that triggers on page changed in my codebehind:

Tabbepage.xaml.cs

private void TabbedPage_CurrentPageChanged(object sender, EventArgs e)
    {
        
        var navigationPage = CurrentPage as NavigationPage;

        var currentPage = navigationPage.CurrentPage;

        if (currentPage.GetType() == typeof(MenuPage))
        {
            Tabbar.BarTextColor = Color.White;
            Tabbar.BarBackgroundColor = Color.FromHex("#004f3d");
        }
        else if (currentPage.GetType() == typeof(HerdList))
        {
            Tabbar.BarTextColor = Color.Black;
            Tabbar.BarBackgroundColor = Color.White;
        }
    }

But i can only figure out how to set the color as this:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:prism="http://prismlibrary.com"
            prism:ViewModelLocator.AutowireViewModel="True"
            x:Class="ChrApp.Views.Tab.BottomTabNavigation"
            xmlns:local="clr-namespace:ChrApp.Views"
            x:Name="Tabbar"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.BarSelectedItemColor="Green"
            android:TabbedPage.BarItemColor="Red"
            xmlns:CustomRenderer="clr-namespace:ChrApp.CustomRenderer"
            CurrentPageChanged="TabbedPage_CurrentPageChanged"
            >
    <NavigationPage 
        Title="Forside"
                    >
        <x:Arguments>
            <local:MenuPage/>
        </x:Arguments>
        <NavigationPage.IconImageSource>
            <FontImageSource  FontFamily="{StaticResource FontAwesomeSolid}" Glyph="{x:Static CustomRenderer:Icon.House}"/>
        </NavigationPage.IconImageSource>
        
        
    </NavigationPage>
    <NavigationPage 
        Title="Besætning"
                    >
        <x:Arguments>
            <local:HerdList/>
        </x:Arguments>
        <NavigationPage.IconImageSource>
            <FontImageSource  FontFamily="{StaticResource FontAwesomeSolid}" Glyph="{x:Static CustomRenderer:Icon.Pig}"/>
        </NavigationPage.IconImageSource>
    </NavigationPage>


</TabbedPage>

Can i somehow send the method in my codebehind to my viewmodel, or can i access the cast android:TabbedPage.BarItemColor="Red" from my codebehind?

Thanks in advance! ❤

Answer 1

This is how you can do it in the code behind

using Xamarin.Forms;
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
using Xamarin.Forms.Xaml;
using TabbedPage = Xamarin.Forms.TabbedPage;

namespace DummyTestApp.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class TabbedPage1 : TabbedPage
    {
        public TabbedPage1()
        {
            InitializeComponent();
            On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom).SetBarItemColor(Color.Red).SetBarSelectedItemColor(Color.Green);
        }
    }
}

P.S. : BarSelectedItemColor is now obsolete use SelectedTabColor in TabbedPage

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d" x:Class="DummyTestApp.Views.TabbedPage1"
            SelectedTabColor="Blue">
    <!--Pages can be added as references or inline-->
    <ContentPage Title="Tab 1" />
    <ContentPage Title="Tab 2" />
    <ContentPage Title="Tab 3" />
</TabbedPage>