Coding in xaml tutorial

 Coding in xaml tutorial

XAML:

Xaml is a coding language using a tag format. Which means lines of code will use tags.

There are two types of formats for tags open and closing used separately and the other type which opens and closes in the same tag .

Example of opening and closing separately:

<StackLayout></StackLayout> 

Example of opening and closing in the one tag:

<label />

depending on the type of tag has a different kind of use.

 

The general layout of a mainPage.xaml file:

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

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.MainPage">

    <ScrollView>

            <StackLayout>

            </StackLayout>

    </ScrollView>

</ContentPage>

The first two tags <?xml> and <ContentPage> come with the template and depend on where the projects are made and their preferences so do not edit them or the project will break.

You code in-between the <ContentPage> tags.

The purpose of some useful tags

• <Stacklayout> - Open and closes separately, and is used for tidying up sections of code for example, if you have a few buttons and labels it is best to separate them by putting them in separate <Stacklayout> tags.

• <Scrollview> -  Open and closes separately, if you encapsulate all the xaml code in this a scrollbar is added down the side of the screen when the project runs.

• <Label /> - opens and closes all at once, this is used to add text to the screen.

• <Button> - Opens and closes separately, used to add a button to the screen.

Attributes

Tags become a lot more useful when attributes are added. 

You may ask what is an attribute?

An attribute is when in an opening tag includes a keyword and it sets a characteristic of the tag.

An example of how this is formatted

<image source="source.png" HeightRequest="200"></image>

In this example the image tag is used to read in an image to the project, the source attribute is used read in a png file stored in the resources file in the project called source and HeightRequest sets the height of the image to 200 pixels.