How do you create a Flyout page in a MAUI Shell App when its not the first page?

Question

I have an app I am trying to build using MAUI. I want to use a flyout on a page but it's not the first page

My app has 3 pages consisting of:-

Page 1. is a login page, which navigates to

Page 2. which is a summary page, and depending on what you select there, you then go to

Page 3. which has the flyout on it

None-Shell Flyout has a bug and it currently doesn't work in Android, so I thought I would try Shell.

But from all the examples I can find, there is not a single one that shows flyout on any other page other than the first page. It seems like it's always assumed you want your app to start with the flyout navigation and I don't.

So how do I achieve this please, can anyone help me out here?

I believe https://stackoverflow.com/q/65186262/5228202 is what you are looking for — Cfun, Sep 23 '22 at 19:04
Nope, I looked at it and seems like just craziness and makes no sense whatsoever. Why on earth would you want to write an app in that way :D But thanks for the suggestion. — djack109, Sep 23 '22 at 19:28
In App.xaml.cs, instead of `MainPage = new AppShell();`, do `MainPage = new Page1();` or `MainPage = new NavigationPage();`. When you are ready to use a page with Shell features, do `Application.Current.MainPage = new AppShell();`. **For more details, see** "FYI ALTERNATIVE" and "THIRD ALTERNATIVE" in [this answer of mine](https://stackoverflow.com/a/73094635/199364). — ToolmakerSteve, Sep 23 '22 at 19:38
Your answer makes perfect sense and confirms what I've already found out and suspected. I am already using NavigationPage but the flyout doesn't work on Android (it's a known bug) so my development stalled a bit. I thought I could do the same thing with Shell but it looks not to be designed to work that way. If I'm already using NavigationPages I see no point in my app switching to Shell as it doesn't gain me anything. DI would have been nice tho — djack109, Sep 23 '22 at 19:57

score 0 · Accepted Answer · answered Sep 26 '22 at 08:17

0

You may be able to get this to work by setting the Title View and replicating the navigation bar.

public async Task LaunchNextPage(Page page)
{
NavigationPage.SetHasBackButton(page, false);

var gof = ((App)App.Current).MainPage as FlyoutPage;
if (gof.Detail.Navigation.NavigationStack?.ToList()?.Count > 0)
{
    NavigationPage.SetTitleView(this, new NavigationBar());
}
else
{
    // at the beginning of the stack so already showing the burger menu
    NavigationPage.SetTitleView(this, null);
}

NavigationPage ac = (NavigationPage)gof.Detail;
await ac.PushAsync(page, true);

if (NavigationPage.GetTitleView(this) != null)
{
    (NavigationPage.GetTitleView(this) as NavigationBar).Title = page.Title;
}
}

NavigationBar.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<HorizontalStackLayout
xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NavigationBar" 
VerticalOptions="CenterAndExpand" 
HorizontalOptions="FillAndExpand" 
Padding="0"
Spacing="0"
x:Name="shx">
<ImageButton
    x:Name="Hamburger"
    Source="hamburger_icon.png" 
    WidthRequest="24" 
    HeightRequest="24"
    Margin="0,0,36,0"
    Clicked="Hamburger_Clicked"
    />
<Label
    x:Name="NaverBarTitle"
    VerticalOptions="Center"
    FontAttributes="Bold"
    FontSize="Medium" />
</HorizontalStackLayout>

NavigationBar.xaml.cs:

public partial class NavigationBar : HorizontalStackLayout
{ 
public NavigationBar()
{
    InitializeComponent();
    NaverBarTitle.TextColor = Color.Red;
    BackgroundColor = Color.Blue;
}
public string Title
{
    set
    {
        NaverBarTitle.Text = value;
    }
}
private void Hamburger_Clicked(object sender, EventArgs e)
{
    var gof = ((App)App.Current).MainPage as FlyoutPage;
    gof.IsPresented = !gof.IsPresented;
}
}

answered Sep 26 '22 at 08:17

Hongxin Sui-MSFT

174
3

Thanks for this but it doesn't answer the question. I can do all that using Navigation pages already. I am probably wrong but all the demos I find are pushing shell as the way to go for MAUI apps, which led me to think that all my apps should use Shell. I just could not see how a complex (many pages 10+) application flow could be built using Shell. – djack109 Sep 26 '22 at 15:00
Yes it is, the shell is powerful and it can choose to hide or show pop-up buttons. You can choose to register absolute or relative routes to achieve navigation. If you need more relevant knowledge, you may refer to it in .NET MAUI official documents. – Hongxin Sui-MSFT Sep 27 '22 at 01:45
I've read the docs and read the approaches for both. I will continue to use the non-Shell way to write my apps as it suits my purposes better, and I can find nothing that suggests Shell is a better way to go. It was only my observation that there "appeared" to be a push toward Shell hence why I asked the question. I guess I need to find a good demo to convince me :) – djack109 Sep 27 '22 at 09:49
Ok, I may have to help you here. – Hongxin Sui-MSFT Oct 06 '22 at 06:11
Yes, please. there are lots of demo's on the basics but nothing that goes into complexity. I've never thought it a good idea to mix technologies in the same app (Shell and NavigationPage) I would have thought it better to still to one approach. I can see and understand how you would build a complex multipage app with just navigationpages but I can't see how you would achieve the same using Shell. It just seems (to me) to be aimed at SPA's, but I am happy to be wrong if that could be demonstrated – djack109 Oct 06 '22 at 09:44
You can refer to my next answer and I hope it will help you. – Hongxin Sui-MSFT Oct 07 '22 at 05:53
That looks great but doesn't then show how page 3 (or further in) then handles the flyout page. Remember the flyout in my requirement doesn't navigate the app but navigates sub-pages within the app depending on what you selected from the previous pages. For example, in Xamarin I could define a flyout on page 3 or 4 or deeper and the previous pages would not know, nor care nor to need to interact with it. – djack109 Oct 07 '22 at 09:52
That's probably all I can do. – Hongxin Sui-MSFT Oct 10 '22 at 03:22
No worries, thanks for your help. You have actually helped to confirm my thinking. Thanks, loads – djack109 Oct 10 '22 at 14:31

score 0 · Answer 2 · answered Oct 07 '22 at 05:52

I have tested it. If you want to use the shell, you need to add this in the AppShell to hide the FlyoutItem on the first page:

Shell.FlyoutBehavior="Disabled"

And then add this on the third page where you need to add the pop-up control:

Shell.NavBarIsVisible="False"

At last, you may need to add this sentence to each sub page that the pop-up control navigates to on the third page:

Shell.NavBarIsVisible="True"

After all this is done, please refer to this for navigation between pages one, two and three:

private async void Button_Clicked(object sender, EventArgs e)
{
    await Shell.Current.GoToAsync("//monkeys/MonkeysPage");
}

How do you create a Flyout page in a MAUI Shell App when its not the first page?

2 Answers2