CHAPTER 5

User Interface

Essentials

In this chapter, you are going to investigate the fundamental parts of building a .NET MAUI application. You are going to apply an icon and splash screen, add in some pages and their associated view models, and configure some bindings between your page and the view model. You will also gain an understanding of what XAML is and what it has to offer as you build the pages and the Shell of your application. You will also learn how Shell allows you to navigate between pages in your application.

Prerequisites

You need to do some setup before you can jump into using Shell. If Shell is still feeling like an unknown concept, fear not. I will be covering it a little bit later in this chapter under the “Shell” section.

Let’s go ahead and add the following folders to your project.

Models

This will house all of your Model classes. If you recall from Chapter 4, these are where some of your business logic is located. In your Models folder, you need to create three classes.

Chapter 5 User Interface Essentials

BaseLayout.cs

This will serve as a base class for the layout options you provide. During this book you will only be building fixed layout boards, but I wanted to lay some groundwork so if you are feeling adventurous you can go off and build alternative layout options without having to restructure the application. In fact, I would love to hear where you take it!

namespace WidgetBoard.Models;

public abstract class BaseLayout

{

}

FixedLayout.cs

This will represent the fixed layout, as I mentioned in the previous section. Your fixed layout will offer the user of the app the ability to choose a number of rows and columns and then position their widgets in them.

namespace WidgetBoard.Models;

public class FixedLayout : BaseLayout

{

public int NumberOfColumns { get; init; }

public int NumberOfRows { get; init; }

}

Board.cs

Your final model represents the overall board.

namespace WidgetBoard.Models;

public class Board

112