.NET MAUI Landscape and portraint layouts

Brenden Jacobson 6

Is it possible to have specific layouts for landscape (typically a Windows app) and portrait (Android/IOS app) pages in .Net MAUI?

I have found that a page that looks good (and usable) on Android becomes totally unusable on Windows.

Brenden Jacobson 6 Reputation points

2022-08-01T12:04:23.837+00:00

Thank you for replying. I looked at the example and the official course and this is something like what I am looking for. I should add than I just do programming for a hobby, and thought I might have a go at learning .Net Maui. I have enclosed a diagram (in the text.pdf file) of what I am trying to achieve and also the xaml file from VS 2022 Preview.

226736-mainpage.xml 226784-text.pdf
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 42,001 Reputation points Microsoft Vendor

2022-08-02T05:23:41.083+00:00

It's my pleasure to help you.

I've converted my comment to answer, could you please check it?

1 answer

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 42,001 Reputation points Microsoft Vendor

2022-08-01T06:20:41.313+00:00
Hello,

In MAUI, You could use the OnPlatform mark-up extension to set platform-specific values in XAML.

For Example, I have a FlexLayout, and I want to show the items horizontally on Windows and vertically on other platforms:

<FlexLayout Direction="{OnPlatform WinUI=Row, iOS=Column, Android=Column}"> ... </FlexLayout>

If you think it will work for you, you could refer to this official course Platform-specific values in XAML to get more details.

I've used Onplatform to implement the display effect you show in the text.pdf, you could refer to the following code in the file:

227166-xmal.txt

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Brenden Jacobson 6 Reputation points

2022-08-02T06:03:39.39+00:00

Sorry, but I am no sure what you are asking me to do.

Whilst the use of OnPlatform might be on the right path I don't think it answers the question about having different layouts based on portrait and layout screens, nor why the screens look totally different on Windows and Android.

Brenden Jacobson 6 Reputation points

2022-08-02T06:18:16.343+00:00

After thinking a little more, I don't think OnPlatform is the right answer. I really want different layouts based on whether it is a portrait or landscape view.

Windows will be usually landscape, and Android/IOS portrait, but it is possible to rotate screens.

So how do I handle different screen layouts in .Net MAUI?

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 42,001 Reputation points Microsoft Vendor

2022-08-02T09:36:00.187+00:00

I've used Onplatform to implement the display effect you show in the text.pdf and updated my answer, please check it.:)

To design platform-specific UI, you could also refer to Customize .NET MAUI controls with handlers. However, it would be very complicated, you need to configure the Page individually for all platforms.

Brenden Jacobson 6 Reputation points

2022-08-02T11:38:56.837+00:00

Thanks. This solved my problem.

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 42,001 Reputation points Microsoft Vendor

2022-08-03T02:01:41.417+00:00

It's my pleasure to help you resolve your problem.:)

Could you please mark this answer? It would be helpful for others who meet the same issue.

You could refer to Accepted answers.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

.NET MAUI Landscape and portraint layouts

1 answer

Your answer