UWP: Localized String UI XAML Properties

I was messing around in Visual Studio today and decided to spruce up my UWP apps a little bit. Originally what I was doing for all my string UI XAML properties on every project was hard coding them in the XAML code like this:

<PivotItem Header="Item 1">
    ...
</PivotItem>
<PivotItem Header="Item 2">
 ...
</PivotItem>

However there are several major flaws with this:

  1. Your strings are hard coded in the XAML code and if you were to make any modifications it would need to be done programmatically which could get messy.
  2. There is no consideration for other languages other than the one you have hard coded; a big oversight if you plan on releasing your app worldwide.
  3. It is not very flexible and easy to manage; if you need to change your strings it would have be done across a number of XAML files and it could take a long time to change everything.

Nearly every tutorial or blog post when they are writing string UI XAML properties they  always do this ‘hard coded’ method. Even Microsoft does this on their official page when outlining the different Controls and Patterns, see the Tabs and Pivot example here. Really though, I don’t blame them as it is really simple and gets the picture across nicely for beginners and the focus is really on the Controls and Patterns. However if you are going to be making a commercially viable product that will be used across different continents, supporting a number of languages is critical.

Eventually to solve this problem you have to do some Googling or Binging (not sure if that is the Bing equivalent), or if you use the new extension/tool called the ‘Windows Template Studio’ to help build your new app it sets everything up nicely for you. This is all well and good if you use the extension/tool but if you are not, then Microsoft again has a convenient page to look at, see here. I used this page to solve this very same problem and it should help you as well.

The solution to this problem can be broken down into several steps:

  1. Set a Default Language on your Package.appxmanifest (outlined in red).
    Package.appxmanifest Default Language Setting
  2. Create a ‘Strings’ folder in your root project solution.
  3. Create a subfolder that matched the Default Language you have set.
  4. Create a Resources.resw file under the subfolder.
    Default Language Strings Folder Structure
  5. Add all your string UI XAML properties in the Resources.resw file where:
    1. Name: The XAML property you are referencing including the XAML object.
    2. Value: The value for the XAML property, what you want shown.
    3. Comment: A simple comment to help identify and describe what the property and value is for.

The Microsoft page listed above outlines a very simple example and how to test your application, so I am not going to go into further detail here and I suggest you look at their example and testing method. If you are starting out doing some UWP app development then you might not be aware of what the best practices are (I still don’t), so hopefully you find this information useful and you can create commercial grade UWP apps for the Microsoft Store.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s