Show both Tab bar and Toolbar in Xamarin forms - xaml

Question

I'm a beginner in mobile app development and I'm developing an android app using Xamarin forms for a project.
it has 3 tabbed pages.
each page needs some actions to be done when a user clicks on something.
since there are few actions in one tab to be clicked and actions are different for each tab, I want to show both toolbar and tab bar at the same time just like "Whatsapp" shows in there interface.
I have 3 pages named Farm, Treatments, and Autopsy.
all 3 pages are showing as tabbed pages in the tabbedPageContainer XAML.
this is the tabbedPageContainer XAML Code
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="TabbedForms.TabbedPages.TabbedPageContainer"
xmlns:pages="clr-namespace:TabbedForms.TabbedPages"
>
<pages:page_Farm />
<pages:Page_Treatments/>
<pages:Page_Autopsy/>
</TabbedPage>
and this TabbedPageContainer is my Main page.
What I have so far is something like this
but what I want is something like this
how can I achieve this in Xamarin forms XAML?
This is the App.XAML
using System;
using TabbedForms.TabbedPages;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace TabbedForms
{
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new TabbedPageContainer();
//Background color
//MainPage.SetValue(NavigationPage.BarBackgroundColorProperty, Color.Black);
//Title color
// MainPage.SetValue(NavigationPage.BarTextColorProperty, Color.White);
}
protected override void OnStart()
{
}
protected override void OnSleep()
{
}
protected override void OnResume()
{
}
}
}
I'm using VS 2019 Enterprise edition and testing on android 8.1

Answer 1

App.Xaml:
public App()
{
InitializeComponent();
MainPage = new NavigationPage( new TabbedPage1());
}
Tab page:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:page="clr-namespace:XamarinControls"
x:Class="XamarinControls.TabbedPage1">
<!--Pages can be added as references or inline-->
<page:Page4 Title="Tab 1" />
<ContentPage Title="Tab 2" />
<ContentPage Title="Tab 3" />
</TabbedPage>
Content Page:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
NavigationPage.HasNavigationBar="True"
x:Class="XamarinControls.Page4">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Add" Priority="0"/>
<ToolbarItem Text="Noti" Priority="1"/>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
It worked for me.

Answer 2

You could put the child ContentPage of the Tabbed in a NavigationPage like
<TabbedPage.Children>
<NavigationPage Title="xxx" IconImageSource="xxx">
<x:Arguments>
<views:ItemsPage1 />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="xxx" IconImageSource="xxx">
<x:Arguments>
<views:ItemsPage2 />
</x:Arguments>
</NavigationPage>
</TabbedPage.Children>