How do I add a toolbar item .net maui?

Question

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.

Etruria

Checking my code, yours doesn't make the button fully positioned. – Congruous

Did this ever work for you? – Etruria

My size was successfully limited. – Congruous

I have the same issue using github.com/irongut/MauiBeach/tree/master/src/MauiBeach – Etruria

Hey, I have just been trying to place anything in the shell title view and it looks like at your screen - in a weird place and really hard to actually show anything there. Setting a margin has very weird consequences. I've tried a lot of things and none of them worked. I think this might be a bug in the preview build. Hopefully it will be solved soon. – Kacey

Well good to hear its not just me. I hope they fix it soon that would be awesome. Thanks for the reply. – Etruria

Well since I tried it yesterday on latest .net maui release it looks like toolbar items are working now. – Etruria

Answer 1

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

Etruria

I just updated to the new Visual Studio preview version, but it still doesn't work. :( I have the same problem... – Pouch

Assuming you tried using the toolbar items approach as instead of shell.titleview? That is what did it for me. I haven't gone back and tried titleview since. – Etruria

This is not an answer. An answer should not be contain "should", "must", "i guess" etc. – Touzle

Answer 2

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

Congruous

It definitely shows up but not when its in the stack layout. Also width request not working for some reason. A very good start though thank you, that definitely gets the add button in the top -- now I just need to figure out why adjustments to the button aren't working. – Etruria

It may be caused by other codes, or change to another emulator. – Congruous

This is only for the main shell page how do I get one to work on other pages before I would have used toolbaritem? @WenxuLi-MSFT – Fashionable

@c-sharp-and-swiftui-devni I have this working with ToolBarItems; please see my answer for more details. – Mccutcheon

Thank you! This save me the continued grief of trying to resolve my need for conditional render of ToolbarItem, which does not have an IsVisible property. Using the TitleView I have solved. – Capsize

Answer 3

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> 

Cyclone

Answer 4

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.

Mccutcheon