First run of the app .NET MAUI

02/01/2023 02/01/2023 756 words 4 minutes

Contents

‎

To ease your read, please start from the project containing all the different steps applied so far in this tutorial. To do so, refer to the project setup guide and resume from the sample located in the folder “0 - Get Started”.

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):

The current status of the project can easily be viewed at the bottom left of Visual Studio for Mac.

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

And here’s the result!

‎

🐒‎ ‎ Heeeey, but nothing happens when I click on the button!

This is just the beginning of our app, the biggest part is ahead !

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.

‎

These methods follow a particular programmation technique named “Declarative UI” or “Fluent UI”. Finally, this page is coded in C#, as for the rest of the app!

‎

🐒‎ ‎ Alright! And shouldn’t we declare an action to this 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).