VS for Mac - Using Autolayout for landscape and po

Question

I need help, having spent the day searching through various youtube videos and google etc I've hit that wall!

I'm using Visual Studio for Mac and basically, my Logon screen looks good in Portrait but not so in Landscape so I want to show a different view with a redesigned screen especially for Landscape.

Microsoft Forums suggest that I use the OnSizeAllocated event to work out the orientation which sounds fine but I just can't work out how you do that.

I have on View Controller which doesn't have any events. I have one View and that doesn't have any events. If I try to add the code in manually into the ViewControllers class it doesn't like it. If I try and add it in Main.cs it doesn't like it or AppDelegate.cs it doesn't like it.

Designing screens to match the orientation must be like breathing air but for the life of me I just can't work it out and I'm suffocating here!

What am I missing?

Answer 1

So from the comments, I see you're using Visual Studio for Mac (VS4M) as your IDE and you are using the single view template app but are trying to get the view to adapt to landscape and portrait.

If you open your storyboard in VS4M you should see something like this:

I have added some controls (image, username, password, and login button) in the next image just to show how I would create the layout using the iOS designer in VS4M

The key point here is to change to landscape and the press the Edit Traits > Edits apply to Compact Height only

You can read more about Size Class (Compact/Regular) here but this is a good image to get your head around it:

The Next step is to do the Autolayout for the username, password and login button.

You'll then have a view like this:

I have uploaded this to my GitHub just so you can have a look if you want the link is here.

Autolayout is one of the more difficult areas to get your head round in Xamarin.iOS development so I wouldn't be disheartened. Also, this link is good for more information on Autolayout with VS4M

If you are not doing in Autolayout but rather in code then if you could post that code, I can take a look and help.

Update - Adaptive layout

So to actually change/remove certain constraints for landscape/portrait you have to use the installed property. Here I am changing the image's center constraint to only be installed when in Any width and Regular height (aka portrait) and then having its left(leading) constraint to be installed when in 'Any' width and 'Compact' height (aka landscape)

Then to make it nicer I moved the login and password text boxes to the right of that. Firstly I have to make the current Username textbox Vertical Alignment constraint installed only on width Any and height Regular(portrait) then create a new top constraint to the top of the super view in width Any and height Compact(landscape).

Then the last bit is to have the leading(left) Horizontal Spacing constraints of the Username and password textboxes installed only on width Any and height Regular(portrait) and create two new leading(left) Horizontal Spacing constraints set to the trailing(right) of the image installed on width Any and height Compact(landscape), Rememeber to make the constant of those constraints 0 (and hit enter on your keyboard to set the value) like so:

Then the app will look like this:

I have updated my GitHub solution with this implementation. Sorry for all the images but I think its best to explain Autolayout with images.