我需要使用“ 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>
答案 0 :(得分:0)
您可以使用我在此处创建的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>