Chapter 6 Creating Our Own Layout

Let’s break it down so you have a clear definition of what you just created:

BoardLayout

Your BoardLayout will be the parent of your widgets. Create the layout inside your Layouts folder.

This will give you two files. You’ll modify each one individually.

BoardLayout.xaml

Modify the existing contents to the following:

<?xml version="1.0" encoding="utf-8" ?>

169

Chapter 6 Creating Our Own Layout

<Grid

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

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

x:Class="WidgetBoard.Layouts.BoardLayout"

x:Name="self">

<Grid

x:Name="PlaceholderGrid" />

<Grid

x:Name="WidgetGrid" ChildAdded="Widgets_ChildAdded" BindableLayout.ItemsSource="{Binding ItemsSource, Source={x:Reference self}}" BindableLayout.ItemTemplateSelector="{Binding ItemTemplateSelector, Source={x:Reference self}}" InputTransparent="True" CascadeInputTransparent="False" />

</Grid>

You have added quite a bit to this that might not feel familiar, so again let’s break it down.

Your main layout is a Grid and inside of it are two more Grids. The first inner Grid (PlaceholderGrid) is where you add the

Placeholder control you created earlier in this chapter.

The second inner Grid (WidgetGrid) is where you add widgets. The reason you have built the control this way is mainly so you can utilize a really impressive piece of functionality that drastically reduces the amount of code you have to write: BindableLayout.

170

Chapter 6 Creating Our Own Layout

You have not supplied a Grid.Row or Grid.Column to either of your inner Grids. This results in both controls filling the space of the parent Grid and the second one overlapping the first. This behavior can provide some real power when building rather complex UIs.

BindableLayout

BindableLayout allows you to turn a layout control into a control that can be populated by a collection of data. BindableLayout is not a control itself, but it provides the ability to enhance layout controls by adding an ItemsSource property for bindings. This means that all of the layouts you learned about in the previous chapter (e.g., Grid, AbsoluteLayout,

FlexLayout, HorizontalStackLayout, VerticalStackLayout) can be turned into a layout that can show a specific set of controls for each item that is provided. For this, you need to set two properties:

•\ BindableLayout.ItemsSource: This is the collection of items that you wish to represent in the UI.

•\ BindableLayout.ItemTemplate or BindableLayout. ItemTemplateSelector: This allows you to define how the item will be represented. In most scenarios, ItemTemplate is enough but this only works when you have one type of item to display in your collection. If you have multiple types, each widget will be a separate type in your application, so you need to use the

ItemTemplateSelector.

I won’t actually be providing the source for these bindings just yet; this will be done in Chapter 8. For now, you just need to make it possible to bind them.

171