Let’s take a quick look at simple navigation (in the next post we’ll look at some more you can do with navigation. As usual, we’ll start with the previous day’s code.
To get started, we’ll add a button to the main page that will take us to the details page. This is a very common paradigm, seen in almost every program sooner or later.
Once again, we’ll pick up where we left off. But today we’re in for some big changes.
Let’s add an IsBusy property to use in the MainViewModel. We’ll use the same trick we did with _resultList:
[ObservableProperty]
public bool _isBusy;
Let’s further assume you want an _isNotBusy. There are two ways to accomplish this. One is with a converter from the CommunityToolkit, specifically the InvertBoolConverter. A second option is just to create another member:
public bool _isNotBusy => !IsBusy;
The problem you have is that when IsBusy is changed, you want _isNotBusy to be updated as well. There’s an attribute for that…
[ObservableProperty]
[AlsoNotifyChangeFor(nameof(_isNotBusy))]
public bool _isBusy;
Busy week, so this one will be short. I’ve taken the code from Part 7 and copied it into Part 8. The source for 8 is here. So, what’s new?
The most important improvement in 8 is the addition of Community Toolkit for Maui and the Microsoft toolkit for MVVM. Open your “Manage NuGet Packages” window and check that you have or add these packages
CommunityToolkit.Maui
CommunityToolkit.Maui.Core
Microsoft.MauiDependencies
Microsoft.Maui.Extensions
Microsoft.Toolkit.Mvvm
This allows you to make some magic. The most impressive of which is how much code you will no longer have to write, because the MVVM kit provides code generators. We’ll see a lot more of this as we go, but let’s get started by making some changes.
Let’s pick up where we left off in the previous blog post, but it is time to clean up the app to use MVVM. First step: create a ViewModel folder and in that put two files:
I’m going to start off where we were at the end of Part 5, but this time instead of creating two labels (for State and Zip) I’m going to create one label with MultiBinding:
This is more efficient and also allows me to put VerticalOptions=”Center” into the label tag and have it affect all the contained labels. This is a nice alternative to having to use the HorizontalStackLayout
NB: You can continue to use the Xamarin.Forms <StackLayout> element, but HorizontalStackLayout and VerticalStackLayout have been optimized and thus are preferred.
When last we looked, we were returning a few countries. Let’s use ZipWise’s ability to look up a city name and give us all the info about all matching cities. We’ll then have fun with displaying that info.
When I ask for all cities named Middletown I get a nice set of results
I’ll leave it to you to put this into Json Prettifier as the result is pretty long for a blog post. We do, now, have a nice list of cities we can display, along with their states and zip codes.
We’ve seen how to get a single zip code and display it in a series of labels. Let’s use a collection to take a look at how we might deal with that in MAUI. To get started, we’ll create a new MAUI application named MultipleZip. Throw away what is in MainPage.xaml and MainPage.xaml.cs. You should have a nice clean slate.
As you can see there are three attributes: the Title, the ContentTemplate and the Route. The interesting ones are the latter two. We’ll talk about ContentTemplate in a bit. The Route speaks to the way navigation is performed in MAUI, and that is (surprise!) by using “routes” (you can think of them as URIs.) In this case, the Route couldn’t be simpler: we’re going directly to MainPage.
Let’s turn to MainPage. We’re going to start by noting that MainPage is a contentPage – the most common sort of page for MAUI. You can add controls, but like in Xamarin.Forms the page can only have one control, but of course layout controls can have child controls, so that is not burdensome.
As noted in part 0, I assume you are a Xamarin.Forms/C# programmer, familiar with Visual Studio. This series is not about converting your existing Xamarin.Forms apps; rather it is about converting your brain to MAUI. Since I’m learning as I’m going, your mileage may vary.
Community Toolkit
One of the tools you’ll absolutely want is the .NET Community Toolkit. It is available as an open-source project on GitHub. There are all sorts of goodies in there and you may want to take the time, at least, to read the Read.me file.
As noted in part 0, I assume you are a Xamarin.Forms/C# programmer, familiar with Visual Studio. This series is not about converting your existing Xamarin.Forms apps; rather it is about converting your brain to MAUI. Since I’m learning as I’m going, your mileage may vary.
To get started, install the preview edition of Visual Studio 2022 (that may not be necessary by the time you’re reading this) which fully supports MAUI. Next, create a new project. We’ll call it ZipCodeFinder because we’ll be using the web service ZipWise which is free for limited use (which is all we’ll need).
Open VS, create a new project, and choose the .NET MAUI app template:
All In One Project
Notice that the entire solution is now in one project. You could make the argument either way for this design, but this is what Microsoft decided, so let’s go with that.
I’m going to start a serious attempt to upgrade my skills from Xamarin.Forms to Maui. I’m not sure how difficult this will be, but I’m starting with James Montemagno’s excellent video/code course for beginners.
Unfortunate for me, and perhaps for you, is that his course is targeted at people new to Xamarin, Xaml, etc. In the following posts, which will come out sporadically, I will target my work towards intermediate and expert Xamarin.Forms programmers. That is I’ll assume you know and have experience with
Xamarin.Forms
Xaml
C# 7 or later
Since I’m really learning this myself, these will not come out on any strict cadence, but only as I learn something new. I will do everything I can to make sure what I provide is accurate, but let me know if I’ve done something dumb.
All the code will, of course, be publicly available on github.
Posted inC#, Maui|TaggedLearning Maui|Comments Off on Learning .Net Maui – Posting 0