Chapter 5 User Interface Essentials

In a similar manner to how the app icon is managed, the splash screen also has an entry in the project file and can generate a screen based on an SVG file. In fact, you will be using the same image to save effort.

<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />

Note that splash screens built in this manner must be static. You can’t have any animations running to show progress.

The Color property enables you to define a background color for the splash screen.

XAML

As a .NET MAUI developer, you will hear XAML be mentioned many times, XAML stands for eXtensible Application Markup Language. It is an XMLbased language used for defining user interfaces. It originates from WPF and Silverlight, but the .NET MAUI version has its differences.

There are two different types of XAML files that you will encounter when building your application:

119

Chapter 5 User Interface Essentials

When dealing with this second item, you have to make sure that the InitializeComponent line is called inside the constructor;

otherwise the XAML will not be interpreted correctly, and you will see an exception thrown.

It is worth noting that XAML does not provide a rich set of features like C# does and for this reason there is almost always a xaml.cs file that goes alongside the XAML file. This C# file provides the ability to use the richfeature set of the C# language when XAML does not. For example, handling a button interaction event would have to be done within the C# code file.

Dissecting a XAML File

In the prerequisites section of this chapter, you created the BoardDetailsPage.xaml file. Now you are going to modify it and add some meaningful content so you can start to see your application take shape. The code you should see in this file is shown below.

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/ dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="WidgetBoard.Pages.BoardDetailsPage"

Title="BoardDetailsPage">

<VerticalStackLayout>

<Label

Text="Welcome to .NET MAUI!" VerticalOptions="Center" HorizontalOptions="Center" />

</VerticalStackLayout>

</ContentPage>

120

Chapter 5 User Interface Essentials

If you break this down into small chunks, you can start to understand not only what makes up the UI of your application but also some of the fundamentals of how XAML represents it.

The root element is a ContentPage. As mentioned, a typical view in

.NET MAUI is either a ContentPage or ContentView. As the name implies, it is a page that presents its content, and this will be a single view as its content.

As mentioned, XAML is an XML-based language and there are the following key parts to understanding XAML:

\ 1.\ Properties are set by attributes on your element, so

<Label Text="Welcome to .NET MAUI!" />

is effectively the same as writing

new Label

{

Text ="Welcome to .NET MAUI!"

};

\2.\ XAML represents the visual hierarchy in the file structure. You can work out that ContentPage has a child of VerticalStackLayout and it has a child of Label. This can be especially helpful. A complex XAML file will result in a complex visual tree and you want to try your best to avoid this.

\3.\ The xmlns tag works like a using statement in C#. This allows you to refer to other functionality that might not be available out of the box. For example, you can add the line xmlns:views="clr-namespace:WidgetBoard. Views" and it is the equivalent of adding using WidgetBoard.Views; in a C# file. This allows you to refer to the views in your codebase.

121

Chapter 5 User Interface Essentials

The content of your ContentPage in your XAML is a VerticalStackLayout. I will cover layouts a little bit later in this chapter but as a very brief overview they allow you to have multiple child views as content and therefore open up the possibilities of creating your UIs. It is worth noting that a ContentPage can only have a single child, which makes layouts really important controls for use when building user interfaces.

Now that you have covered some of the key concepts around XAML, let’s go ahead and start building your application’s first page.

Building Your First XAML Page

I always like to work with a clear definition of what needs to be achieved so let’s define what your page needs to do. It needs to do the following:

Now that you know what needs to be achieved, let’s go ahead and do it. You need to delete the existing contents of the page and replace them with a Border. A Border is similar to a ContentView in that it can only have a single child, but it offers you some extra properties that allow you to provide a nice looking UI. In particular, you care about the StrokeShape and Stroke properties. You may notice that you are not actually setting these properties in the XAML and you would be correct! There are two main reasons for this:

122

The most important part of the properties that you are setting are the

HorizontalOptions and VerticalOptions. They allow you to define where in the parent this view will be displayed. By default, a view will Fill its

123