How to do setting on the TabbedPage

Question

new to Xamarin form.

I have the Following Tabbed Page. I wanted to do the following:

1) The background Color of the Tab is white Or One with Color,one with white color.

2) change the color of the underline of the Tab.

3) How many Tab can I have?

4) The fontsize for the Text.

5) Since each Tab has a contentPage, How to reference contentPage from outside instead inside the Tab as my contentpage is very long and complex.

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            BackgroundColor="White"
             x:Class="MainPage2">

    <ContentPage Title ="Page1" Icon="itemIcon1" WidthRequest="200" BackgroundColor="White">

        <ContentPage.Content>

            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">


                <Label Text="T1">
                </Label>

            </StackLayout>

        </ContentPage.Content>
    </ContentPage>

    <ContentPage Title ="Page2" Icon="itemIcon2" WidthRequest="200" BackgroundColor="White">

        <ContentPage.Content>

            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">

                <Label Text="T2">
                </Label>

            </StackLayout>

        </ContentPage.Content>
    </ContentPage>



    <ContentPage Title ="Page3" Icon="itemIcon3" WidthRequest="200">

        <ContentPage.Content>

            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">

                <Label Text="T3">
                </Label>
            </StackLayout>

        </ContentPage.Content>
    </ContentPage>
</TabbedPage>

Thanks

Answer 1

Styling the Tabs

Styling the tabs background color, text size, and highlight will need to be handled in your platform-specific projects. So, for Android this can be achieved by overriding the base styles with a custom theme, which you can modify in Resources > values > styles.xml

<?xml version="1.0" encoding="UTF-8"?>
<resources>
  <color name="CustomHighlight">@android:color/transparent</color>

    <style name="MyTheme" parent="MyTheme.Base">
    </style>

    <!-- Base theme applied no matter what API -->
    <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:tabWidgetStyle">@android:style/Widget.TabWidget</item>
        ...
        <!-- The rest of your styles would go here -->
        ...
    </style>
    <style name="Widget.TabWidget">
        <item name="android:textAppearance">@style/TextAppearance.Widget.TabWidget</item>
        <item name="android:ellipsize">marquee</item>
        <item name="android:singleLine">true</item>
    </style>  


    <style name="TextAppearance.Widget.TabWidget">
        <item name="android:textSize">14sp</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textColor">@android:color/tab_indicator_text</item>
    </style>  
</resources> 

(Liberally borrowed from this question: Android - How to Change Color of Selected Tab)

Your in-line background colors should suffice in your .xaml markup:

<ContentPage Title ="Page2" Icon="itemIcon2" WidthRequest="200" BackgroundColor="White">

For iOS, changing the highlight color is fairly trivial. In your AppDelegate.cs:

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    UITabBar.Appearance.TintColor = UIColor.Red;

    global::Xamarin.Forms.Forms.Init();

    ...

Things get hairy from there, so I'll refer you to the developer documentation, which has a great walkthrough for creating a custom renderer: Customize Tab Bar on iOS

Tab Count

From the documentation

The user can scroll the collection of tabs that are across the top of the screen if that collection is too large to fit on one screen.

So really, the number of tabs is only limited to what makes sense from a user experience standpoint. I try not to have more than 6, personally, but your use-case may justify a few more.