Xamarin Tutorial Part -3 (How to add control)

Please, support my blog by clicking on our sponsors ad!

 Let's learn how to add control in XAML and code

In below code, contentpage is content "[Xamarin.Forms.ContentProperty("Content")]". This is a page which display single view. It means that it will hold only one control.

The code will be as follow:

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LoginUIDesigns.Views.Login.MyFirstPage">
    <ContentPage.Content>
            <Label Text="Welcome to Xamarin.Forms!" TextColor="Black"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
    </ContentPage.Content>
</ContentPage>  

Let see how we can write this code in code behind file.

    public partial class MyFirstPage : ContentPage
    {
        public MyFirstPage()
        {
            InitializeComponent();
            Content = new Label
            {
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                Text = "Welcome to Xamarin.Forms!",
                TextColor = Color.Black
            };
        }
    }  

To display multiple control, we have to add view. following are the controls which inherit view class

• AbsoluteLayout
• FlexLayout
• Grid
• RelativeLayout
• StackLayout

Above controls hold multiple control with various pattern. Above view can be also called as layout controls. Let use StackLayout. 

StackLayout will render control in either horizontal or vertical. we go in detail in future blog.

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LoginUIDesigns.Views.Login.MyFirstPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Xamarin.Forms!" TextColor="Black"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
            <Entry HorizontalOptions="CenterAndExpand" 
                   VerticalOptions="CenterAndExpand"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>  

About code will run successfully.

Let see how to write in code behind class.

    public partial class MyFirstPage : ContentPage
    {
        public MyFirstPage()
        {
            InitializeComponent();
            Content = new StackLayout
            {
                Children =
                {
                    new Label
                    {
                        HorizontalOptions = LayoutOptions.CenterAndExpand,
                        VerticalOptions = LayoutOptions.CenterAndExpand,
                        Text = "Welcome to Xamarin.Forms!",
                        TextColor = Color.Black
                    },
                    new Entry
                    {
                        HorizontalOptions = LayoutOptions.CenterAndExpand,
                        VerticalOptions = LayoutOptions.CenterAndExpand,
                    }
                }
            };
        }
    }  

You have notice "InitializeComponent()", this method is defined for every page we create in folder obj ->debug->netstandard2.0

In this folder, whenever we create a new page in our project, [name].xaml.g.cs file will be also automatically generated in folder. g in filename means generated file. This file is partial class has definition of "InitializeComponent()" mehtod. It says that

 global::Xamarin.Forms.Xaml.Extensions.LoadFromXaml(this, typeof(MyFirstPage)); 

It means that when we run the project, xaml file convert code in UI definition that targeted platform support.

Why Xaml is better than the code?

In Xaml is less code and value are assign directly like "HorizontalOption = "Center" and easy to understand and easily design for hierarchical UI, but in code we have to assign value from the class for eg: "HorizontalOption = LayoutOptions.Center" and it became length. and It will become worse when you design complex page

Conclusion:

Design in Xaml file is always preferable, we can design code in code behind when we want to add control dynamically.

Hope it is helpful to you, please share your feedback in comment section and Thanks for reading.