OnOrientation markup extension

[lachlanwgordon]

Is now a good time to have a think about being able to use OnOrientation when defining our user interfaces? With the introduction of Discussion on github and the new MAUI repo I think this might be the perfect time and place. If this should be an issue or if it should be in the Forms repo, I'm happy to move it.

Background

I've worked with a few designers and some of them love different layouts for orientations. I've also worked in projects with a handful of Xamarin devs and we tend to implement it slighlty differently every time, and none of them quite feel ideal. Credit to the designers, it often delivers a surperior user experience.

There are various forums, blogs, docs, videos, etc. that look at how to handle it:

• https://spin.atomicobject.com/2018/09/24/xamarin-forms-orientation-changes/
• https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/device-orientation?tabs=windows
• https://www.youtube.com/watch?v=pYVjQco0e-Y

But all of these solutions feel like the app developer has to solve the same problem again and again.

API Proposal

Ideally I want to be able to use OnOrientation in all the same ways we use OnPlatform and OnIdiom

As a XAML example

<Grid
            ColumnDefinitions="{OnOrientation Landscape='*,*,*', Portrait='30,*,30'}"
            >
            <StackLayout Grid.Column="1">
                ...
            </StackLayout>
        </Grid>

This is a fairly trivial example but it would allow you to have all the page content take up the middle third of a page on landscape, and fill up almost the full width on portrait.

Challenges and Considerations

Dynamic state

I think the biggest issue here is that orientation is dynamic where as Idiom and Platform are known at startup and can't change. I think that means this condition would need to be reassessed every time OnMeasure or OnAppering runs. This possible has serious performance considerations depending on what you change based on orientation.

C# Markup

I've only addressed what this should look like for XAML, because that's how I make apps, but this probaly has implications for writing UIs in C#. My guess would be that as long as this is implemented with all the same syntax as is used for OnPlatform and OnIdiom, this will fit easily.

MVU

I have no idea what the implications of this are when using MVU but the lifecycle is quite different.

Summary

I'd love to hear other people's thoughts on whether this is viable, and if it others would find it benficial.

I'm happy to put more work into the planning and research on this, and potentially I'd be up for implementing this for a PR, but I'd want to hold off untill more of the MAUI architecture is in place or I'd had a chat with someone on the team who knows their way around this part of forms.

I'm opening this discussion up now instead of once MAUI is out to get the ball rolling and incase this has implications on early architecture. This feels like something that could work best if introduced while we have the clean slate that we get with MAUI.

[davidortinau]

I like the idea of having markup extensions to do this sort of thing. I can think of no reason not to have this. @StephaneDelcroix ?

When you're looking at the whole of a UI would you prefer to specify these things all in one place rather than inline on elements?

Today you would do this with VisualStateManager and the OrientationStateTrigger and then target each element in your UI to describe how they ought to change. That seems to be the "xaml way" right?

<Style x:Key="OrientationStateTriggerPageStyle"
       TargetType="ContentPage">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Portrait">
                    <VisualState.StateTriggers>
                        <OrientationStateTrigger Orientation="Portrait" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Silver" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Landscape">
                    <VisualState.StateTriggers>
                        <OrientationStateTrigger Orientation="Landscape" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="White" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

In CSS this would be media queries:

@media (orientation: portrait) {
        ^ContentPage {
          background-color: Silver;
        }
      }

@media (orientation: landscape) {
        ^ContentPage {
          background-color: White;
        }
      }

For Comet style, the way you style your UI ought to be consistent. I expect to be able to reuse my styles, but that's up for discussion.

[matt-goldman]

I think this would be an awesome feature.

Today you would do this with VisualStateManager and the OrientationStateTrigger

I don't think it's possible to do this to target column and row definitions, as in the example @lachlanwgordon suggests. And I think this would likely be one of, if not the, primary use cases for this feature.

A workaround using OrientationStateTrigger would be to have two versions of the view; one for portrait and one for landscape, and use the trigger to set the visibility of either based on orientation. But this seems a little inelegant.

Unless I'm wrong and there is a way to directly target the row and column definitions using VisualStateManager?

[StephaneDelcroix]

I can think of no reason not to have this. @StephaneDelcroix ?

this would have to be binding-style, like AppThemeBinding.

[wickedw]

Any progress on this? Is it scheduled for a future release?

Would much prefer the inline approach as detailed by @lachlanwgordon

[FlavioGoncalves-Cayas]

Hey guys, I just blogged about how we can implement an OnOrientation MarkupExtension. Feel free to check it out:
https://www.cayas.de/de/blog/responsive-layouts-for-dotnet-maui

[AlleSchonWeg]

With the XF Essentials variant, the MainDisplayInfoChanged event was not fired in android if the app is in background.

• start app
• bring app in background
• rotate device
• bring app in foreground

I don't know if this is fixed in MAUI.