Learning .NET MAUI – Part 3

Our app will spring to life in AppShell.xaml. We’ll be putting a few additional things there, but key for now is the ShellContent element

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

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.

Starting Simple

Just to get rolling let’s put a label and a button into a StackLayout. MAUI offers a more efficient way to do this with VerticalStackLayout and HorizontalStackLayout. Here is a ridiculously simple example:

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

    <VerticalStackLayout>
        <Label Text="Push the button" />
        <Button Text="Push me" FontSize="Medium" WidthRequest="150" HeightRequest="50" />
    </VerticalStackLayout>
</ContentPage>

Which of course give us this:

The list of layout views is extensive: all the ones from Xamarin.Forms, and quite a few new ones. Add in the Community Toolkit and you have a cornucopia of choices.

Real Data

Let’s use the data we created in Part 2 to populate information about a Zip Code. We have, you’ll remember, three classes: Root, Results and City. (In a real program I might consider renaming these)

In MainViewModel we’ll add a method GenerateInfoFromJson which we’ll call from the constructor. In that method we will deserialize the json into the classes we created.

 Root root = null;

 public MainViewModel()
 {
     GenerateInfoFromJson();
 }

 public void GenerateInfoFromJson()
 {

     var jsonResult = "{\"results\":{\"zip\":\"01720\",\"cities\":[{\"city\":\"Acton\",\"preferred\":\"P\"},{\"city\":\"W Acton\",\"preferred\":\"N\"},{\"city\":\"West Acton\",\"preferred\":\"N\"}],\"county\":\"Middlesex\",\"state\":\"MA\",\"country\":\"U\",\"area_code\":\"978\",\"fips\":\"25017\",\"time_zone\":\"EST\",\"daylight_savings\":\"Y\",\"latitude\":\"42.4836\",\"longitude\":\"-71.4418\",\"type\":\"S\",\"population\":\"22791\"}}";


      root = JsonConvert.DeserializeObject<Root>(jsonResult);
 }

With that we are able to create the properties:

public string ZipCode => root.results.zip;
public string County => root.results.county;
public string State => root.results.state;
public string TimeZone => root.results.time_zone;
public string DayLightSavings => root.results.daylight_savings;
public string Latitude => root.results.latitude;
public string Longitude => root.results.longitude;

Now we can return to MainPage.xaml and display these values in a simple grid (for now):

 <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto,Auto,Auto,Auto">

     <Label
         Grid.Column="0"
         Margin="21,21,0,0"
         Text="Zip Code:" />
     <Label
         Grid.Column="1"
         Margin="0,21,21,0"
         Text="{Binding ZipCode}" />

     <Label
         Grid.Row="1"
         Grid.Column="0"
         Margin="21,21,0,0"
         Text="County:" />
     <Label
         Grid.Row="1"
         Grid.Column="1"
         Margin="0,21,21,0"
         Text="{Binding County}" />


     <Label
         Grid.Column="0"
         Grid.Row="2"
         Margin="21,21,0,0"
         Text="State:" />
     <Label
         Grid.Row="2"
         Grid.Column="1"
         Margin="0,21,21,0"
         Text="{Binding State}" />

     <Label
         Grid.Row="3"
         Grid.Column="0"
         Margin="21,21,0,0"
         Text="TimeZone:" />
     <Label
         Grid.Row="3"
         Grid.Column="1"
         Margin="0,21,21,0"
         Text="{Binding TimeZone}" />

     <Label
         Grid.Row="4"
         Grid.Column="0"
         Margin="21,21,0,0"
         Text="Daylight Savings?:" />
     <Label
         Grid.Row="4"
         Grid.Column="1"
         Margin="0,21,21,0"
         Text="{Binding DayLightSavings}" />

 </Grid>

Which looks like this when displayed:

For now, we’re focusing on functionality. UI and UX will follow, though be warned that I am a terrible UI developer.

Source code at https://github.com/JesseLiberty/ZipCode-Part-3