Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set a maximum width of a layout/view in xamarin forms

I have a signup page with a few labels and entries, it works fine in portrait, but when in landscape, especially in the UWP, the entries takes the width of the whole screen.

Is there a way to set the layout/view not to exceed a certain width?

like image 555
Him Avatar asked May 04 '17 12:05

Him


People also ask

Which layout is best in xamarin forms?

AbsoluteLayout. Use the AbsoluteLayout when you need precise control over the x and y positions, and the width and height of the child elements. It has its place in the layout world. In most situations, it's better to use one of the other layouts; they make for a more responsive design.

What is FlexLayout in xamarin forms?

The Xamarin. Forms FlexLayout is new in Xamarin. Forms version 3.0. It is based on the CSS Flexible Box Layout Module, commonly known as flex layout or flex-box, so called because it includes many flexible options to arrange children within the layout.

Which layout control in xamarin forms display information in columns and rows?

Grid. A Grid is used for displaying elements in rows and columns, which can have proportional or absolute sizes.


3 Answers

I figured it out, the `WidthRequest" will try to get the requested width, if not it will take the width available by the parent item. So basically, we do not need a maximum width property.

like image 121
Him Avatar answered Sep 28 '22 04:09

Him


You can use WidthRequest and HeightRequest or LayoutOptions(HorizontalOptions and VerticalOptions) for better positioning of views inside Layout

like image 28
Dinesh Phalwadiya Avatar answered Sep 28 '22 02:09

Dinesh Phalwadiya


You can use the SizeChanged event of the Page to customize the layout when switching to/from portrait/landscape mode :

public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent ();
        SizeChanged += OnSizeChanged;
    }

    void OnSizeChanged (object sender, EventArgs e)
    {
        // Customize your layout here (i.e. using HeightRequest/WidthRequest)...
    }
}

Hope it helps!

like image 32
TaiT's Avatar answered Sep 28 '22 03:09

TaiT's