question

BMartin-4607 avatar image
0 Votes"
BMartin-4607 asked BillyMartin-7003 commented

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

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"];
       }
   }
dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ColeXia-MSFT avatar image
0 Votes"
ColeXia-MSFT answered

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}"/>
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AlmaJensen-2623 avatar image
0 Votes"
AlmaJensen-2623 answered AlmaJensen-2623 edited

I just did this today, but what I did was to create an effect and then a class with a bindable property. I based what I did on this blog. xamarin-forms-use-bindableproperty-in-effects Something I realized later is that this sample adds the effect only on a property change. Something you can do about that is to add both the effect as you would normally and then to also add the static class as mentioned in the article. In case you haven't done Bindable Properties before you do have to follow a specific naming convention for them to work.




I'm going to see if I can append more detail here. The comment replies don't leave enough characters to paste in the code samples.

Here's the effect

     public class EntryScrubberEffect : RoutingEffect
     {
         public EntryScrubberEffect() : base("Xamarin.EntryScrubberEffect")
         {
             Carrier = FShippingCarrier.Unknown;
         }
    
         public EntryScrubberEffect(FShippingCarrier carrier) : base("Xamarin.EntryScrubberEffect")
         {
             Carrier = carrier;
         }
    
         public event ItemScannedEventHandler ItemScanned;
         public void OnItemScanned(Element element, ItemScannedEventArgs args)
             => ItemScanned?.Invoke(element, args);
    
         public FShippingCarrier Carrier { get; set; }
     }

Here's the Bindable static class

 public static class StaticEntryScrubberEffect
 {
     public static BindableProperty CarrierProperty = BindableProperty.CreateAttached(
         "ShipCarrier",
         typeof(FShippingCarrier),
         typeof(StaticEntryScrubberEffect),
         FShippingCarrier.Unknown,
         propertyChanged: OnShipCarrierChanged);

     static void OnShipCarrierChanged(BindableObject bindable, object oldValue, object newValue)
     {
         AttachEffect(bindable as Editor, (FShippingCarrier)newValue);
     }

     static void AttachEffect(Editor element, FShippingCarrier newValue)
     {
         var effect = element.Effects.FirstOrDefault(x => x is EntryScrubberEffect) as EntryScrubberEffect;

         if (effect != null)
         {
             element.Effects.Remove(effect);
         }

         element.Effects.Add(new EntryScrubberEffect(newValue));
     }

     public static FShippingCarrier GetShipCarrier(BindableObject element)
     {
         return (FShippingCarrier)element.GetValue(CarrierProperty);
     }

     public static void SetShipCarrier(BindableObject element, FShippingCarrier value)
     {
         element.SetValue(CarrierProperty, value);
     }
 }

Here's the relavant Xaml

 xmlns:ent="clr-namespace:Semita.Effects" 
    
                             <Editor 
                                 Text="{Binding UserName}"
                                 IsSpellCheckEnabled="False"
                                 IsTextPredictionEnabled="False"
                                 Unfocused="Entry_Unfocused"                                
                                 TextColor="Black" 
                                 VerticalOptions="Center" 
                                 x:Name="UserNameField"
                                 ent:StaticEntryScrubberEffect.Carrier="{Binding ImageColor}">
                                 <Editor.Effects>
                                     <ent:EntryScrubberEffect
                                         ItemScanned="EntryScrubberEffect_ItemScanned"/>
                                 </Editor.Effects>
                             </Editor>

Here's my implmentation off the effect
[assembly: Xamarin.Forms.ResolutionGroupName("Xamarin")]
[assembly: Xamarin.Forms.ExportEffect(typeof(EntryScrubberEffectUWP), "EntryScrubberEffect")]
namespace Semita.UWP
{
public class EntryScrubberEffectUWP : PlatformEffect
{
FrameworkElement frameworkElement;
Effects.EntryScrubberEffect effect;
Action<Element, ItemScannedEventArgs> onItemScanned;

     public EntryScrubberEffectUWP()
     {
     }

     protected override void OnAttached()
     {
         frameworkElement = Control == null ? Container : Control;
         effect = (Effects.EntryScrubberEffect)Element?.Effects?.FirstOrDefault(e => e is Effects.EntryScrubberEffect);
         if (effect != null && frameworkElement != null)
         {
             onItemScanned = effect.OnItemScanned;
         }

         Control.KeyDown += Control_KeyDown;
         Control.PreviewKeyDown += Control_PreviewKeyDown;
     }

     private void Control_KeyDown(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
     {
         if (e.Key == Windows.System.VirtualKey.Enter)
         {
             var control = Control as TextBox;
             if (control == null)
                 return;

             onItemScanned(Element, new ItemScannedEventArgs(control.Text));
         }
     }

     private void Control_PreviewKeyDown(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
     {
         if (e.Key == Windows.System.VirtualKey.Enter)
         {
             var control = Control as TextBox;
             if (control == null)
                 return;

             if (AllNumeric(control.Text))
                 control.Text = string.Empty;
             else
                 onItemScanned(Element, new ItemScannedEventArgs(control.Text));
         }
     }

     protected override void OnDetached()
     {
         var control = Control as TextBox;
         if (control == null)
             return;

         control.PreviewKeyDown -= Control_PreviewKeyDown;
         control.KeyDown -= Control_KeyDown;
     }

     public bool AllNumeric(string str)
     {
         try
         {
             foreach (char c in str)
             {
                 if (c < '0' || c > '9')
                     return false;
             }
             return true;

         }
         catch
         {
             return false;
         }
     }
 }

}

Please note that this code isn't complete yet or totally optimized. It's a work in progess that I just started yesterday. I just hope it gives you enough of an idea about how to potentially accomplish what you wanted to do using an effect. A custom renderer with some added bindable properties is also a completely valid way of accomplishing this task as well.

· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks, @AlmaJensen-2623, but what did you do with the effect? Change the color or place the tabbar at the bottom?

Really interested in this, since Bottom tab is so difficult in xamarin forms uwp. Can you please share a code sample?

0 Votes 0 ·

The problem I was trying to solve is I needed a high speed highly accurate HID scanner solution. And HID Scanners are basically nothing more than a keyboard. And a text changed event leaves room for a race condition that results in inaccurate scans when running at high speed. Doing a tester app in pure UWP I found that the PreviewKeyDown event turned out to process faster and more accurately when looking for a carriage return to signify a completed scan. A custom renderer with an event coming back solved much of that issue. But then to help speed up processing I wanted to apply some logic in specific situations inside of my effect. But I found out that you can't do data binding inside of an effect and that led me to the article I posted above.












0 Votes 0 ·
ColeXia-MSFT avatar image
0 Votes"
ColeXia-MSFT answered BMartin-4607 commented

Hello,

Welcome to Microsoft Q&A!


We just need to find out the corresponding control in the style and set Color on it .

Replace the following style with the original one

<Style
                x:Key="PivotHeaderBottomStyle"
                TargetType="Pivot">
                <Setter
                    Property="Margin"
                    Value="0" />
                <Setter
                    Property="Padding"
                    Value="0" />
                <Setter
                    Property="Background"
                    Value="Transparent" />
                <Setter
                    Property="IsTabStop"
                    Value="False" />
                <Setter
                    Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <Grid  />
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Setter
                    Property="ItemTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <ContentPresenter 
                                Content="{Binding}"
                                ContentTemplate="{ThemeResource ContainedPageTemplate}"
                                />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Setter
                    Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid>
                                <TextBlock Foreground="Red"
                                Text="{Binding Title}"
                                Style="{ThemeResource BodyTextBlockStyle}"
                                />
                            </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Setter
                    Property="Template">
                    <Setter.Value>
                        <ControlTemplate
                            TargetType="Pivot">
                            <Grid
                                x:Name="RootElement"
                                Background="{TemplateBinding Background}"
                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}">
                                <Grid.Resources>
                                    <Style
                                        x:Key="BaseContentControlStyle"  TargetType="ContentControl">
                                
                                        <Setter
                                            Property="FontFamily"
                                            Value="XamlAutoFontFamily" />
                                        <Setter
                                            Property="FontWeight"
                                            Value="SemiBold" />
                                        <Setter
                                            Property="FontSize"
                                            Value="15" />
                                        <Setter
                                            Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate
                                                    TargetType="ContentControl">
                                                    <ContentPresenter
                                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                                        ContentTransitions="{TemplateBinding ContentTransitions}"
                                                        Content="{TemplateBinding Content}"
                                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                        Margin="{TemplateBinding Padding}"
                                                        OpticalMarginAlignment="TrimSideBearings"
                                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                    <Style
                                        x:Key="TitleContentControlStyle"
                                        BasedOn="{StaticResource BaseContentControlStyle}"
                                        TargetType="ContentControl">
                                        <Setter
                                            Property="FontFamily"
                                            Value="{ThemeResource PivotTitleFontFamily}" />
                                        <Setter
                                            Property="FontWeight"
                                            Value="{ThemeResource PivotTitleThemeFontWeight}" />
                                        <Setter
                                            Property="FontSize"
                                            Value="{ThemeResource PivotTitleFontSize}" />
                               
                                    </Style>
                                </Grid.Resources>
                                <Grid.RowDefinitions>
                                    <RowDefinition
                                        Height="Auto" />
                                    <RowDefinition
                                        Height="*" />
                                </Grid.RowDefinitions>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup
                                        x:Name="Orientation">
                                        <VisualState
                                            x:Name="Portrait">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetProperty="Margin"
                                                    Storyboard.TargetName="TitleContentControl">
                                                    <DiscreteObjectKeyFrame
                                                        KeyTime="0"
                                                        Value="{ThemeResource PivotPortraitThemePadding}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState
                                            x:Name="Landscape">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetProperty="Margin"
                                                    Storyboard.TargetName="TitleContentControl">
                                                    <DiscreteObjectKeyFrame
                                                        KeyTime="0"
                                                        Value="{ThemeResource PivotLandscapeThemePadding}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup
                                        x:Name="NavigationButtonsVisibility">
                                        <VisualState
                                            x:Name="NavigationButtonsHidden" />
                                        <VisualState
                                            x:Name="NavigationButtonsVisible">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetProperty="Opacity"
                                                    Storyboard.TargetName="NextButton">
                                                    <DiscreteObjectKeyFrame
                                                        KeyTime="0"
                                                        Value="1" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetProperty="IsEnabled"
                                                    Storyboard.TargetName="NextButton">
                                                    <DiscreteObjectKeyFrame
                                                        KeyTime="0"
                                                        Value="True" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetProperty="Opacity"
                                                    Storyboard.TargetName="PreviousButton">
                                                    <DiscreteObjectKeyFrame
                                                        KeyTime="0"
                                                        Value="1" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetProperty="IsEnabled"
                                                    Storyboard.TargetName="PreviousButton">
                                                    <DiscreteObjectKeyFrame
                                                        KeyTime="0"
                                                        Value="True" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup
                                        x:Name="HeaderStates">
                                        <VisualState
                                            x:Name="HeaderDynamic" />
                                        <VisualState
                                            x:Name="HeaderStatic">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetProperty="Visibility"
                                                    Storyboard.TargetName="Header">
                                                    <DiscreteObjectKeyFrame
                                                        KeyTime="0"
                                                        Value="Collapsed" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetProperty="Visibility"
                                                    Storyboard.TargetName="StaticHeader">
                                                    <DiscreteObjectKeyFrame
                                                        KeyTime="0"
                                                        Value="Visible" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <ContentControl
                                    x:Name="TitleContentControl"
                                    ContentTemplate="{TemplateBinding TitleTemplate}"
                                    Content="{TemplateBinding Title}"
                                    IsTabStop="False"
                                    Margin="{StaticResource PivotPortraitThemePadding}"
                                    Style="{StaticResource TitleContentControlStyle}"
                                    Visibility="Collapsed" />
                                <Grid
                                    Grid.Row="1">
                                    <Grid.Resources>
                                        <ControlTemplate
                                            x:Key="NextTemplate"
                                            TargetType="Button">
                                            <Border
                                                x:Name="Root"
                                                BorderBrush="{ThemeResource SystemControlForegroundTransparentBrush}"
                                                BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}"
                                                Background="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}">
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup
                                                        x:Name="CommonStates">
                                                        <VisualState
                                                            x:Name="Normal" />
                                                        <VisualState
                                                            x:Name="PointerOver">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames
                                                                    Storyboard.TargetProperty="Background"
                                                                    Storyboard.TargetName="Root">
                                                                    <DiscreteObjectKeyFrame
                                                                        KeyTime="0"
                                                                        Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames
                                                                    Storyboard.TargetProperty="Foreground"
                                                                    Storyboard.TargetName="Arrow">
                                                                    <DiscreteObjectKeyFrame
                                                                        KeyTime="0"
                                                                        Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState
                                                            x:Name="Pressed">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames
                                                                    Storyboard.TargetProperty="Background"
                                                                    Storyboard.TargetName="Root">
                                                                    <DiscreteObjectKeyFrame
                                                                        KeyTime="0"
                                                                        Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames
                                                                    Storyboard.TargetProperty="Foreground"
                                                                    Storyboard.TargetName="Arrow">
                                                                    <DiscreteObjectKeyFrame
                                                                        KeyTime="0"
                                                                        Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>
                                                <FontIcon
                                                    x:Name="Arrow"
                                                    Foreground="{ThemeResource SystemControlForegroundAltMediumHighBrush}"
                                                    FontSize="12"
                                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                    Glyph="&#xE0E3;"
                                                    HorizontalAlignment="Center"
                                                    MirroredWhenRightToLeft="True"
                                                    UseLayoutRounding="False"
                                                    VerticalAlignment="Center" />
                                            </Border>
                                        </ControlTemplate>
                                        <ControlTemplate
                                            x:Key="PreviousTemplate"
                                            TargetType="Button">
                                            <Border
                                                x:Name="Root"
                                                BorderBrush="{ThemeResource SystemControlForegroundTransparentBrush}"
                                                BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}"
                                                Background="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}">
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup
                                                        x:Name="CommonStates">
                                                        <VisualState
                                                            x:Name="Normal" />
                                                        <VisualState
                                                            x:Name="PointerOver">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames
                                                                    Storyboard.TargetProperty="Background"
                                                                    Storyboard.TargetName="Root">
                                                                    <DiscreteObjectKeyFrame
                                                                        KeyTime="0"
                                                                        Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames
                                                                    Storyboard.TargetProperty="Foreground"
                                                                    Storyboard.TargetName="Arrow">
                                                                    <DiscreteObjectKeyFrame
                                                                        KeyTime="0"
                                                                        Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState
                                                            x:Name="Pressed">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames
                                                                    Storyboard.TargetProperty="Background"
                                                                    Storyboard.TargetName="Root">
                                                                    <DiscreteObjectKeyFrame
                                                                        KeyTime="0"
                                                                        Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames
                                                                    Storyboard.TargetProperty="Foreground"
                                                                    Storyboard.TargetName="Arrow">
                                                                    <DiscreteObjectKeyFrame
                                                                        KeyTime="0"
                                                                        Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>
                                                <FontIcon
                                                    x:Name="Arrow"
                                                    Foreground="{ThemeResource SystemControlForegroundAltMediumHighBrush}"
                                                    FontSize="12"
                                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                    Glyph="&#xE0E2;"
                                                    HorizontalAlignment="Center"
                                                    MirroredWhenRightToLeft="True"
                                                    UseLayoutRounding="False"
                                                    VerticalAlignment="Center" />
                                            </Border>
                                        </ControlTemplate>
                                    </Grid.Resources>
                                    <ScrollViewer
                                        x:Name="ScrollViewer"
                                        BringIntoViewOnFocusChange="False"
                                        HorizontalSnapPointsAlignment="Center"
                                        HorizontalSnapPointsType="MandatorySingle"
                                        HorizontalScrollBarVisibility="Hidden"
                                        Margin="{TemplateBinding Padding}"
                                        Template="{StaticResource ScrollViewerScrollBarlessTemplate}"
                                        VerticalSnapPointsType="None"
                                        VerticalScrollBarVisibility="Disabled"
                                        VerticalScrollMode="Disabled"
                                        VerticalContentAlignment="Stretch"
                                        ZoomMode="Disabled">
                                        <PivotPanel
                                            x:Name="Panel"
                                            VerticalAlignment="Stretch">
                                            <Grid
                                                x:Name="PivotLayoutElement">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition
                                                        Width="Auto" />
                                                    <ColumnDefinition
                                                        Width="*" />
                                                    <ColumnDefinition
                                                        Width="Auto" />
                                                </Grid.ColumnDefinitions>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition
                                                        Height="*" />
                                                    <RowDefinition
                                                        Height="Auto" />
                                                </Grid.RowDefinitions>
                                                <Grid.RenderTransform>
                                                    <CompositeTransform
                                                        x:Name="PivotLayoutElementTranslateTransform" />
                                                </Grid.RenderTransform>
                                                <ContentPresenter
                                                    Visibility="Collapsed"
                                                    x:Name="LeftHeaderPresenter"
                                                    ContentTemplate="{TemplateBinding LeftHeaderTemplate}"
                                                    Content="{TemplateBinding LeftHeader}"
                                                    HorizontalAlignment="Stretch"
                                                    VerticalAlignment="Stretch" />
                                                <ContentControl
                                                    x:Name="HeaderClipper"
                                                    Grid.Column="1"
                                                    Grid.Row="1"
                                            
                                                    HorizontalContentAlignment="Stretch"
                                                    UseSystemFocusVisuals="True">
                                                    <ContentControl.Clip>
                                                        <RectangleGeometry
                                                            x:Name="HeaderClipperGeometry" />
                                                    </ContentControl.Clip>
                                                    <Grid
                                                        Background="Yellow">
                                                        <PivotHeaderPanel
                                                            x:Name="StaticHeader"
                                                            Visibility="Collapsed" />
                                                        <PivotHeaderPanel
                                                            x:Name="Header">
                                                            <PivotHeaderPanel.RenderTransform>
                                                                <TransformGroup>
                                                                    <CompositeTransform
                                                                        x:Name="HeaderTranslateTransform" />
                                                                    <CompositeTransform
                                                                        x:Name="HeaderOffsetTranslateTransform" />
                                                                </TransformGroup>
                                                            </PivotHeaderPanel.RenderTransform>
                                                        </PivotHeaderPanel>
                                                    </Grid>
                                                </ContentControl>
                                                <Button
                                                    x:Name="PreviousButton"
                                                    Background="Transparent"
                                                    Grid.Column="1"
                                                    HorizontalAlignment="Left"
                                                    Height="36"
                                                    IsTabStop="False"
                                                    Grid.Row="1"
                                                    IsEnabled="False"
                                                    Margin="{ThemeResource PivotNavButtonMargin}"
                                                    Opacity="0"
                                                    Template="{StaticResource PreviousTemplate}"
                                                    UseSystemFocusVisuals="False"
                                                    VerticalAlignment="Top"
                                                    Width="20" />
                                                <Button
                                                    x:Name="NextButton"
                                                    Background="Transparent"
                                                    Grid.Column="1"
                                                    HorizontalAlignment="Right"
                                                    Height="36"
                                                    IsTabStop="False"
                                                    IsEnabled="False"
                                                    Margin="{ThemeResource PivotNavButtonMargin}"
                                                    Opacity="0"
                                                    Grid.Row="1"
                                                    Template="{StaticResource NextTemplate}"
                                                    UseSystemFocusVisuals="False"
                                                    VerticalAlignment="Top"
                                                    Width="20" />
                                                <ContentPresenter
                                                    x:Name="RightHeaderPresenter"
                                                    ContentTemplate="{TemplateBinding RightHeaderTemplate}"
                                                    Content="{TemplateBinding RightHeader}"
                                                    Grid.Column="2"
                                                    Grid.Row="1"
                                                    HorizontalAlignment="Stretch"
                                                    VerticalAlignment="Stretch" />
                                                <ItemsPresenter
                                                    x:Name="PivotItemPresenter"
                                                    Grid.ColumnSpan="3"
                                                    Grid.Row="0">
                                                    <ItemsPresenter.RenderTransform>
                                                        <TransformGroup>
                                                            <TranslateTransform
                                                                x:Name="ItemsPresenterTranslateTransform" />
                                                            <CompositeTransform
                                                                x:Name="ItemsPresenterCompositeTransform" />
                                                        </TransformGroup>
                                                    </ItemsPresenter.RenderTransform>
                                                </ItemsPresenter>
                                            </Grid>
                                        </PivotPanel>
                                    </ScrollViewer>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


Test on my side

84752-capture.png


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.




capture.png (6.6 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks, @ColeXia-MSFT, but how do we change the colors while the app is running through binding?

0 Votes 0 ·
BMartin-4607 avatar image
0 Votes"
BMartin-4607 answered

Talking about some terrible coding, I made a small style for each of my themes that does nothing but override the Tabbar color. Embarrassing, but it works!

  <Style x:Key="PivotHeaderBottomBlackThemeStyle"
                TargetType="Pivot"
                BasedOn="{StaticResource PivotHeaderBottomBaseStyle}">
             <Setter Property="Background"
                     Value="Black" />
         </Style>
    
   <Style x:Key="PivotHeaderBottomNavyBlueThemeStyle"
                TargetType="Pivot"
                BasedOn="{StaticResource PivotHeaderBottomBaseStyle}">
             <Setter Property="Background"
                     Value="Navy" />
         </Style>

Does anyone know which property in the PivotHeaderBottomStyle up above that I have to override to change the text color on the tabbar? I can't find it.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

BMartin-4607 avatar image
0 Votes"
BMartin-4607 answered BMartin-4607 commented

Got it! The TextBlock for the tabbar is in the HeaderTemplate, so I had to include that in each of the style overrides. Now, does anyone know how to add FontAwesome Icons to this thing?


     <Style
         x:Key="PivotHeaderBottomPurpleThemeStyle"
         BasedOn="{StaticResource PivotHeaderBottomBaseStyle}"
         TargetType="Pivot">
         <Setter Property="Background" Value="#330054" />

         <Setter Property="HeaderTemplate">
             <Setter.Value>
                 <DataTemplate>
                     <Grid>
                         <TextBlock
                             Foreground="MistyRose"
                             Style="{ThemeResource BodyTextBlockStyle}"
                             Text="{Binding Title}" />
                     </Grid>
                 </DataTemplate>
             </Setter.Value>
         </Setter>

     </Style>

· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Since the original problem has been solved ,could you mark the answer and open another thread to ask this question ?

0 Votes 0 ·

No disrespect, but this is part of the original question... a FULLY FUNCTIONING bottom tabbar for UWP. Who wants a tabbar without icons?

0 Votes 0 ·

Add the font file into Assets folder and set its build action as Content.
Add a TextBlock into the grid and set the custom icon on it .

<Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="30"/>
                                    <RowDefinition Height="20"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="&#xf644;" 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}"/>
                            </Grid>
0 Votes 0 ·
BMartin-4607 avatar image
0 Votes"
BMartin-4607 answered

That's amazing, @ColeXia-MSFT . Didn't think you could just add a grid row to a style. Thankyou so much.

Hoping I can figure out the binding, since it's not as easy as the Title is.





 <pages:HomePage Title="{x:Static resource:AppResources.Home}" Padding="0">
              <pages:HomePage.IconImageSource>
                  <FontImageSource FontFamily="{DynamicResource FAIcon}" Glyph="&#xf015;" />
              </pages:HomePage.IconImageSource>
          </pages:HomePage>

Does anyone have any suggestions how to bind the IconImageSource - FontImageSourcecode - Glyph above into the code below in the UWP App.Xaml?

 <Grid>
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height="30"/>
                                     <RowDefinition Height="20"/>
                                 </Grid.RowDefinitions>
                                 <TextBlock Text="&#xf644;" 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}"/>
                             </Grid>


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

BMartin-4607 avatar image
0 Votes"
BMartin-4607 answered ColeXia-MSFT edited

@ColeXia-MSFT and everyone else, I pretty much am stuck with this. After much research, I haven't been able to use UWP bottom tabs because this rendering solution can't seem to bind to the font awesome icons. I even made a custom bindable property in the shared code part of the renderer, but can't find any way to use it in the UWP renderer.

This is the Bindable property:


    public class CustomTabbedPage : TabbedPage
     {
    
         /// <summary>
         /// Start color for the gradient (top) color
         /// </summary>
         public static readonly BindableProperty FontIconProperty =
             BindableProperty.Create(propertyName: "FaIcon",
                 returnType: typeof(string),
                 declaringType: typeof(CustomTabbedPage),
                 defaultValue: string.Empty,
                 defaultBindingMode: BindingMode.OneWay);
    
    
             //, propertyChanged: HandleTextPropertyChanged);
    
         public string FaIcon
         {
             // ----- The display text for the composite control.
             get
             {
                 return (string)base.GetValue(FontIconProperty);
             }
             set
             {
                 if (this.FaIcon != value)
                     base.SetValue(FontIconProperty, value);
             }
         }
    
    
         private CityAppSettings appSettings;
         public CustomTabbedPage()
         {
             if (string.IsNullOrWhiteSpace(App.ThemeName) && Device.RuntimePlatform == Device.UWP)
             {
                UnitOfWork _unitOfWork = new UnitOfWork();
                Task.Run(async () =>
                { 
                    appSettings = await _unitOfWork.SettingsRepository.LoadSettingsAsync();
    
                   App.ThemeName = !string.IsNullOrWhiteSpace(appSettings.ThemeName)
                     ? appSettings.ThemeName
                     : "Purple Theme";
                });
                   
             }
    
           //  FontIcon = IconImageSource.FontImageSource.Glyph;
         }
       
     }
 }


And the Glyph inside this IconImageSource / FontImageSource is what it needs to bind with somehow:


 <customRenderers:CustomTabbedPage.Children>
         <pages:HomePage Title="{x:Static resource:AppResources.Home}" Padding="0" >
             <pages:HomePage.IconImageSource>
                 <FontImageSource FontFamily="{DynamicResource FAIcon}" Glyph="&#xf015;" />
             </pages:HomePage.IconImageSource>
         </pages:HomePage>


· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Follow the article , it works fine on my side .

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


Please note : you have to set color on FontImageSource , the default color is white that's the reason why it does not show at first.

87548-capture.png


0 Votes 0 ·
capture.png (1.9 KiB)
BMartin-4607 avatar image
0 Votes"
BMartin-4607 answered BMartin-4607 edited

@ColeXia-MSFT, I think you're missing what I'm saying. I can get your fontawesome icon to show up, but there is no binding. You have the font hard coded in the CustomTabbedPageRenderer. How do I bind bind to this so I can use a different icon for each tab? See below, you have **

Text="&#xf644;"



87793-image.png


  <Grid>
                                  <Grid.RowDefinitions>
                                      <RowDefinition Height="30"/>
                                      <RowDefinition Height="20"/>
                                  </Grid.RowDefinitions>
                                  <TextBlock Text="&#xf644;" 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}"/>
                              </Grid>







image.png (61.9 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

BMartin-4607 avatar image
0 Votes"
BMartin-4607 answered BMartin-4607 commented

Thanks so much, @ColeXia-MSFT. It works great! You should definitely do a blog on this... if not a video blog!

Never could get the color to bind with the text or the icon, so I had to make a style for every color. Curious how you made that work.

88203-image.png



image.png (34.5 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

It is because the color type is different ,

in forms we pass it as Xamarin.Forms.Color , but in uwp it needs Brush .

0 Votes 0 ·
BMartin-4607 avatar image
0 Votes"
BMartin-4607 answered BillyMartin-7003 commented

Is there no way to do it then @ColeXia-MSFT ?.

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>
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I tried Converter as well but no luck , Converter does not trigger at all . I'm afraid you have to create a BindableProperty in custom page , set the Brush value in forms and get it from uwp.

0 Votes 0 ·

I tried that too

0 Votes 0 ·