How to use multiple TabBars (Bottom) using Shell in single application so that different page have different TabBar. Could i use multiple Shell or is it possible with single shell.

CodePudding user response：

You can use one Shell application , in this example Home has 3 tabs. The Settings icon a TabbedPage with 3 tabs.

Shell.xaml

<Shell.FlyoutFooterTemplate>
    <DataTemplate>
        <Grid RowDefinitions="30" ColumnDefinitions="150, 150">
            <Image
    Grid.Row="0"
    Grid.Column="0"
            Source="Settings.png"
                   HorizontalOptions="StartAndExpand"
    Margin="50,0,0,0" 
                >
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
        Tapped="TapGestureRecognizer_Tapped"
        NumberOfTapsRequired="1" />
                </Image.GestureRecognizers>

            </Image>

            <Image
        Grid.Row="0"
    Grid.Column="1"
             Source="Power.png"
    HorizontalOptions="EndAndExpand"
    Margin="0,0,30,0">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
        Tapped="TapGestureRecognizer_Tapped_1"
        NumberOfTapsRequired="1" />
                </Image.GestureRecognizers>
            </Image>
        </Grid>
    </DataTemplate>
    </Shell.FlyoutFooterTemplate>

Shell.xaml.cs

 public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute(nameof(ItemDetailPage), typeof(ItemDetailPage));
        Routing.RegisterRoute(nameof(NewItemPage), typeof(NewItemPage));
        Routing.RegisterRoute(nameof(StartPage), typeof(StartPage));
        Routing.RegisterRoute(nameof(HomePage), typeof(HomePage));
    }

    private async void OnMenuItemClicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("ItemDetailPage");
        Shell.Current.FlyoutIsPresented = false;

    }

    private async void MenuItem_Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//LoginPage");
    }

    private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
         Routing.RegisterRoute(nameof(SettingsPage), typeof(SettingsPage));
     

        await Shell.Current.GoToAsync("SettingsPage");
     
        Shell.Current.FlyoutIsPresented = false;
     
    }

    private void TapGestureRecognizer_Tapped_1(object sender, EventArgs e)
    {
        /// do stuff what you want
    }

}

CodePudding user response：

A easy way is to conbine the FlyoutPage and TabbedPage.

You could create a FlyoutPage. It would generate FlyoutPage1, FlyoutPage1Detail, FlyoutPage1Flyout and FlyoutPage1FlyoutMenuItem. You could create two or more TabbedPages and make the changes like below.

FlyoutPage1FlyoutMenuItem:

public class FlyoutPage1FlyoutMenuItem
{

    public int Id { get; set; }
    public string Title { get; set; }

    public string PageName { get; set; }
}

FlyoutPage1Flyout.xaml.cs:

 private class FlyoutPage1FlyoutViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<FlyoutPage1FlyoutMenuItem> MenuItems { get; set; }

        public FlyoutPage1FlyoutViewModel()
        {
            MenuItems = new ObservableCollection<FlyoutPage1FlyoutMenuItem>(new[]
            {
                new FlyoutPage1FlyoutMenuItem { Id = 0, Title = "MainPage", PageName="MainPage"},
                new FlyoutPage1FlyoutMenuItem { Id = 1, Title = "TabbedPage1", PageName="TabbedPage1" },
                new FlyoutPage1FlyoutMenuItem { Id = 2, Title = "TabbedPage2", PageName="TabbedPage2" },
                 
            });
        }

        #region INotifyPropertyChanged Implementation
        public event PropertyChangedEventHandler PropertyChanged;
        void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            if (PropertyChanged == null)
                return;

            PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }

FlyoutPage1.xaml.cs:

 private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as FlyoutPage1FlyoutMenuItem;
        if (item == null)
            return;

        var pageType = Type.GetType($"App1.{item.PageName}");

        var page = (Page)Activator.CreateInstance(pageType);
        page.Title = item.Title;
        Detail = new NavigationPage(page);
        IsPresented = false;

        FlyoutPage.ListView.SelectedItem = null;
    }