主页 / 问题 / 1325343
Accepted
Николай Смирнов
Asked:2022-09-05 00:41:26 +0000 UTC2022-09-05 00:41:26 +0000 UTC

如何使用带有 TabBar 的 Shell 全屏打开新页面？

  • 772

大家好！通常，我在 Xamarin 中创建电话应用程序时使用 Shell。AppShell.xaml 页面包含一个 TabBar，其中包含页面的 ShellContent（Page1、Page2）。有必要这样做，以便在按下按钮时，在其中一个页面 (Page1) 上转换到另一个页面 (Page3)，并且该页面像全屏一样打开（TabBar 不可见）。

PS 作为参考：在银行应用程序（Tinkoff 或 Sberbank）中，底部有一个 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>

应用程序.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));
    }
}
xamarin

3 个回答

  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();
    }
}
    • 1
  2. Best Answer

    导航到Page3时尝试更改TabBar属性 。

    该文档指定了一个负责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

    试试这个解决方案。

    • 1

  3. 我还找到了这个解决方案：App.Current.MainPage.Navigation.PushAsync(new Page3())

    这将全屏显示页面。也就是说，尽管使用了 Shell，Navigation 仍然可以在其中正常运行。

    • 0

相关问题