Creating tabs for an icon in AppShell - xamarin

Question

I'm trying to create the following effect in my Xamarin Forms 5 app and I need some guidance on how to achieve it.
In my flyout footer, I want to display two icons. One of them is the settings icon and when the user taps it, I want to send the user to a tabbed page -- see below:
How do I define tabs in my AppShell footer and tie them to this icon?
Here's my AppShell:
<TabBar>
<ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
</TabBar>
<FlyoutItem Title="Home">
<FlyoutItem.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource HomeIcon}"
Color="White" />
</FlyoutItem.Icon>
<Tab Title="Feed">
<ShellContent Route="Feed" ContentTemplate="{DataTemplate home:Feed}"/>
</Tab>
<Tab Title="Products">
<ShellContent Route="Products" ContentTemplate="{DataTemplate home:Products}"/>
</Tab>
<Tab Title="History">
<ShellContent Route="History" ContentTemplate="{DataTemplate home:History}"/>
</Tab>
</FlyoutItem>
<FlyoutItem Title="School">
<FlyoutItem.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource SchoolIcon}"
Color="White" />
</FlyoutItem.Icon>
<Tab Title="Courses">
<ShellContent Route="Courses" ContentTemplate="{DataTemplate school:Courses}"/>
</Tab>
</FlyoutItem>
<Shell.FlyoutFooterTemplate>
<DataTemplate>
<Grid RowDefinitions="120" ColumnDefinitions="150, 150">
<Image
Grid.Row="0"
Grid.Column="0"
HorizontalOptions="StartAndExpand"
Margin="50,0,0,0">
<Image.Source>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource SettingsIcon}"
Color="White"/>
</Image.Source>
</Image>
<Image
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="EndAndExpand"
Margin="0,0,30,0">
<Image.Source>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource PowerIcon}"
Color="White"/>
</Image.Source>
</Image>
</Grid>
</DataTemplate>
</Shell.FlyoutFooterTemplate>
IntelliSense is not allowing me to define <Tab>'s inside a <Grid>. How do I link this icon to tabs?

Answer 1

I think this is what your are looking for .
First use Image.GestureRecognizers
For the showing of the FLyout in Settings use Shell.Current.FlyoutIsPresented = false;
The easy way to use Tabs in the Settings if you want is to use a TabbedPage
And for the Tabs in Settings.xaml Shell.TabBarIsVisible="False"
AppShell.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>
AppShell.xaml.cs
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
Routing.RegisterRoute(nameof(Settings), typeof(Settings));
await Shell.Current.GoToAsync("Settings");
Shell.Current.FlyoutIsPresented = false;
}

Answer 2

Add Clicked event to the image.
<Image
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="EndAndExpand"
Margin="0,0,30,0">
<Image.Source>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource PowerIcon}"
Color="White"/>
</Image.Source>
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnImageNameTapped"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
then in the xaml.cs , after creating your tabbedpage with your three tabs
void OnImageNameTapped(object sender, EventArgs args)
{
try
{
await Navigation.PushAsync(new TabbedPage1());
// or await Application.Current.MainPage.Navigation.PushAsync(new TabbedPage1());
}
catch (Exception ex)
{
throw ex;
}
}