How to set width of controls in Xamarin.Forms

Question

I've tried to adjust width & height of my textbox [Entry] control in Xamarin.Forms for iPad app but it doesn't set the width using WidthRequest property.

Can anyone please help me for the same about how to set the width of the controls.

Here is my code of XAML for same using Grid & StackLayout but none of them worked.

<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
    <Grid.RowDefinitions>
    <RowDefinition Height="Auto"  ></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="10"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <Image Grid.Row="0" Grid.Column="0" Source="loginlogo.png"></Image>
    <StackLayout Grid.Row="1" Grid.Column="0">
    <Entry Placeholder="Enter Username" WidthRequest="20"></Entry>
    <Entry Placeholder="Enter Password" WidthRequest="20"></Entry>
    <Button Text="Button 1"></Button>
    </StackLayout>
    </Grid>

Also tried with Stack Layout

<StackLayout Spacing="10">
    <Entry x:Name="txtUserName" Placeholder="Enter Username" WidthRequest="2" HeightRequest="200"></Entry>
    <Entry x:Name="txtPassword" Placeholder="Enter Password" WidthRequest="2" HeightRequest="200"></Entry>
    <Button Text="Button 1"></Button></StackLayout>

Solution 1

Note that you have to specify HorizontalOptions with the WidthRequest to get this to work on a StackLayout as it will attempt to auto-expand by default.

Example shown below for StackLayout:-

        StackLayout objStackLayout = new StackLayout()
        {
            Spacing = 10
        };
        //
        Entry objEntry1 = new Entry()
        {
            Placeholder = "Enter Username",
            WidthRequest = 300,
            HeightRequest = 200,
            HorizontalOptions = LayoutOptions.Start
        };
        objStackLayout.Children.Add(objEntry1);
        //
        Entry objEntry2 = new Entry()
        {
            Placeholder = "Enter Password",
            WidthRequest = 200,
            HeightRequest = 200,
            HorizontalOptions = LayoutOptions.Start
        };
        objStackLayout.Children.Add(objEntry2);
        //
        Button objButton1 = new Button()
        {
            Text = "Button1",
            HorizontalOptions = LayoutOptions.Start
        };
        objStackLayout.Children.Add(objButton1);

Solution 2

Use StackLayout with combination of spacings, horizontal/vertical options and paddings. Example:

<StackLayout Padding="20" Spacing="10">
  <Entry Placeholder="Username"
         VerticalOptions="Start"
         HorizontalOptions="FillAndExpand" />

  <Entry Placeholder="Password"
         VerticalOptions="Start"
         HorizontalOptions="FillAndExpand" />

  <Button Text="Submit" VerticalOptions="EndAndExpand" />
</StackLayout>