C# Markup for .NET MAUI Essentials
Description
This book provides a comprehensive guide to building cross-platform applications using .NET MAUI and C# Markup. Rather than relying on XAML, this approach focuses on constructing user interfaces entirely in C#, offering greater flexibility, consistency, and control over application structure and behavior. By combining modern development practices with a code-first approach, you will learn how to create applications that run across Android, iOS, macOS, and Windows from a single codebase.
The early chapters introduce the core concepts of .NET MAUI and C# Markup, including project structure, application lifecycle, and the fundamental building blocks of user interfaces. You will learn how views, layouts, and controls are combined to form responsive interfaces, and how to apply styling, theming, and reusable components to maintain consistency across your applications. Throughout these chapters, the emphasis is on understanding not only how to implement features, but also why they work the way they do.
As the book progresses, more advanced topics are introduced, including data binding, navigation, and application architecture. You will explore how to structure applications using patterns such as MVVM, manage state effectively, and connect user interfaces to underlying data models. Additional chapters cover platform features such as gestures, animations, and device capabilities, allowing you to create rich, interactive user experiences.
By the end of this book, you will have developed a solid understanding of how to design, build, and deploy cross-platform applications using .NET MAUI and C# Markup. Whether you are new to .NET MAUI or transitioning from XAML-based development, the knowledge and techniques presented in this book will provide a strong foundation for creating modern, maintainable applications.
All prices
More details
Other editions
Additional editions
Content
4. Building a C# Markup MAUI App
With Visual Studio installed and configured, the next step is to create an example .NET MAUI application using C# Markup. This chapter will demonstrate how to build a simple app entirely in C#, explaining each stage of the process and illustrating how declarative C# Markup replaces traditional XAML with a cleaner, more integrated approach.
4.1 Understanding the C# Markup Approach
C# Markup is a concise, declarative alternative to building user interfaces in XAML. Instead of maintaining separate XAML and C# code files, C# Markup lets us construct entire user interfaces directly in C#, combining layout definitions, styling, and logic in a single file. Because the UI is expressed in code, we gain access to the full power of the C# language, including variables, conditionals, and loops. It also provides a more unified development experience, as there is no longer a need to switch between XAML and code files.
4.2 Opening the MauiDemo Project
Begin by launching Visual Studio and opening the MauiDemo project created in the previous chapter. This project provides us with a basic cross-platform app structure ready to modify.
4.3 Changing the App Initialization Code
When a completed app runs, it executes code that initializes the underlying .NET MAUI toolkits. The default initialization code generated by Visual Studio for XAML-based development needs to be modified to initialize the markup-specific toolkit. To review the current code, display the Solution Explorer panel by selecting the tab marked A in Figure 4-1, then double-click on the MauiProgram.cs file (B) to open it in the code editor:
Figure 4-1
The initialization code in the MauiProgram.cs file currently reads as follows:
using Microsoft.Extensions.Logging;
namespace MauiDemo
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf",
"OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf",
"OpenSansSemibold");
});
#if DEBUG
builder.Logging.AddDebug();
#endif
return builder.Build();
}
}
}
To add support for C# Markup, we need to call the UseMauiCommunityToolkitMarkup() method on the MauiApp instance, as shown below:
using Microsoft.Extensions.Logging;
using CommunityToolkit.Maui.Markup;
namespace MauiDemo
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkitMarkup()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf",
"OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf",
"OpenSansSemibold");
});
#if DEBUG
builder.Logging.AddDebug();
#endif
return builder.Build();
}
}
}
This configuration step ensures that the C# Markup toolkit extensions are available throughout your project.
4.4 Removing the Old UI Design
When the project was created, Visual Studio generated several XAML files. The MainPage.xaml file is of particular significance because it contains the XAML-based UI design for the sample app. Since we will be redesigning the UI using C# Markup, the XAML file is redundant and can be deleted.
When Visual Studio generated the MainPage.xaml file, it also generated a C# class file called MainPage.xaml.cs containing the code to initialize and display the XAML UI layout and handle events (otherwise known as the "code-behind" file). The first step is to rename this file, otherwise it too will be deleted when we remove MainPage.xaml. Using the Solution Explorer, click on the disclosure arrow located to the left of the MainPage.xaml file to reveal the MainPage.xaml.cs file as indicated in Figure 4-2 below:
Figure 4-2
Right-click on the MainPage.xaml.cs file, select the "Open in File Explorer" menu option, and rename the file MainPage.cs.
Once the code-behind file has been renamed, return to the Solution Explorer, select the MainPage.xaml file, and press Delete on your keyboard to remove it from the project.
4.5 The AppShell.xaml file
Visual Studio also generated a file named AppShell.xaml. This file serves as a navigation and layout container, providing structure for apps with multiple pages, including page navigation and elements such as menus, tab bars, and navigation routes. The default AppShell.xaml file will resemble the following:
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="MauiDemo.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiDemo"
Title="MauiDemo">
<ShellContent
Title="Home"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />
</Shell>
The above example declares a top-level Shell view containing a single ShellContent element configured to display the MainPage UI with the title text set to "Home". Later in the book, we explain how to migrate this structure to C# Markup and implement navigation. For this example, however, we will leave the file unchanged.
4.6 Building the Main Page with C# Markup
The next step is to design the new UI using C# Markup. Double-click the MainPage.cs file in the Solution Explorer to open it in the code editor. Once opened, the file will read as follows:
namespace MauiDemo
{
public partial class MainPage : ContentPage
{
int count = 0;
public MainPage()
{
InitializeComponent();
}
private void OnCounterClicked(object? sender, EventArgs e)
{
count++;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
SemanticScreenReader.Announce(CounterBtn.Text);
}
}
}
In the code above, the MainPage() method calls InitializeComponent(), which initializes and displays the layout defined in the XAML file. Having discarded the XAML layout, we will delete this call and replace it with the C# Markup for our new UI. Edit the file and make the following changes:
using CommunityToolkit.Maui.Markup;
namespace MauiDemo
{
public partial class MainPage : ContentPage
{
int count = 0;
public MainPage()
{
InitializeComponent();
Content = new VerticalStackLayout
{
Spacing = 20,
Padding = new Thickness(30),
Children =
{
new Label()
.Text("Welcome to .NET MAUI and C#...
