CODEWITHSUNDEEP
c#.netshelltoolbarmaui
Mufacka
Mufacka

Reputation: 267

How do I add a toolbar item .net maui?

As the question states I am trying to add a toolbar item/button to shell for adding a database item. Normally in Xamarin forms I was able to add a toolbar item with

<ContentPage.ToolbarItems>
    <ToolbarItem Text="Add"
                 Clicked="AddItem_Clicked"/>
</ContentPage.ToolbarItems>

But I have not figured out how to make this work in .net maui, does anyone have any insight on this? So far I have a shell with flyout menu but I would like to add an "Add" button to the top right corner.

If there was a way to do this on the Shell menu that would be more preferred than the page level but either would be great.

Edit: I was able to get it working with help from the first comment below but I am unable to make adjustments to button width or have it in a stacklayout, so code looks like:

    <Shell.TitleView>
        <Button Text="+" Clicked="AddItem_Clicked" BackgroundColor="LightBlue" MaximumWidthRequest="20" WidthRequest="20"></Button>
    </Shell.TitleView>

Adding a stacklayout around the button makes it not show up anymore. Also this does not work on Windows build as nothing shows up.

Upvotes: 5

Views: 19225

Answers (4)

Bondolin
Bondolin

Reputation: 3121

I had this problem as well -

  • Had app based on a previous Xamarin sample
  • Create new item ContentPage had ToolBarItems: 
    <ContentPage.ToolbarItems>
    <ToolbarItem Text="Cancel" Clicked="Cancel_Clicked" />
    <ToolbarItem Text="Save" Clicked="Save_Clicked" />
</ContentPage.ToolbarItems>
  • Neither ToolBarItems nor TitleView were showing at all
  • Was navigating to page using the following: 
    await this.Navigation.PushModalAsync(new NavigationPage(new NewActivityPage()));

Per NavigationPage:

NavigationPage is incompatible with .NET MAUI Shell apps, and an exception will be thrown if you attempt to use NavigationPage in a Shell app. For more information about Shell apps, see Shell.

I fixed this referencing the above notice's .NET MAUI Shell overview and its accompanying Xaminals sample.

Changes made:

  • Added the following route registration to AppShell.xaml.cs: 
    public Dictionary<string, Type> Routes { get; private set; } = new Dictionary<string, Type>();

private void RegisterRoutes()
{
    this.Routes.Add("newactivity", typeof(NewActivityPage));

    foreach (var item in this.Routes)
    {
        Routing.RegisterRoute(item.Key, item.Value);
    }
}
  • Called route registration from AppShell ctor, after InitializeComponent
  • Navigated to page using the following: 
    await Shell.Current.GoToAsync("newactivity");

My understanding is that the NavigationPage method I was using was not working, per the docs, and that using Shell navigation correctly now has it working as expected.

Upvotes: 0

Humphryshikunzi
Humphryshikunzi

Reputation: 41

Use Shell Toolbar Items, something like this :

 <Shell.ToolbarItems>
        <ToolbarItem Text="Settings"
                     Priority="1"
                     Order="Secondary"
                     Command="{Binding NavigateToSettingsPageCommand}"/>

        <ToolbarItem Text="Profile"
                     Priority="2"
                     Order="Secondary"
                     Command="{Binding NavigateToProfilePageCommand}"/>

        <ToolbarItem Text="Share App"
                     Priority="3"
                     Order="Secondary"
                     Command="{Binding NavigateToShareAppCommand}"/>

        <ToolbarItem Text="Log Out"
                     Priority="4"
                     Order="Secondary"
                     Command="{Binding LogOutCommand}"/>
    </Shell.ToolbarItems>

Upvotes: 4

Mufacka
Mufacka

Reputation: 267

Must have been a .net maui bug in the preview version. Toolbar item appears to be working just fine now.

Upvotes: 0

Wen xu Li
Wen xu Li

Reputation: 1686

You can use Shell.TitleView to achieve the above page add function.

Here is the xaml code:

<Shell.TitleView>
    <StackLayout>
        <Button Text="ADD" Clicked="Button_Clicked" HeightRequest="50" WidthRequest="100" HorizontalOptions="End"></Button>
    </StackLayout>
</Shell.TitleView>

For more information, please refer to:https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/pages#display-views-in-the-navigation-bar

Upvotes: 5

Related Questions