XAML (Extensible Application Markup Language) is a declarative markup language used to define the structure and behaviour of User Interfaces (UI). Originally developed by Microsoft, XAML is closely associated with the Windows Presentation Foundation (WPF) and Universal Windows Platform (UWP) frameworks. The .NET Multi-platform App User Interface is known as .NET MAUI.
XAML is used mainly for defining the UI of applications. It allows developers to specify the layout, appearance and behaviour of UI elements in a human-readable manner. It acts as a bridge between the design and logic of an application. This separation of concerns allows designers and developers to work collaboratively.
XAML is where you define buttons, textboxes, images, labels etc. as well as arranging where they will be on screens and establishing their interactions. XAML does not DO anything. You need code-behind it, eg in a language like C#. The code-behind is where the event handlers, etc. associated with the UI elements are found.
MainPage.xaml is what your page will look like.
MainPage.xmal.cs is where the code-behind is.
XAML supports styling and templates, this promotes code reuse and helps maintain a consistent look and feel across an application. Styles and templates can be defined directly within XAML files.
One of the strengths of XAML is its readability and consistency. This is useful when working with complex UI designs or collaborating with other programmer and designers.
Let’s have a closer look at the elements in this XAML code:
<?xml version="1.0" encoding="utf-8" ?> : This is the XML declaration, specifying the version of XML being used.
x:Class="MauiApp1.MainPage" : This attribute specifies the class name for the code-behind file associated with this XAML file.
<ScrollView> element provides a scrollable view.
<VerticalStackLayout>
Spacing=”25” : This attribute sets the spacing between child elements within the stack layout.
Padding=”30,0” : This attribute sets the padding of the stack layout, with 30 units of space at the top and bottom and no horizontal padding.
VerticleOptions=”Center” : This attribute sets the vertical alignment of the stack layout to the center of the available space.
<Label> element defines labels with text content, font size and accessibility properties.
<Button>:
x:Name="CounterBtn" : Assigns a name to the button, making it accessible in the code-behind file.
Text="Click me" : Sets the text displayed on the button.
SemanticProperties.Hint : Provides a hint for accessibility.
Clicked="OnCounterClicked" : Specifies the method to be called when the button is clicked.
HorizontalOptions="Center" : Aligns the button to the center horizontally.