How to use XAML in Xamarin.Forms

Xamarin.FormsMarch 24, 2015

Xamarin.Forms provides 2 type of Pages for creating Layout for multiple platforms
1) With Code in C# file
2) With XAML file

Until now we have seen how to add different components and controls in C# file through code, In this tutorial we are going to see how to add Layout and controls in XAML file.

In a Xamarin.Forms application, XAML is mostly used to define the visual contents of a page. A XAML file is always associated with a C# code file that provides code support for the markup. Together, these two files comprise a new class definition that includes child views and property initialization. Within the XAML file, classes and properties are referenced with XML elements and attributes, and links between the markup and code are established.

Lets’s Start:

Create a new solution and name it ”XAMLXamarinForms”.

Create a new ContentPageXaml file in this solution and name it as “XamlPage”.

You can see that there are 2 files created:
1) XamlPage.xaml.cs
2) XamlPage.xaml

• XamlPage.xaml have XAML tag that defines our layout for designing.
• XamlPage.xaml.cs is used for all the code part like Event handling, class and methods and varialbes etc.

Now go to XAMLXamarinForms.cs file and write:

public App ()
{
        // The root page of your application
        MainPage = new XamlPage ();
}

public App ()

{

// The root page of your application

MainPage = new XamlPage ();

}

Go to XamlPage.xaml.cs and write:

public partial class XamlPage : ContentPage
{
        public XamlPage ()
        {
            this.LoadFromXaml (typeof(XamlPage));
        }
}

public partial class XamlPage : ContentPage

{

public XamlPage ()

{

this.LoadFromXaml (typeof(XamlPage));

}

Now in XamlPage.xaml file:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XAMLXamarinForms.XamlPage">
    <ContentPage.Content>
        <Label Text="Hello XAML Xamarin.Forms"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand"
        IsVisible="true"
        >
        </Label>
    </ContentPage.Content>
</ContentPage>

<?xml version="1.0" encoding="UTF-8"?>

<ContentPage.Content>

<Label Text="Hello XAML Xamarin.Forms"

HorizontalOptions="Center"

VerticalOptions="CenterAndExpand"

IsVisible="true"

</Label>

</ContentPage.Content>

</ContentPage>

We just add a simple label and display text in it. Now try to build and run the app you will see label.

Now we want to go one step ahead than just adding a label, add a button and handle it’s click event so we have some idea about how to events.

So, go into XamlPage.xaml file and write:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XAMLXamarinForms.XamlPage">
    <ContentPage.Content>
        <StackLayout>
            
        <Label Text="Hello XAML Xamarin.Forms"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand"
        IsVisible="true"
        >
        </Label>

        <Button Text="Click Me"
        VerticalOptions="Center"
        HorizontalOptions="Center"
        Clicked="btn_clicked"
        ></Button>

        </StackLayout>
        
    </ContentPage.Content>
</ContentPage>

<?xml version="1.0" encoding="UTF-8"?>

<ContentPage.Content>

<Label Text="Hello XAML Xamarin.Forms"

HorizontalOptions="Center"

VerticalOptions="CenterAndExpand"

IsVisible="true"

</Label>

<Button Text="Click Me"

VerticalOptions="Center"

HorizontalOptions="Center"

Clicked="btn_clicked"

></Button>

</StackLayout>

</ContentPage.Content>

</ContentPage>

Now we can access button with the method “btn_clicked”. Write below code in XamlPage.xaml.cs:

async void btn_clicked(object sender, EventArgs args){
            Button button = (Button)sender;
            await DisplayAlert("Clicked!",
                "The button labeled '" + button.Text + "' has been clicked",
                "OK");
}

async void btn_clicked(object sender, EventArgs args){

Button button = (Button)sender;

await DisplayAlert("Clicked!",

"The button labeled '" + button.Text + "' has been clicked",

"OK");

}

That’s it. Now try to build and run the application.

For iOS:

xf13.3

xf13.4

For Android:

xf13.5

xf13.6

If you like this tutorial then you can download full copy of the code from github.

Leave a Reply Cancel reply