How can I set different Title Views for different pages in TabbedPage layout in Xamarin.Forms?

1
votes

I have a main Navigation Page that is a Tabbed Page, linking different views.

I've set the in the main Tabbed Page and it works, but I would like to set it different for each page.

This is the Tabbed Page:

<TabbedPage
    NavigationPage.HasBackButton="False"
    BackgroundColor="Black"
    xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="TestProiectLicenta.Views.UserPageForm" xmlns:local="clr-namespace:TestProiectLicenta.Views"
    xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
    xmlns:refresh="clr-namespace:Refractored.XamForms.PullToRefresh;assembly=Refractored.XamForms.PullToRefresh">

    <TabbedPage.Children>

        <local:CarsListPage Title="Cars" Icon="new_car_icon"/>
        <local:NewCarsListPage Title="New Cars" Icon="new_car_icon"/>

        <local:ChooseMethodFormPage Title="Add Car" Icon="new_add_icon" />
        <local:UserViewPage Title="New Page Test" Icon="new_user_icon" />
        <ContentPage Title="Settings" Icon="new_settings_icon.png">
            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                <StackLayout Orientation="Horizontal">
                    <StackLayout Orientation="Horizontal">
                        <Image Source="face_id" />
                        <Label Text="FaceID Login?" />
                    </StackLayout>
                    <Switch IsToggled="false" Toggled="Handle_Toggled" x:Name="Fid" />
                </StackLayout>
                <Button Text="Sign Out" Clicked="SignOutButton" />
            </StackLayout>
        </ContentPage>
    </TabbedPage.Children>
</TabbedPage>

The views are Content Pages.

I would like to have a Title View for the first page with some controls, like search, delete etc. (it's a list of cars) and the user's picture, and the others with the title and maybe other controls.

2
c#.netxamarinxamarin.forms

2 Answers

1
votes

Usually what I do is I set the Title property in every ContentPage and it reflects on to the page when I flip through tabs

<ContentPage  xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         NavigationPage.BackButtonTitle=""
         Title="My Demo Title">...

Update:

In your TabbedPage, you can add the NavigationPage's TitleView something like below

 <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         NavigationPage.BackButtonTitle=""
         Title="My Demo Title">
<NavigationPage.TitleView>
 <StackLayout Orientation="Horizontal">
    <Image x:Name="TitleImage"/>
    <Label x:Name="TitleLabel"/>
 </StackLayout>
</NavigationPage.TitleView>

Hope you can take care of the alignment and everything else. So Now using the above names you will be able to access the title image and label whenever you please!!

0
votes

I have found a solution to my problem. Inside the TabbedPage, for each page that you need to have a special Navigation Bar you declare it like this:

    <NavigationPage Title="Schedule" IconImageSource="schedule.png">
        <x:Arguments>
            <local:SchedulePage />
        </x:Arguments>
    </NavigationPage>

Then you edit the new page and add the <NavigationPage.TitleView/>