2

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: enter image description here

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. enter image description here

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>
Renan Barbosa
  • 1,046
  • 3
  • 11
  • 31
  • What actions you want to perform with those 2 buttons? The same action as tab1 and tab2? If not, I think you can't keep the the tabs on the same level as the icons when using TabbedPage. ToolbarItem is added on the NavigationBar. – nevermore May 29 '19 at 01:41
  • @JackHua-MSFT I need to keep this kind of layout because of the design made for the application, so I need to keep these tabs and the two buttons together, the buttons make calls to an external api to perform some application operations. – Renan Barbosa May 30 '19 at 16:45
  • ok, I think you need to create a custom tabPage with the design. – nevermore May 31 '19 at 03:22

1 Answers1

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>
Roubachof
  • 3,351
  • 3
  • 23
  • 34