Bolo
Bolo

Reputation: 45

Xamarin Forms How to make Global Toolbar?

I'd like to make Global Toolbar that is accessible in my whole application. Im using MVVM pattern.. I have tried this in my app.xaml:

<Application.Resources>
        <ResourceDictionary>
                <ContentPage x:Key="BoloTool">
                    <ContentPage.ToolbarItems>
                        <ToolbarItem Name="MenuItem2" Order="Secondary" Text="Moje dane" Priority="1"/>
                        <ToolbarItem Name="MenuItem4" Order="Secondary" Text="Wyloguj" Priority="1"/>
                        <ToolbarItem Name="MenuItem4" Order="Secondary" Text="Do Strony Testowej" Priority="1"/>
                        <ToolbarItem Name="MenuItem4" Order="Secondary" Text="Checkout" Priority="1"/>
                    </ContentPage.ToolbarItems>
                </ContentPage>
        </ResourceDictionary>
    </Application.Resources>

And in one of my "Page.xaml" I did:

<ContentPage.ToolbarItems>
    <ToolbarItem BindingContext="{StaticResource BoloTool}"/>
</ContentPage.ToolbarItems>

It compiles but toolbar isnt showing anything, you can hear the click sound but nothing is there and no "3 dots"

I also tried to make it that way creating a code file "x.cs" putting this:

public class BoloToolbar : ContentPage
{
    public BoloToolbar()
        : 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 });
    }

}

And inheriting this in my viewmodel:

public class CartViewModel : BoloToolbar, INotifyPropertyChanged

But it doesnt work.. Im stuck, how do I do this?

Ps. Wierd that something so common as global toolbar isnt available in some tutorials..

Upvotes: 2

Views: 1124

Answers (1)

Paul Kertscher
Paul Kertscher

Reputation: 9742

I think you are kind of lacking the core concepts of Xamarin.Forms. You should really dedicate some time studying them.

And inheriting this in my viewmodel:

Inheriting your VM from the BoloToolbar class won't help anything. The viewmodel is bound to your view/page, but is different from it. You should derive your actual page from BoloToolbar

<myNameSpace:BoloToolbar x:Class="MyNamespace.MyPage" ...>
    <myNameSpace:BoloToolbar.Content>
        <!-- Your content goes here -->
    </myNameSpace:BoloToolbar.Content>
</myNameSpce:BoloToolbar>

Do not forget, that you have to change

public class MyPage : ContentPage 
{
    // ...
}

to

public class MyPage : BoloToolbar
{
    // ..
}

in your MyPage.xaml.cs.

Why doesn't the first option work?

In your Application.xaml you define a ContentPage in your resource dictionary, which you then try to assign to the ToolbarItem of another page.

<ContentPage.ToolbarItems>
    <ToolbarItem ... /> 
</ContentPage.ToolbarItems>

Adds one ToolbarItem to your page. Setting its BindingContext does not change anything about this. Furthermore, neither a Text, not an Icon is set, hence nothing is displayed.

The ToolbarItems is declared as an IList<ToolbarItem> and read-only, hence you won't be able to simply set the ToolbarItems via a resource. Internally it's an ObservableCollection<ToolbarItem> and the only way to manipulate Page.ToolbarItems will be by adding ToolbarItem objects. Hence you will be restricted to adding the items from a base class.

Upvotes: 2

Related Questions