preload
Jun 18

When creating an application it is often a good idea to add support for localization so it’s easy to update and add new languages to your application. For the PinCodeKepper app I only need to localize the text since all icons and graphics used are international with no text attached.

Windows Phone 7 have pretty good localization support where you add a resource file for each supported language and the application will select which resource file to use based on regional settings on the device.

This article describes how I added support for localization on the PinCodeKeeper app.

Set up resources

The first thing I did was to create a new folder called “Languages” and then I add a new resource file called AppResources.resx. Make sure that the access modifier for this file is set to public.

Then in the same folder I add a class called LocalizedStrings.cs that holds the AppResource.

You can see the LocalizedStrings.cs class below.

namespace PinCodeKeeper.Languages
{
    public class LocalizedStrings
    {

        private static readonly AppResources _localizedResources = new AppResources();

        public AppResources LocalizedResources { get { return _localizedResources; } }

    }

}

When this is done I add the LocalizedStrings namespace under the Application.Resources element in App.xaml.

You can see my App.xaml file below.

<Application 
    x:Class="PinCodeKeeper.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:Languages="clr-namespace:PinCodeKeeper.Languages"> 

    <!--Application Resources-->
    <Application.Resources>
        <local:LocalizedStrings xmlns:local ="clr-namespace:PinCodeKeeper.Languages"
                       x:Key="LocalizedStrings" />
    </Application.Resources>

    <Application.ApplicationLifetimeObjects>
        <!--Required object that handles lifetime events for the application-->
        <shell:PhoneApplicationService 
            Launching="Application_Launching" Closing="Application_Closing" 
            Activated="Application_Activated" Deactivated="Application_Deactivated"/>
    </Application.ApplicationLifetimeObjects>

</Application>

The app is now ready to be localized.

Localizing the app

Now we need to add all text used in the application to the AppResource.resx and replace the hard coded strings in the application with bindings to the resource file.

The image below shows what my AppResource.resx file looks like.

AppResource.resx

When this is done I go through my xaml files for my view and replace hard coded strings. The code snippet below shows how I bind the text for the page title with resources. Just do the same for the rest of the application.

 <TextBlock x:Name="PageTitle" Text="{Binding Path=LocalizedResources.PinCodeListView_Title, Source={StaticResource LocalizedStrings}}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="56" />

Localizing the ApplicationBar

If you try to bind resources for elements in the ApplicationBar the same way as described above you will get this error message when running your application: “AG_E_PARSER_BAD_PROPERTY_VALUE”. This is because the ApplicationBar is not a Silverlight control. I found that the easiest way to solve this issue is to remove the ApplicationBar from the xaml file and create it in code behind using the AppResource for text references.

Below you can see an example of how this can be done. Just call this method in the constructor after the InitializeComponent method is called.

        private void CreateApplicationBar()
        {
            ApplicationBar = new ApplicationBar();
            ApplicationBar.IsVisible = true;
            ApplicationBar.IsMenuEnabled = false;

            ApplicationBarIconButton btnAddNew = new ApplicationBarIconButton(new Uri("/Images/plus32.png", UriKind.Relative));
            btnAddNew.Text = AppResources.AppBar_AddNew;
            btnAddNew.Click += AddNewBtnClicked;

            ApplicationBarIconButton btnAbout = new ApplicationBarIconButton(new Uri("/Images/questionbook32.png", UriKind.Relative));
            btnAbout.Text = AppResources.AppBar_About;
            btnAbout.Click += AboutBtnClicked;

            ApplicationBar.Buttons.Add(btnAddNew);
            ApplicationBar.Buttons.Add(btnAbout);
        }

For my application the neutral language is English-US, to set this right click on your project in the solution explorer, select properties and click the Assembly Information button and select your neutral language.

Assembly Information

The application is now using AppResources for all text displayed, currently only supporting English-US. You can now run your application and check that it works.

Adding support for more languages

I now want to add German support in the application. I create a new resource file under the Languages folder called “AppResources.de-DE.resx. Notice how the official language code are added to the file name. In the AppResources.de-DE.resx you use the same resource names as in AppResources.resx but for the values you add the German translation.

It’s important when designing the application to keep in mind that some words and sentences are longer in some languages, try to have enough space for this. For example the German language needs approximately 40% more space than English.

The last step now is to add de-DE as a supported culture in the project file (PinCodeKeeper.csproj). Close your project and open that file in an text editor.

<SupportedCultures>de-DE
</SupportedCultures>

If you support several languages the supported cultures value must be semi-colon separated (de-DE;en-GB).

You can now change system locale in emulator and run to see that the correct language is displayed.

The images below shows the same screen in the PinCodeKeeper application displayed in English and German (To all the Germans out there I must apologize my mediocre German knowledge).

Using German language

 

Using English language

Follow me on twitter @PerOla

Share & enjoy
You can subscribe to my comments feed to keep track of new comments.

5 Comments to “PinCodeKeeper WP7 app – Adding Localization Support”

  1. holyfetzer says:

    You’re articles are great. It is like a small handbook for beginning WP7 programmers.
    Your German translation is very sloppy which of course is not your fault. If you like I would help you with the correct translation because German is my native language.

    Greetz
    holy

  2. Hi holyfetzer,

    Thank you for the comment. I know that my German isn’t any good and I would really appreciate help with the translation. I’ll drop you an e-mail :)

  3. Martin Dvoracek says:

    Thanks…really nice tutorial :)

  4. I’m glad you liked it Martin :)

  5. wayne says:

    If you’re involved in software localization projects, you might want to check out this online localization tool: https://poeditor.com/

No Pingbacks to “PinCodeKeeper WP7 app – Adding Localization Support”

Leave a Reply

Subscribe to my comments feed

Subscribe to my feeds Follow me on Twitter
DZone MVB