xamarin.formsxamarin.shell

fixed tabbar in shell


It is possible to make sure that the (Dashboard / Statistics) tab remains fixed without being modified by the various FlyoutItem choices? thanks

image

 <TabBar>
    <Tab Title="Dasboard">
        <Tab.Icon>
            <FontImageSource FontFamily="{StaticResource FontAwesomeSolid}"
                            Glyph="{StaticResource IconHome}"
                            Color="Black"/>
        </Tab.Icon>
        <ShellContent Route="HomePage"  ContentTemplate="{DataTemplate _v:AccountPage}" />
    </Tab>
    <Tab Title="Statistiche">
        <ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate _v:AccountPage}" />
    </Tab>
</TabBar>

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Online Store" Icon="ic_online_store" ContentTemplate="{DataTemplate _v:AccountPage}" />
    <ShellContent Title="About Us" Icon="ic_about_us" ContentTemplate="{DataTemplate _v:AccountPage}" />
    <ShellContent Title="Contact Us" Icon="ic_contact_us" ContentTemplate="{DataTemplate _v:AccountPage}" />
    <ShellContent Title="Sign In" Icon="ic_login" Route="LoginPage" ContentTemplate="{DataTemplate _v:AccountPage}" />
</FlyoutItem>

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Test1" Icon="ic_online_store" ContentTemplate="{DataTemplate _v:AccountPage}" />
    <ShellContent Title="Test2" Icon="ic_about_us" ContentTemplate="{DataTemplate _v:AccountPage}" />
</FlyoutItem>

Solution

  • You could use the MenuItem to show the items in the Flyout. And use the FlyoutItem to show the tabs in the bottom tabbar without setting the FlyoutDisplayOptions property to AsMultipleItems.

    The MenuItem would show the item in flyout and the items in FlyoutItem would show in the bottom tabbar.

     <MenuItem
        Command="{Binding AboutCommand}"
        Icon="tab_about.png"
        Text="Online Store" />
    
    <FlyoutItem>
        <ShellContent Title="Dasboard" ContentTemplate="{DataTemplate _v:AccountPage}" />
        <ShellContent Title="Statistiche" ContentTemplate="{DataTemplate _v:AccountPage}" />
    </FlyoutItem>
    

    Code behind:

    public partial class AppShell : Xamarin.Forms.Shell
    {
        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute("account", typeof(AccountPage));
            BindingContext = this;
        }
        public ICommand AboutCommand => new Command(async () => await NavigatedToAccount());
    
        async Task NavigatedToAccount()
        {
            await Shell.Current.GoToAsync("account");
            Shell.Current.FlyoutIsPresented = false;
        }
    
    }