XAML (eXtensible Application Markup Language) is XML with UI-focused element names for declaring .NET MAUI interfaces. It separates the visible structure of a page from the C# logic that powers an app. In .NET MAUI, XAML is the common choice for building cross-platform native UI, though C# can define the same UI instead. section 1.2 section 1.5 section 2.3
A XAML file describes a hierarchy of pages, containers, layouts, and controls. The outer ContentPage represents a page; nested elements become its content. For example, a ScrollView can contain a VerticalStackLayout, which arranges an image, labels, and a button vertically. section 2.3 section 7.1
<ContentPage>
<ScrollView> <!-- 1 -->
<VerticalStackLayout> <!-- 2 -->
<Image /> <!-- 3 -->
<Label /> <!-- 4 -->
<Label /> <!-- 5 -->
<Button /> <!-- 6 -->
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Read the nesting from outside in: ContentPage holds a ScrollView, the ScrollView holds a vertical layout, and the layout holds visible controls. section 2.3
The root element imports namespaces. The default .NET MAUI namespace supplies most UI tags, while the x namespace supplies UI metadata such as x:Class. Properties are commonly written as XML attributes, letting a control specify details such as text, spacing, padding, image source, or alignment alongside its element. section 2.3 section 2.3
A simple page
Place a Button between ContentPage tags to assign it to the page's Content property. This implicit assignment is equivalent to explicitly using ContentPage.Content. A page can therefore show one control directly, or use a layout when it needs multiple controls. section 7.1 section 7.1
Choose between the two UI declaration styles based on the task:
- Use XAML to declare the UI in markup; it is the usual approach and pairs naturally with the View role in MVVM. section 1.5 section 2.5
- Use C# when declaring or manipulating UI in code is necessary; controls and layouts can be instantiated and assigned as properties. section 1.5 section 7.1
When using MVVM, XAML defines the View: the controls and display behavior shown onscreen. The ViewModel represents that View's state and coordinates changes with the Model, while the Model contains the problem domain's objects, services, and business logic. section 1.5
Edit and preview a page
Open MainPage.xaml, change a Label's Text value from “Hello, World!” to “Aloha, World!”, then save and use Hot Reload when supported. Change an Image Source after adding an image resource with the MauiImage build action; rebuild when Hot Reload cannot apply a change. section 2.4.1 section 2.4.1 section 2.4.1
