.NET MAUI Main Page

So we’ve got the demo running on Windows and Android as well as on Mac and iOS. Next is to turn that demo into something worth using. Granted we’re only doing a simple to-do app, but the basic concepts are here to make a great application.

First thing we want to do is open our application from last time. It should just be in the Open Recent area on the left when you first open Visual Studio 2022. Open it up and run it to make sure everything still works. You should get the .NET character with a button that counts the number of times it is clicked. Go to the MainPage.xaml file and delete all of the code within and including the ScrollView (leave the ContentPage alone). Next remove the OnCoutnerClicked method from the MainPage.xaml.cs file. Your MainPage.xaml should look like this:

1
2
3
4
5
6

<?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="maui_to_do.MainPage">

</ContentPage>

Now, add a folder for the Model that we are going to create. Call it Models. Now in that new folder create a class called ActionItems.cs and enter the following code:

1
2
3
4
5
6
7
8

namespace maui_to_do.Models;

public class ActionItem
{
    public int ID { get; set; }
    public string Title { get; set; }
    public bool IsCompleted { get; set; }
}

Now that we have a model we need to use it. Back in the MainPage.xaml file add an attribute to the top to create a namespace for models as seen in line 4 below:

1
2
3
4
5
6
7

<?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"
             xmlns:models="clr-namespace:maui_to_do.Models"
             x:Class="maui_to_do.MainPage">

</ContentPage>

Next let’s add some data. We’ll start with static data for now but will move to an API later. First inside the ContentPage add a CollectionView. The CollectionView is like a ScrollView mixed with a ListView, only a bit more powerful than that. I won’t go into too much about what it is here but you can read the excellent docs at Microsoft for more information. Add the following code to create an array of ActionItems to the page:

 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

    <CollectionView>
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type models:ActionItem}">
                <models:ActionItem 
                    ID="0"
                    Title="Install .NET MAUI"
                    IsCompleted="True"/>
                <models:ActionItem 
                    ID="1"
                    Title="Start a Demo App"
                    IsCompleted="True"/>
                <models:ActionItem 
                    ID="2"
                    Title="Make To-Do app"
                    IsCompleted="False"/>
                <models:ActionItem 
                    ID="3"
                    Title="Get To-Do working on Android, iOS, and Mac"
                    IsCompleted="False"/>
            </x:Array>
        </CollectionView.ItemsSource>
    </CollectionView>

After the CollectionView.ItemsSource add a CollectionView.ItemTemplate. This ItemTemplate will include a simple HorizontalStackLayout which is simply a StackLayout with the layout property set to horizontal. See the nice things that Microsoft did to save us a few key strokes here and there? Anyway add this code:

28
29
30
31
32
33
34
35

        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:ActionItem">
                <HorizontalStackLayout Padding="10">
                    <CheckBox IsChecked="{Binding IsCompleted}" />
                    <Label VerticalOptions="Center" Text="{Binding Title}" />
                </HorizontalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>

Click save and run the app. You have the basic UI setup for the To Do application.

The To Do app in all its glory.

Next time we’ll focus on the backend of the frontend. We’ll move the data out of the XAML and into code where data belongs. For now let me know what you think of this series I hope you enjoy.