How do I make a Xamarin UWP Bottom Tabbar and Change the Color on the fly?

Question

After much digging, I found a custom renderer that creates a bottom Tabbar on Xamarin Forms Uwp, but since it's based on a style I had to add to the UWP app.Xaml, I have no idea how to change the tabbar background and text colors.

Any Ideas? Or do you have a renderer that will work better?

The Style is at: https://pastebin.com/gyx0a5Bq

The Renderer code:

public class TabbedPageRenderer : Xamarin.Forms.Platform.UWP.TabbedPageRenderer
   {
      protected override void OnElementChanged(VisualElementChangedEventArgs e)
      {
         base.OnElementChanged(e);
         if (Control != null)
            Control.Style = (Windows.UI.Xaml.Style)Windows.UI.Xaml.Application.Current.Resources["PivotHeaderBottomStyle"];
      }
  }

Answer 1

CustomTabbedPage in Forms project

<local:Page1 Title="Tab 1" >
        <local:Page1.IconImageSource>
            <FontImageSource  Glyph="&#xf2b9;" Color="Red"/>
        </local:Page1.IconImageSource>
    </local:Page1>

App.xaml in UWP project

<Grid.RowDefinitions>
         <RowDefinition Height="30"/>
          <RowDefinition Height="20"/>
           </Grid.RowDefinitions>
               <TextBlock Text="{Binding IconImageSource.Glyph}" FontFamily="ms-appx:///Assets/Font Awesome 5 Free-Solid-900.oft#Font Awesome 5 Free Solid"/>
              <TextBlock  HorizontalAlignment="Center" Foreground="Red" Grid.Row="1" Text="{Binding Title}"  Style="{ThemeResource BodyTextBlockStyle}"/>

Answer 2

Is there no way to do it then @Cole Xia (Shanghai Wicresoft Co,.Ltd.) ?.

I'm trying to use a color to brush converter, but it isn't working. Not sure if the color I'm binding to in the style is a xamarin forms color or a windows color, or a brush, and if i should be using a xamarin or uwp converter. Really appreciate the help more than you know. I'm in some stuff I've never had to deal with.

  <DataTemplate>  
                        <Grid Padding="0,3">  
                            <Grid.RowDefinitions>  
                                <RowDefinition Height="*" />  
                                <RowDefinition Height="*" />  
                            </Grid.RowDefinitions>  
                            <TextBlock  
                                Foreground="{Binding Color, Converter={StaticResource ColorToBrushConverter}}"  
                                Style="{ThemeResource TabbarHeaderFaStyle}"  
                                Text="{Binding IconImageSource.Glyph}" />  
                            <TextBlock  
                                Grid.Row="1"  
                                Foreground="{Binding Color, Converter={StaticResource ColorToBrushConverter}}"  
                                Style="{ThemeResource TabbarHeaderFontStyle}"  
                                Text="{Binding Title}" />  
                        </Grid>  
                    </DataTemplate>  

Answer 3

@Cole Xia (Shanghai Wicresoft Co,.Ltd.) , this doesn't seem to work. Am I missing something? It seems I'm only converting to a xamarin forms brush. Here is my binding in the UWP app.Xaml:

And my Bindable property in the shared project is:

   public class CustomTabbedPage : TabbedPage  
    {   /// <summary>  
        /// Start color for the gradient (top) color  
        /// </summary>  
        public static readonly BindableProperty FontIconProperty =  
            BindableProperty.Create(propertyName: "FaIconBrush",  
                returnType: typeof(SolidColorBrush),  
                declaringType: typeof(CustomTabbedPage),  
                defaultBindingMode: BindingMode.OneWay,  
                propertyChanged: HandlePropertyChanged);  
  
        public SolidColorBrush FaIconBrush  
        {  
            // ----- The display text for the composite control.  
            get  
            {  
                return (SolidColorBrush)base.GetValue(FontIconProperty);  
            }  
            set  
            {  
                if (this.FaIconBrush != value)  
                    base.SetValue(FontIconProperty, value);  
            }  
        }  
  
        private CityAppSettings appSettings;  
        public CustomTabbedPage()  
        {  
            if (string.IsNullOrWhiteSpace(App.ThemeName) && Device.RuntimePlatform == Device.UWP) ///Get theme name if not there yet  
            {  
               UnitOfWork _unitOfWork = new UnitOfWork();  
               Task.Run(async () =>  
               {   
                   appSettings = await _unitOfWork.SettingsRepository.LoadSettingsAsync();  
  
                  App.ThemeName = !string.IsNullOrWhiteSpace(appSettings.ThemeName)  
                    ? appSettings.ThemeName  
                    : "Purple Theme";  
               });  
                 
            }  
         
            FaIconBrush = new SolidColorBrush((Color)Application.Current.Resources["FaIconColor"]);  
        }  
        private static void HandlePropertyChanged(  
            BindableObject bindable, object oldValue, object newValue)  
        {  
            // ----- Someone changed the full control's Text property.  
            //       Store that new value in the internal Label's Text property.  
            CustomTabbedPage targetView;  
  
            targetView = (CustomTabbedPage)bindable;  
            if (targetView != null)  
                targetView.FaIconBrush = (SolidColorBrush)newValue;  
        }  
    }  

Answer 4

Sorry, @Cole Xia (Shanghai Wicresoft Co,.Ltd.) , but you just lost me completely. I've done some basic custom rendering, but nothing like this. I apologize for acting like such a newby. I'm actually fairly good at Xamarin app creation as a whole and have several in the stores...

So, CustomPage overides Page... and then what do I do with CustomTabbedPage in the shared Project and CustomTabbedPageRenderer in the UWP project? CustomTabbedPage overrides TabbedPage... and that is a Page, not a CustomPage. Also, Do I need a CustomPageRenderer in the UWP project, and what would it do? Thanks so much for all of the time you've given me.

 class CustomPage : Page  
    {  
        public CustomPage()  
        {  
            FaIconBrush = new SolidColorBrush((Color)Application.Current.Resources["FaIconColor"]);  
        }  
  
  
        public static readonly BindableProperty FontIconProperty =  
            BindableProperty.Create(propertyName: "FaIconBrush",  
                returnType: typeof(SolidColorBrush),  
                declaringType: typeof(CustomPage),  
                defaultBindingMode: BindingMode.OneWay,  
                propertyChanged: HandlePropertyChanged);  
  
        public SolidColorBrush FaIconBrush  
        {  
            get  
            {  
                return (SolidColorBrush)base.GetValue(FontIconProperty);  
            }  
            set  
            {  
                if (this.FaIconBrush != value)  
                    base.SetValue(FontIconProperty, value);  
            }  
        }  
  
       private static void HandlePropertyChanged(  
            BindableObject bindable, object oldValue, object newValue)  
        {  
            CustomPage targetView;  
  
            targetView = (CustomPage)bindable;  
            if (targetView != null)  
                targetView.FaIconBrush = (SolidColorBrush)newValue;  
        }  
    }  

Answer 5

Create a string BindableProperty in every Page , named it FaIconBrush , and set the value in constructor .

public Page1()
        {
            InitializeComponent();
            FaIconBrush = "#00ff00";
        }


        public static readonly BindableProperty FontIconProperty =
               BindableProperty.Create(propertyName: "FaIconBrush",
                   returnType: typeof(string),
                   declaringType: typeof(Page1));

        public string FaIconBrush
        {
            get
            {
                return (string)base.GetValue(FontIconProperty);
            }
            set
            {
                if (this.FaIconBrush != value)
                    base.SetValue(FontIconProperty, value);
            }
        }

UWP

<TextBlock Text="{Binding IconImageSource.Glyph}" Foreground="{Binding FaIconBrush}"

It works fine on my side .