How to design forms in Xamarin?

Question

I have a Design One page, but that doesn't seem like a requirement. I am new to Xamarin and I do not know how to do this as an attached image.

My code

 <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 at another attached image.

Answer 1

There are three big differences that I see between your design and the one you hope to reproduce:

• They use Placeholderin their own Entry, so when nothing is typed, the "name" will be displayed as text Entry.
• The body Editoroccupies the rest of the available page.
• Editor for the body is surrounded by a black border in the example.

Below is help to fix each problem:

1:

Label Entry Placeholder Entry. Entry Placeholder, Entry .

, Entry :

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

Grid, Label s

Entry Placeholder

2: Editor

Editor , options FillAndExpand Layout options. Grid StackLayout :

<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>

Xamarin LayoutOptions

SO LayoutOptions

3: Editor

Xamarin.Forms . a StackLayout BackgroundColor StackLayout, Padding . :

<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

.Xaml xamarin.form.

. Xamarin https://developer.xamarin.com/