Creating a Scorecard App with .NET MAUI – Part 1: Initial Creation

This is the first in a series of blogs about creating an app using .NET MAUI. All code can be found in my GitHub repo.

• Part 1: Initial Creation

I haven’t yet had the chance to create a full app using .NET MAUI, the evolution of Xamarin Forms. So I thought a scorecard app would be a good starting place – something reasonably simple.

This first post will focus on the setting up of the project.

A few weeks ago I saw a tweet about the MAUI App Accelerator. And recently its creator, Matt Lacey, blogged about how this can help you with your projects. This is such a great idea and I don’t understand why Microsoft hasn’t implemented something like this when creating a new project. I would be surprised if I’m not the only person who creates a new project and then has to delete the default Xaml file and start setting up my MVVM structure.

So, to get started I have installed the extension via the Visual Studio Marketplace. I open Visual Studio 2022 and select New Project, then find the Maui App Accelerator as my project template.

After entering the usual Project Name and Location details I am presented with the first of the options via the accelerator. NB these selections are obviously based on my preferences and are for example purposes only.

I choose .NET 7.0.

The next option is coding style. I select MVVM Toolkit.

Next, I have to select the navigation style. I am selecting Tabs, based on my rough idea of how a user will interact with the app. (This idea is completely off the cuff, I have only given it some vague thoughts so this could completely blow up in my face :D)

Now we get the chance to select some default pages to add to our app. I would encourage anyone new to .NET Maui to try these. For now, I am selecting the Blank page option, twice, which adds a new page that I can name.

The final option is for features in the project. The MAUI Community Toolkit is a must, I find FontAwesome very useful for icons and I’ll add SQLite to hold the scorecard data.

I use the details displayed on the right sidebar of the window to check I have added/set everything as I intended, then hit create.

This gives me an initial project set-up with folders for Views and ViewModels. The Views and ViewModels that have been created are based on the two pages I added in the setup.

I’m really happy to find that the ViewModels inherit from a BaseViewModel.

And the AppShell has been set to have 2 tabs – again from the 2 pages I set.

When I run the app in my Android emulator, I can see the two tabs all ready to go.

So, I have an app structure set up in minutes thanks to the MAUI App Accelerator – fantastic! The next blog in the series will go into starting the UI.