Assembling Your Tools and Creating Your First App
In this book, we’ll be building iOS, Android, Windows, and Mac applications using one common code base. Everything you need is free unless you want to build for iOS and Mac, in which case you need a Mac computer. I’m going to assume you have a Mac, but if you don’t, very little will change; you’ll just be more limited in the platforms you can deploy to.
An alternative if you don’t have a Mac
James Montemagno of Microsoft has a workaround video if you don’t have a Mac. There are severe limitations, but needs must. My personal recommendation is that if you don’t have a Mac, do your development with Android. Here’s the video: https://www.youtube.com/watch?v=snQ1C6Cppr8.
In the coming chapters, you will see a non-trivial .NET MAUI project that we will build incrementally. Along the way, we will examine how to create the User Interface (UI) with XAML (a markup language) and C#.
An alternative, not covered in this book, is to use MAUI Blazor, which allows you to create a cross-platform application using your Blazor skills. You can learn more about MAUI Blazor at https://bit.ly/MauiBlazor.
In the first part of the book, we will discuss the principal architecture for .NET MAUI: Model-View-ViewModel (MVVM). We will then dive into the diverse controls available for creating powerful UIs followed by a chapter dedicated to techniques for laying out these controls on the page.
We will move on to discussing the Shell navigation architecture and how you move from page to page, passing along data as needed. We’ll look at persisting data and then stop to discuss the all-important topic of testing your code.
While .NET MAUI provides a cornucopia of controls, there are times when you need something that Microsoft did not anticipate, so we’ll dedicate a chapter to creating custom controls. (Once you have a custom control, you can use it in any subsequent .NET MAUI projects you work on.)
In the final section of the book, we’ll look at consuming a REST API and creating a web frontend to the same REST API we used for the mobile and desktop applications, this time using Blazor.
In this chapter, you will learn how to get and install Visual Studio for writing the program and Git for managing and safeguarding your code. Each chapter’s final code will be in a dedicated branch, with the final product in the main branch.
In this chapter, you will find the following:
- A description of Visual Studio, along with installation instructions
- A description of Git, along with installation instructions
- A description of how to create your first, out-of-the-box program, and a tour of the files in that project
App versus application
Since we will be building for iOS and Android (which refer to apps) and also Windows and Mac (which refer to applications), I’ll be using the two terms interchangeably.
Let’s get the software you need, and then set up Visual Studio.
To follow along with this chapter and book, you will need to obtain and install Visual Studio and Git. To do this, you will need a Windows machine (Windows 10 or later). In addition, if you want to write for iOS and/or the Mac, you will need an Apple computer on the same network as your Windows computer.
All of the code in this book is available at https://github.com/PacktPublishing/.NET-MAUI-for-C-Sharp-Developers. The code for each chapter will have its own branch and that will be noted in the Technical requirements section of the given chapter. Note that there is no code for Chapters 1 and 2.
A word on Visual Studio Mac
It should be possible to follow along with this book using Visual Studio Mac, but some of the menus and certainly many of the keystrokes will be different. In my experience, Visual Studio Mac follows Visual Studio with a short delay in the implementation of new features. If all you have is a Mac, by all means do your development there. If you have both, or just a Windows machine, you’ll find it a bit easier to follow along with Visual Studio (for Windows).
While I’m at it, I’ll mention that I’m using Windows 11 on a desktop computer with 64 GB of memory and a 1 TB disk. None of that is required for this book. You will want at least 16 GB of memory for .NET MAUI programming.
Getting and installing Visual Studio
The first and foremost software you’ll need for this book is the latest version of Visual Studio from Microsoft. You can, of course, write .NET and .NET MAUI apps with any number of editors and/or Integrated Development Environments (IDEs), but Visual Studio is what I’ll be using in this book because it is, I believe, the most powerful IDE for the job. All the examples will use Visual Studio and your job will be much easier if you do so as well, at least while working your way through this book.
To get Visual Studio, open a browser and navigate to https://visualstudio.microsoft.com/. Microsoft changes the appearance of this page pretty frequently, but you should see the opportunity to download Visual Studio, Visual Studio for Mac, and Visual Studio Code.
Installing Visual Studio
On the website, click on Download Visual Studio. You can download whichever version you prefer. Note that the Community Version is free. If you already have Visual Studio 2022 or later installed, you need not add another copy, though they will run side by side assuming you have enough disk space. For installation, follow these steps:
- Once Visual Studio has been downloaded, click on the executable to begin the installation process. The installer will update and you will be presented with the Workloads dialog box as shown in Figure 1.1.
Figure 1.1 – Visual Studio Workloads
- Visual Studio lets you pick and choose what workloads you’ll need so that it is no bigger than necessary. Be sure to check Azure development, .NET Multi-platform App UI development, and .NET desktop development as shown in Figure 1.2.
Figure 1.2 – Selecting workloads
- Next, click Install and get yourself a cup of coffee; this may take a few minutes. You should see progress in the Visual Studio installer, as in Figure 1.3.
Figure 1.3 – Visual Studio Installer
When the installation is complete, Visual Studio will open.
A word on ReSharper
ReSharper is a very powerful tool that greatly enhances productivity for .NET developers. It is not free, however, and while I use it every day in my own work, we’ll not be using it in this book. Since we can do everything in Visual Studio without ReSharper (though it may take a few more keystrokes), no harm done.
With Visual Studio installed, the only remaining issue is storing, safeguarding, and retrieving the source code. For that, we’ll use Git – the industry standard. The final application will be in the main branch, with each chapter’s code being in a dedicated branch.
The next software you need is Git. To download Git, navigate to git-scm.com/download and choose your operating system. I’ll choose Windows. Next, I’ll choose 64-bit Git for Windows Setup under Standalone Installer. This will cause an immediate download. Double-click on the downloaded file to install it. If you already have Git installed, this will update it.
You do not need any of the Git GUIs, as we’ll be interacting with Git through Visual Studio.
When the installation is complete, you’ll see the following options: Launch Git Bash and View the release notes. Uncheck both and click on Finish.
Let’s continue with our exploration of Visual Studio.
Opening Visual Studio
- Click on Create a new project. (If you’ve been brought directly into Visual Studio, bypassing the launch dialog, just click File | New Project.)
- It is now time to pick the template we want. Templates make getting started easier. In the Search for Templates box, enter
MAUI. A few choices will be presented; you want .NET MAUI App, as shown in the following figure:
Figure 1.4 – Creating a new project
- Click Next. Here we give our project a name. The first project we’re going to create is not
ForgetMeNotDemo(the project that you will be building as part of this book), but rather a sample project just to take a quick look around. Name it something creative such as
SampleAppand place it in a location on your disk where you will be able to easily find it later. Before clicking Next, make sure your dialog looks similar to Figure 1.5.
Figure 1.5 – Naming your project
- Click Next and use the dropdown to choose the latest version of .NET. At the time of writing, that is .NET 7. Finally, click on Create.
Because Microsoft is always updating Visual Studio, your screens or steps may vary slightly. Don’t let that worry you. The version I am using is Visual Studio 2022, version 17.4.3. As long as yours is the same or later, you’re all set. But just to be sure, let’s launch the sample app (F5). You should see something that looks like Figure 1.6.
Figure 1.6 – Running your app
- On the screen that you see in the preceding figure, click the button a couple times to make sure it is working.
Generally speaking, I will not be walking through how to do simple things on Visual Studio. The assumption is that you are a C# programmer and so you are probably familiar with Visual Studio. On the other hand, on the off chance that you are not, I’ll describe how to do anything that is not immediately intuitive. Next, let’s explore the out-of-the-box app in a bit more detail.
Quick tour of the app
Let’s take a quick tour to see what comes with an out-of-the-box app. First, stop the app by pressing the red square button in the menu bar. Make sure Solution Explorer is open (if not, go to View | Solution Explorer). Notice that there are three folders and four files, as shown in Figure 1.7:
Figure 1.7 – Three folders and four files
The files with the
.xaml extension are XAML files – that is, they use the XAML markup language. I will not assume you know XAML, and in fact, throughout this book, I will provide layout and other code in both XAML and fluent C#, but that is for the next chapter.
Right now, let’s open
this out of the
This is the entry point for the program. As you can see, it is a static class with a static method that is responsible for creating the app itself. We’ll come back to this file in subsequent chapters.
When you open
MainPage.xaml, you will see a layout with controls for the page we just looked at (with the goofy MAUI guy waving and counting our button clicks). Again, we’re going to come back to layout and controls, but scan this page and see whether you can guess what is going on. You may find that it isn’t as alien as it seemed at first glance. You can, if you are so motivated, learn quite a bit about XAML just by reading this page carefully.
Click on the triangle next to
MainPage.xaml to reveal the code-behind file. Code-behind files are always named
<PageName>.xaml.cs – in this case,
MainPage.xaml.cs. These files are always in C#. Here, we see the constructor and then an event handler. When the user clicks on the button, this event handler (
OnCounterClicked) is called.
By flipping back and forth between the XAML and the code-behind file, you may be able to figure out how the button works and how the count of clicks is displayed. No need to do this, however, as we’ll be covering all these details in upcoming chapters.
At the moment, most of the other files are nearly empty and not worth the time to examine.
Just for fun, expand the
Resources folder. You’ll see that there are folders for the application icon, fonts, images, and so forth. All the resources for all of the platforms are kept here.
Then there is a
Platforms folder, which contains whatever is needed on a per-platform basis. For example, iOS applications require an
info.plist file, which you’ll find in Platforms | iOS.
In this chapter, you saw how to find, download, and install Visual Studio and Git, the two tools you’ll need throughout the book. You also created your first .NET MAUI app, and we walked through some of its files, albeit quickly.
In the next chapter, we’ll take an extended look at XAML: the markup language for page layout and the creation of controls. We’ll then look at creating layouts and controls in C# and a new library that allows us to use Fluent C# to create layouts and controls.
Test your understanding of this chapter by answering the following questions:
- How do you create a new project?
- How do you find Solution Explorer if it is not visible?
- What does the
- What do we call the
.csfile associated with an
- Where is the entry point for a .NET MAUI app?
You try it
Most chapters will have a You try it section, in which you will be encouraged to take on a task related to what was covered in the chapter. Alas, this chapter does not have a task for you.