CODEWITHSUNDEEP
xamarinxamarin.forms
user1448108
user1448108

Reputation: 487

How to show different items in Flyout item and different items in bottom tab bar using Xamarin forms shell?

I am working on hamburger menu and bottom tab bar items. Below is my AppShell.xaml file.

<!-- LoginPage -->
<ShellContent Route="login"
     ContentTemplate="{DataTemplate local:LoginPage}">
</ShellContent>

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

Currently same items are displaying in both Flyout menu and bottom tabs. But as per my requirement in Flyout menu I have to show AboutPage and Browse page and in bottom tabs I have to show Market Tab and Address tab. But it is showing only About tab and Browse tab in bottom tabs. Can anyone tell how to show different items in bottom tabs?

Thanks in advance.

Upvotes: 1

Views: 1468

Answers (1)

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10978

You could use the MenuItem to show the items in the Flyout. And use the FlyoutItem to show the tabs in the bottom tabbar without setting the FlyoutDisplayOptions property to AsMultipleItems.

Xaml:

<MenuItem
    Command="{Binding AboutCommand}"
    Icon="tab_about.png"
    Text="About" />

<FlyoutItem>
    <ShellContent Title="Market" ContentTemplate="{DataTemplate local:Market}" />
    <ShellContent Title="Address" ContentTemplate="{DataTemplate local:Address}" />
</FlyoutItem>

Code behind:

  public ICommand AboutCommand => new Command(async () => await NavigatedToAbout());         

    async Task NavigatedToAbout()
    {
        await Shell.Current.GoToAsync("about");
    }
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute("about", typeof(AboutPage));
   
        BindingContext = this;
    }

Screenshot:

preview

Upvotes: 2

Related Questions