How to design forms in Xamarin?

Question

I have Design One page but it not look like the requirement. I am new to Xamarin and I don't know how to design like Attached image.

My Code is

 <Grid Margin="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>
            <Label Text="From" Font="20" Grid.Row="0" Grid.Column="0"></Label>
            <Entry x:Name="txtFrom" HorizontalOptions="FillAndExpand" Grid.Row="0" Grid.Column="1" ></Entry>
            <Label Text="To" Font="20" Grid.Row="1" Grid.Column="0"></Label>
            <Entry x:Name="txtTo"  Grid.Row="1" Grid.Column="1" HorizontalOptions="FillAndExpand"></Entry>
            <Label Text="Subject" Font="20" Grid.Column="0" Grid.Row="2"></Label>
            <Entry x:Name="txtSubject" HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="2"></Entry>
            <Label Text="Body" Font="20" Grid.Column="0" Grid.Row="3"></Label>
            <Editor  x:Name="txtBody" HeightRequest="100"  Grid.Row="4" Grid.ColumnSpan="2"></Editor>
            <Button x:Name="btnSend"  Text="Send" BackgroundColor="Orange" Grid.Row="5" Grid.ColumnSpan="2"></Button>

        </Grid>

My Ui Look like another attached image.

Answer 1

There are three big differences I see between your design and the one you are hoping to replicate:

1. They use Placeholders in their Entrys so that when nothing is typed "name" will show up as the Entry's text.
2. The Body Editor takes up the entire rest of the available page.
3. The Editor for the body is surrounded by a black boarder in the example.

Here is some help to fix each of the issues:

Issue 1: Using Placeholders

Instead of using a Label next to your Entry for each input, you can instead use the Placeholder of the Entry. The Entry will show the value in Placeholder whenever the Entry is empty.

For example you could change the name Entry to:

<Entry x:Name="txtFrom" HorizontalOptions="FillAndExpand" Placeholder="Name" ></Entry>

With this implementation, you wouldn't even need the columns for the Grid since you don't need the Labels

Here's documentation for Entry and the Placeholder

Issue 2: Filling the Page with your Editor

In order to make your Editor take up the remaining room on the page, you need to use the FillAndExpand Layout options property. I would personally recommend taking your editor out of the Grid, and surrounding it all in a StackLayout like this:

<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
    <Grid>
        <!--Your Grid without the Editor-->
    </Grid>
    <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
        <Editor VerticalOptions="FillAndExpand"/>
    </StackLayout>
    <!--Put your button here-->
</StackLayout>

Here's documentation for Xamarin's LayoutOptions

Here's a good SO Post about LayoutOptions

Issue 3: Adding a border around your Editor

There isn't really a good way to add a border in Xamarin.Forms. According to this thread putting a StackLayout with a different BackgroundColor inside another StackLayout and adding Padding can do this. I've implemented it here:

<StackLayout Orientation="Vertical" BackgroundColor="Black" Padding="4" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="White" Padding="4">
        <!--Put your editor here-->
    </StackLayout>
</StackLayout>

Answer 2

Use .Xaml file for design forms in xamarin.form.

see Xamarin official tutorial https://developer.xamarin.com/