Implementing a View independent of Pages

[rozgonyiadam]

I would like to create a shared view CommonView that appears on every Page. The business logic for this view is managed by the CommonViewModel.

I'm aiming to achieve something similar to the Spotify player bar, where there's a seamless transition between page changes without requiring a full reload of the player view.

Binding views through XAML on every page is not feasible because it triggers a reload of the view and re-instantiates the ViewModel repeatedly.

Is there currently any feature in MAUI that addresses this?

[xtuzy]

I google it, find some opensource music player that have bottom play bar, you can read code to know how to implement

Android :

• https://github.com/RetroMusicPlayer/RetroMusicPlayer
• https://github.com/OxygenCobalt/Auxio
• https://github.com/dtrung98/MusicPlayer

iOS:

• https://github.com/tsuruken0802/MusicPlayer

Flutter

• https://github.com/Sangwan5688/BlackHole

Chinese blog about it

• https://www.zhihu.com/question/36448929

On Android, Maui use Activity(MauiAppCompatActivity) + multiple Fragment(Shell manage Page), maybe you can add a bottom play bar to Activity, when you change page, this bar will always show.

[thewrath]

If you want to do this via MAUI (without having to make a platform-specific implementation), I suggest you take a look at the Shell and also the ContentTemplate (https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/controltemplate#substitute-content-into-a-contentpresenter).

I've also had your requirement, a component that's always present on every page of the application. I first tried with the Shell (via a custom titleView) and then via a ContentTemplate applied to all pages, but I didn't manage to get the desired result. As I'm stuck on .net 7 and the Shell has several bugs, I'm waiting to upgrade to 8 to hope to achieve this functionality.

[tschbc]

I'm just starting to experiment with it, but looks like FlyoutPage keeps its flyout page rendered while its detail page changes. So if you're willing, you may be able to subclass it or reimplement it with a bottom page instead of a left/start one.

In my case, I'm planning on adding a navigation rail to the left of the flyout panel. To my dismay, FlyoutPage doesn't support ControlTemplates, so I'll probably be subclassing it. Or figuring out some other wild solution.

---

I'm assuming reinstantiating ViewModels is a prohibitive issue because you may be controlling its driving logic solely in the ViewModel (which to be fair, is mostly ideal). Assuming again, you may be able to make it work by using a Service and listener pattern. To continue the Spotify example, you could:

1. Launch a singleton AudioControlService when app is created
2. The "track control view" subscribes to this service when it is created in a new page
3. The track control view forwards commands to AudioControlService, where the service actually performs the action
4. When navigating to a different page, the destroying page's track control view would unsubscribe from AudioControlService

I would recommend using a separate Service object anyway, but using it in this way is kinda... extra. But so is MAUI, so ¯\(ツ)/¯

[awasilik]

Were you able to achieve something like this?
I have similar use case now and was wondering if someone came up with something :)

[tschbc]

I gave up on using Pages and am now just using ContentViews everywhere. Handling lifecycles can get messy, but the flexibility you get for complex layouts is worth it.

[BurningLights]

If you’re using dependency injection, then you could register the view model for the common element as a singleton, so the same instance will be used on every page. And thank you can use a ControlTemplate to define the common UI to be used on every page.