My first stab at a Windows Phone app was a basic panorama with instructions on how to care for Theratogs.
TheraTogs are orthotic garment systems designed to provide gentle, prolonged muscle stretch and alignment guidance that replicates the manual positioning and supervised therapy that the rehab clinician offers in a typical session.
I spent some time this weekend re-doing this app for the Windows Phone Store (available here).
In the left pane, expand Installed, Templates, and Visual C++, and then click Win32
In the Name box, type AppResLib and then click OK
In the Win 32 Application Wizard click Next
Under Application type, select DLL
Under Additional options, select Empty project and clear the Security Development Lifecycle (SDL) checks check box
On the Build menu, select Build Solution
We will use this project to create language neutral and language specific files for our app name and app tile name.
In this example I want my app “Theme Colors” to support US English and Spanish – so I will create a US English, Spanish and Language Neutral file. The Language Neutral settings will be used for all other non-localized languages that are supported in the Windows Phone marketplace.
Creating a language-neutral project file
In Solution Explorer, select the AppResLib project
In the Project menu click Add Resource
Select String Table and then click New
Create two resource strings with the following properties:
Lang-Neutral App Title
Lang-Neutral Tile Title
This is what this looks like in Visual Studio for my app:
Update the AppResLib so that the project is built as a resource-only DLL.
Set the Solution Configuration to Release
In Solution Explorer right click the AppResLib project and then click Properties
Expand ConfigurationProperties, Linker, and then click Advanced – set the No Entry Point to Yes (/NOENTRY) and then click OK
On the Build menu, select Build Solution
In the Solution Explorer right click the Solution (Solution ‘AppRes.Lib’ (1 Project)) and then click Open Folder in File Explorer in the drop down menu
In File Explorer open the Release folder and temporarily rename the AppResLib.dll file to AppResLibLangNeutral.dll
Creating language-specific files
Creating the language specific files is exactly the same procedure as the language-neutral file – except for the naming convention (which we will come to shortly).
Simply change the Caption in the String Table for the language you are supporting. Below you can see my localized strings for English and Spanish:
After changing the Caption for each language just Build the solution again and then rename AppResLib.dll according to the table below:
DLL file name
Chinese Simplified (PRC)
Chinese Traditional (Taiwan)
Czech (Czech Republic)
English (United Kingdom)
English (United States)
At the end of this process I also had AppResLib.dll.0409.mui and AppResLib.dll.0c0a.mui.
Adding localized resource strings to your Windows Phone 8 app
Select your Project in the Solution Explorer
In the Project menu click Add and then click Existing Item
Locate and select your AppResLibLangNeutral.dll file and the AppResLib.dll.*.mui files and then click Add
In the Solution Explorer rename AppResLibLangNeutral.dll to AppResLib.dll
Select AppResLib.dll and the AppResLib.dll.*.mui files and set their Build Action to Content in the Properties window
In Solution Explorer, move the AppResLib.dll.*.mui files into the Resources folder
In the Solution Explorer expand Properties and then open WMAppManifest.xml
Click the Application UI tab
Set the Display Name to:@AppResLib.dll,-100
Set the Tile Title to: @AppResLib.dll,-200
To test localized settings simply change the language in the Windows Phone 8 Emulator. Any language that does not match your localized language files will display the language-neutral App Name and Title Title.
In my previous post I looked at the basics of app localization (supporting other languages). If you are not familiar with setting up the Name and Value pairs in the AppResources.resx files then you will need to refer to that post before proceeding.
Before I looked at localizing my app I had my App Bar setup on my MainPage.xaml like this:
As I could not find a solution for binding to my XAML appbar I decided to do it in C# instead. So I commented out my XAML App Bar (MainPage.xaml) and the Click event in MainPage.xaml.cs.
This is my App Bar setup in MainPage.xaml.cs:
// Set the page's ApplicationBar to a new instance of ApplicationBar.
ApplicationBar = new ApplicationBar();
ApplicationBar.Mode = ApplicationBarMode.Minimized;
ApplicationBar.Opacity = 1.0;
ApplicationBar.IsVisible = true;
ApplicationBar.IsMenuEnabled = true;
// Create a new button and set the text value to the localized string from AppResources.
ApplicationBarIconButton appBarButton = new ApplicationBarIconButton(new Uri("/Assets/Images/appbar.information.circle.png", UriKind.Relative));
appBarButton.Text = AppResources.AppBarButtonText;
appBarButton.Click += new EventHandler(appBarButton_Click);
//// Create a new menu item with the localized string from AppResources.
//ApplicationBarMenuItem appBarMenuItem = new ApplicationBarMenuItem(AppResources.AppBarMenuItemText);
As you can see the App Bar Button has a binding to AppBarButtonText (which is defined in my AppResouces.resx files).
In my last post I made a basic color swatch and I thought it would be interesting to localize it for another language.
As you can see in the gallery above I set bindings to localize my app name, subtitle and for each color name in the swatch.
To do this we need to choose which language(s) we want to support and then populate their AppResources.resx page. To choose supported languages open the WMAppManifest.xml file and then click on the Packaging tab.
As you can see English (US) is my default language and Spanish is the other language that I have chosen to support. Click the Save button after selecting languages.
In the Solution Explorer (under the Resources folder) I now have an .resx file for Spanish called AppResources.es.resx. AppResources.resx is the file for my default language.
In each .resx file I set the binding Name and it’s Value. For example I have ApplicationTitle set in both pages with different values – Theme Colors and Tema Colores respectively. As you can see I created my own Names for the colors and app subtitle.
So I worked through both .resx files making sure that there were binding Names for my app title, subtitle and each color – along with the appropriate values for each language.
The next step is to set up the bindings in our app. Let’s start with the app title.
As you can see, in MainPage.xaml, we have a Grid and three ColumnDefinitions with a “*” for the width. This means that each column gets one third of the width of the screen. I also have 7 RowDefinitions whose height is set to “Auto“. This means that they adjust their size according to their content.
We want our content to scroll up and down so we need to add a ScrollViewer:
So now we have a grid that can scroll up and down and we need to start putting content into each cell of the grid. Before we do that it pays to think about the properties of our content – we don’t want to manually specify each property in every grid right?
In App.xaml we can set properties under <Application.Resources> as follows. Let’s start with the text properties first:
As you can see we have our style based on GridCellStyle with TartgetType set as TextBlock- so all of the text we set will have the properties that we defined in App.xaml.
Similarly you can see that I also have a RectangleStyle with a TargetType set as Rectangle. This style has properties for the Width, Height and Margin of the rectangles that I am going to draw in the grid. Here are the rectangle style settings from App.xaml:
These are the first three rectangles that I defined – as you can see all I need to set in their position in the grid using Grid.Row and Grid.Column and the Fill color (in hexadecimal). You can just type the color name instead of the hexadecimal value if that meets your needs.
Again with the text for each grid cell I am just defining the grid position and the actual text to display:
The last item on my list is to force the use of the light theme. I did this because I think a color swatch looks best that way – but there are some caveats. For phones with AMOLED or similar screens this will impact battery life (if the app is used a lot).
To force the light theme I am using Jeff Wilcox Phone Theme Manager. To install it click Tools > NuGet Package Manager > Package Manager Console. Run the command below:
Now simply add the following to App.xaml.cs:
//Set theme to Light
That’s everything on our list done and even though it’s very simple I think that it looks good.
If this swatch is of use to you it is available in the Windows Phone Store here.