Quirks with date and number formats in UWP Apps and Windows 10

In Windows 10 users can configure several languages, a region, a Regional format and additionally several on-screen keyboards (OSK) in different languages. How to switch between OSK and their handling of region-specific decimal separators is not immediately obvious. UWP apps do by design ignore the Regional format configured by the user and there is a debate if developers should work around this.

Don’t Make the User Think

When displaying dates and numbers and designing data entry it is important to make intuitively clear what the data format is. We must avoid making users think to determine if a number is a day or a month or if a . (dot) is a decimal or a thousand separator.

To avoid confusion with dates spell out the month name instead of using numbers. It is common misconception that using a specific separator (e.g. / instead of .) clarifies what is the day and what is the month.
Display June 7, 2019 instead of 07/06/2019

To avoid confusion with decimal separators it may be helpful to display decimals even it they are always 00:
Display 5,300.00 instead of 5,300

On-screen number pads should by default show the decimal separator for the language the user selected. E.g. show a . (dot) with a US keyboard and a , (comma) with a German keyboard.

To make working with dates and numbers intuitively easy we should honor the Windows Regional format the user has configured.

Using Multiple Keyboards

The keyboard selection i.a. influences if a . (dot) or a , (comma) is shown on number pads, see InputScope (Number, for Windows Phone) – you can always long-tap to get a different decimal separator. To experience the difference add two keyboards for languages using different decimal separators e.g. English and German.

Switching between OSKs works differently in Win10 Mobile and other Win10 versions. In Win10 Mobile you can long-tap on &123 or simply swipe on the space bar. Please note that in some InputScopes you cannot switch the OSK because neither &123 nor the space-bar are shown. Here you need to first show a complete OSK, e.g. by tapping Cortana search, switch the OSK there and come back to the app now showing a different decimal separator on the reduced keyboard.

For more information about the Windows 10 Mobile OSK (it supports swipe, voice input, …) see Windows 10 Mobile Keyboard feature roundup and 11 keyboard tips that will help you type faster on Windows 10 Mobile.

To switch between OSK in Windows versions other than mobile tap on the keyboard icon at the bottom right.

Windows10TouchKeyboard

For more Information about this type of on-screen keyboard see Tips to Get Started with the Windows 10 On-screen Keyboard.

Regional Format in UWP Apps

UWP apps by default are supposed to only honor the active language and the keyboard selected and to ignore region and regional format when formatting dates and numbers.

If the user for instance configures English (US) as primary language, Thailand as region and German as regional format, see screenshots below, the UWP app will unexpectedly display dates and numbers in US format.

LanguageRegion

Win10 Mobile

W10ProfSettings

Win10 Professional

I see the following options to handle such constellations:

  • Accept the UWP default behavior.
    Dates and numbers are formatted according to the language only.
    Ingore the users regional format selection..
  • Use the Region selected  by the user via
    PrimaryLanguageOverride = UserProfile.GlobalizationPreferences.HomeGeographicRegion
    This usage was not intended by MS and it may have side effects the user dislikes, like not being able to use the Region he really is located in to localize search results etc. or laborious working with the Windows Store.
    At first I used this approach in my app Travel Currencies but did not like it.
  • Use the Regional format selected by the user
    via the workaround described below.

Currently with the help of the community I am looking for a better understanding and hopefully a cleaner solution  How to honor the “Regional format” setting in UWP Apps.

Regional Format Workaround in UWP Apps

The workaround found here is using .ResolvedLanguage based on any arbitrary installed language. This usage may not be intended by MS and thus might break in the future or have unexpected side effects!

Public Function GetRegionalFormatCultureInfo() As CultureInfo
    Dim systemLanguage = GlobalizationPreferences.Languages.First()
    Dim ri = New RegionInfo(systemLanguage)
    Dim dtf = New DateTimeFormatter("longdate", New String() {ri.TwoLetterISORegionName})
    Dim regionInfoName = dtf.ResolvedLanguage
    Dim cultureInfo = New CultureInfo(regionInfoName)
    Return cultureInfo
End Function

The following pictures shows the Travel Currencies app with regional format US and German.

US vs German display

US vs German display

To get the US and German date formats as shown (spelled out day and month, culture-specific sequence ‘June 11′ vs ’11. Juni’) I used the following format:

String.Format(RegionalFormatCultureInfo, "{0:ddd,} {0:m} {0:yyyy,} {0:t}", _RatesAsOfDate.ToLocalTime)

To interpret separators correctly when parsing numbers I use:

Double.TryParse(textBox.Text, NumberStyles.Number, RegionalFormatCultureInfo, amount)

About Peter Meinl

IT Consultant
This entry was posted in Computers and Internet and tagged , , . Bookmark the permalink.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s