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
![xamarin]()
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
![xamarin]()
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
![xamarin]()
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
![xamarin]()
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
![xamarin]()
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
![xamarin]()
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
![xamarin]()
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
![xamarin]()
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
![xamarin]()
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
![xamarin]()
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.
![xamarin]()
Thanks for reading.