lundi 14 janvier 2019

[how to] Using Multilingual App Toolkit to translate your UWP application

In this post we are going to see who easy it is to make your application multilingual using Microsoft Multilingual App Toolkit to translate your UWP application.

First you need a class that will allow us to get the translated string by using the ResourceLoader property.


 public class MyLocalizedClass
 {
        private static ResourceLoader _localizedResources;

        public ResourceLoader LocalizedResources
        {
            get
            {
                if (_localizedResources == null)
                {
                    _localizedResources = new ResourceLoader();
                }

                return _localizedResources;
            }
        }


        public string this[string key]
        {
            get
            {
                if (_localizedResources == null)
                {
                    _localizedResources = new ResourceLoader();
                }

                return _localizedResources.GetString(key);
            }
        }
}

You will need to bind all of the text in your application to your resource file, you can do this as follow:


         <TextBlock
                    x:Name="Header"
                    Style="{StaticResource TitleTextBlockStyle}"
                    Text="{Binding Path=[MyApplicationHeader], Source={StaticResource LocalizedStrings}, FallbackValue='MyApplicationHeader'}"                    TextWrapping="NoWrap" />

My MyApplicationHeader key will need to be added in resources.resw with a value as follows:



Next we will need to structure our application to with a folder string at the root of the app, this folder will also need to add a folder en and then add a resource file that we will call: Resources.resw

It should look as follows:




Next you will need to install Multilingual App Toolkit v4.0 (VS 2017), which you can find here. Once installed in Visual Studio under Tools your should see Multilingual App Toolkit:

you will need to Enable selection in the Multilingual App Toolkit.


Next you are going to need to install the Multilingual App Toolkit 4.0 Editor.

Now we are going to add translation languages to the application, again make sure you have enable Multilingual App Toolkit in your UWP application next click on the project, select Multilingual App Toolkit and click on Add translation as follows:



I will add french:



A new folder should be created inside you Strings folder:


We are going to right click on the project and use automatic translate from English to French using machine translations:



If you select Generate machine translations and you have errors most likely the issue is that you don't have the correct credentials to use Cognitive Services, you can fix this by reading this.

Once you have fixed your credential issues or if you don't have any issues you should see that the resources file under fr has been updated with french translated strings:



Now to test this new language you can force your application in French by overriding the application language as follows:


 Windows.Globalization.ApplicationLanguages.PrimaryLanguageOverride = "fr"

Happy coding!