Xamarin Forms Localization using Xamarin Community Toolkit

Xamarin Forms Localization using Xamarin Community Toolkit

Implementing localization or multi-language support in a Xamarin Forms application using Xamarin Community Toolkit is super simple.

Add NuGet Package

Let’s start by installing the NuGet package required in our example. Search for Xamarin.Community Toolkit by Microsoft and install it in all the projects.

Add Resource Files

To support multiple languages, we need to add Resources Dictionary files which will contain the translated strings for each of the languages we want to support. For example, we are going to support English, French, and Spanish.

We need to add three resource files named below. Notice that the files' names will be the same, with additional .es for Spanish and .fr for French. For English, we don’t need to do anything additional.

Add Translations

Add the required translated strings that we are going to use in the app.

Create View and View Model

Now let’s create the UI. In a newly created Xamarin project, modify your MainPage.xam land add the following code -

Notice that we are using the Translate class of Xamarin Community Toolkit in the text fields Text="{xct:TranslateHeaderText}" . Also notice that we are using data binding in the picker and the button, we will create these properties in the next step.

Now, since we will be using the MVVM approach in this example, we will create a view model for our MainPage.xaml and set the binding context of the Main Page like this.
‍

In the above code, we have defined the Change Language command, populated the picker source, and set the default Selected Language to the first item of the list, which is English.

On the save button, click Perform Operation method will be executed, and set the culture according to the selected language.

Notice that we have used My Language class objects to create the list. Create a model class as below. Add the missing namespaces where you get error in the MainPageViewModel class.

Image credit: pikisuperstar on Freepik