How to change the backgroundColor of TabbedPage Dynamically from other Page in Xamarin forms

Question

I have a Tabbed Page Like below:

HomePage.xaml

<TabbedPage BackgroundColor="{Binding HomeBgColor}">
    <TabbedPage.Children>
        <local:MainPage/>
     </TabbedPage.Children>
</TabbedPage>

I am performing a action in MainPage on which I need to change the Background Color of Tabbed Page.

I tried the below method but it doesn't seem to work.

public class HomePageViewModel:ViewModelBase
    {
        INavigationService navigationService;

        
        private string homeBgColor = "#FFFFFF"
        public string HomeBgColor
        {
            get
            {
                return homeBgColor;
            }
            set
            {
                homeBgColor = value;
               RaisePropertyChanged("HomeBgColor");
            }
        }

        public HomePageViewModel(INavigationService navigation)
        {

        }
    }

MainPageViewModel.cs

public HomePageViewModel LoginVM { get; private set; }
OnButtonClick()
{
  LoginVM = new HomePageViewModel(navigationService);
  LoginVM.HomeBgColor = "#007AFF";
}

Any idea what is going wrong?
Any help is appreciated!

Answer 1

If you want to change the color of Tabbar you could use Custom Renderer

in iOS

[assembly: ExportRenderer(typeof(TabbedPage), typeof(TabbedPageRenderer))]
namespace xxx.iOS
{
    public class TabbedPageRenderer : TabbedRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            TabBar.TintColor = UIColor.White;
            TabBar.BarTintColor = UIColor.Black;
            TabBar.BackgroundColor = UIColor.Gray;
        }
    }
}

in Android

[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabbedPageRenderer))]
namespace xxx.Droid
{
    public class MyTabbedPageRenderer : TabbedPageRenderer
    {
        public MyTabbedPageRenderer(Context context) : base(context)
        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement == null && e.NewElement != null)
            {
                for (int i = 0; i <= this.ViewGroup.ChildCount - 1; i++)
                {
                    var childView = this.ViewGroup.GetChildAt(i);
                    if (childView is ViewGroup viewGroup)
                    {
                        for (int j = 0; j <= viewGroup.ChildCount - 1; j++)
                        {
                            var childRelativeLayoutView = viewGroup.GetChildAt(j);
                            if (childRelativeLayoutView is BottomNavigationView)
                            {
                                  (BottomNavigationView)childRelativeLayoutView).SetBackgroundColor(Android.Graphics.Color.Green);
                            }
                        }
                    }
                }
            }
        }
    }
}