Toolbar Item on one Tab only

Question

Toolbar Item on one Tab only

NeidennX 1

Hi team, hope you're all good, im creating an app that has a TabbedPage, my question is, if i can add a Toolbar Item that shows up on only one of the tabs ? is this possible ?

Regards

1 answer

Your answer

Answer 1

JarvanZhang 23,971

Hello @NeidennX ,

Welcome to our Microsoft Q&A platform!

if i can add a Toolbar Item that shows up on only one of the tabs ? is this possible ?

Yes, it's available to do that. First add the toolbar item for the tab page.

   <ContentPage ...  
           x:Class="TestApplication1.TestPage">  
       <ContentPage.ToolbarItems>  
           <ToolbarItem IconImageSource="img"/>  
       </ContentPage.ToolbarItems>  
       ...  
   </ContentPage>

If you plan to add the nav bar for all the tabs, you could just wrap the tabbedPage in the NavigationPage as below.

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

If you just want to display the nav bar for the specific tab page, you could only wrap the content page in the NavigationPage.

   <?xml version="1.0" encoding="utf-8" ?>  
   <TabbedPage ...  
        x:Class="TestApplication1.TabbedPage1">  
       <ContentPage Title="Tab 1" />  
       <ContentPage Title="Tab 2" />  
       <NavigationPage>  
           <x:Arguments>  
               <local:TestPage Title="Tab 3" />  
           </x:Arguments>  
       </NavigationPage>  
   </TabbedPage>

Best Regards,

Jarvan Zhang

If the response is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.

NeidennX 1

Hi @JarvanZhang Ok but what i have here is a Tabbed Page, not a Content One, i have this:

<?xml version="1.0" encoding="utf-8" ?>  
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"  
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
            xmlns:local="clr-namespace:App"  
             x:Class="App.Home">  
  
    <TabbedPage.ToolbarItems>  
        <ToolbarItem Text="Save"/>  
    </TabbedPage.ToolbarItems>  
  
    <local:Tab1 Title="Tab 1"/>  
    <local:Tab2 Title="Tab 2"/>  
    <local:Tab3 Title="Tab 3" />  
  
  
  
</TabbedPage>

Looking like this:

lbmQdsI
https://imgur.com/a/lbmQdsI

What i need is that "Save" Item to be displayed only on the 3rd Tab not on all of them.

JarvanZhang 23,971

What i need is that "Save" Item to be displayed only on the 3rd Tab not on all of them.

The toolbar item is displayed on the navigation bar, so we need to show the navigationbar first. To display the toolbar item only on one tab page, please don't wrap the tabbedPage in NavigationPage. Instead, make the tab 3 be a navigationPage.

Here is the sample code, you could refer to it.

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        MainPage = new Home(); //don't wrap the tabbedpage in navigation page
    }
}

Page.xaml

<TabbedPage ...
    x:Class="App.Home">

    <TabbedPage.ToolbarItems>
        <ToolbarItem Text="Save"/>
    </TabbedPage.ToolbarItems>

    <local:Tab1 Title="Tab 1"/>
    <local:Tab2 Title="Tab 2"/>
    <NavigationPage Title="Tab 3">
        <x:Arguments>
            <local:Tab3 />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

NeidennX 1 Reputation point

2022-01-31T21:42:48.04+00:00

Hi @JarvanZhang

That's not working :( , this is what it looks when i apply it exactly as you mentioned it
JarvanZhang 23,971 Reputation points

2022-02-01T01:13:57.34+00:00

Hi,NeidennX-8393. Do you have any other setting for the tabbedpage? Would you mind sharing a basic demo on the github or onedrive and sharing the link here? It'll help to reproduce the issue to get the cause.

NeidennX 1

Hi @JarvanZhang not quite sure if this might affect, but i created the app using the Flyout template, maybe that's the reason.

this is what i have on the OnCreate Method in the MainActivity

 TabLayoutResource = Resource.Layout.Tabbar;  
        ToolbarResource = Resource.Layout.Toolbar;  
  
        base.OnCreate(savedInstanceState);  
  
        Xamarin.Essentials.Platform.Init(this, savedInstanceState);  
        global::Xamarin.Forms.Forms.Init(this, savedInstanceState);  
        LoadApplication(new App());

JarvanZhang 23,971 Reputation points

2022-02-04T11:44:47.05+00:00

but i created the app using the Flyout template

Shell provides the Shell.ToolbarItems, try using the control instead. I'll test the function in a shell application and will update later.
NeidennX 1 Reputation point

2022-02-16T18:14:45.41+00:00

Hi @JarvanZhang Where you able to test it out? on my end the Shell.ToolbarItems is not providing the expected result

JarvanZhang 23,971

Sorry for late reply, do you create the tabs like below?

<TabBar Title="XXX">
    <Tab Title="tab_1">
        <ShellContent .../>
    </Tab>

    <Tab Title="tab_2">
        <ShellContent Title="Page1" Route="Page1" ContentTemplate="{DataTemplate local:Page1}"/>
        <ShellContent Title="Page2" Route="Page2" ContentTemplate="{DataTemplate local:Page2}" />
    </Tab>
</TabBar>

For the above tabs, you could just add the ToolbarItem for one tab page. In follwing code, the toolItem will not be shown on 'Page1'.

<ContentPage ...
    x:Class="ShellApplication2.Views.Page2">

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="PartsPage item"/>
    </ContentPage.ToolbarItems>

    <ContentPage.Content>
        ...
    </ContentPage.Content>
</ContentPage>

NeidennX 1

HI @JarvanZhang sorry for the late reply on my end. To answer your first question, this is how I currently have the .xaml file

<?xml version="1.0" encoding="utf-8" ?>  
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"  
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
            xmlns:local="clr-namespace:AppMatriculaV5"  
             x:Class="App">  
  
    <Shell>  
        <Shell.ToolbarItems>  
            <ToolbarItem Text="Save"/>  
        </Shell.ToolbarItems>  
    </Shell>  
  
    <local:GestionMensualidad Title="Tab 1"/>  
    <local:GestionMatricula Title="Tab 2"/>  
    <NavigationPage Title="Tab 3 ">  
        <x:Arguments>  
            <local:ListaMensualidades Title="Tab 3" />  
        </x:Arguments>  
          
    </NavigationPage>  
  
  
  
  
  
</TabbedPage>

Share via

Toolbar Item on one Tab only

1 answer

Your answer