How to open popup only instead of page when tab bar (bottom bar) item tap in xamarin forms?

Question

Whenever we click any item of tab bar(bottom bar) i want to open only popup not whole page. popup will open on any previously selected tab bar item. For example We have 5 tab bar item.

• tb item 1 (Page1)
• tb item 2 (Page2)
• tb item 3 (No page but popup only)
• tb item 4 (Page4)
• tb item 5 (Page5)

If i am on tb item 1 (Page1) and click on tb item 3 it will open popup over tb item 1 (Page1).

I checked this plugin but it is not allowing to do this.

Answer 1

TabbedPage should have pages as children by default. I am assuming you want to remain on same page when tb item 3 is tapped. Be it tb item 1 tb item 2 tb item 4 ...

Instead of that you can have a single page with 5 icons at the bottom of the page. And include OnTapped gestures for all 5 items, for item 3 call Pop up , while for others navigate to respective page.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="App1.Views.PageX">
    <ContentPage.Content>
        <StackLayout>
            <StackLayout VerticalOptions="FillAndExpand">
                <Label Text="Page content" />
            </StackLayout>
            <Grid VerticalOptions="End">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <ImageButton Source="tab_feed.png"
                             Grid.Column="0"
                             Clicked="ImageButton1_Clicked" />
                <ImageButton Source="tab_feed.png"
                             Grid.Column="1"
                             Clicked="ImageButton2_Clicked" />
                <ImageButton Source="tab_feed.png"
                             Grid.Column="2"
                             Clicked="ImageButton3_Clicked" />
                <ImageButton Source="tab_feed.png"
                             Grid.Column="3"
                             Clicked="I mageButton4_Clicked" />
                <ImageButton Source="tab_feed.png"
                             Grid.Column="4"
                             Clicked="ImageButton5_Clicked" />
            </Grid>
        </StackLayout>
    </ContentPage.Content>

and page navigation

private async void ImageButton1_Clicked (object sender, EventArgs e) 
{
    await Navigation.PushAsync (new ItemPage1 ());
}

for popup

private async void ImageButton3_Clicked(object sender, EventArgs e)
{
    await Rg.Plugins.Popup.Contracts.IPopupNavigation.PushAsync(new MyPopupPage(), true);

}