XAML Basics

XAML (Extensible Application Markup Language) is a declarative XML-based syntax for defining a MAUI page's UI tree — layouts, controls, and their properties — separately from the C# code-behind that handles logic and events. A XAML file like MainPage.xaml is paired with a code-behind file MainPage.xaml.cs via a partial class and the x:Class attribute, and the XAML compiler (XamlC) compiles the markup into IL at build time rather than parsing it at runtime, catching many typos and unknown-property errors as build errors instead of runtime crashes.

MAUI's core layout containers are VerticalStackLayout/HorizontalStackLayout (simple linear stacking with Spacing), Grid (row/column-based, defined via RowDefinitions/ColumnDefinitions and Grid.Row/Grid.Column attached properties), and FlexLayout (wrap-capable flexible box layout); controls like Label, Entry, Button, and CollectionView nest inside these layouts. Data binding connects a control's property to a C# object's property using the {Binding PropertyName} markup extension, most commonly against a BindingContext set to a ViewModel that implements INotifyPropertyChanged, so a change to the ViewModel's property automatically updates the bound UI without manual UI-refresh code — this is the foundation of the MVVM (Model-View-ViewModel) pattern MAUI apps typically follow.

Beyond {Binding}, common markup extensions include {StaticResource key} to pull a value (a Color, a Style) from a ResourceDictionary defined in App.xaml or a page's Resources section, {x:Static} to reference a static C# field or property, and {AppThemeBinding Light=..., Dark=...} to swap a value automatically based on the system's light/dark theme. Styles defined once in App.xaml's ResourceDictionary (e.g., a Style targeting Button with a TargetType and Setters for BackgroundColor and CornerRadius) apply globally unless overridden locally, letting you keep visual consistency without repeating property values across every page's XAML.