First run of the project
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.
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:
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:
Nothing very complex at this stage:
We set the image of the component
NightClubImagewith 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
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: