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>

带按钮的自定义TabbedPage

1 个答案: