Getting Started with .NET MAUI

Delete App.xaml and the code-behind App.xaml.cs

Note: In Visual Studio, the code-behind file is nested under the App.xaml. Deleting a XAML file in Visual Studio automatically deletes the associated code-behind.

Create a new class called App.cs with the below content

using Microsoft.Maui;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;
using System.Collections.Generic;

namespace GettingStartedMaui
{
    public class App : IApplication
    {
        List<IWindow> _windows = new List<IWindow>();
        public IReadOnlyList<IWindow> Windows => _windows.AsReadOnly();

        public App(IImageSourceServiceConfiguration imageConfig)
        {
            imageConfig.SetImageDirectory("Assets");
        }

        public IWindow CreateWindow(IActivationState activationState)
        {
            var window = new Window(new MainPage());
            _windows.Add(window);
            return window;
        }
    }
}

Add the Extension Service Provider Factory to the app configuration in Startup.cs to enable dependency injection for the ImageSourceServiceConfiguration used in the step above.

appBuilder.UseMicrosoftExtensionsServiceProviderFactory();

Delete MainPage.xaml and the code-behind MainPage.xaml.cs

Create a new class called MainPage.cs with the below content

using Microsoft.Maui;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;

namespace GettingStartedMaui
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            BackgroundColor = Color.FromArgb("#512bdf");

            var verticalStack = new VerticalStackLayout() { Spacing = 20 };

            verticalStack.Add(new Label
            {
                Text = "Hello, World!",
                FontSize = 32,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                TextColor = Colors.White
            });
            SemanticProperties.SetHeadingLevel((BindableObject)verticalStack.Children[verticalStack.Children.Count - 1], SemanticHeadingLevel.Level1);

            verticalStack.Add(new Label
            {
                Text = "Welcome to .NET Multi-platform App UI",
                FontSize = 16,
                HorizontalOptions = LayoutOptions.Center,
                TextColor = Colors.White
            });

            var counterLabel = new Label
            {
                Text = "Current count: 0",
                FontSize = 18,
                FontAttributes = FontAttributes.Bold,
                HorizontalOptions = LayoutOptions.Center,
                TextColor = Colors.White
            };

            var button = new Button
            {
                Text = "Click me",
                HorizontalOptions = LayoutOptions.Center,
                TextColor = Colors.White,
                BackgroundColor = Color.FromArgb("#2b0b98"),
                Padding = new Thickness(14, 10)
            };

            var count = 0;
            button.Clicked += (sender, args) =>
            {
                count++;
                counterLabel.Text = $"Current count: {count}";
            };

            verticalStack.Add(counterLabel);
            verticalStack.Add(button);
            verticalStack.Add(new Image { Source = "dotnet_bot.png", WidthRequest = 300, HorizontalOptions = LayoutOptions.Center });

            Content = new ScrollView
            {
                Padding = 30,
                Content = verticalStack
            };
        }
    }
}

Clean and rebuild the project