Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Introduction to Xamarin.Forms for Android Developers (Part 4)

DZone's Guide to

Introduction to Xamarin.Forms for Android Developers (Part 4)

This introductory series for Xamarin.Forms continues by explaining controls, also known as views.

· Mobile Zone ·
Free Resource

Introduction

In this article, I am going to explain the basic controls in Xamarin.Forms. In fact, in Xamarin.Forms and its documentation, we often call them views rather than controls. Views (or controls) are UI objects such as labels, buttons, editors, etc and they are also known as widgets in Android, views in iOS, or controls in Windows.

Controls in the XAML Form

I am going to explain about controls (or views) in Xamarin.Forms through an application named ControlsApp. It has a UI that looks like this:

Image title

As you see, my UI contains some controls and I used layouts to arrange them. The first control is the Image control and it allows us to display images from the Internet, local files, and embedded. I used this Image control within the StackLayout in the MainPage.xaml file:

<StackLayout Orientation="Horizontal" Margin="5" HorizontalOptions="Center">
      <Image Source="ngocminhtran.jpg"/>
</StackLayout>

I assigned the Source property with a path image, in this case, which is the name of the local image. If you want to display a local image in the Image control, you must add this local image to the Resources > drawable folder of the Android project:

Image title

You also need to change this image's the Build Action property to AndroidResource:

Image title

You can read more about the Image control here.

Next lines are controls that can be illustrated as the following figure:

Image title

 The Label controls are used to display read-only text:

Image title

The Entry controls are used to receive text from users:

Image title

 The DatePicker control represents the selected/current date:

Image title

The Switch control provides a toggled value and is useful for selecting values such as true/false, on/off, and enabled/disabled:

Image title

Or

Image title

The Slider control allows the input of a linear value:

Image title

You also note that, I have bound values between the Label Age and the Slider by using the Binding Source in the Slider's the Text property ( as you can see on later). If we change the values of the Slider, then corresponding values will be represented in the Label Age control.

Last, the Button controls fire a Clicked event when it's been pressed:

Image title

In the XAML file, I arranged these controls in layouts as follows:

<Grid>
            <!-- five rows -->
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <!-- two columns -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <!-- Grid.Row="0" and Grid.Column="0" can be omitted -->
            <Label Grid.Column="0" Grid.Row="0" Text="Name: " Margin="5"/>
            <Label Grid.Column="0" Grid.Row="1" Text="Email: " Margin="5"/>
            <Label Grid.Column="0" Grid.Row="2" Text="Birthday: " Margin="5"/>
            <Label Grid.Column="0" Grid.Row="3" Text="Male? " Margin="5"/>
           <Label Grid.Column="0" Grid.Row="4" 
                  Text="{Binding Source={x:Reference age},, }" Margin="5" />
            <Entry Grid.Column="1" Grid.Row="0" x:Name="name" 
                   Placeholder="Enter your name..."/>
            <Entry Grid.Column="1" Grid.Row="1" x:Name="email" 
                   Placeholder="Enter your email..."/>
            <DatePicker Grid.Column="1" Grid.Row="2" x:Name="birthday" 
                        MinimumDate="01/01/1980" MaximumDate="12/31/2018"/>
            <Switch x:Name="sex" IsToggled="True"  Grid.Column="1" Grid.Row="3" 
                    HorizontalOptions="Start"/>
            <Slider x:Name="age" Maximum="100" Minimum="0" Value="50" 
                    Grid.Column="1" Grid.Row="4"/>
        </Grid>
        <Grid>
            <!-- one row -->
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>
            <!-- two columns -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <!-- Grid.Row="0" and Grid.Column="0" can be omitted -->
            <Button x:Name="btnSubmit"  Grid.Column="1" Grid.Row="0" 
                    Text="Submit" Margin="5" Clicked="btnSubmit_Clicked"/>
            <Button x:Name="btnCancel"  Grid.Column="2" Grid.Row="0" 
                    Text="Cancel" Margin="5" Clicked="btnCancel_Clicked"/>
        </Grid>

Each control has a lot of properties that are demonstrated in the following table:

Controls

Properties

Label

Text: the text of the Label

Entry

x:Name: is used to interact with other controls in C# code

Placeholder: displays specific text in the entry until the user types something

DatePicker

x:Name: is used to interact with other controls in C# code

MinimumDate: the minimum date

MaximumDate: the maximum date

Switch

x:Name: is used to interact with other controls in C# code

IsToggled: is the state of the switch

Slider

x:Name: is used to interact with other controls in C# code

Maximum: the maximum value

Minimum: the minimum value

Value: the current value

Interacting With Controls Using C# Code

Controls can be found in the C# code by using the FindByName() method. For instance, I want to get values from the Entry controls, I can write some C# code:

var name = this.FindByName<Entry>("name");
var email = this.FindByName<Entry>("email");

the FindByName’s arguments, name and email, are x:Name property’s values in the XAML file. Now, I can get values from the Entries:

string message = "I am " + name.Text
                 + "\nMy Email is " + email.Text;

Similarly, we can interact with other controls as follows:

Slider:

var age = this.FindByName<Slider>("age");
string message = "My age is " + age.Value.ToString();

Switch:

var sex = this.FindByName<Switch>("sex");
string mySex = "";
if (sex.IsToggled)
     mySex = "Male";
else
     mySex = "Female";
string message = "My sex is " + mySex;

DatePicker:

var birthday = this.FindByName<DatePicker>("birthday");
string message = "My birthday is " + birthday.Date.ToShortDateString();

In my application, we can enter some inputs from the UI:

Image title

And clicking the Submit button, the result can look like this:

Image title

All my source code can be referred here.

In this article, I introduced basic controls in Xamarin.Forms, how they are represented in the XAML file, and how we can interact with them in C# code. Each control has a lot of properties and events that are not mentioned yet in this article. Xamarin.Forms also provides a lot of other interesting controls such as WebView, ListView, SearchBar, Editor, and so on. If you want to know all of them in detail, you could refer to the Microsoft docs.

Topics:
xamarin.forms ,xamarin ,mobile ,mobile app development ,cross platform development ,android

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}