Chapter 5 User Interface Essentials

Source Code

The resulting source code for this chapter can be found on the GitHub repository at https://github.com/Apress/Introducing-MAUI/tree/ main/ch05.

Extra Assignment

As an extra assignment, I would like you to consider how you might add a second layout type given that you

I would love to see what concepts you come up with.

164

CHAPTER 6

Creating Our Own

Layout

In the previous chapter, you learned a lot of the fundamentals of building and binding your user interfaces. In this chapter, you will create your own layout, make use of a variety of options when adding bindable properties, provide command support from your layout, and make use of your layout in your application. This will serve as the basis for adding much more functionality as we cover a variety of different topics in future chapters.

Let’s recap what you achieved in the last chapter: you provided the ability for a user to create a board and supply a number of columns and rows. You now need to lay out your board with the number of columns and rows the user has configured and populate widgets onto the board.

Figure 6-1 is a mock-up of what you will achieve by the end of this chapter.

Figure 6-1.  Mockup of a board

Chapter 6 Creating Our Own Layout

At the end of the last chapter, I discussed the idea of having a second type of layout in the “Extra Assignment” section. To continue with this theme, I have structured the architecture of the layout to aid in this journey. I am a fan of taking an approach like this because it allows you to potentially replace one part of the implementation without impacting the others.

BoardLayout will be responsible for displaying the widgets. It will be assigned an ILayoutManager implementation, which will decide where to place the widgets. You will be adding a FixedLayoutManager to decide this part.

Placeholder

The first item that you need to create is the placeholder to show where a widget will be placed. There isn’t too much to this control but creating it allows you to group all of the related bits and pieces together. Figure 6-2 shows what your Placeholder control will look like when rendered inside the application.

Figure 6-2.  Mockup of the Placeholder control

In order to achieve the above look, you are going to make use of the Border control. This is a really useful control. It allows you to provide

166

Chapter 6 Creating Our Own Layout

borders, custom corner radius, shadows, and other styling options. It also behaves much like the ContentView in that it can contain a single child control.

Create a folder called Controls in your main project. It will house the Placeholder control and potentially more as you build your application.

Next, add a new class to the folder and call it Placeholder. Note that you are opting to create the control purely in C# without XAML; the main reason is that it results in less code. I always find there is never a single way to build things, and even if you like XAML, at times it doesn’t add any value, just like in this scenario. Of course, if you prefer to build your UI with XAML, you can do so.

namespace WidgetBoard.Controls;

public class Placeholder : Border

{

public Placeholder()

{

Content = new Label

{

Text = "Tap to add widget", FontAttributes = FontAttributes.Italic, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center

};

}

public int Position { get; set; }

}

As discussed, there isn’t too much to this implementation but let’s still break it down. Here you have

•\ Created a control that inherits from Border

167