Custom TabbedPage with buttons

Question

I need to create a navigation with 'TabbedPage' and add 2 buttons (icons) to perform other actions in my application, similar to the image below:

In a test I did I came up with the result below but I have no idea how to keep the tabs on the same level as the icons.

MainPage.xaml

<?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:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage" x:Class="TabbedPageWithNavigationPage.MainPage">
        <local:TodayPage />

        <TabbedPage.ToolbarItems>
            <ToolbarItem Name="MenuItem1" Order="Primary" Icon="icon.png" Text="Item 1" Priority="0" />
            <ToolbarItem Name="MenuItem2" Order="Primary" Icon="icon.png" Text="Item 2" Priority="1" />
        </TabbedPage.ToolbarItems>

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

    </TabbedPage>

Answer 1

You can use the Tabs control I created here:

https://github.com/roubachof/Sharpnado.Presentation.Forms

The post explaining the component can be found here:

https://www.sharpnado.com/pure-xamarin-forms-tabs/

It's implemented with grid, so you could totally implement your design with something like:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50 />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="50" />
    </Grid.ColumnDefinitions>


    <tabs:TabHostView Grid.Row="0"
                      Grid.Column="0"
                      SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}">
        <tabs:BottomTabItem 
            IconImageSource="flash.png" 
            SelectedTabColor="{StaticResource White}" 
            UnselectedLabelColor="{StaticResource White}" 
            UnselectedIconColor="{StaticResource White}"
            Label="Tab 1" />
        <tabs:BottomTabItem 
            IconImageSource="flash.png" 
            SelectedTabColor="{StaticResource White}" 
            UnselectedLabelColor="{StaticResource White}" 
            UnselectedIconColor="{StaticResource White}"
            Label="Tab 2" />
    </tabs:TabHostView>
    <ImageButton Grid.Column="1" ImageSource="hamburger.png" />
    <ImageButton Grid.Column="2" ImageSource="icon.png" />

    <ScrollView Grid.Row="1" Grid.ColumnSpan="3">
        <tabs:ViewSwitcher x:Name="Switcher"
                           Animate="True"
                           SelectedIndex="{Binding SelectedViewModelIndex, Mode=TwoWay}">
            <details:Tab1View Animate="True" BindingContext="{Binding Tab1ViewModel}" />
            <details:Tab2View Animate="True" BindingContext="{Binding Tab2ViewModel}" />
        </tabs:ViewSwitcher>
    </ScrollView>

</Grid>