Jesse Liberty

This is part 4 in an ongoing series in which I will build and dissect a non-trivial app. For details, please see the first in this series.

Part 3 ended with a teaser about the Preferences Page. As you’ll remember, we start with the Preference Model class:

namespace ForgetMeNot.Model;

[ObservableObject]
public partial class Preference
{
    [ObservableProperty] private string preferencePrompt;
    [ObservableProperty] private string preferenceValue;

}

I explained about ObservableProperties, so I won’t review that here. Let’s see how this model class is used. There are two important related classes: Preferences.xaml and PreferencesViewModel.cs

In the previous postings we looked at creating the basic app and adding a single, simple page. This post will really begin to get into it.

We’re going to have a number of pages

• A page for you to enter your own preferences
• One for looking at your buddy list
• One for look at your buddy’s preferences
• A page for inviting someone to become your buddy

Each of these pages will have its own viewmodel class. We’ll also need services to talk to the API client (e.g., BuddyService with methods to get your buddy list, add to your list, see your buddy’s preferences, etc.)

In Part 1 we created the skeleton of Forget Me Not (and explained what it is). Here in Part 2 we’ll add an about page. This is so easy that this will be a short post.

Create the page

Creating the page is almost indistinguishable from doing so in Xamarin.Forms. Here’s the XAML for the page:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="ForgetMeNot.About"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <VerticalStackLayout Margin="10" Spacing="10">
        <HorizontalStackLayout Spacing="10">
            <Image HeightRequest="64" Source="flower.png" />
            <Label
                FontAttributes="Bold"
                FontSize="22"
                Text="About this app"
                VerticalOptions="End" />
            <Label
                FontSize="22"
                Text="v1.0"
                VerticalOptions="End" />
        </HorizontalStackLayout>

        <Label Text="This app is written in XAML and C# with .NET MAUI by Jesse Liberty and Rodrigo Juarez. Concept and original design by Robin Liberty" />
    </VerticalStackLayout>
</ContentPage>

We put a picture of a forget-me-not flower next to the title. Below that is the version and the acknowledgements. We’ll want to be able to navigate to the About page using a tab at the bottom of the page, so let’s turn to AppShell.xaml and ad the tab there:

<TabBar>
    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Icon="icon_notes" />

    <ShellContent
        Title="About"
        ContentTemplate="{DataTemplate local:About}"
        Icon="icon_about" />

Next we open AppShell.xaml.cs and add the route

public AppShell()
{
	InitializeComponent();


    Routing.RegisterRoute("about", typeof(About));

}

That’s it! We created the page, created the tab and told MAUI where to find the page by registering the route.

My buddy in Argentina, Roberto Juarez, and I have set out to create a real-world, non-trivial program using .NET MAUI. This is a learning exercise, and I’d like to invite you to join us. We anticipate that (eventually) this will be in the stores, and we hope it will be open source (we are discussing a commercial video which might get in the way of giving away the copyright, but the source will definitely be available).

You can see an associated video here.

Associated (partial) code here.

Forget Me Not

This app was conceived and designed by Robin Liberty.

The premise is that you want to buy gifts for your “buddies,” and allow them to buy gifts for you. You start by filling out our form on your preferences (shirt size, favorite books, favorite food, etc. ect.). You then invite others to join (securely). Once they register as your buddy, they can see your list and you can see theirs. You can have as many buddies as you want, but the sharing is always 1:1.

In addition, you can put in shared occasions (birthdays, anniversaries, etc.) and be notified when one is coming up so you have time to buy a gift.

The server will provide an API for the client so that we can manage most of the data in the cloud (certain set-up preferences will be stored locally). In version 1 this is an on-line only app, running only on iOS, Android and Windows (though in theory it should also run on MacOS, watch, etc.)

Lists are always subjective, but it is helpful, I think, to exchange favorites now and again. Feel free to add yours to the comments. Here’s my list in no particular order

1. Visual Studio 2022 – goes without saying that this is the world’s best IDE for .NET developers. I’m on the preview day in and day out, and loving it.
2. ReSharper – I’ve uninstalled and reinstalled this a dozen times, but I think they really have nailed it now, and it is an indispensable tool for C# developers
3. Tweaks by Mads Kristensen — small but very valuable addition to VS
4. Viasfora – I can not believe how useful this is. I’d explain what it does but you have to see it.
5. Microsoft One Note – I use it to keep a log of everything I do, every fix for recurring issues, etc.
6. LastPass – my password manager. I’d be lost without it.
7. XAML Styler – if you are working in XAML this is a must-have. Does something simple, and does it right.
8. Github Copilot – Get an idea of how AI is going to put us all out of work
9. Solution Colors – Do you work on more than one project at a time? Another brilliant extension from Mads.
10. Git Diff Margin – if you use Git you’ll want to Git this
11. Beyond Compare – compare and merge files
12. DB Browser for SQLite – If you are using SQLite, this is a must-have.

Note that nearly all of these are free (not Resharper, LastPass, Github Copilot, Beyond Compare, One Note). I do remember the days when a program like Lotus 123 cost something in the hundreds of dollars. Makes me laugh when I see people look at an app and say “$4.00, naah too expensive.”

As I say, grab these, and if there are others that you use, please note them in the comments.

Thanks

Have I thanked James Montemagno yet? His 4 hour training video is the foundation of this series of posts (with his permission).

Part 0 which kicks off this series is here.

Platform Specific Services

Now that we’ve covered platform services from MAUI, what about platform-specific issues? For example, iOS has to deal with the notch at the top of the screen, while Android, Windows, etc. do not. To solve this, add a namespace:

xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"

If you just type xmlns:ios=ios it will offer the entire string for completion

After saving that, and still in the ContentPage element you can then add

ios:Page.UseSafeArea="True"

This avoids the kind of platform if/else statements we were used to.