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

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

DZone's Guide to

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

In Part 2, we'll learn about XAML and how to use it to create a user interface in Xamarin.Forms apps.

· Mobile Zone ·
Free Resource

Introduction

In Part 1, I introduced about Xamarin.Forms and tools for learning Xamarin.Forms. In this article, I will introduce about how to create an user interface in Xamarin.Forms using XAML and I will also introduce about events and events handler in Xamarin.Forms.

What Is XAML?

XAML stands for eXtensible Application Markup Language, is a markup language that you can use to create a user interface. XAML was first introduced more than ten years ago with WPF (Windows Presentation Foundation). XAML has the following benefits:

  • XAML makes it easy to represent structures of elements in a hierarchical way

  • XAML provides clean separation between the user interface definition and the C# logic

Creating a User Interface Using XAML

The first, we are going to create a Xamarin.Forms application called FirstUIXAML. When we create a Xamarin.Forms application, we can find a file called Main.Page.xaml. The contents of MainPage.xaml file of FirstUIXAML can look like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FirstUIXAML"
             x:Class="FirstUIXAML.MainPage">
       <Label Text="Welcome to Xamarin.Forms!"
           VerticalOptions="Center"
           HorizontalOptions="Center" />
</ContentPage>

This file contains two XML elements and their attributes. The ContentPage element presents a C# object and is rendered as an individual page. It contains attributes: xmlns – points to the root XAML namespace, xmlns:x – points to an XML schema, and xmlns:local – points to the app’s assembly. The ContentPage element has a child that is the Label element. The Label element presents the Label class in C#. Properties of this class are mapped to XML attributes, such as Text, VerticalOptions, and HorizontalOptions

We are going to change the content of the Text attribute of Label and also add another sub-element to ContentPage, the Button element, as follows:

<ContentPage ...">
       <Label Text="Welcome to First XAML application!"
           VerticalOptions="Center"
           HorizontalOptions="Center" />
       <Button x:Name="btn" Text="Click to run!"
            Margin="0,10,0,0"/>
</ContentPage>

If we run the application, the result should look like this:

Image title

We don’t see Label or Button because each page can only contain one visual element. If we want to add another element, we would need to include both all inside a container, such as StackLayout, as follows:

<StackLayout Orientation="Vertical" Padding="10">
               <Label Text="Welcome to First XAML application!"
                    VerticalOptions="Center"
                    HorizontalOptions="Center" />
            <Button x:Name="btn" Text="Click to run!"
                    Margin="0,10,0,0" BackgroundColor="Red"/>
</StackLayout>

The layout problem will be resolved in the next articles. So far, we can run:

Image title

Events and Events Handler

When users interact with a Xamarin.Forms application, controls in Xamarin.Forms will raise events, such as Click, and these events are handled in the C# code-behind file. For instance, suppose we want to perform an action when the user clicks the button in the FirstUIXAML app. The button exposes an event called Clicked and an event handler is defined in the C# code-behind file. The following steps will demonstrate how to handle the Clicked event of the button control:

  • Adding the Clicked attribute to the Button element:

Image title

  • Double-click on <New Event Handler> and accept the default name of the Click event handler – the btn_Clicked method:

Image title

  • We can navigate to the btn_Clicked method by selecting the MainPage.xaml.cs in the Solution Explorer:

Image title

Or we can also use the Go To Definition:

Image title

  • So far, we can write something into the btn_Clicked method:

private void btn_Clicked(object sender, EventArgs e)
        {
            DisplayAlert("Hello", "I am Ngoc Minh", "Cancel");
        }

When we run the app and click the button, the result will look like this:

Image title

Conclusion

In this article, I have introduced about how to create a user interface in Xamarin.Forms using XAML and I have also introduced about events and events handler in Xamarin.Forms. In the next articles, we will discover more about layouts, controls, so on in Xamarin.Forms.

Topics:
xamarin ,tutorial ,mobil ,mobile app development ,xamarin.forms

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}