Multi-Language Add-In for Visual Studio

Quick Tour (Windows Store Apps)

Activating the Multi-Language Add-In

This menu item activates the Add-In and shows it in a tool-window. You can dock this window at the side of the main Visual Studio window, or drag it into a tab group, like other tool windows in Visual Studio. It's probably best to place it at the bottom, in a wide format.

Selecting a project

A Visual Studio solution may contain multiple projects. The Multi-Language Add-In usually works with a single project. To get started, you must first select the project. There are two ways to do this.

from a dialog	When you select the Add-In from the tools menu, it will probably show a list of the projects in a dialog. Simply select the project and click on OK. This dialog can be disabled, so if somebody else has already worked with the Add-In, it might not appear.
from a drop down list	At the top of the Add-In's main window, just below the toolbar, there is a drop down project list You can select a different project at any time from this list.

Initialising the project for localization

When you select a Windows Store project, the Add-In will automatically detect: Any languages which are already defined in the project. This is determined from the subdirectories in the directory Strings, containing a file called Resources.resw.
The default language of the project. This is defined in the input mask for the Package.appxmanifest (although it is actually stored in the project file). If the default language of the project has not been defined, then the Add-In will show a dialog with a list of languages. You must select the language used for the original texts in the project.

This dialog will probably be followed by second dialog, with options for scanning the project. Just click on OK to accept the default options.

Scanning the project

The Add-In will now scan the project. This is performed in three phases:

The results of the scan are displayed in three separate grids in the Add-In's window. You can switch between these grids using the tabs at the bottom of the window.

Adding a second language

To add a new language to the project, click on the symbol on the Add-In's toolbar.

Select a new language from the list. The buttons below the list change the way the list is displayed. In particular, the button English simply shows the language names in English. It does not select English in the list. If the Microsoft Translator supports both the default language and the selected language then the option Get translations from Microsoft Translator is enabled. Similarly for the Google Translator. Select one of these options if you want the texts to be translated automatically using an online service. Click on OK to add this language to the project.

Some languages, such as German or French, are considered to be neutral languages. The regional variations, such as German(Germany), German(Austria), French(France) or French(Canada) are referred to as specific languages. You should usually start with the neutral language.

After adding the second language, the Add-In will

• add a new column to the grids for the new language
• search for translations of common texts such as OK and Cancel in the Global Translations Database
• if you selected the Microsoft or Google Translator option, then it will translate all other texts using the online service

Now we will take a closer look at the three grids.

The controls grid

To see the controls grid, make sure that the controls tab at the bottom of the window is selected. The grid should look something like the following screenshot.

By default, the text attributes are shown in a hierarchical manner, showing the structure of the XAML file. As an alternative, you can view the text attributes for each XAML file in a flat list. To select this mode, click on the button on the toolbar and then select Flat list from the menu, as shown below:

The controls grid will then look something like the following screenshot.

If an element in the XAML structure does not have a name, then it is assigned one by the Add-In. As you can see, these names have the form ML_0000 with 0000 is a numeric value.

To the left of each name of each text attribute there is a check box which indicates whether the attribute has been selected for translation. Initially, none of the attributes are selected. To select an attribute, simply click on the check box. Alternatively, you can select the line and hit the space bar.

As you can see, the grid has a column for each language in the project. Once a property has been selected, you can enter a translation simply by clicking on the cell in the appropriate column and entering the translation. If you are able to translate the text yourself, this is the easiest way enter translations.

If a text is shown in light grey, then it is the text which would be retrieved at runtime via the resource fallback mechanism. In general, if a text is not defined for a specific language (e.g. Spanish(Mexico)) then the text for the neutral language (e.g. Spanish) would be used. If this has not been defined, then the text for the default language would be used.

When you select a text attribute, the XAML code may be modified, so that the attribute is initialised from a resource file. The exact modification depends on several factors, as described below:

Not all texts in the XAML file require translation. The screen shot on the right shows some texts which you might not want to translate.

The best thing to do is to hide these texts. The first step is to click on the sun symbol at the left hand margin. The sun symbol is replaced by a moon symbol . The second step is to click on the toggle button on the toolbar, which has either a moon symbol or a sunset symbol .

The symbol on the toolbar is replaced by the sun symbol and the hidden texts are actually hidden. If you click on the button again, then the hidden texts are displayed once more.

The best practice is to go through every text and either:

• select it for translation or
• hide it.

This makes it easier to maintain the localization in future versions of your application, because you can easily identify new texts in the project.

The source code grid

To see the source code grid, make sure that the source code tab at the bottom of the window is selected. The grid should look something like the following screenshot.

As in the controls grid:

• you can select a string for translation by clicking in the checkbox to the left of the line number. In contrast to the controls grid however, none of the texts are selected automatically.