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