Windows 10 UWP: Switching Languages in Your App

By default, a UWP App's UI language is automatically fits the system current language settings. However, what if the user need the ability to set a particular UI language just for your App without having to change system language?

In my App, I supports Simplified Chinese and English. The user can override the system language in App's settings page:

So how to do it?

First, you need to have resource files as usual for multi-language Apps like this:

Put resw files into "Strings\LanguageCode" folder is a conventsion by UWP Apps, it does not require any code to achieve the ablity to show different UI language according to system language.

Then, adding a new class file for matching the language code and display name in order to show it in settings language dropdown list:

public class Language
{
    public string DisplayName { get; set; }

    public string LanguageCode { get; set; }
}

Create a property for UI binding

private ObservableCollection<Language> _languages;

public ObservableCollection<Language> Languages
{
    get => _languages;
    set { _languages = value; RaisePropertyChanged(); }
}

Set values (usually in ViewModel's constructor)

Languages = new ObservableCollection<Language>
{
    new Language { DisplayName = "English", LanguageCode = "en-US" },
    new Language { DisplayName = "简体中文", LanguageCode = "zh-CN" }
};

To let user decide if they want override UI language or just follow system settings, we also need to add a new settings key to store the option. In my App's design, settings are managed by an AppSettings class. You can read my previous post for how to do it.

So, adding a new settings key in AppSettings:

public bool UsePrimaryLanguageOverride
{
    get => ReadSettings(nameof(UsePrimaryLanguageOverride), false);
    set
    {
        SaveSettings(nameof(UsePrimaryLanguageOverride), value);
        NotifyPropertyChanged();
    }
}

And we need another key to store what languages did the user select, by default, it is en-US to match the App's default language.

public string PrimaryLanguageOverride
{
    get => ReadSettings(nameof(PrimaryLanguageOverride), "en-US");
    set
    {
        SaveSettings(nameof(PrimaryLanguageOverride), value);
        NotifyPropertyChanged();
    }
}

Also, add a UI binding property for that

public Language SelectedLanguage
{
    get => _selectedLanguage;
    set
    {
        _selectedLanguage = value;
        AppSettings.PrimaryLanguageOverride = value.LanguageCode;
        RaisePropertyChanged();
    }
}

Now, making the UI:

<ToggleSwitch x:Name="UsePrimaryLanguageOverride" 
              x:Uid="UsePrimaryLanguageOverride" 
              IsOn="{Binding Source={StaticResource AppSettings}, Path=UsePrimaryLanguageOverride, Mode=TwoWay}"
              OnContent="#UsePrimaryLanguageOverride" 
              OffContent="#UsePrimaryLanguageOverride" />

<ComboBox x:Name="CmbLanguage" 
          ItemsSource="{Binding Languages}" 
          DisplayMemberPath="DisplayName" 
          SelectedValuePath="LanguageCode" 
          SelectedItem="{Binding SelectedLanguage, Mode=TwoWay}" 
          IsEnabled="{Binding Source={StaticResource AppSettings}, Path=UsePrimaryLanguageOverride}" />

On the UI, it still need to remember what language did the user previously selected, and set the selected item on the ComboBox according to that value. To do that, add code in your ViewModel:

var selectedLanguage = AppSettings.PrimaryLanguageOverride;
if (!string.IsNullOrEmpty(selectedLanguage))
{
    var f = Languages.FirstOrDefault(l => l.LanguageCode == selectedLanguage);
    if (null != f)
    {
        SelectedLanguage = f;
    }
}
else
{
    SelectedLanguage = Languages.FirstOrDefault();
}

Now, the UI part is complete. How to let the App know what language to apply to the UI?

It is very easy. Set the ApplicationLanguages.PrimaryLanguageOverride when App starts. To do that, modify App.xaml, and in the OnLaunched event handler, add the following code

protected override async void OnLaunched(LaunchActivatedEventArgs e)
{
    var settings = new AppSettings();
    ApplicationLanguages.PrimaryLanguageOverride =
        settings.UsePrimaryLanguageOverride ?
            settings.PrimaryLanguageOverride :
            Windows.System.UserProfile.GlobalizationPreferences.Languages[0];

   ...
}

Now your app will have the ablity to let user switch custom languages!