1. Download this project and add it to your solution : http://code.msdn.microsoft.com/wpapps/Language-Neutral-Resource-5894846e.
2. Edit the string table in the AppResLib.rc file to set your app name, etc.
3. Build this project and copy the resulting dll in your WP project. This will be the default values (neutral language)
4. Change the values in the AppResLib.rc file for a specific language (for example french) and build again the project.
5. Rename the resulting dll to AppResLib.dll.040c.mui and copy it at the root of the WP project, next to the dll. The “04OC” is specific to “French” and should be set to the value matching the target language. A full list is here : http://msdn.microsoft.com/en-us/goglobal/bb964664.aspx
6. Do it again for as much language you want
7. Select all the *.mui files and the AppResLib.dll file and set their build type to content in the properties Windows.
8. Update your WMAppManifest.xml file and set the app name to this value : @AppResLib.dll,-100 . The value will then be taken for your file, depending of the user language, at the offset 100 in the string table.

Not really obvious but this works fine

If you want to see this feature in action, it will soon be available in our last app “Say it With Flowers” !

PS: the whole procedure is describe in depth on MSDN but I am sure you love this recap

PS2: the localized app name won’t be displayed on the Store page because of a bug in the Store : http://blog.webrox.fr/?p=61

It also can be useful when you need to store a label used on a lot of place in your application.

The .Net resources system is described all around the web and today we are going to explore a little the WinJS one.

In Metro app, the behavior is the same than in .NET, the values will be retrived depending of the current machine language.

Adding a resource file

The first thing is to add a folder for your resources. The folder name is what permits the resource engine to chose between langages. In our case, let’s create a ‘fr-FR’ folder. You can do it in place this folder anywhere in your solution, not necessary at the root of it.

Now, let’s add a resource file : choose an unique item name, then right-click on the previously created folder, choose “add an item” and select “Resources File (.resjson)”.

In WinJS, resources are JSON files easy to edit. Each value is represented by a key and the value itself. There is no editor like we used to in .NET :
[javascript]{
"greeting" : "Hello",
"_greeting.comment" : "A welcome greeting.",

}[/javascript]

If you want to add another language, just create another folder with the correct name and copy/paster the resource file in it with the same name.

Retrieve the value with Javascript

WinJS provide an helper class to retrieve the values : ResourceLoader.

The constructor takes as a param the name of the resource file. I played a lot with it and it seems that you don’t have to provide the full ‘folder path’ of the resource file. It means that for the previous example we create an instance of it like this :
[javascript]
var rS= new Windows.ApplicationModel.Resources.ResourceLoader("/strings");

//AND NOT :
//new Windows.ApplicationModel.Resources.ResourceLoader("/i18n/strings");
[/javascript]

Once you have an instance of it, you use the getString method providing the key of the seeked value as a param :
[javascript]
var theValue= rS.getString("greeting");
[/javascript]

Keys are string value and so you can construct them at runtime very easily…

Retrieve the value in the HTML view

WinJS comes with an automatic way to push the values from the resources files directly to the HTML controls’ properties.

You have to use the data-win-res attribute and define the resource key to use on each control.
As this time, you can only use textContent specifier.
Here is an example retrieving the value of ‘greeting’ in the resource file and pushing it as the inner text of the “span” element.
[html]
<span data-win-res="{textContent: ‘greeting’}">
[/html]

Once the HTML element defined, you have to tell the resource engine to process the HTML element by using the WinJS.Resources.processAll. This another processAll method but in an another namespace. As a param you provide the element to process. Its child elements will be processed too. If you provide none, the whole document is processed.
You so have to do this each time you load an element.

In the MSDN example, it is done once when the app is loaded and I think this can be a good practice :
[javascript]
WinJS.Application.onloaded = function(){
WinJS.Resources.processAll();
}[/javascript]

Links to read

• How to manage string resources on MSDN
• data-win-res attribute on MSDN
• WinJS.Resources.processAll function

When you start an application, you want and need it to be compliant with this theme and one main part of it are icons.

What you may not know is that there is already a lot of icons available for you out of the box in any Metro app.

Let’s discover them !

I don’t get the picture…

When I first looked for the icons, I first searched for pictures. I found none of them.
So I digged a little more on the sample and I found out that icons where here as a Font.

This is in fact a really good idea for several reasons :

1. Fonts are vectorial.
2. You can choose the colors of the icons just by changing a parameters.
3. No need to add a lot of images files to your project
4. It’s really easy to use/code !

Also, the font name is not the same in an HTML5 project than in an XAML one :

• an HTML5 app will use “Segoe UI Command” as Font family but “Segoe UI Symbol” as local name
• a XAML app will use Segoe UI Symbol

Which icons are available ?

Each icon is represented by it’s hexadecimal value. These values are the same in both langages.

XAML

My first idea was to create a XAML app which will list them all and display them in a GridView.
It’s pretty easy to do, here is the C# which creates the list :
[csharp]
//create a list of my custom class CharAvailable
List<CharAvailable> characters = new List<CharAvailable>();

//we will not cycle trough all the font values
var starter = 0xE10F – 200;
var ender = starter + 1000;

//Create the character list
for (int i = starter; i < ender; i++)
{
characters.Add(new CharAvailable() {
Value = string.Format("0x{0:X} : ", i),
CharToDisplay = (char)i });
}

//Set it as datacontext
DataContext = characters;
[/csharp]

And the XAML to display each item :
[xml] <TextBlock
Text="{Binding CharToDisplay}"
FontFamily="Segoe UI Symbol"
FontSize="34"
/>[/xml]

HTML5 / Javascript

When you want to display an icon in your HTML5 app, you just need to set the font family name to “Segoe UI Command” and to use the hexadecimal representation of the icon. Here is an example :
[html]
<p style="font-family: "Segoe UI Command";src:local("Segoe UI Symbol");">&#E195</p>
[/html]

Also, these icons are used by commands and you can then set the name of the icon as a shortcut instead of the hexadecimal value. For example here is how you can define a ‘favorite’ app bar command:
[javascript]
{id:’favorite’, icon:’favorite’, section: ‘selection’, onclick: iLoveIt}
[/javascript]

The full list of shortcut is available in the ui.js file (thank you Tom for the tip!).

I also created a PDF which list them all for easy retrieval. You can find it here.