Building Cross-Platform Desktop Apps with .NET MAUI and C

In today’s software landscape, cross-platform development is no longer a luxury—it’s a necessity. Users interact with applications across multiple devices and operating systems, and developers need tools that allow them to target these platforms efficiently. Enter .NET MAUI (Multi-platform App UI), Microsoft’s framework for building natively compiled applications for mobile and desktop using a single codebase. Pair it with the power of C#, and you’ve got yourself a robust toolkit for crafting beautiful, responsive, and platform-agnostic desktop apps.

In this blog post, we’ll explore how to create cross-platform desktop applications using .NET MAUI and C#. We’ll cover everything from setting up your development environment to designing a polished UI, implementing platform-specific features, and finally deploying your app to Windows, macOS, and Linux. Let’s dive in!

What Is .NET MAUI?

If you’re coming from Xamarin.Forms, .NET MAUI will feel familiar. It’s essentially the next evolution of Xamarin.Forms, designed to simplify cross-platform development even further. With .NET MAUI, you can create applications that run on:

• Windows
• macOS
• Linux (via third-party support such as .NET MAUI Community Toolkit)
• iOS and Android (though this blog focuses on desktop)

.NET MAUI abstracts platform-specific APIs into a unified programming model, so you can write your app’s UI and logic once and deploy it everywhere. Even better, you can still tap into platform-specific features when needed.

Setting Up Your Environment

Before we dive into coding, let’s get your development environment ready. Follow these steps:

1. Install .NET SDK

Download and install the latest version of the .NET SDK. .NET MAUI requires .NET 6 or later.

2. Install Visual Studio

Download Visual Studio 2022 (Community, Professional, or Enterprise). During installation, ensure the following components are selected:

• .NET Multi-platform App UI development
• Desktop development with C++ (required for Windows desktop apps)

3. Set Up macOS or Linux Development (Optional)

For macOS, you’ll also need Xcode installed. For Linux, you may need to rely on third-party solutions like the .NET MAUI Community Toolkit to achieve cross-platform compatibility.

4. Verify Installation

Run the following command in your terminal or command prompt to ensure .NET MAUI is installed:

dotnet --list-sdks

If everything is set up correctly, you’re ready to create your first app.

Creating Your First .NET MAUI Desktop App

Let’s start by creating a simple .NET MAUI desktop application.

Step 1: Create a New Project

Open Visual Studio and follow these steps:

1. Click Create a new project.
2. Select .NET MAUI App and click Next.
3. Name your project MauiDesktopApp and choose a location.
4. Click Create.

This will scaffold a new .NET MAUI project for you, complete with a basic MainPage.xaml and MainPage.xaml.cs.

Step 2: Understand the Project Structure

Here’s a quick overview of the key files:

• MainPage.xaml: Defines the UI layout using XAML.
• MainPage.xaml.cs: Contains the logic for MainPage.
• Platforms Folder: Holds platform-specific implementations (Windows, macOS, etc.).
• App.xaml & App.xaml.cs: Entry point and shared resources for the application.

Designing a Beautiful Cross-Platform UI

.NET MAUI uses XAML (eXtensible Application Markup Language) for designing UI. Let’s build a simple desktop app—a to-do list.

Step 1: Update MainPage.xaml

Replace the default content in MainPage.xaml with the following:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiDesktopApp.MainPage"
             Title="To-Do List">
    <VerticalStackLayout Padding="20" Spacing="10">
        <Label Text="My To-Do List"
               FontSize="24"
               HorizontalOptions="Center" />
        <Entry x:Name="TodoEntry"
               Placeholder="Enter a new task"
               ClearButtonVisibility="WhileEditing" />
        <Button Text="Add Task"
                Clicked="OnAddTaskClicked" />
        <ListView x:Name="TodoListView"
                  Margin="0,10,0,0">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </VerticalStackLayout>
</ContentPage>

Step 2: Add Logic in MainPage.xaml.cs

Add the following code in MainPage.xaml.cs:

using System.Collections.ObjectModel;

namespace MauiDesktopApp;

public partial class MainPage : ContentPage
{
    private ObservableCollection<string> _tasks = new();

    public MainPage()
    {
        InitializeComponent();
        TodoListView.ItemsSource = _tasks;
    }

    private void OnAddTaskClicked(object sender, EventArgs e)
    {
        if (!string.IsNullOrWhiteSpace(TodoEntry.Text))
        {
            _tasks.Add(TodoEntry.Text);
            TodoEntry.Text = string.Empty;
        }
    }
}

Step 3: Run the App

Press F5 to run the app on your desktop. You should see a functional to-do list application!

Adding Platform-Specific Features

One of the great things about .NET MAUI is its ability to implement platform-specific functionality using dependency services or platform folders.

Example: Displaying a Native Toast Notification

To show a native toast notification, you can use platform-specific code.

1. Windows Implementation (Platforms/Windows/MainWindow.xaml.cs):

using Microsoft.UI.Xaml.Controls;

namespace MauiDesktopApp.Platforms.Windows;

public partial class MainWindow : MauiWinUIApplication
{
    public void ShowToast(string message)
    {
        var toast = new ContentDialog
        {
            Title = "Notification",
            Content = message,
            CloseButtonText = "OK"
        };
        _ = toast.ShowAsync();
    }
}

1. Call the Platform Code: In your shared project files, use the DeviceInfo API to check the platform and invoke the native code.

Common Pitfalls and How to Avoid Them

1. Unoptimized UI Scaling: Desktop screens often have higher resolutions compared to mobile devices. Use Grid and StackLayout wisely to ensure your UI scales properly.
2. Platform API Differences: Not all APIs are available on every platform. Use the DeviceInfo.Platform property to implement conditional logic.
3. Missing Dependencies on Linux: Ensure you’ve installed all required dependencies, such as GTK, when targeting Linux.

Key Takeaways and Next Steps

1. .NET MAUI Simplifies Cross-Platform Development: Write your code once, run it everywhere—without sacrificing native performance or UI fidelity.
2. Leverage the Full Power of C#: Utilize async programming, LINQ, and other C# features to build efficient and maintainable apps.
3. Customizable and Extensible: .NET MAUI allows platform-specific customizations when needed.

What’s Next?

• Explore advanced topics like data binding, MVVM architecture, and dependency injection in .NET MAUI.
• Learn how to deploy your app to the Microsoft Store or macOS App Store.
• Experiment with third-party libraries like CommunityToolkit.Maui for additional features.

.NET MAUI is your gateway to creating professional-grade desktop applications. With a little practice, you’ll be building cross-platform apps that delight users across devices. Happy coding!