Maui How to add a button at the Shell to navigate to a page?

Question

I have a Maui application with flyout menu. Additional I like to have a button on the Shell at the right end "profile". From there the ProfilePage should be opened. (instead using the flyout menu).

How should I implement the button at the shell?

How should I handle the click event (or ICommand) to open the ProfilePage?

I tried using the TitleView (also ItemTemplate and ToolbarItems), but the page title gets lost (I like to keep the standard), the button is not on the right end and I can't find out how to navigate to ProfilePage by clicking the button:

<Shell
x:Class="Mandatos.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:MyProject.Views"
FlyoutBehavior="Flyout" >

<Shell.TitleView >
    <HorizontalStackLayout>
        <Label FontSize="30" Margin="30" Text="{Binding Title}" />
        <Button Text="Profile" WidthRequest="100" HorizontalOptions="End"
                Clicked="Button_OnClicked" BackgroundColor="red"/>
    </HorizontalStackLayout>
</Shell.TitleView>

<FlyoutItem Title="First" >
    <ShellContent ContentTemplate="{DataTemplate views:FirstPage}" />
</FlyoutItem>

<FlyoutItem Title="Second">
    <ShellContent ContentTemplate="{DataTemplate views:SecondPage}" />
</FlyoutItem>

<!-- more pages.. -->

It should look like that:

Could you please show a picture to show where did you want to put the button? In the shell flyout or the contentpage's navigation bar? — Liyun Zhang - MSFT, May 09 '23 at 01:36
Doesn't that answer your question https://stackoverflow.com/questions/70719111/how-do-i-add-a-toolbar-item-net-maui ? Using a ToolbarItems with a TitleView is working just fine for me (both are showing, ToolbarItems is on the right (at least on android, windows is different)). Also to navigate you can use `Shell.Current.GoToAsync("//animals/monkeys")` — Poulpynator, May 09 '23 at 07:34

score 1 · Accepted Answer · answered May 09 '23 at 09:12

I created a new project to test your code and found that the <HorizontalStackLayout> will not work perfectly in the Shell.TitleView. So I used the grid instead of stacklayout.

In addition, you said

the page title gets lost (I like to keep the standard)

This should be the Text="{Binding Title}" doesn't work. You can refer to my sample which get the effect you want.

In the AppShell.xaml:

 <Shell.TitleView>
        <Grid ColumnDefinitions="9*,1*">
            <Label x:Name="title" HorizontalOptions="Start" Grid.Column="0" VerticalTextAlignment="Center"/>
            <Button Text="test" Grid.Column="1" Clicked="Button_Clicked" BackgroundColor="Red" HorizontalOptions="Start"/>
        </Grid>
    </Shell.TitleView>
    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />
    <ShellContent
        Title="NewPage"
        ContentTemplate="{DataTemplate local:NewPage1}"
        Route="NewPage" />

And in the code behind:

public partial class AppShell : Shell
{
      
      public AppShell()
      {
            InitializeComponent();
      }

    private void Button_Clicked(object sender, EventArgs e)
    {
        // do the navigation you want
    }
    protected override void OnNavigated(ShellNavigatedEventArgs args)
    {
        base.OnNavigated(args);
        title.Text = Shell.Current.CurrentItem.Title;
        // make the title always show correctly
    }
}

And the result image:

score 0 · Answer 2 · answered May 09 '23 at 07:18

The following is just my point of view, feel free to completely ignore it:

I understand and use the Shell, exactly as a shell. It is the external shape of my application, nothing more. And as such, it must remain empty.

I do not say it should not contain any logic. In fact, some of the events there are the only way to solve very specific navigation problems. But I advise you to keep it as clean as possible.

I would add everything else to the Content Pages instead of the Shell. What method I would use - I do not know. Maybe toolbar. Maybe title view. Maybe I will separate it as tab or flyout item. Really depends on the situation.

But this is in the ContentPage, not the Shell. (And handled after that by their ViewModels)

Maui How to add a button at the Shell to navigate to a page?

2 Answers2