ORIENTATION IN NET MAUI

Giorgio Sfiligoi 226 Reputation points
2024-11-09T10:44:42.48+00:00

I am novice to NET MAUI and tried the following:

    <StackLayout x:Name="stack">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroupList>
                <VisualStateGroup>
                    <VisualState x:Name="Portrait">
                        <VisualState.StateTriggers>
                            <OrientationStateTrigger Orientation="Portrait" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter TargetName="stack"
                                    Property="StackLayout.Orientation"
                                    Value="Vertical" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Landscape">
                        <VisualState.StateTriggers>
                            <OrientationStateTrigger Orientation="Landscape" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter TargetName="stack"
                                    Property="StackLayout.Orientation"
                                    Value="Horizontal" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </VisualStateManager.VisualStateGroups>
        
        <Label Text="Label 1" />
        <Label Text="Label 2" />
    </StackLayout>

The two labels are supposed to stack vertically in portrait orientation and horizontally in landscape. Actually I get a confused behavior: when I rotate the device (in the emulator), sometimes the labels change position, sometimes they don't; often they remain vertical in landscape or horizontal in portrait - all seems erratic.

What am I doing wrong?

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,603 questions
0 comments
Accepted answer
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,096 Reputation points Microsoft Vendor
    2024-11-11T01:54:34.8066667+00:00

    Hello,

    VisualState does not contain any properties related to orientation, you could refer to Visual states for more detailed information.

    Therefore, the VisualStateManager will not actually run.

    For the needs of monitoring the screen direction and dynamically modifying the layout, you can apply the feature that the size of the page elements will be recalculated after the layout is rotated and respond to the update through the OnSizeAllocated method.

    Please refer to the following code:

    public partial class MainPage : ContentPage
{
    int count = 0;
    public MainPage()
    {
        InitializeComponent();
    }
    protected override void OnSizeAllocated(double width, double height)
    {
        base.OnSizeAllocated(width, height);
        // Get Metrics
        var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
        var orientation = mainDisplayInfo.Orientation;
 
        if (orientation == DisplayOrientation.Portrait)
        {
            stack.Orientation = StackOrientation.Vertical;
        }
        else if (orientation == DisplayOrientation.Landscape)
        {
            stack.Orientation = StackOrientation.Horizontal;
        }
    }
}

// here is the sample layout
<StackLayout x:Name="stack">
<Label Text="Label 1" />
<Label Text="Label 2" />
</StackLayout>

    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.

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.