XAML Fundamentals: Elements, Layout & Code-Behind

XAML (Extensible Application Markup Language) is a declarative, XML-based markup language used by WPF, .NET MAUI, and UWP to define UI layout and structure separately from application logic -- similar in spirit to how HTML separates structure from JavaScript behavior.

Elements, Attributes & the XAML Tree

<StackPanel>
  <TextBlock Text="Name:" FontSize="16" />
  <TextBox x:Name="NameInput" />
  <Button Content="Submit" Click="SubmitButton_Click" />
</StackPanel>

<!-- Properties are set as XML attributes matching the property name.
     Nesting elements forms a parent-child hierarchy that directly
     corresponds to the UI's layout structure -- mirroring how nested
     HTML elements form a DOM tree. -->

Layout Panels

<!-- Grid arranges children into a configurable rows/columns structure.
     Attached properties (Grid.Row, Grid.Column) let a CHILD tell its
     PARENT container where it should be positioned. -->
<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <TextBlock Grid.Column="0" Text="Email:" />
  <TextBox Grid.Column="1" />
</Grid>

<!-- StackPanel simply lines children up in sequence -->
<StackPanel Orientation="Horizontal">
  <Button Content="Save" />
  <Button Content="Cancel" />
</StackPanel>

Code-Behind: x:Class, x:Name & Event Handlers

<!-- MainWindow.xaml -->
<Window x:Class="MyApp.MainWindow" ...>
  <Button x:Name="SubmitButton" Content="Submit" Click="SubmitButton_Click" />
</Window>

// MainWindow.xaml.cs
// x:Class ties this file to the XAML markup -- combined into one
// partial class at compile time
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    // x:Name makes SubmitButton available as a field here
    private void SubmitButton_Click(object sender, RoutedEventArgs e)
    {
        SubmitButton.Content = "Submitted!";
    }
}