UI Elements Of Forms And Setting Pages In Xamarin.Forms

In this article, we are going to learn UI elements of forms and setting pages in xamarin.forms.

Things to be discussed are given below.

• Elements used in Forms and Setting pages.
• Practical example.

Target audience

Target audience is the people with basic knowledge of XAML and C#.

Tools

• Visual Studio or Xamarin Studio.
• Windows or Mac operating system.

Elements used in Forms and Setting pages

UI elements that are used to make Forms or Setting pages in xamarin.forms are as follows.

• Label
• Button
• Entry
• Editor
• Picker
• Date Picker
• Time Picker
• Switch
• Slider
• Stepper

Label

Label is used to write a simple text in your Application. They are used to indicate anytthing or to guide users about something. Labels are used to make users understand your Application more easily or to give some information to the user.

Use

It is used to show any text or description.

XAML

<Label Text="Content"/>:

Output



Button

In Forms and Setting pages, buttons are used for several reasons. In forms, the buttons are used to submit a form and are used for the navigation purpose.

Use

Use for navigation, submission etc.

XAML

<Button Text="Submit"></Button>

Output



Entry

Entry is used when you want a single line input from the user.

Use

Used for single line input.

XAML

<Entry Keyboard="Email" Placeholder="Email"></Entry>

Output



Editor

Editor is like text area in HTML. It is used, when you want multiple lines input from your user.

Use

It is used for multiple line input. E.g. when you want long address from the user, you can use Editor.

XAML

<Editor></Editor>

Output



Picker

Picker is a type of selection box. In Picker, you may provide different options to the user and the user is able to select these values.

Use

E.g. Picker is used to show the country or the region names and the user selects the country in which he is living.

XAML

<Picker Title="Picker" SelectedIndexChanged="picker_SelectedIndexChanged" x:Name="picker">
        <Picker.Items>
            <x:String>SMS</x:String>
            <x:String>Email</x:String>
            <x:String>MMS</x:String>
        </Picker.Items>
    </Picker>

Output



Date Picker

It gives a calendar to the user to select a date. It is well explained from its name. Date Picker is a Picker, which allows the user to pick a date.

Use

It is used in calendar Application.

XAML

<DatePicker Date="30 Mar 2017" Format="dd MMM yyyy" MinimumDate="1 Jan 2017" MaximumDate="31 Dec 2017"></DatePicker>

Output



Time Picker

Time Picker is used to pick any time from the clock.

Use

It is used in an alarm Application.

XAML

<TimePicker Format="hh mm ss"></TimePicker>

Output



Switch

Switch is on and off button. It returns a Boolean result of true or false when the user switches it on and off.

Use

It is used for on and off scenario. When used, it has only two options.

XAML

<Switch IsToggled="True" Toggled="Switch_Toggled" x:Name="switch"></Switch>

Output



Slider

Slider is a control that inputs a linear value.

Use

We can use Slider in our mobile Application to control the brightness.

XAML

<Slider></Slider>

Output



Stepper

Stepper is a control that inputs a discrete value. You can also set range of a Stepper.

Use

In some Application, Stepper is used to increase or decrease the quantity of product.

XAML

<Stepper x:Name="stepper" Increment="5" Maximum="50" Minimum="10" Value="30"></Stepper>

Output



Note

The images given above are taken from https://developer.xamarin.com

If you want to learn more UI controls, visit 38 Different Xamarin.Forms UI Controls.

Practical example

Let’s make a simple signup form to use some of these elements and view its output.

XAML

<StackLayout VerticalOptions="CenterAndExpand" Padding="5">
    <StackLayout Orientation="Horizontal">
        <Entry Placeholder="First Name"></Entry>
        <Entry Placeholder="Last Name"></Entry>
    </StackLayout>
    <Entry Placeholder="Email" Keyboard="Email"></Entry>
    <Entry Placeholder="Password" IsPassword="True"></Entry>
    <Entry Placeholder="Confirm Password" IsPassword="True"></Entry>
    <Label Text="Date Of Birth"></Label>
    <DatePicker Date="30 Mar 2017" Format="dd MMM yyyy" MinimumDate="1 Jan 1900" MaximumDate="01 Jan 2017"></DatePicker>
    <Label Text="Address"></Label>
    <Editor></Editor>
    <StackLayout Orientation="Horizontal">
        <Label Text="Save Password"></Label>
        <Switch IsToggled="False"></Switch>
    </StackLayout>
    <Button Text="Sign Up"></Button>
    <Label Text="Already have account? Sign In" TextColor="Blue"></Label>
</StackLayout>

Output on an Android and Windows desktop is given below.



Thanks for reading.