Make your Xamarin.Forms app Multilingual Automagically

Make your Xamarin.Forms app Multilingual Automagically ✨?

Hi everyone, Imagine you could translate your existing cross platform mobile application into more than 20 different languages just by a few mouse clicks and have these languages automatically displayed on the user interface depending on which language the user’s device is running on. I was looking for a means to make my Xamarin.Forms mobile app multilingual without much efforts as I just stated above, I asked google as usual and went through several blog posts, a few channel 9 videos and documentations, and found a way to do this very very easily. I came across a Visual studio extension which permits you to translate your resource files easily, this tool is not very new and also, it was not very easy to make it work and perform its magic. Now, I’ll show you how to use this tool and overcome some problems you may encounter when getting started with it. We will create a simple project and implement the multilingual feature just for demo purposes.

Here is the sample code.

Let’s Add the Code necessary to handle Translations in Our App.

Here, we will create the project and make the user interface load the appropriate language resources depending on the user’s current language. You can create a demo application, or use your existing app. I created a new app for demo purposes.

#Update : I recently updated this post with a better implementation for this feature. Here is the updated portion.

We will create first a static class with extension methods for the type string this will permit us to not only translate via XAML but also in C# code.

public static class StringTranslationExtensions
    {
        /// <summary>
        /// Translate the text automatically
        /// </summary>
        /// <param name="text"></param>
        /// <returns></returns>
        public static string Translate(this string text)
        {
            if (text != null)
            {
                var assembly = typeof(StringExtensions).GetTypeInfo().Assembly;
                var assemblyName = assembly.GetName();
                ResourceManager resourceManager = new ResourceManager($"{assemblyName.Name}.Resources", assembly);
                var lg = CultureInfo.CurrentCulture.TwoLetterISOLanguageName;
                return resourceManager.GetString(text, new CultureInfo(lg));
            }

            return null;
        }
    }

public static class StringTranslationExtensions

{

/// <summary>

/// Translate the text automatically

/// </summary>

/// <param name="text"></param>

/// <returns></returns>

public static string Translate(this string text)

{

if (text != null)

{

var assembly = typeof(StringExtensions).GetTypeInfo().Assembly;

var assemblyName = assembly.GetName();

ResourceManager resourceManager = new ResourceManager($"{assemblyName.Name}.Resources", assembly);

var lg = CultureInfo.CurrentCulture.TwoLetterISOLanguageName;

return resourceManager.GetString(text, new CultureInfo(lg));

}

return null;

}

Using this class is extremely simple. Here is an example of using it in C# code.

//Translate to the appropriate language
string greetings = "Hello".Translate()

1 2	//Translate to the appropriate language string greetings = "Hello".Translate()

Now to use it inside XAML, we need a XAML extension which we will call appropriately. Here is the extension.

[ContentProperty("Text")]
    public class TranslateExtension : IMarkupExtension
    {
        public string Text { get; set; }
        protected Func<string, string> _aditionalCheck = (x) => x;

        public object ProvideValue(IServiceProvider serviceProvider)
        {
            if (Text == null)
                return null;

            var text = Text.Translate();

            text = _aditionalCheck?.Invoke(text);

            return text;
        }
    }

[ContentProperty("Text")]

public class TranslateExtension : IMarkupExtension

{

public string Text { get; set; }

protected Func<string, string> _aditionalCheck = (x) => x;

public object ProvideValue(IServiceProvider serviceProvider)

{

if (Text == null)

return null;

var text = Text.Translate();

text = _aditionalCheck?.Invoke(text);

return text;

}

How to use this XAML extension ?… Very easy, check this out. 🙂

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Multilingual"
             xmlns:maskupExt="clr-namespace:Multilingual.Extensions"
             x:Class="Multilingual.MainPage">

  <Label Text="{maskupExt:Translate Hello}" />
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:Multilingual"

xmlns:maskupExt="clr-namespace:Multilingual.Extensions"

x:Class="Multilingual.MainPage">

</ContentPage>

As easy as that, and on every control, you will have the translated text appropriately. Now let me show you to install the tool to automatically translate your resource files. And how to use this tool.

Install the extension, configure it and the project properly.

Here, I’ll guide you through the steps required to make the extension work properly, you will have to go through most of these steps only once and after, you will only have to translate your strings with a few clicks. You need to install the Multilingual App Toolkit extension, and follow these steps.

Create an azure translator text API resource, which you will use here

azure translator text api

Take down your API key.
Open your credential manager in Windows control panel
Select add generic credentials.
Add exactly the same credentials as shown below, your password is your Translator key you kept earlier.

Open your .Net standard .csproj file in an editor and modify it as follows, this will depend on if the neutral language is set already.

<PropertyGroup>
  <TargetFramework>netstandard2.0</TargetFramework>
  <NeutralLanguage>en-US</NeutralLanguage>
</PropertyGroup>

<TargetFramework>netstandard2.0</TargetFramework>

</PropertyGroup>

Select your shared project, go to the tools menu and select enable multilingual toolkit
Right click on your shared project, click on Multilingual app toolkit and select add translation languages.
Select your language choices, after this .xlf files will be created in your project.
Change the .xlf build actions to XLIFF Localized file
right click on your project, go to Multilingual App Toolkit and select Generate machine translations.
Build your project and, you will have all your string resources translated to the language of your choice.

French

After all of these steps, you should be able to run your app and have the text on the label translated appropriately. You will not need to configure that much for your next translations, just with a minimal effort, you have all of your string resources translated to the languages of your choice and the correct string resource will be used on the UI automatically depending on the user’s default language.

English

If you liked this post, or it was useful to you, please ? like it, share it on twitter, facebook or other social media… in case you want to get updated on any new useful post, follow me on twitter and like my page on facebook.

Get started with building MVVM applications with ReactiveUI and Xamarin.Forms Here.

Here is the sample code.

Sign up to stay updated for any new post

[zc4wp_za2]

Follow me on social media and stay updated

6 comments

Dnyaneshwar
March 27, 2018
Hi Doumer,
Does it support to the Arabic languages? If yes then what about RTL suport for the Xamarin.forms Apps.
Loading...
- Doumer
  March 27, 2018
  Yes Dnyaneshwar, it supports arabic language, but for RTL in Xamarin.Forms, you should implement it as an additional functionality, Here is a link to where you can get help to accomplish this : https://forums.xamarin.com/discussion/61652/rtl-layout I hope it helps.
  Loading...
- Doumer
  April 13, 2018
  Using Xamarin.Forms 3.0 you can accomplish this, check this blog post https://blog.xamarin.com/right-to-left-localization-xamarin-forms/?utm_campaign=Weekly%2BXamarin&utm_medium=email&utm_source=Weekly_Xamarin_151
  Loading...
Josef Fröhle
June 5, 2020
Hi Doumer,
can you please tell me how i get my Resources.de.resx Resources.es.resx translated?
I have after the steps you show now my ressources files and the xlf files, but I don’t get the translation of it. It shows me only the english version, while the system language is German.
Loading...
- Damien Doumer
  June 6, 2020
  Hi Josef,
  Thanks for your interest in this article.
  You have difficulties using the multilingual app toolkit or you couldn’t load translated resources in your app ?
  In case you can’t get them translated, and you followed all the steps above, I guess you had problems with the toolkit. In that case, I created a console app to translate your resource files automatically: Check it here: https://github.com/DamienDoumer/Resx-Translator,
  It uses Google translations instead, but you could modify it easily to use Bing.
  Loading...
- Damien Doumer
  June 6, 2020
  Also, I just updated the demo application.
  The resx should be produced from your xlf, the toolkit should have caused you some issues. Check my first reply for an alternative solution.
  Loading...