Shell tab navigation

Question

Shell tab navigation

I have a shell tabs and everything works fine, but I have an aesthetic question. When navigating to another page from any page of the tabs (without modal), the tabs are still displayed. In applications like Linkedln, Instagram that have lower tabs, when navigating to another page, the new page covers the entire application. I think this behavior should be able to choose, how can I modify it?

Answer 1

Ángel Rubén Valdeolmos Carmona 566

Shell.SetNavBarIsVisible(this,false);

Answer 2

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 43,931 Microsoft Vendor

Hello,

Welcome to our Microsoft Q&A platform!

when navigating to another page, the new page covers the entire application.

Do you want to achieve the result like following screenshot?

If so, you can use following code to navigate the page directly.

   private async void Button_Clicked(object sender, EventArgs e)  
           {  
                 
               await Navigation.PushModalAsync(new Page1());  
           }

Best Regards,

Leon Lu

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Ángel Rubén Valdeolmos Carmona 566 Reputation points

2020-11-27T11:35:05.913+00:00

With Xamarin Shell but without modal
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 43,931 Reputation points Microsoft Vendor

2020-11-27T12:16:56.227+00:00

My demo is xamarin shell, Normally, we should use await Shell.Current.GoToAsync("Page1"); to achieve the navigation, Based on your needs, you can use await Navigation.PushModalAsync(new Page1()); to replace it.
Ángel Rubén Valdeolmos Carmona 566 Reputation points

2020-11-27T13:12:34.777+00:00

Yes, the problem is that with await Shell.Current.GoToAsync ("Page1") does not replace, you still see the bottom tab, in applications like instagram or linkdln yes (without being modal)
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 43,931 Reputation points Microsoft Vendor

2020-11-30T07:44:50.313+00:00

Do you want to use await Shell.Current.GoToAsync ("Page1") then hide the bottom navgiate bar? Or make the bottom navgiate bar to lower? If so, you should use custom renderer for shell to achieve it.
Ángel Rubén Valdeolmos Carmona 566 Reputation points

2020-11-30T09:09:21.353+00:00

I want the same operation that, for example, the instagram or linklnd application has, when in the lower tabs you navigate to another page (without modal) the page navigates to the full page not in the content, then the tabs are not visible until you return to behind. I imagine I will need a render, right?
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 43,931 Reputation points Microsoft Vendor

2020-12-01T10:37:31.78+00:00

I am willing to download the instagram or linklnd application to test what your want, But due to our country's policy, we cannot sign in these applications in my device. So, I have to guess whatever you want, maybe post an GIF it a good choice.
Ángel Rubén Valdeolmos Carmona 566 Reputation points

2020-12-01T11:07:56.577+00:00

here is the gif, when i click Equinix EMEA it navigates to that page, as you can see the push covers the whole page.

I think this should be customizable, to be able to choose both options (visible or hidden tabs)

Ángel Rubén Valdeolmos Carmona 566

for now I use:

   protected override void OnAppearing ()
     {
        base.OnAppearing ();
        Shell.SetTabBarIsVisible(this, false);
     }

     protected override void OnDisappearing ()
      {
        base.OnDisappearing();
        Shell.SetTabBarIsVisible(this, true);
      }

but i have multiple pages where i need this

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 43,931 Reputation points Microsoft Vendor

2020-12-02T07:06:08.33+00:00

You can use Shell.SetNavBarIsVisible(this,false); to hide the navigation bar as well.

Shell tab navigation

1 additional answer

Activity