Xamarin.Forms: Extend CommonToolbarPage class with all pages

Question

I am developing ToolbarItem in xamarin forms app. I need to have ToolbarItem throughout the app. For doing so I have created CommonToolbarPage class and extending with ContentPage to use in all pages. But Main.xaml.cs page is inherites with TabbedPage. How can I use CommonToolbarPage with main page. Below CommonToolbarPage class code

public class CommonToolbarPage : ContentPage    
{
    public CommonToolbarPage()
        : base()
    {
        Init();
    }
    private void Init()
    {
        this.ToolbarItems.Add(new ToolbarItem() { Icon="kid", Priority = 0, Order = ToolbarItemOrder.Primary });
        this.ToolbarItems.Add(new ToolbarItem() { Text = "License", Priority = 0, Order = ToolbarItemOrder.Primary });           
    }
}

And below is Mainpage.xaml.cs class

 public partial class MainPage : TabbedPage
        {
            public MainPage()
            {
                InitializeComponent();
            }
        }

Mainpage.xaml here look at Mykid

    <?xml version="1.0" encoding="utf-8" ?>
<CustomPages:CommonToolbarPage2  xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedApp.MainPage"
             xmlns:CustomPages="clr-namespace:TabbedApp.CustomPages;assembly=TabbedApp"   
             xmlns:local="clr-namespace:TabbedApp">
    <local:DairyTabs Icon="dairy" HeightRequest="10" WidthRequest="10" ></local:DairyTabs>
    <local:Mykid Icon="kid" ></local:Mykid>
    <local:Event Icon="about"></local:Event>
</CustomPages:CommonToolbarPage2>

How can I use CommonToolbarPage with Main.xaml.cs page

public partial class MainPage : CommonToolbarPage2
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

DiaryTab.xaml.cs(First tab first page)

namespace TabbedApp
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class DairyTabs : ContentPage
    {
        public DairyTabs()
        {
            InitializeComponent();
            btnDemo.Clicked += delegate
            {
                CreateTabs();      
            };
        }
        private async void CreateTabs()
        {
            TabbedPage tp = new TabbedPage();
            tp.Children.Add(new ChildPage());
            tp.Children.Add(new Mykid());
            tp.Children.Add(new Event());          
            await Navigation.PushAsync(tp,false);   
     }

    }
}

When I am clicking on Go for 2nd page button getting below output without toolbarItem(If I am not inheriting all page file cycle pages) See below screenshot

Main page should be a TabbedPage ? if not juste change it to a content page — OrcusZ, Mar 21 '18 at 08:14
Let's say, if `Mainpage2.xaml.cs` is tabbed page even than i will be facing issue. Why because along with tabs(or every page) I need `ToolbarItem`. — R15, Mar 21 '18 at 08:22
`TabbedPage` inherits from `MultiPage` and `ContentPage` from `Page`. You can try adding code ineheriting from page — OrcusZ, Mar 21 '18 at 08:25
See my updated question, when inheriting `CommonToolbarPage` class from `Page` class getting above error. — R15, Mar 21 '18 at 08:33

OrcusZ · Accepted Answer · 2018-03-21T09:40:56.933

2

Looking to this thread on Xamarin Forum : https://forums.xamarin.com/discussion/97340/create-toolbaritems-using-template-or-some-other-dynamic-mechanism

Your code seems to be totaly legal. But looking for the renderer TabbedPage, You can't inherit for ContentPage and apply it to a TabbedPage`. You should create a new base class for this kind of pages :

public class CommonToolbarPage : TabbedPage
    {
        public CommonToolbarPage()
            : base()
        {
            Init();
        }

        private void Init()
        {
            this.ToolbarItems.Add(new ToolbarItem() { Text = "Help", Priority = 0, Order = ToolbarItemOrder.Secondary});
            this.ToolbarItems.Add(new ToolbarItem() { Text = "License", Priority = 0, Order = ToolbarItemOrder.Secondary });
            this.ToolbarItems.Add(new ToolbarItem() { Text = "About", Priority = 0, Order = ToolbarItemOrder.Secondary });
        }

    }

If you are using MVVM and not CodeBehing development method, you can bing the Toolbar Item property, the XAML look like this :

<ContentPage.ToolbarItems>
    <ToolbarItem Name="MenuItem1" Order="Primary" Icon="Microsoft.png" Text="Item 1" Priority="0" />
    <ToolbarItem Name="MenuItem2" Order="Primary" Icon="Xamarin.png" Text="Item 2" Priority="1" />
</ContentPage.ToolbarItems>

Instead of setting the Items staticly, you will have a base view model that will create the items in the constructor.

Hope this will help you.

edited Mar 21 '18 at 09:40

answered Mar 21 '18 at 09:03

OrcusZ

3,555
2
31
48

Your suggestion is worth implementing. Still I am facing 1 issue. When I go to 2nd tab, Page is `Mykid.xaml.cs` inheriting from `Contentpage` toolbar, It is showing 4 tabs. 2 from Mainpage & other 2 from same page(`CommonToolbarPage : ContentPage`). See my updated question to be more precise. – R15 Mar 21 '18 at 09:55
It's normal, Tabbed page is the same page and you do not call all lifecycle page. So only the tabbed page need the item in your case. Not the child page consumed by the tabbed page – OrcusZ Mar 21 '18 at 10:00
If I am not irritating you :). If I won't extend toolbar with all life cycle pages I am facing another issue. Please see my update question for more clarification. if you need any clarification can me regarding above changes – R15 Mar 21 '18 at 11:36
Hummm, have a look to this thread. Seems that onappearing is called twice in tabbed page : https://forums.xamarin.com/discussion/72673/tabbed-chlid-page-onapearing-invoking-twice – OrcusZ Mar 21 '18 at 12:00
Still I am not getting how to solve this issue. Why because even I am not overriding `OnAppearing`. If I override what code I will write there. – R15 Mar 22 '18 at 07:48

Xamarin.Forms: Extend CommonToolbarPage class with all pages

1 Answers1