Creating tabs for an icon in AppShell-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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