CODEWITHSUNDEEP
androidxamarinxamarin.forms
LFilipczyk
LFilipczyk

Reputation: 21

Xamarin - Shell.Current.GoToAsync and back button

I am working on my very first Xamarin Forms app, and I am running into some navigation related issues. I have a HomePage viewpage that has 3 buttons that attempt to navigate to 3 different views ( Lets call them AboutPage, SearchResultsPage and ScanPage). Every view (including the home one) has its own ViewModel and its own Xaml files and they are all defined as ContentPages.

HomePage.xaml:

                <Button x:Name="About" Grid.Row="2" Grid.Column="1" FontSize="Large" HorizontalOptions="Start"
                Text="About this app" Clicked="About_Clicked" VerticalOptions="Center" 
                    BackgroundColor="{StaticResource Primary}"
                    TextColor="White" />

HomePage.cs:

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

Also on my AppShell, I have all the routing defined:

AppShell.cs

    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute(nameof(HomePage), typeof(HomePage));
        Routing.RegisterRoute(nameof(AboutPage), typeof(AboutPage));
        Routing.RegisterRoute(nameof(SearchPage), typeof(SearchResultsPage));
        Routing.RegisterRoute(nameof(ScanPage), typeof(ScanPage));
}

And here is my AppShell.xaml

<TabBar x:Name="tabBar">
    <ShellContent Icon="home.png" Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}"  />
    <ShellContent Icon="search.png" Route="SearchResultsPage" ContentTemplate="{DataTemplate local:SearchResultsPage}" />
    <ShellContent Icon="scan.png" Route="ScanPage" ContentTemplate="{DataTemplate local:ScanPage}" />

</TabBar>
<ShellContent Route="AboutPage" Shell.FlyoutBehavior="Disabled" ContentTemplate="{DataTemplate local:AboutPage}" />

Now here is when I run into an issue: when I tap on the "About" button on the Home view, I navigate to the correct page (AboutPage) BUT, I get the back button on top AND when I tap the home view link on the tabbar nothing happens (I think that is because the about view is "overwriting" the home view). And whenever I navigate to the home view, I keep getting the aboutpage. The only way to be able to access the homePage view again is to hit the back button on the top navigation. However, when I tap anything via the tabbar I DO get the expected behavior of going to a view, and being able to navigate to any other view. I also dont have the back button displayed anywhere (VERY desirable behavior for me int his workflow since all the pages that can be navigated are easily accessible on the bottom tabbar).

My question is: how do I prevent this behavior where whenever I navigate to a different contentpage view I am forced to tap the back button if I want to be able to access the view I just navigated away from?

I just want to be able to replicate the same behavior as with the tabbar where, I can just "go" to a different pageview and there isnt any back button or views overriding shenanigans. Can this be related to the NavigationStack creation?

From this link it says that you need to establish all of the routes on the Shell Visual Hierarchy, and that is why I am adding all the views there via ShellContent items. Will this suffice to prevent the navigation stack?

Thanks a lot in advance!!!

Upvotes: 2

Views: 12436

Answers (1)

Leo Zhu
Leo Zhu

Reputation: 15011

Do you mean you want to click the x:Name="About" button to navigate to the About page,then press back in the top navigation,it will go back to the Home page ?

If yes,you could try to change

await Shell.Current.GoToAsync($"//AboutPage");

to

await Shell.Current.GoToAsync($"//HomePage/AboutPage");

Upvotes: 4

Related Questions