带有按钮的自定义TabbedPage

Question

我需要创建一个带有“TabbedPage”的导航，并添加2个按钮(图标)以在我的应用程序中执行其他操作，类似于下面的图像：

​

在一次测试中，我得出了下面的结果，但我不知道如何将标签保持在与图标相同的水平上。

​

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

您可以使用我在这里创建的Tabs控件：

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

在这里可以找到解释组件的帖子：

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

它是用网格实现的，所以您完全可以用如下方式实现您的设计：

<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>