Jesse Liberty

In this post we’ll do three things:

• Add a clear button to clear out the list of zip codes
• Add the Connected service to make sure we have internet connection before trying to get the zip codes
• Add the IMap service to show a map of a place

We left off displaying the zip codes and going to the details, but not displaying the selected zip code. Let’s fix that and clean some things up.

Choosing from the list and displaying the details

In the previous version we hard coded which result would be passed to the details page. Getting the actual selection is not terribly difficult. First modify MainPage.xaml

<CollectionView ItemsSource="{Binding Results}" SelectionMode="None">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="model:Result">
            <Grid Padding="10">
                <Grid.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:MainViewModel}}, Path=GoToZipCodeDetailsCommand}" CommandParameter="{Binding .}" />
                </Grid.GestureRecognizers>
                <VerticalStackLayout>
                    <HorizontalStackLayout
                        Padding="10"
                        Spacing="4"
                        VerticalOptions="Center">
                        <Label VerticalOptions="Center">
                            <Label.Text>
                                <MultiBinding StringFormat="{}{0}, {1}  {2}">
                                    <Binding Path="city" />
                                    <Binding Path="state" />
                                    <Binding Path="zip" />
                                </MultiBinding>
                            </Label.Text>
                        </Label>
                    </HorizontalStackLayout>
                </VerticalStackLayout>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Note that I’ve added a grid, put the TapGestureRecognizer on that structure, so that it is within the datatemplate.

This one should be short. We’re going to take a look at passing values when navigating.

Passing in values requires that you pass a Dictionary, where the key is an arbitrary string and the object is the value you are passing

 [ICommand]
 async Task GoToZipCodeDetailsAsync()
 {

     Result result = new Result
     {
         zip = "01720",
         city = "Acton",
         state = "MA"
     };

     
     try
     {
          await Shell.Current.GoToAsync($"ZipCodeDetailsPage", true,
             new Dictionary<string, object>
         {
                 
             { nameof(Result), result }
         });               
     }
     catch(Exception ex)
     {
         Debug.WriteLine(ex.Message);
         await Shell.Current.DisplayAlert("Unable to go to Details page!", ex.Message, "OK");
     }
 }

You would normally pass the Result object into GoToZipCodeDetailsAsync, but here I’m creating it on the fly for demonstration purposes.

“ZipCodeDetailsPage is the page we are navigating to. true means we do want animation on the page change and the Dictionary contains a key and a value, in this case the Results collection.

To receive this in the called page, go to the ZipCodeDetailsViewModel and add this to the top (before the class name:

[QueryProperty(nameof(Result), “Result”)]

The first value (nameof(Result) will signal the name of the property, the second will be the value for that property (Result) You want to match this with a property in the class which you do just by declaring the property:

[ObservableProperty]
Result result;

We are now in a position to bind to that property

<VerticalStackLayout>
    <Label
        HorizontalOptions="Center"
        Text="Welcome to .NET MAUI!"/>
    <VerticalStackLayout>
        <Label Text="You made it to the details page!" />
        <Label Text="{Binding Result.city}" />
        <Label Text="{Binding Result.state}" />
        <Label Text="{Binding Result.zip}" />
    </VerticalStackLayout>
</VerticalStackLayout>

That’s really all there is to it.

The source code is here

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;

Very clean and tidy.

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.