Getting Offline Country Data in Dotnet MAUI or Xamarin.Forms

Hello Everyone. As a mobile dev, you might have come across a situation where you needed to add Country information in your app. As allowing the user to select a given country, or a specific region in that country. I’m sure while thinking about it, the first thing that comes to your mind is tapping on an API that provides you with all of this data. Well, today, we’ll be talking about accomplishing this without having to query any API. We will get country data in Dotnet MAUI offline.

Want to have a deep introduction to dotnet MAUI? you can read this article I wrote that explains to you what it is, why dotnet MAUI was created, its strengths etc…

Country Data .NET

To accomplish this, first I’ll have to tell you about this awesome library, that permits .NET apps to load this country data offline, directly in your client apps. You can find this library on GitHub. Awesome isn’t it? The library is constantly evolving, and don’t hesitate to suggest features or submit PRs to it. What we cover today is leveraging the awesomeness of this little library in our sample MAUI app.

Country Information

At the time of writing this article, we have information about 248 different countries. This information includes the country name, code, flag, and regions in that country. Here is the class representing a country object.


    public class Country
    {
        public string CountryName { get; set; }
        public string CountryShortCode { get; set; }
        public string CountryFlag { get; set; }
        public List<Regions> Regions { get; set; }
    }

public class Country

{

public string CountryName { get; set; }

public string CountryShortCode { get; set; }

public string CountryFlag { get; set; }

public List<Regions> Regions { get; set; }

}

To get data about every country or each country, there is a country helper, that provides appropriate methods, as we will see below.

Note: The country flags are not real images, instead, they are emoji representations of the current country’s flag. This is better than embedding images directly in the library.

Getting Offline Country Data in Dotnet MAUI or Xamarin

What we want to do, is build a very simple app that displays each country, with its code, its name and flag.

Note that, we will focus on dotnet MAUI, but the same logic applies to Xamarin.Forms

Note: The source code for this sample can be found here.

Create a new MAUI project
Add the Country Data nugget package.
Add your View and View Model to MAUI dependency injection container. Go in the MAUIProgram file, and add it as follows


		builder.Services.AddTransient<MainPage>();
		builder.Services.AddTransient<MainViewModel>();

builder.Services.AddTransient<MainPage>();

builder.Services.AddTransient<MainViewModel>();

In the main ViewModel, create an observable list that you populate with country info. The final ViewModel will be as follows.

Note: I used ReactiveUI to facilitate MVVM implementation, but you could use whatever framework you want. I won’t talk about MVVM frameworks here since it is out of scope.


    public class MainViewModel : ReactiveObject
    {
        [Reactive]
        public ObservableCollection<Country> Countries { get; set; }

        public MainViewModel()
        {
            Countries = new ObservableCollection<Country>(new CountryHelper().GetCountryData());
            var count = Countries.Count;
        }
    }

public class MainViewModel : ReactiveObject

{

[Reactive]

public ObservableCollection<Country> Countries { get; set; }

public MainViewModel()

{

Countries = new ObservableCollection<Country>(new CountryHelper().GetCountryData());

var count = Countries.Count;

}

With the collection view, display the country data on your page.

<?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="CountryData.Sample.MAUI.MainPage"
             xmlns:viewmodels="clr-namespace:CountryData.Sample.MAUI.ViewModels"
             x:DataType="{x:Type viewmodels:MainViewModel}"
             xmlns:country="clr-namespace:CountryData.Standard;assembly=CountryData.Standard">

    <CollectionView ItemsSource="{Binding Countries}">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="{x:Type country:Country}">
                <ContentView>
                    <Grid ColumnDefinitions="Auto,30,*"
                          Margin="5"
                          ColumnSpacing="5">
                        <Label Text="{Binding CountryFlag}"
                               FontSize="Large"/>

                        <Label Grid.Column="1"
                           Text="{Binding CountryShortCode}"/>

                        <Label Grid.Column="2"
                               HorizontalTextAlignment="Start"
                               HorizontalOptions="FillAndExpand"
                           Text="{Binding CountryName}"/>
                    </Grid>
                </ContentView>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

<?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="CountryData.Sample.MAUI.MainPage"

xmlns:viewmodels="clr-namespace:CountryData.Sample.MAUI.ViewModels"

x:DataType="{x:Type viewmodels:MainViewModel}"

xmlns:country="clr-namespace:CountryData.Standard;assembly=CountryData.Standard">

<CollectionView.ItemTemplate>

<Grid ColumnDefinitions="Auto,30,*"

Margin="5"

ColumnSpacing="5">

<Label Text="{Binding CountryFlag}"

FontSize="Large"/>

<Label Grid.Column="1"

Text="{Binding CountryShortCode}"/>

<Label Grid.Column="2"

HorizontalTextAlignment="Start"

HorizontalOptions="FillAndExpand"

Text="{Binding CountryName}"/>

</Grid>

</ContentView>

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</ContentPage>

Getting Offline Country Data in Dotnet MAUI

Conclusion

If you have a scenario involving getting the user’s country in your app this library could be of great need. Want to have a deep introduction to dotnet MAUI Handlers? you can read this article I wrote that explains to you how handlers do their magic of allowing the direct modification of …

Follow me on social media and stay updated

2 comments

Anwar
May 14, 2022
Hello,
xamarin forms have a problem to show the flag icon .
Loading...
- Damien Doumer
  May 17, 2022
  Hey, thanks for the feedback. Will check it out.
  Loading...