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.

Sign up to stay updated for any new post

Cool Coders

Let’s add String resource file and translation extension to our app.

Here, we will create the project and make the user interface load the appropriate language text 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. Chose .Net standards as shared project.

  • On a page of the app, add a label which will show the test translated.
  • Create a resource file add a few strings in it.
  • Create a new markup extension which will serve in translating the app (I got this extension from this awesome example on github).
  • Add the name space of your markup extension to the xaml page with the label and call it on the label.

Here is the source codes for the page and extension.

[ContentProperty("Text")]
   public class TranslateExtension : IMarkupExtension
   {
       public string Text { get; set; }

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

           var assembly = typeof(TranslateExtension).GetTypeInfo().Assembly;
           var assemblyName = assembly.GetName();
           ResourceManager resourceManager = new ResourceManager($"{assemblyName.Name}.Resources", assembly);

           return resourceManager.GetString(Text, CultureInfo.CurrentCulture);
       }
   }
<?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>

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

3 Replies to “Make your Xamarin.Forms app Multilingual Automagically”

  1. Hi Doumer,

    Does it support to the Arabic languages? If yes then what about RTL suport for the Xamarin.forms Apps.

Leave a Reply