Language Dropdown for MAUI

Today, I released a new component called Language Dropdown for MAUI (NET8). This is a beautiful new component. It allows you to display a dropdown with all the languages in the world with their flags. If you are interested in languages in your application, look my other repositories and posts:

• CSharpCountryData: A simple cross platform offline .NET library for getting country data
• CSharp Country Data
• Demo Source Code
• NuGet package

The Language Dropdown for MAUI is available on NuGet as a package to use in your non-commercial applications. If you would like to use it for commercial use, please send me a message.

CultureInfo in NET8

If you use NET8 and want to retrieve the data related to the CutureInfo, you get a very large and interesting details such as the native name, the name of the language in English, calendar and numeric format, and a lot of other information.

Generally speaking, we can say, CultureInfo provides information about a specific culture (called a locale for unmanaged code development). The information includes the names for the culture, the writing system, the calendar used, the sort order of strings, and formatting for dates and numbers.

We know NET8 is cross-platform and for this reason we can create cross-platform applications using MAUI. Unfortunately, there is an issue when an application runs in iOS or macOS.

Wrong DisplayName and EnglishName in CultureInfo on iOS

When you use the CultureInfo in iOS or macOS, the information are not set properly. Following a thread on GitHub, this is an issue related to the runtime.

This is, 100%, a runtime issue, dotnet/runtime#70028

It works for you in Xamarin.Forms because that’s running on Mono. The code in the newer .NET runtimes is, apparently, linking out some of this data used for region info, and stripped out the names. This has no relationship to the MAUI UI project. If you built a .NET iOS or Catalyst app without MAUI UI code, the same thing would happen (as I’m doing right now, hence why I saw it).

If you enable Hybrid Globalization, the NativeName, EnglishName, and DisplayName, should appear in the culture info. This only applies to .NET 8, and affects any .NET 8 app running on iOS, Catalyst, and tvOS. If you have issues with it, it should go to Runtime.

So, this is quite annoying because I’m trying to use the CultureInfo to display a list of languages in a dropdown list. Now, I have to find a solution.

The idea behind the component

As you may know, I’m creating an app called Language In Use to help learning a new language: this app offers tools to create your own dictionaries and study what you want. I created a post to explain what my idea and goal is.

Now, in this app, a user can create a dictionary in order to contain all the words wants to learn. Each dictionary has the native language and the foreign language. How many languages do we have in the words?

So, what I like in the UI is that the user can easily select a language from a list. In the list, the user can see the flag and the name of the language. This must be a simple dropdown like a normal Picker in MAUI. For example, this could be an idea how I want the dropdown.

Requirements

Now, if have to create a wireframe of the result I like. Obviously, I want to see the list of the languages. For each language, I like to see the flag of the country where the language is spoken to easily find the correct one.

Then, the list of countries must be filterable with a simple search. For the sake of the application, I like to have a simple Picker – or dropdown as I call it here – to filter.

For example, I want to show only a specific list of supported languages or the recent languages I selected or are my favorite.

Then, when the user clicks on a language, this must be displayed in the original Picker and the values must be available to the application. Also, the component must be used via MVVM.

As a Should have feature, the flags has be in SVG format and available to use in other applications without necessary using the component. Generally speaking, in a country, people speak different languages, maybe using a dialact, and so I like to display the diversity.

Implementation

Now, the implementation is quite complex although is based on CultureInfo. The process to aggregate the languages is quite tricky. Finally, I sorted out all the issues and the component is working quite well.

Bacause I spent a lot of time to create it, I published the component as a NuGet package and you can use it in non-commercial application. For this reason and for now, I won’t publish the source code of the component. If you want to use it for commercial use, please send me a message.

Flags

The flags for all countries and languages are present in the component. If you add the Language Dropdown for MAUI in your applications, automatically, you can display all the the flags in your application. All the flags are in SVG format. In order to display a flag in your project, it is enough to add an Image component and, as usual, selected as Source of the Image with the .png extension. For example:

<Image
	HeightRequest="50"
	Source="f_gb.png"
	WidthRequest="50" />

If you want to know what flags are available and related to what language, see the table below.

Usage

First, the package has to be added to your project. You can install it with this command from the dotnet CLI

dotnet add package PSC.Maui.Components.LanguageDropdown --version 8.0.0

or with the NuGet command

Install-Package PSC.Maui.Components.LanguageDropdown -Version 8.0.0

Then, the component has to be registered in your application. The component requires the CommunityToolkit.Maui and must be added in the MauiProgram.cs after that.

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .UseLanguageDropdown()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });

#if DEBUG
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

Now, you can use the component in the application.

How to add the component

In your MAUI ContentView or ContentPage. the reference to the component must be added like in the following example:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="LanguageDropdownDemo.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:components="clr-namespace:PSC.Maui.Components.LanguageDropdown;assembly=PSC.Maui.Components.LanguageDropdown"
    xmlns:local="clr-namespace:LanguageDropdownDemo.ViewModels">

    <ScrollView>
        <VerticalStackLayout Padding="30,0" Spacing="25">
        <components:LanguageDropdown
            x:Name="ldd"
                        BorderColor="Gray"
            IsDisplayPickerControl="{Binding IsDisplayPickerControl}"
            Placeholder="This is a test"
            SelectedItem="{Binding LanguageItem}" />

                <Image
                    HeightRequest="50"
                    Source="f_gb.png"
                    WidthRequest="50" />

                 <Image
                     HeightRequest="50"
                     Source="{Binding LanguageItem.Flag}"
                     WidthRequest="50" />
                 <Label HorizontalTextAlignment="Center" Text="{Binding LanguageItem.LanguageName}" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

The code above shows the following screenshot

Properties

Languages and flags

Screenshot

So, here you have some GIFs when I show the Language Dropdown component for MAUI in action. I really like the simple design and the colorful flags.

iOS

Windows

Android