Search code examples
inheritancexamarinxamarin.formstoolbaritems

Xamarin.Forms: Extend CommonToolbarPage class with all pages


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

enter image description here


Solution

  • 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.