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;
        }
    }

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()

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;
        }
    }

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>

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
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>
  • 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
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
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

Cool Coders
Follow me on social media and stay updated