question

BillyMartin-7003 avatar image
0 Votes"
BillyMartin-7003 asked ColeXia-MSFT commented

What is the best and easiest way to make a BottomTabbedBar with colored fonts and icons in Xamarin Forms UWP?

Everything works out of the box for Xamarin Forms Android and iOS, but not UWP.

dotnet-xamarinwindows-uwp
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.

1 Answer

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

Hello,

Welcome to Microsoft Q&A!

For icon text and icon color we need to create BindableProperty in Page , for barbackground color we need to create in TabbedPage.

Forms project


Every Child Page

public partial class Page1 : ContentPage 
    {
        public Page1()
        {
            InitializeComponent();
        }

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

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

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

        public string FaIconText
        {
            get => (string)base.GetValue(FaIconTextProperty);
            set {if (this.FaIconText != value) base.SetValue(FaIconTextProperty, value); }
        }
    }



TabbedPage

//code behind
 public partial class TabbedPage1 : TabbedPage
    {
        public static readonly BindableProperty BarColorProperty = BindableProperty.Create(propertyName: " BarColor",
         returnType: typeof(string), declaringType: typeof(TabbedPage1));

        public string BarColor
        {
            get => (string)base.GetValue(BarColorProperty);
            set { if (this.BarColor != value) base.SetValue(BarColorProperty, value); }
        }

        public TabbedPage1()
        {
            InitializeComponent();

            BarColor = "#0000ff";
        }
    }

//xaml

xmlns:local ="clr-namespace:FormsA"

<local:Page1 Title="Tab 1" FaIconBrush="#00ff00" FaIconText="&#xf644;"/>
<local:Page2 Title="Tab 2" FaIconBrush="#ff0000" FaIconText="&#xf644;"/>

<ContentPage Title="Tab 3" IconImageSource="settings.png"/>



UWP project


Custom Renderer

[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyRenderer))]
namespace FormsA.UWP
{
    class MyRenderer : 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"];
            }
               
        }
    }
}

App.xaml


// icon 

<Setter
                    Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="30"/>
                                    <RowDefinition Height="20"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="{Binding FaIconText}" Foreground="{Binding FaIconBrush}" FontFamily="ms-appx:///Assets/Font Awesome 5 Free-Solid-900.oft#Font Awesome 5 Free Solid"/>
                                <TextBlock  HorizontalAlignment="Center" Foreground="Black" Grid.Row="1" Text="{Binding Title}"  Style="{ThemeResource BodyTextBlockStyle}"/>
                            </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>


//bar background color

 <ContentControl.Clip>
               <RectangleGeometry
                               x:Name="HeaderClipperGeometry" />
                                   </ContentControl.Clip>
                                           <Grid
                                                Background="{Binding BarColor}">    //this line
                                                   <PivotHeaderPanel
                                                          x:Name="StaticHeader"
                                                    Visibility="Collapsed" />

UWP Style is mentioned in this thread : https://docs.microsoft.com/en-us/answers/questions/344447/how-do-i-make-a-xamarin-uwp-bottom-tabbar-and-chan.html.


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.



· 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, @ColeXia-MSFT ! I'm worried that people might get confused by the UWP app.xaml style you posted, since it isn't the whole thing. I tried to post the whole thing and it wouldn't let me. Maybe you can get it done.

Thanks again for all of your help. This works well... especially is you make a base tabbedPage and a base contentpage to put the bindable properties in and then inherit all of your pages from them.

0 Votes 0 ·

I've attached the link for style .

1 Vote 1 ·