Multiple TabBars in single application Xamarin - xamarin

Question

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.

Answer 1

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

Answer 2

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