Xaml 如何使用Shell在Xamarin Forms 4.8版本的弹出菜单和底部选项卡中定义不同的项？

我正在用Xamarin Forms 4.8版本开发一个应用程序，它同时具有侧菜单（弹出）和底部

Tabbar

，并使用Shell功能。我的侧菜单有4项，底部的

Tabbar

有5项。两者都有不同的项目。底部

Tabbar

带有这5个项目的标签总是需要出现在我的应用程序中。当我单击侧菜单中的任何项时，底部的

选项卡栏

项将替换为侧菜单项。我不知道为什么

我的AppShell.xaml页面如下所示

<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:MyApp.Views"
        xmlns:localHome="clr-namespace:MyApp.Views.Home"
        xmlns:localOnlineStore="clr-namespace:MyApp.Views.OnlineStores"
        xmlns:localBooks="clr-namespace:MyApp.Views.BookList"
        xmlns:localUniforms="clr-namespace:MyApp.Views.Uniforms"
        xmlns:localUser="clr-namespace:MyApp.Views.User"
        xmlns:localMyAccount="clr-namespace:MyApp.Views.MyAccount"
        xmlns:localCart="clr-namespace:MyApp.Views.Cart"
        xmlns:flyouthead="clr-namespace:MyApp"
        xmlns:controls="clr-namespace:MyApp.Renderer;assembly=MyApp"
        Title="MyApp"
        x:Class="MyApp.AppShell"   
        FlyoutBehavior="Flyout"
        FlyoutHeaderBehavior="Fixed"
        FlyoutBackgroundColor="#011948">           
    
        <Shell.Resources>
            <ResourceDictionary>
                <Color x:Key="NavigationPrimary">#011948</Color>
                ...
                ...
            </ResourceDictionary>
         </Shell.Resources>    
    
         <Shell.FlyoutHeader> ... </Shell.FlyoutHeader> 
         <Shell.ItemTemplate> ... </Shell.ItemTemplate>
         <Shell.MenuItemTemplate> ... </Shell.MenuItemTemplate>
    
    
        <TabBar>
           <Tab Title="Home"
                Icon="ic_home">
                <ShellContent Route="HomePage" Shell.TabBarBackgroundColor="{StaticResource NavigationPrimary}" ContentTemplate="{DataTemplate localHome:HomePage}" />
           </Tab>
           <Tab Title="Books"
                Icon="ic_book">
                <ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
            </Tab>
            <Tab Title="Cart"
                Icon="ic_cart">
                <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
            </Tab>
            <Tab Title="Uniforms"
                Icon="ic_uniform">
                <ShellContent Route="UniformsPage" ContentTemplate="{DataTemplate localUniforms:UniformsPage}" />
            </Tab>
            <Tab Title="Profile"
                Icon="ic_profile">
                <ShellContent Route="MyProfilePage" ContentTemplate="{DataTemplate localMyAccount:MyProfilePage}" />
             </Tab>
      </TabBar>    
    
    
      <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">         
          <ShellContent Title="Online Store" Icon="ic_online_store" ContentTemplate="{DataTemplate localOnlineStore:OnlineStorePage}" />
          <ShellContent Title="About Us" Icon="ic_about_us" ContentTemplate="{DataTemplate localHome:AboutUsPage}" />
          <ShellContent Title="Contact Us" Icon="ic_contact_us" ContentTemplate="{DataTemplate localHome:ContactUsPage}" />
          <ShellContent Title="Sign In" Icon="ic_login" Route="LoginPage" ContentTemplate="{DataTemplate localUser:LoginPage}" />
       </FlyoutItem>    
    
 </Shell>

#011948
...
...
...  
... 
... 

当我在Android Emulator中运行时，我的底部选项卡栏如下图所示

弹出按钮中的侧菜单如下所示

当我点击侧边菜单中的项目时，页面呈现如下

---

此处，底部的

选项卡栏

项将替换为侧边菜单项。

如果要在弹出型按钮和底部显示一个或多个项，只需使用弹出型按钮即可

 <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="About" Icon="tab_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
    <ShellContent Title="Browse" Icon="tab_feed.png" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>

如果只想在底部显示项目，而不想在弹出按钮中显示项目，只需使用TabBar即可

<TabBar>
    <Tab Title="About" Icon="tab_about.png">
        <ShellContent>
            <views:AboutPage />
        </ShellContent>
    </Tab>
    <Tab Title="Browse" Icon="tab_feed.png">
        <ShellContent>
            <views:ItemsPage />
        </ShellContent>
    </Tab>
</TabBar>

只需选择FlayoutItem或TabBar，不需要同时使用它们

有关壳牌的更多详细信息，请查看：

更新：

 <MenuItem
    Clicked="OnMenuItemClicked"
    StyleClass="MenuItemLayoutStyle"
    Text="Logout" />


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

私有异步void OnMenuItemClicked（对象发送方，事件参数e）
{
wait Shell.Current.GoToAsync（“//LoginPage”）；
}

如果要在弹出型按钮和底部显示一个或多个项目，只需使用弹出型按钮项目即可

 <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="About" Icon="tab_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
    <ShellContent Title="Browse" Icon="tab_feed.png" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>

如果只想在底部显示项目，而不想在弹出按钮中显示项目，只需使用TabBar即可

<TabBar>
    <Tab Title="About" Icon="tab_about.png">
        <ShellContent>
            <views:AboutPage />
        </ShellContent>
    </Tab>
    <Tab Title="Browse" Icon="tab_feed.png">
        <ShellContent>
            <views:ItemsPage />
        </ShellContent>
    </Tab>
</TabBar>

只需选择FlayoutItem或TabBar，不需要同时使用它们

有关壳牌的更多详细信息，请查看：

更新：

 <MenuItem
    Clicked="OnMenuItemClicked"
    StyleClass="MenuItemLayoutStyle"
    Text="Logout" />


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

私有异步void OnMenuItemClicked（对象发送方，事件参数e）
{
wait Shell.Current.GoToAsync（“//LoginPage”）；
}

您可以根据在

AppShell.xaml

中放置的内容来定义选项卡，而对于弹出型按钮，您可以通过设置自定义内容/视图来覆盖它（弹出型按钮项不会跟随您的

AppShell.xaml

），或者使用直接内容或

数据模板设置可绑定属性。这样，选项卡和弹出按钮之间就有了不同的项目

<Shell X:Name="shell" ..>
...
<Shell.FlyoutContent>
    <CollectionView BindingContext="{x:Reference shell}"
                     ItemsSource="{Binding FlyoutItems}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding Title}"
                       TextColor="White"
                       FontSize="Large" />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</Shell.FlyoutContent>


...

注
此属性从Xamarin.Forms开始提供5.0.0.2012

相关问题
您可以根据您在
AppShell.xaml
中放置的内容来定义选项卡，而对于弹出型按钮，您可以通过设置自定义内容/视图（弹出型按钮项不会跟随您的
AppShell.xaml
）来覆盖它，方法是使用直接内容或
数据模板设置可绑定属性。这样，选项卡和弹出按钮之间就有了不同的项目

<Shell X:Name="shell" ..>
...
<Shell.FlyoutContent>
    <CollectionView BindingContext="{x:Reference shell}"
                     ItemsSource="{Binding FlyoutItems}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding Title}"
                       TextColor="White"
                       FontSize="Large" />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</Shell.FlyoutContent>


...

注
此属性从Xamarin.Forms开始提供5.0.0.2012

相关问题
看起来，我们不能在Shell中同时使用弹出按钮和Tabbar，对吗？但XF Shell允许在应用程序中同时使用弹出按钮和Tabbar。为什么不能在两者中都包含不同的项？@ThamaraiT说Shell对象只能包含弹出项对象或TabBar对象，后者只能包含Tab对象，后者只能包含ShellContent对象。TabBar类型禁用弹出项。然后，使用Shell功能在我的所有页面中设置底部选项卡栏和侧菜单的方法是什么？@ThamaraiT我认为在Shell中添加FlyoutItem可以达到您的目标。请看我上面的回复。看起来，我们不能在Shell中同时使用弹出按钮和Tabbar，对吗？但是XF Shell允许在应用程序中同时使用弹出按钮和Tabbar。为什么不能在两者中都包含不同的项？@ThamaraiT说Shell对象只能包含弹出项对象或TabBar对象，后者只能包含Tab对象，后者只能包含ShellContent对象。TabBar类型禁用弹出项。然后，使用Shell功能在我的所有页面中设置底部选项卡栏和侧菜单的方法是什么？@ThamaraiT我认为在Shell中添加FlyoutItem可以达到您的目标。请看我上面的答复。如果它确实回答了您的问题或发现它有帮助，请检查它。这可能是一个答案，但MS页面上没有真实的示例，代码因以下错误而崩溃：找不到
shell
引用的对象您确定您在shell元素中使用答案中提到的xamarin forms版本吗？是的，xamarin.forms=>5.0.0.2012。我甚至在GitHub repo中报告了关于其他控件的bug
因为您有
x:Name=“SP_AppShell”
我想它可能来自那里，我正在使用
BindingContext=“{x:Reference shell}”
所以您应该用
SP_AppShel
更改
shell
，或者您已经这么做了？推荐人