It’s now time to get the app running. We’ll also take the opportunity to look at the source code 🙂

But for our application to work, we still have two points to address: the app initialization and above all, managing its execution state.

App initialization

For each targeted platform (iOS, Android, …), a .NET MAUI application is initialized from a single entry point via the method CreateMauiApp() which is located in the file MauiProgram.cs. This is where you configure everything the app needs to work the way you want it to: web services, external dependencies, or specific fonts.

App state management

But we also need something to define the current state of our application (which page to display, what if the application stops, …). And for that, we have an Application class declared in the file App.cs.

Executing the app

Come on, it’s time to get the application running! So choose the platform you want to target, then click on the red boxed button to start the project:

First, you will see your project compiling with the chosen configuration (this is the build stage):

Then your application will automatically be deployed to the chosen platform (here, a simulated iPhone 13, iOS 15.5).

And here’s the result!

The home page

The screen you just saw is the home page for which the content is specified in the file HomeView.cs. It’s a ContentPage (basically a page with content) which is the most common type of page.

And as you can see, what it is composed about is very simple:

Filename:HomeView.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

public HomeView()
{
    BackgroundColor = Colors.Black;

    Content = new VerticalStackLayout
    {
        Children =
        {
            NightClubImage,
            EnterButton
        }
    }.CenterVertical();
}

It’s a black background page whose content is defined by an image and a button that are stacked vertically in a VerticalStackLayout.

And if you want to know how these two components are defined, just look a little further down in the code on the page:

Filename:HomeView.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

#region Controls

Image NightClubImage => new Image
{
    // .NET MAUI converts SVG files to PNG files.
    Source = "night_club.png"
};

Button EnterButton => new Button
{
    Text = "ENTER",
    TextColor = Colors.White,
    BackgroundColor = Colors.Magenta,
    CornerRadius = 10
} .Bold() .Paddings(50, 2, 50, 2) .CenterHorizontal();

#endregion

Nothing very complex at this stage:

• We set the image of the component NightClubImage with the “Source” property,

• And for the button, we set several base properties such as the text, the color, … but you might have noticed that we also apply some functions to the component EnterButton:

  • Bold() to set the text of the button in bold,

  • Paddings() to add a bit of space all around this text, especially to the left and to the right of the text,

  • And then, CenterHorizontal() to align the text at the center of the button.

Correct! And we’ll see how to trigger code execution by clicking on this button, but not in any way. Indeed, we will apply this wonderful design pattern called Model-View-ViewModel (MVVM).

More articles in the series:

Introduction
Setup the project
First run of the project
MVVM is the key to succeed
How to navigate
Scaffolding
Timing display
Media playback controls
Volume display
Play music
Control the playback position