Как открыть новую страницу на весь экран используя Shell с TabBar?

Question

Всем привет! В общем, использую Shell при создании приложения для телефона в Xamarin. Страница AppShell.xaml содержит TabBar, в котором находятся ShellContent страницы (Page1, Page2). Нужно сделать так, чтобы, при нажатии на кнопку, на одной из страниц (Page1) был осуществлен переход на другую страницу (Page3), и эта страница открылась как бы на весь экран (TabBar не было видно).

P.S. Как референс: в приложении банка (тинькофф или сбер) есть TabBar снизу, и при нажатии на карту или счет страница с TabBar полностью скрывается новой страницей.

На данный момент, при нажатии кнопки, Page3 подменяет Page1 и TabBar не исчезает. Пробовал писать в App.xaml.cs MainPage=new NavigationPage( new AppShell());, но это не работает, загружается просто черный экран.

Как реализовано сейчас:

AppShell.xaml (без лабуды сверху)

 <Shell>
 <TabBar >
    <ShellContent Route="Page1"
                  Title="Page1"
                  Icon="icon_vehicle.png"
                  ContentTemplate="{DataTemplate clientv:Page1}" />
    <ShellContent Route="Page2"
                  Title="Page2"
                  Icon="icon_bookings.png"
                  ContentTemplate="{DataTemplate clientv:Page2}" />
</TabBar>
</Shell>

App.xaml.cs

 public partial class App : Application
 {
    public App()
    {
        InitializeComponent();
        MainPage = new AppShell();
    }
 }

Page1.xaml

<ContentPage>
   <StackLayout>
      <Button  Clicked="Button_Clicked"/>
   </StackLayout>
</ContentPage>

Page1.xaml.cs

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Page1 : ContentPage
{
    public Page1()
    {
        InitializeComponent();
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        Shell.Current.GoToAsync(nameof(Page3));
    }
}

Answer 1

Сделай Page3 как Shell:

<Shell>
    <ShellContent>
        <ContentPage Title="Page">
             <!--Содержимое страницы-->
        </ContentPage>
    </ShellContent>
</Shell>

А переход к ней так:

Page1.xaml.cs

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Page1 : ContentPage
{
    public Page1()
    {
        InitializeComponent();
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        Application.Current.MainPage = new Page3();
    }
}

Answer 2

Попробуйте изменять свойство TabBar при переходе на Page3.

В документации указано свойство, которое отвечает за видимость TabBar-а : https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/tabs#tabbar-and-tab-visibility

Есть даже специальный метод, для включения и выключения отображения TabBar-а : https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.shell.tabbarisvisibleproperty?view=xamarin-forms

Попробуйте применить это решение.

Answer 3

Сам нашел еще вот такое решение: App.Current.MainPage.Navigation.PushAsync(new Page3())

Так страница отобразится на весь экран. То есть, несмотря на Shell, Navigation продолжает нормально функционировать в нем.

БЛОГ НА HUSL

Как открыть новую страницу на весь экран используя Shell с TabBar?

Ответы (3 шт):