Learning .NET MAUI – Part 14

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.

Refresh

The refresh command is much easier to deal with in MAUI.

<RefreshView Command="{Binding GetZipCodesCommand}" IsRefreshing="{Binding IsRefreshing}">
    <CollectionView ItemsSource="{Binding Results}" SelectionMode="None">
 ...
      </CollectionView>
  </RefreshView>

As you can see, I’m surrounding the CollectionView with a RefreshView. The Refresh view takes two properties. You bind to the command to cause the refresh and you bind to the IsRefreshing boolean to tell it when to stop.

In my MainPage.xaml I add a IsRefreshing boolean. That’s it. The GetZipCodesAsync method already exists.

[ObservableProperty] 
public bool _isRefreshing;

To see it at work, press GetZipcodes, then when you see your list press Clear. Now pull down from the top and hey!presto! your list is refreshed.

CollectionView.ItemsLayout

There are a lot of things you can do with the CollectionsView, but this is really cool. You can tell it you want some control over the layout of its items, and in fact you can make two columns on Android for example, and then take advantage of the size of a Windows example and make it three columns.

<CollectionView ItemsSource="{Binding Results}" SelectionMode="None">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" 
                         Span="{OnIdiom Desktop=3, Default=2}" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>

The source code for this post is here.