Advanced Windows Store Apps Development – Part I

Session - 2

Windows Store UI Localization

 Objecti ves

 Define and describe Localization

 Describe the process to implement localization in Store apps

 Explain the process of integrating resource files in Store apps

© Aptech Ltd. Windows Store UI Localization/Session 2 2

 Understanding Localizati on

Localization is the concept of translating the content to a specific language by means of multi-
lingual support. Visual Studio Integrated Development Environment (IDE) is built-in such a way
that it can be used to develop applications for various countries with their local language
support.
In Windows Store apps, Visual Studio has introduced a new localization technique called Hub
and Spoke. The hub and spoke model is designed to provide a home screen for the app to which
all other screens will navigate in a linear manner.

Hub:

A Hub control helps you create multiple Spoke:

sections or multiple types of data all under
one core. XAML and C# include support for
the Hub control.
Unlike the ListView control which
enables you to render and display
homogeneous data, the Hub control is
useful for data that are of various kinds.
A Spoke is a set of connections arranged
similar to a wheel through which traffic
moves along spokes connected to the hub
at the center.
Whenever a user wishes to check for
information, he/she can click the spoke.
When the user wants to come back to main
page again, he/she needs to select the hub.
Thus, a spoke is a central or pivotal node of
information or contents.

© Aptech Ltd. Windows Store UI Localization/Session 2 3

 .NET Localizati on [1-2]

CultureInfo.CurrentCulture is the property that is used to set the culture of an app to current
culture. Before checking an app for localization, the developer must develop an app and change the
language through the Control Panel to test for localization.
To set the language:
Open Control Panel, click Language and Region, and navigate to Language.

© Aptech Ltd. Windows Store UI Localization/Session 2 4

 .NET Localizati on [2-2]

For packing and deployment, the .NET Framework uses the Hub and Spoke model. The main
assembly for the app is the Hub, which holds the code to be executed. The satellite assembly is
connected through spokes and hence, coding is not required.

Note - For each app, implementing localization creates a new assembly namely, Hub,
which has the local language specifications.

© Aptech Ltd. Windows Store UI Localization/Session 2 5

 Localizing Your App [1-6]

Generally, to globalize an application, there is no need for any code for its cultural settings, but in
case of Localization, cultural settings must have their own code and images to translate the app.
Following figure shows an example of how localization occurs:

String Data
When a user develops a store app, it may contain more text than images. If the app is required
to localize the text in the app, the text must be placed inside the associated resource files. These
resource files should be created in the directory named as strings and identified through an
extension .resw. Each language must be created under its own language folder, under the
respective strings folder.

© Aptech Ltd. Windows Store UI Localization/Session 2 6

 Localizing Your App [2-6]

Images
Localizing images is easier than localizing the text. A folder named images is created and then, all
the images are stored in this folder and the same name is given to the image files kept in the
different language folders. Following Figure shows how to create the folders and the image files:

If users develop Store apps without any text or culture

info, then there is no need for localizing the app. To
localize the images of the apps, the images must be
placed inside the resources folder as shown in the
following figure. It shows the currency code for each
country placed under its own resource folder namely,
en, fr, and ja.

Note - When the user develops a localization app,

the size of the app will increase if there are more
images.

© Aptech Ltd. Windows Store UI Localization/Session 2 7

 Localizing Your App [3-6]

Date and Time

Date and Time data are available in different formats as shown in the following figure.
The user should not change the date and time manually while developing the apps.
Windows.Globalization.DateTimeFormatting.DateTimeFormatter is a
date and time format class that allows the user to customize the date and time when the
user develops an app.

© Aptech Ltd. Windows Store UI Localization/Session 2 8

 Localizing Your App [4-6]

Instead, make use of the

Windows.Globalization.DateTimeFormatting.DateTimeFormatter class.
Whenever the user develops an app using DateTimeFormatter class, he/she has to convert it
as a string value to get the output, as shown in the following statement:

DateTimeFormatter df = new DateTimeFormatter(“shortdate”);

Now, use this formatter to format a date:

var sdate = shortDateformatter.Format(DateTime.Now);

The user can send these values in string format to any constructors. The user must make
sure to avoid the formats that are not available in all languages.

© Aptech Ltd. Windows Store UI Localization/Session 2 9

 Localizing Your App [5-6]

The users can use the following formats while developing their app:

Shortdate Shorttime Hour

Minute Second Day

Month Year Dayofweek

Day Month Year

© Aptech Ltd. Windows Store UI Localization/Session 2 10

 Localizing Your App [6-6]

Numbers and Currencies

The users can convert string to number or number to string using numbers and currency
formatter classes. Following formats can be called while developing their apps:
CurrencyFormatter
PermilleFormatter
DecimalFormatter
PercentFormatter

Code
Snippet:

var c = Windows.System.UserProfile.GlobalizationPreferences.Currencies[0];
var cf = new Windows.Globalization.NumberFormatting.CurrencyFormatter(c);
var cn = 1;
var cfd = cf.Format(currencyNumber);
var cp = cf.ParseDouble(cfd);

When working with the formatters, set the IsGrouped and FractionDigits properties.
These properties will decide whether to display the group separator and minimum number of
fractional digits to be displayed.

© Aptech Ltd. Windows Store UI Localization/Session 2 11

 Localizing Your Manifest [1-2]

Before sharing the app to Windows market, the user must localize the manifest which is
used to view the translated content of the app in the Windows Store.

Localization can be applied in different values of the manifest:

• Name and description

• Descriptions inside Declaration page

• Content Uniform Resource Identifier (URI)

© Aptech Ltd. Windows Store UI Localization/Session 2 12

 Localizing Your Manifest [2-2]

Inside the Package.appxmanifest, languages can be set by default in Visual Studio

Editor. Inside UI default language, this language is known as fallback language for the app.
Inside the manifest file, the user must declare the ms-resource:<identifier> and
refer to the resource strings. Following figure shows an example:

© Aptech Ltd. Windows Store UI Localization/Session 2 13

 Language Defi niti on in Windows Store Apps

The user must check the languages to be declared in the app

inside the manifest file.
Windows Store lists all the languages that can be localized.
By default, the app takes the language provided in the Control
Panel.
The default language can be changed by changing the languages
in the manifest file.

© Aptech Ltd. Windows Store UI Localization/Session 2 14

 Applying Language-Specifi c Formatti ng for Multi lingual
App [1-2]
To develop a Multilingual Store app, the user must download Multilingual Toolkit which is
required for translating the app in Visual Studio that is used to localize app translations.

After installing the Toolkit, the following steps must be performed for enabling Multilingual
Toolkit.
 Launch Visual Studio 2013.
 Enable Multilingual option by navigating to Tools  Enable Multilingual App Toolkit
option as shown in the following figure. This creates the resource files languages required
and also for a pseudo language. The pseudo language is needed for testing Store apps to
ensure that text is used from inside the resource files.

© Aptech Ltd. Windows Store UI Localization/Session 2 15

 Applying Language-Specifi c Formatti ng for Multi lingual
App [2-2]
 Now, select Add translation languages  Then, select the required languages from
from the Project menu to add multiple the Translation Languages dialog box and
languages as shown in the following click OK. Following figure shows how to
figure. select a language:

© Aptech Ltd. Windows Store UI Localization/Session 2 16

 Implementi ng .resw Files to Translate Text [1-5]

The user can create a multi-lingual app by creating a resource file which has an extension
.resw and integrate that into the app. These files can be called through a simple reference
in the code. The resource file design is shown in figure.

After creating the resource file, write the code as

shown in Code Snippet.
Code Snippet demonstrates the use of multi-
language support for Store apps. In the code, a
ComboBox control is created with three different
languages. On appropriate language selection, a
message from respective resource files will be
shown as output on the button Click event.

© Aptech Ltd. Windows Store UI Localization/Session 2 17

 Implementi ng .resw Files to Translate Text [2-5]

Code
Snippet:

<Page
x:Class=”LanguageLocalization.MainPage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:local=”using:LanguageLocalization”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008”
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006”
mc:Ignorable=”d”>
<Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>
<ComboBox Margin=”538,155,0,0” SelectedIndex=”0” SelectedValuePath=”Name”
x:Name=”ddlLang” Grid.Column=”0” HorizontalAlignment=”Left”

© Aptech Ltd. Windows Store UI Localization/Session 2 18

 Implementi ng .resw Files to Translate Text [3-5]

Code Snippet (Cont):

VerticalAlignment=”Top” Width=”106” Height=”34” >

<ComboBoxItem x:Name=”en” Content=”English”/>
<ComboBoxItem x:Name=”fr” Content=”France”/>
</ComboBox>
<TextBlock x:Name=”lblResult” HorizontalAlignment=”Left” TextWrapping=”Wrap”
VerticalAlignment=”Top” Margin=”538,275,0,0” Height=”66” Width=”407”
FontSize=”20”/>
<Button x:Name=”btnTranslate” Content=”Get Value” HorizontalAlignment=”Left”
VerticalAlignment=”Top” Margin=”763,154,0,0” Click=”btnTranslate_Click”/>
</Grid>
</Page>

© Aptech Ltd. Windows Store UI Localization/Session 2 19

 Implementi ng .resw Files to Translate Text [4-5]
Code Snippet
(Cont):

private void btnTranslate_Click(object sender, RoutedEventArgs e)

{
Button b = sender as Button;
if (b != null)
{
var context = new ResourceContext();
var lang = ddlLang.SelectedValue;
if (lang != null)
{
var strlang = new List<string>();
strlang.Add(strlang.ToString());
context.Languages = strlang;
var rstring = ResourceManager.Current.MainResourceMap.
GetSubtree(“Resources”);
this.lblResult.Text = rstring.GetValue(“UserDefined”, context).
ValueAsString;
}
}
}

© Aptech Ltd. Windows Store UI Localization/Session 2 20

 Implementi ng .resw Files to Translate Text [5-5]

When the application is executed, the When the user clicks the Get Value
output will appear as shown in the button, it reads the resource file and
following figure: displays the result as shown in the
following figure.:

© Aptech Ltd. Windows Store UI Localization/Session 2 21

 Implement Collati on and Grouping [1-2]

The user can make use of CharacterGroupings class which is available inside the namespace
Windows.Globalization.Collation for ordering the group or collation of a language.

Code
Snippet:

using System;
using Windows.Foundation.Metadata;
namespace Windows.Globalization.Collation
{
[DualApiPartition(version = 100794368u),
MarshalingBehavior(MarshalingType.Agile), Version(100794368u)]
public sealed class CharacterGrouping : ICharacterGrouping
{
public extern string string1
{
get;
}
public extern string string2
{
get;
}
}}

© Aptech Ltd. Windows Store UI Localization/Session 2 22

 Implement Collati on and Grouping [2-2]

Code Snippet
(Cont):

var cgs = new Windows.Globalization.Collation.CharacterGroupings();

var size = cgs.Count;
if (size > 0)
{
cg. var cgs = cgs[0];
var string1 = cg.string1;
var string2 = cg.string2;
}

When en-US is used for localization, the user receives special char groupings
such as &, ;, ‘, or 0-9 and all alphabets.

Note - The user can employ the method Lookup to receive the string of a label.

© Aptech Ltd. Windows Store UI Localization/Session 2 23

 Implement Culture-Specifi c Formatti ng for Date and
Time [1-2]

Through the DateTime type, Windows Store apps can be made culture-sensitive. Based on
the culture, the DateTimeFormatInfo class is called to format the Date.
When the user needs to format a date through ShortDatePattern format, the date
March 1, 2014 can be formatted as 3/1/2014 for the English (United States) ’en-US’ culture,
and 01/03/2014 for the English (United Kingdom) ’en-GB’ culture. The object for
DateTimeFormatInfo can be formed for a specific culture.

Code Snippet shows today’s date by calling the ShortDatePattern as the

CurrentThread culture is set to English and German.

Note - The object for DateTimeFormatInfo cannot be created in Neutral.

© Aptech Ltd. Windows Store UI Localization/Session 2 24

 Implement Culture-Specifi c Formatti ng for Date and
Time [2-2]

In the following Code Snippet, a date object is created which shows current system date.

Code
Snippet:

using System;
using System.Globalization;
using System.Threading;
public class GetDateFormat
{
public static void Main()
{
DateTime d = DateTime.Now;
Thread.CurrentThread.CurrentCulture = new CultureInfo(“en-US”);
Console.WriteLine(d.ToString(“d”));
CultureInfo c = new CultureInfo(“de-DE”);
Console.WriteLine(d.ToString(“d”, c));
}
}

© Aptech Ltd. Windows Store UI Localization/Session 2 25

 Summary

Localization is the concept of translating the content to a specific language by means of

multi-lingual support.

Generally, there is no need of writing lines of code for globalizing an app for its cultural
settings, but in case of localization, its cultural settings must have its own code and
images to translate the app.

The user must check the languages to be declared in the app inside the Manifest file.
Windows Store will list all the languages that can be localized.

The user can create a multilingual app by creating a resource file which has an
extension .resw and integrate that into the app.

In the DateTime type, use the Store app to make culture-sensitive procedures. Based on
the culture, the DateTimeFormatInfo class is called to format the date.

© Aptech Ltd. Windows Store UI Localization/Session 2 26