.Net Maui Adaptive Page Layouts on Different Platforms

Question

i was searching alot but didnt find anything helpfull. I try to explain my question with an example.

Im writing a program with .net maui for pc and mobile. On the pc i want it on 1 page, on the left side a list with items and on the right a screen "item view" and for the mobile a multipage layout. first page the item lsit and the item view on the second settigns on the third etc.

I wrote both of it but im strugling to combine it. I dont want to projects where i have to edit everything 2 times when i have an update oder something like that. i thought about it to make everything in 1 project and a small piece of code that switches the diffrent pages depending on the platform but there have to be a good solution.

Anyone a hint or idea? or seen something like that?

Thanks alot!

Edit:

This is the Version for the PC with WinForms. Here is everything on one single page. this is how i want it also later with .Net Maui. The onlything is a popup window for the settings.

The Verison for the Phone Is a tabbed multi Page app. I add photos from the whiteboard. (Only backend exists atm)

The Tabbed layout should look a bit like the Clock App on the iPhone. On the PC version all elements are on the same page. Thats good bcs there is enough space. But i want for the Phone app to seperate it. (Searchbar & list with results, Item View / add item, settings) Like the pictures from the whiteboard.

I dont have any relevant design code bcs atm only the backend exists on the maui app. for the pages i just used the default pages from microsoft with editet text so i see if its the correct page.

Answer 1

For the specific situation you want, a list with details for a list item, use a FlyoutPage

The .NET Multi-platform App UI (.NET MAUI) FlyoutPage is a page that manages two related pages of information – a flyout page that presents items, and a detail page that presents details about items on the flyout page.

A FlyoutPage has two layout behaviors:

In a popover layout, the detail page covers or partially covers the flyout page. Selecting an item on the flyout page will navigate to the corresponding detail page. Apps running on phones always use this layout behavior.

In a split layout, the flyout page is displayed on the left and the detail page is on the right. Apps running on tablets or the desktop can use this layout behavior, with Windows using it by default.

By default, the Page will automatically choose the best layout behavior for the platform.