Windows Phone 8 – Tog Wash App


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).

I used the tabbed interface with pivot animation provided by Depechie.

For graphics I used Modern IU Icons and SyncFusion Metro Studio 3.

The navigation icons are defined in XAML which is really cool – this is something that I really want to learn more about.

This was a fun project to update and put in the Store – I hope that it will be of use to some other people too!

Complete instructions for TheraTog care can be found here.

Windows Phone 8 Dev – Localizing the App Name and App Tile Name


In my previous two post I localized text and the App Bar for a simple Windows Phone 8 app. In this post I’ll take a look at localizing the App Name.

Note: I am using Visual Studio 2013 Community Edition.

Creating a language resource DLL project

  • In Visual Studio click File and New Project
  • In the left pane, expand InstalledTemplates, 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

Win32 Application Wizard - AppRes

  • Click Finish
  • 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:
ID Value Caption
AppTitlle 100 Lang-Neutral App Title
AppTileTitle 200 Lang-Neutral Tile Title

This is what this looks like in Visual Studio for my app:

String Table

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 Configuration Properties, Linker, and then click Advanced – set the No Entry Point to Yes (/NOENTRY) and then click OK

No Entry Point

  • 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:

ID Value Caption
AppTitlle 100 Theme Colors
AppTileTitle 200 Theme Colors
ID Value Caption
AppTitlle 100 Tema Colores
AppTileTitle 200 Tema Colores

After changing the Caption for each language just Build the solution again and then rename AppResLib.dll according to the table below:

Culture name Culture code DLL file name
Chinese Simplified (PRC) zh-CN AppResLib.dll.0804.mui
Chinese Traditional (Taiwan) zh-TW AppResLib.dll.0404.mui
Czech (Czech Republic) cs-CZ AppResLib.dll.0405.mui
Danish (Denmark) da-DK AppResLib.dll.0406.mui
Dutch (Netherlands) nl-NL AppResLib.dll.0413.mui
English (United Kingdom) en-GB AppResLib.dll.0809.mui
English (United States) en-US AppResLib.dll.0409.mui
Finnish (Finland) fi-FI AppResLib.dll.040b.mui
French (France) fr-FR AppResLib.dll.040c.mui
German (Germany) de-DE AppResLib.dll.0407.mui
Greek (Greece) el-GR AppResLib.dll.0408.mui
Hungarian (Hungary) hu-HU AppResLib.dll.040e.mui
Indonesian (Indonesia) id-ID AppResLib.dll.0421.mui
Italian (Italy) it-IT AppResLib.dll.0410.mui
Japanese (Japan) ja-JP AppResLib.dll.0411.mui
Korean (Korea) ko-KR AppResLib.dll.0412.mui
Malay (Malaysia) ms-MY AppResLib.dll.043e.mui
Norwegian (Norway) nb-NO AppResLib.dll.0414.mui
Polish (Poland) pl-PL AppResLib.dll.0415.mui
Portuguese (Brazil) pt-BR AppResLib.dll.0416.mui
Portuguese (Portugal) pt-PT AppResLib.dll.0816.mui
Russian (Russia) ru-RU AppResLib.dll.0419.mui
Spanish (Spain) es-ES AppResLib.dll.0c0a.mui
Swedish (Sweden) sv-SE AppResLib.dll.041d.mui

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

Build Action Content

  • 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.



Windows Phone 8 Dev – Localizing the AppBar


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:

        <shell:ApplicationBar Mode="Minimized"

            <shell:ApplicationBarIconButton Click="about_Click"
                                            Text="about" />

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:

public MainPage()

                // 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/", 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).

Here is the Click event for the button:

        private void appBarButton_Click(object sender, EventArgs e)
            NavigationService.Navigate(new Uri("/YourLastAboutDialog;component/AboutPage.xaml", UriKind.Relative));

And there is my localized App Bar button.

about spanish

Happy coding!


Windows Phone 8 Dev – Basic App Localization


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.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.

<TextBlock Text="{Binding Path=LocalizedResources.ApplicationTitle,
           Source={StaticResource LocalizedStrings}}"
           Style="{StaticResource PhoneTextTitle2Style}"
           Margin="12,0" />

So, we have replaced the hard-coded application name with a binding to the ApplicationTitle in both of our .resx files.

Similarly you can see that I used the same code to localize the color names – just changing the binding name for each color:

<TextBlock Text="{Binding Path=LocalizedResources.Lime,
           Source={StaticResource LocalizedStrings}}"
           Margin="0 22 0 0"
           Grid.Column="0" />
<TextBlock Text="
           Grid.Column="0" />

I did have to update the layout of my TextBlocks to separate the localized and non-localized elements.

To test localization in the Visual Studio emulator you need to change the language under All Settings > language.

In my next post I will look at localizing the AppBar.

Happy coding!


Windows Phone 8 Dev – Creating A Basic Color Swatch


In this post I am going to go over how to quickly create a color swatch in Windows Phone 8. This particular app shows the colors for the Windows Phone 8 themes and their hexadecimal and RGB values.

This is our to-do list:

  • create a basic grid with rows and columns
  • define a style for the rectangles inside the grid
  • define a style for the text
  • force the app to use the light theme (optional)

The Windows Phone 8 themes consist of 20 colors:

WP8 Themes Accents

So I decided on a grid of 3 columns and 7 rows:

            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />

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:

<ScrollViewer VerticalScrollBarVisibility="Auto">

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:

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

        <!--Text Style for Grid-->
        <Style x:Key="GridCellStyle"
            <Setter Property="HorizontalAlignment"
                    Value="Center" />
            <Setter Property="VerticalAlignment"
                    Value="Center" />
            <Setter Property="TextAlignment"
                    Value="Center" />
            <Setter Property="Foreground"
                    Value="White" />
            <Setter Property="FontWeight"
                    Value="SemiBold" />

Here I have named my text style GridCellStyle and the TargetType is set to TextBlock. I have Setters for Horizontal and Vertical Alignment, Text Alignment, Foreground (color) and Font Weight.

To call on these properties use <StackPanel.Resources> in your MainPage.xaml like this:

                <Style BasedOn="{StaticResource GridCellStyle}"
                       TargetType="TextBlock" />
                <Style BasedOn="{StaticResource RectangleStyle}"
                       TargetType="Rectangle" />
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <Grid> ...

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:

        <Style x:Key="RectangleStyle"
            <Setter Property="Width"
                    Value="125" />
            <Setter Property="Height"
                    Value="125" />
            <Setter Property="Margin"
                    Value="10" />

Now that we have our grid defined and our properties set up we can populate the grid cells. Starting with the rectangles we just need to define the colors and their position in the grid:

                    <Rectangle Grid.Row="0"
                               Fill="#FFA4C400" />

                    <Rectangle Grid.Row="0"
                               Fill="#FF60A917" />

                    <!--Dark Green-->
                    <Rectangle Grid.Row="0"
                               Fill="#FF008A00" />

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:

<TextBlock Text="Lime
            Grid.Column="0" />
<TextBlock Text="Green
            Grid.Column="1" />
<TextBlock Text="Dark Green
            Grid.Column="2" />

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:

Install-Package PhoneThemeManager

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.

App Screenshot

If this swatch is of use to you it is available in the Windows Phone Store here.


Windows Phone 8 Dev – Quick Tip – Disable Frame Rate Counters


App screenshots with Emulator Chrome, frame rate counters or debug information will fail Windows Store certification.

To remove frame rate counters open App.xaml.cs and comment out the highlighted line of code as shown:

// Display the current frame rate counters.
// Application.Current.Host.Settings.EnableFrameRateCounter = true;

This will remove the frame counters from the emulator.

Asus Chromebox – Installing OpenELEC (Standalone Setup – No Chrome-OS)

There is a lot of great documentation available for installing OpenELEC aka XBMC (now renamed Kodi) on a Chromebox – but I wanted a brief summary of the steps I performed should I need to do it again.

I have been running OpenELEC as my media center of choice for quite a while now on a 7 or 8 year old PC. As that PC just died I needed a replacement – something smaller – and something cheaper! The ChromeBox looked like an ideal choice …

These steps remove ChromeOS and install OpenELEC – so consult the documentation (and do not do this) if you prefer a different configuration! You have been warned! Seriously, read the documentation!

Enormous thanks to Matt DeViller for providing the installation script, documentation and support to the community!

For reference I installed OpenELEC on an Asus ChromeBox M004U.

The first step is to enable Developer Mode:

This will erase all user data!

  • Insert paperclip into the small home next to the SD card slot to press the recovery button
  • Turn on the Chromebox and then remove the paperclip
  • At the recovery screen press Ctrl + D to enter Developer Mode
  • Press the recovery button again to confirm

If pressing Ctrl +D does not get you to Developer Mode then you will need to try a different keyboard.

 After about 5 minutes you will see the developer boot screen.

  • Shutdown Chromebox

The next step is to  Disable Firmware Write Protect:

This is optional but will decrease the developer boot screen time from 30 seconds to less than 1 second (faster boot).

  • Remove the 4 rubber feet from the base of the Chromebox
  • Unscrew the 4 screws (under rubber feet)
  • Remove base
  • Unscrew the write protect screw (pictured below):
  • Re-assemble base, screws and rubber feet


The last step is to use the ChromeBox E-Z script to install OpenELEC:

Make sure ChromeBox is connected to the internet for this step.

  • Turn on ChromeBox and boot to ChromeOS – do not log in to ChromeOS
  • Press Ctrl, Alt + F2 to open a command prompt
  • Log in as chronos (no password required)
  • Download and run the ChromeBox setup script with these commands:
curl -L -O
sudo bash 3Tfu5W


Press 5 to proceed with Standalone Setup – this will update the coreboot Firmware (which means that you cannot easily run  ChromeOS).

This Firmware is only valid for Haswell based Asus / HP / Acer / Dell ChromeBoxes!

  • When prompted insert a USB Jump Drive to back up the stock firmware

Remove the stock firmware backup and insert another USB Jump Drive.

Press 6 to create the OpenELEC install media on the 2nd Jump Drive.

  • Reboot
  • Press the Escape key [ESC]at the boot menu and then select the Jump Drive from the list to install OpenELEC

Pressing Escape more than once will skip the boot menu forcing the ChromeBox to attempt to boot from the hard disk (instead of the Jump Drive).

  • Select Run Installer
  • Choose Quick Install
  • Select Yes and OK as needed in the installation wizard

When installation is complete:

  • Remove Jump Drive
  • Reboot

OpenELEC recommended settings are as follows:

This assumes you are using the default (Confluence) skin:

  • System –> OpenELEC –> System: Automatic Updates:Auto
  • System –> OpenELEC –> Services: Enable Bluetooth:Selected (if using Bluetooth)
  • System –> Settings –> System: Settings Level:Expert
  • System –> Settings –> System–>Video Output: Vertical blank sync:Enabled during video playback
  • System –> Settings –> System–>Power Saving: Shutdown function:Suspend (sets IR power toggle to suspend)
  • System –> Settings –> Videos–>Acceleration: Use VC-1 VAAPI:Selected
  • System –> Settings –> Videos–>Acceleration: Use SW Filter for VAAPI:Selected

In conclusion I have to say that I am quite impressed with how well my Chromebox has handled the job so far – it is a great replacement media center box!