Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Part 7: Localizing the App

Download

Right click “Save as…”

Source Code: http://aka.ms/absbeginnerdevwp8
PDF Version: http://aka.ms/absbeginnerdevwp8pdf

In this lesson I'll explain how to localize your app ... that simply means that we can present the various bits of text in your app in different languages. For example, I may want to support both English speakers and Spanish speakers opening up the number of markets I could potentially sell my app in. Now, there's a bit more to selling in different markets than merely localizing my app, however this would be a big step in the right direction.

Our game plan in this lesson:

  1. We'll learn about the AppResources.resx file, and how it allows us to store name / value pairs that we can access in our declarative XAML code (or imperative C# code).
  2. We'll see how to create language and region specific variations of the file in Visual Studio.
  3. We'll learn how the Windows Phone 8 Operating System will choose the correct version of our AppResources.resx file based on the user's language and region.

 

1. Modify the AppResources.resx settings and bind to its values

If you expand the Resource folder of our PetSounds project, you'll see a file called AppResources.resx:

 

If you double-click to open it, it will open with a special designer in the main area:

 

This file is a series of Name / Value pairs. On the left are names of settings we will bind to. On the right, the settings for a given language. Which language? See the very last attribute:


ResourceLanguage

... is set to ...

en-US

"en" means "English". "US" is the region and in this case means "USA". Therefore, these settings should be used in the USA for English speakers. It's also the default AppResources file (you'll see the difference between the default and other languages / regions we support in just a moment).

The Name / Value pairs are mostly snippets of text we'll use throughout the app. However, the "ResourceFlowDirection" is a setting for which direction the characters should be presented. As you know, some languages are read from RightToLeft and this setting would be used throughout the app for this purpose.

As you can see, there's an ApplicationTitle setting set to "MY APPLICATION". What if I wanted to convert the TextBlock on our MainPage.xaml to utilize the AppResources setting? I would use a binding expression like so:

 

 

As you can see, I've replaced the hardcoded text to this binding expression:

Text="{Binding Path=LocalizedResources.ApplicationTitle,Source={StaticResource LocalizedStrings}}"

There's several things at work here that would require a lot of background explanation. For now, just know we're using a binding expression to bind data to an attribute, the Text. The Path attribute of the binding expression refers to the LocalizedStrings.cs file in our project. It creates an instance of an AppResources object which provides us access to the appropriate AppResources file based on the region and preferred language of the Phone's user. We'll see it all come together in a bit. The .ApplicationTitle references the specific Name entry in the AppResources.resx file. The Source attribute is bound to LocalizedStrings ... again, that's where the compiler can find the source of the LocalizedResources property ... it's part of the LocalizedStrings class in the LocalizedStrings.cs file.

For a more in-depth discussion of how all these ideas interrelate, I would encourage you to check our a great article on MSDN:

http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff637520(v=vs.105).aspx

 

 

2. Add support for a second language

At this point, we're only supporting English (in the USA). I would like to support the Spanish language no matter which region of the world the user resides. To do that ...

 

  1. In the Solution Explorer, right-click on the Project title PetSounds
  2. Select "Properties" from the context-menu

The Project Properties designer appears with the Application tab on the right already selected (if it's not, select it!)

 

Under "Supported Cultures", place a checkmark next to "Spanish".

Next, save the project and CLOSE the Project Properties tab. It's possible you will see the following message (depending on what you currently have loaded into the main area of Visual Studio):

 

If you see this, you can click the "Yes" button.

Now, in the Resources folder, you should see a new, second file appear:

AppResources.es.resx

 

 

The .es suffix to the AppResources file indicates the language, Spanish (es for "Espanol"). Double-click that file to open it in the main area:

 

 

By default, it's in English. With my son's help—he'sa third-year high school Spanish student—I translated the Values from English to Spanish. NOTE: The Names MUST BE IDENTICAL IN BOTH THE ENGLISH AND SPANISH VERSIONS OF THIS FILE. Do not translate the Names ... only the Values! The Names are tokens used programmatically. The values will be displayed to the end user:

 

 

3. Test the different language version of the app

After I've completed the translations, run the app (F5) and use the Phone Emulators' Start button, then I swipe to the alphabetical listing of apps, and scroll down the to the Settings app and tap to open it:

 

On the "system" page of the Settings app, I scroll down to "language+region" and tap that option:

 

 

On the "language+region" page, I change the click the Phone Language to edit it from "English (United States)" ...

 

 

... and in the list of languages and regions, I select "espanol (Espana)":

 

 

I then scroll to the bottom of the page to see the "restart phone" button. Note the message that says "restart required":

 

 

When I restart, I see the message "hasta luego":

 

 

At this point Visual Studio may disconnect ... that's ok, you don't need to be in Debug Mode in Visual Studio ... just focus on the Phone Emulator for now. The Phone Emulator will use the last deployed version of the app.

Once the Phone Emulator reboots, you can swipe over to the list of apps to see that they are all in Spanish.

Tap the "PetSounds" app ...

 

 

... and when the app opens, you can see the Title has been replaced with the title we entered in the AppResources.es.resx file.

 

 

Outstanding! Now, I would simply need to repeat these steps ... especially about creating Name / Value pairs and using binding expressions throughout the app in order to completely localize the app's user interface.

Unless you're bilingual, you'll probably want to re-trace your steps and reset the Phone Emulator to use English. Alternatively, you can completely shut down the Phone Emulator (in the Windows task bar, right-click, select Close) and Visual Studio will re-start the Phone Emulator with the default settings.

Recap

To recap, the big takeaway in this lesson was how to localize your app using AppResources files, the Project Properties, and some binding syntax. We saw how we could set the language and region of our phone to test our localization customizations as well.

Tags:

Follow the Discussion

  • Hi,

    I followed everything and my code works fine even when I tried it on the emulator. However, after using LocalizedStrings, my design view window does not display 'PET SOUNDS' any more. Also, in the App.xaml file, a blue wave line is under local:LocalizedStrings and the systems says 'the name LocalizedStrings does not exist in the namespace...'. 

    I am running wp8 sdk under Parallels Desktop and I re-installed sdk. This situation is still happening.

    Please help. Thanks.

  • @miller: Hi, you should have a file in your project called LocalizedStrings.cs ... that was added when you originally created your project.  Can you verify that you have that file in the root of the project?

    Second, at any point, did you rename the project or rename your namespaces?  Assuming you do in fact have the LocalizedStrings.cs file in your project, can you tell me what namespace the classes inside of it are sitting inside of?

     

  • @BobTabor: Hi, Bob. Thank you for your reply. I have LocalizedStrings.cs and I don't think I changed it. Also, it's in the root of the project. 

    My project is called PhoneApp1, so my LocalizedStrings.cs contains the following statements:

    using PhoneApp1.Resources;

    namespace PhoneApp1

    {

        ///<summary>

        /// Provides access to string resources.

        ///</summary>

        publicclassLocalizedStrings

        {

            private static AppResources _localizedResources = new AppResources();

     

            public AppResources LocalizedResources { get { return _localizedResources; } }

        }

    }

    Also, the error line in App.xaml is:

    <local:LocalizedStrings xmlns:local="clr-namespace:PhoneApp1" x:Key="LocalizedStrings"/>

     

    Actually, this thing happened again when I tried the next video which is part 8. I still have the localizedstrings error, my design view only display "MY APPLICATION" and "page name", but nothing else. However, it works fine and it can run on the emulator. 

  • @miller: Try this.  Shut down visual studio.  Heck, just reboot the computer, take a 5 minute break and get a cup of coffee ... on me ... Smiley  Reload the solution and see if you still get the intellisense message.  If so, then you may look at the XAML above it ... perhaps it's not well formed?  If it all compiles and works, then it sounds like it's simply a design-time behavior / bug in the Intellisense or XAML parser.  "If it works, ship it" and ignore the design-time squigglies.

  • @BobTabor: Thank you a lot. I'll try it. After I checked my code before asking, my initial guess was that there may be something wrong when I install the sdk. I found people got the similar issue when they were using VMWare or Blend, but not in Parallels. Anyway, thank you a lot. I'll go ship it.

  • @miller: I should have thought of this before ... if you're running in a virtualized environment, there will be a performance degradation in terms of memory and processor.  Intellisense is probably THE MOST processor and memory intensive task Visual Studio performs, so occasionally you'll get erratic results.  It happens to me, too.  I'm running a Mac Pro w/ dual quad core Xeon Nehalim processors and 16GB of memory with VMWare Fusion 5.x.  Giving my VM's as many cores and memory as I can, I still occasionally see some performance issues, i.e., Intellisense catching up.  It's gotten A LOT better through the years and I know they're continuing to improve performance.

  • @BobTabor: I think it explains everything! Thank you. I'll try to install a dual system today and see whether it solves the issue. Smiley

  • @BobTabor: I've installed a dual system and I've got the design view working correctly. Thank you again.

  • CameronCameron

    Hi,

    I'm having a few problems and i was wondering if anyone could help. I decided I wanted to expand upon this Soundboard idea and see if i could add a ton of new sounds to it. I created a simple UI that was just a grid with split into 3 columns and 4 rows. Each cell had a button in it and a MediaElement object. So I had twelve buttons and twelve MediaElements each were linked using event handlers in the same way that was shown in one of the beginning videos. I don't have windows pro so I have to use my Lumia 920 to test my soundboard. My problem is this: When the app starts on my phone the top 6 tiles all work playing the sounds that they are connected to, but the bottom 6 do not work. I did some research and it seems as though there is a limit to the MediaElemets that can be active because of system memory. So trying to fix that I tried to use the event handler in the way you mentioned to use a single MediaElement to play all of the different .wav files I have. The problem i have is that i cannot seem to find a way to associate a new source .wav file to the existing MediaElement in the C# code. If you have any insight to how I could go about this or to what is hindering the playback of my .wav files please let me know!

    Also, I downloaded your code for the lessons to try and figure out how you got the meow sound assigned to the meow button but even in the file that says the code is complete, the meow button still quacks. I'm not sure if this is intended or not it is just something i noticed.

    I'm well versed in Java and VB but am trying to learn XAML and how it works with C#.

    Thanks to anyone that can help!

  • Clint RutkasClint I'm a "developer"

    @Cameron: Hey Cameron, this should be a question you should ask over at the dev windows phone forums or stack overflow.  We're trying to keep the comments limited to the topics covered in each video.

    For the sounds, we just set the Source property to the MediaElement on SelectionChanged.  We use a ViewModel that we bound the LongListSelector to store the relevant data and then cast the SelectedItem to a SoundData item.

  • @Cameron: Meow still quacks in the code ... yeah, sorry ... I re-recorded that video and things got out of sequence a little.  Just need to make the appropriate change.  That was not intended.

  • SaifSaif

    Hey,

    I have this app that I am targeting for WP7 as well as WP8. The thing is that things used to be different in times of WP7, so I cannot find the AppResources.resx file in the Resources. Even if I upgrade the project to WP8. Any suggestions as to what I should do?

  • Clint RutkasClint I'm a "developer"

    @Saif: things get complicated when sharing between WP7 and WP8.  Key things that need to be in certain file paths are different so doing file links won't work for everything.  Things seemed to just work back when I did an upgrade for a few things.

  • DHCDHC

    Never mind! My experiment did work after all! Thanks, anyway.

  • DHCDHC

    I was able to change the buttons (Quack and Meow) using binding expressions for each language, but I still don't see how to change the Display Name (set in the WMAppManifest.xml file) for the app's main tile. Is there a way to use a binding expression to set the Display Name?

  • @BobTabor

    In Windows and Web applications we can change the locale for the current thread only for the single app. What if I want to change only the region settings only for Pet Sounds but not for other applications in the phone?

    These lectures are really good for beginners. I am quite new to WP, thanks to you for these videos.

     

  • @isyedakhtar: In that case, assuming you want to support one and only one language you would merely hardcode all strings / etc. to that single language.

    Assuming you wanted to support MULTIPLE languages allowing the end user to select the region / language, you could offer some Settings screen, then programmatically set the culture for the current thread using a combination of the CultureInfo.CreateSpecificCulture method and the CultureInfo.DefaultThreadCurrentCulture Property ... for a quick example, see this page:

    http://msdn.microsoft.com/en-us/library/system.globalization.cultureinfo.defaultthreadcurrentculture.aspx

  • Clint RutkasClint I'm a "developer"

    @isyedakhtar:  you'll want to do something like, you have to leave the page then go back to it for it to fully kick in.  At least that is my experience for playing with the Coding4Fun toolkit.

    Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo(myCultureString);
    Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo(myCultureString);

  • @BobTabor:Thanks Bob

     

  • @Clint:Thanks dear so it is same as we do in web or windows apps

  • ShenzhongweiShenzhongwei

    Great article!

    At the same time I also want to point out a tiny problem: "The Project Properties designer appears with the Application tab on the right already selected (if it's not, select it!)"

    might be:

    ... with the Application tab on the LEFT already selected ...

  • ShenzhongweiShenzhongwei

    And the image below the sentence:

    "I then scroll to the bottom of the page to see the "restart phone" button. Note the message that says "restart required": "

    might also be incorrect.

  • AdelAdel

    Please, Can you upload the assets folder on another site.. I Can't download it,
    Thanks :)

  • Clint RutkasClint I'm a "developer"

    @Adel: I just tried to download them and they worked fine.  Are you sure you're not behind some firewall that may restrict zip files?

  • Hi Bob,

     

    i do understand the concept of binding data from the video. But in my case, after i removed the "PET SOUNDS" text by putting in (<TextBlock Text="{Binding Path=LocalizedResource.ApplicationTitle,
    Source={StaticResource LocalizedStrings}}"), there is no text appearing on the screen at all. In the video, I see you have the default name (MY APPLICATION) showing up. Even if i change the value of ApplicationTitle in AppResources.resx, it doesn't reflect in when i debug it, in the emulator. It isn't there otherwise too.

     

    Thanks in advance Smiley

  • Clint RutkasClint I'm a "developer"

    @nken: did you change anything else between our version and yours?  Like maybe in the App.xaml.cs file?  can you compare our sample against yours?

  • Doctor WhoDoctor Who Picture is of Tom Baker, who played the Doctor, from 1974 to 1980.

    Excellent! I've often wondered how to localize my apps. I appreciate this!!

  • DmitryDmitry

    How to localize the app title (in the applications list at start screen)?

  • @Dmitry: The full steps required to create a localized app title is documented here: http://msdn.microsoft.com/en-US/library/windowsphone/develop/ff967550(v=vs.105).aspx

    Patrick Gettzman created a tool to make this very easy.  See: http://patrickgetzmann.wordpress.com/wp7-localize/

    Also, instead of creating and maintaining multiple resx files manually, I would recommend using the Multilingual App Toolkit: http://channel9.msdn.com/Shows/Inside+Windows+Phone/IWP65-Localization-Made-Easy-with-Multilingual-App-Toolkit

  • DmitryDmitry

    @CamLerum, Thank you very much!

  • DmitryDmitry

    @CamLerum, how to include dlls to project (sorry, i am beginner)?

  • KarthikKarthik

    Hey Bob, first of all incredible videos. I wanted to ask you if we want to set multiple languages to our app, like you added Spanish, do we have to manually translate it? Is there no VS tool which can help our app do that automatically or something?

  • Clint RutkasClint I'm a "developer"

    @Karthik: check out http://channel9.msdn.com/Shows/Inside+Windows+Phone/IWP65-Localization-Made-Easy-with-Multilingual-App-Toolkit

  • @Dmitry,

    To add the DLLs, you need to select 'add exiting items' and reference the DLL that Patrick's tool created.  If you use those DLLs and follow the steps in the section towards the bottom titled "To use the localized resource strings in your Windows Phone app"on http://msdn.microsoft.com/en-US/library/windowsphone/develop/ff967550(v=vs.105).aspx, you should be good to go.

  • Vivek BhedaVivek Bheda

    Hello Bob

    First of all i would like to thank you for such tutorial series for beginners I have followed your tutorials and i succeeded to implement Hindi language in it But I am not able to display Gujrati text in my application title. i also changed Application Title to text મારું સંગીત "AppResources.gu-IN.resx" but still i am not able to see it i have changed my emulators setting,too. please help me to overcome with this

  • HeitorHeitor

    And if I created a Visual Basic Application? There's no 'LocalizedStrings.cs'... The translations only can run in 'C' developments?
    Thank you for reading...

  • @Vivek Bheda: Sorry, I'm only familiar with the English language.  I would recommend ask that question here: http://social.msdn.microsoft.com/Forums/en-US/home?forum=wpdevelop&filter=alltypes&sort=lastpostdesc

     

    @Heitor: Sorry, I've never tried that.  Typically you change strings in the Project Properties for Visual Basic projects ... I would look there to find the equivalent.  You might also be able to use the My namespace to reference them.

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.