How to localize Neutronium-based UI using .RESX files?

Question

I use Neutronium library for a HTML-based C# UI.

I want to be able to use strings from a .RESX resource conveniently, not wrapping every string in a resource-accessing property of the ViewModel.

How achieve this more easily?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You can use ResourceManager.GetResourceSet to convert resource in a dictionary and then use this dictionary in the ViewModel

Here is a complete solution compatible with upcoming version 1.0.0

ViewModel:

public class MainViewModel : ViewModelBase
{
   private Dictionary<string, string> _Localization;
   public Dictionary<string, string> Localization
   {
       get { return _Localization; }
       private set { Set(ref _Localization, value, nameof(Localization)); }
   }

   private string _Langage;
   public string Langage
   {
        get { return _Langage; }
        set
        {
            if (Set(ref _Langage, value, nameof(Langage)))
            {
                 UpdateLangage();
            }           
        }
   }

   private void UpdateLangage()
   {
       var rs = Resource.ResourceManager
                        .GetResourceSet(new CultureInfo(_Langage), true, true);
       Localization = rs.Cast<DictionaryEntry>()
                        .ToDictionary(dicEntry => (string)dicEntry.Key, dicEntry => (string)dicEntry.Value);            
   }

   public string[] Langages => new[] {"en-US", "pt-BR", "fr-FR"};

   public MainViewModel()
   {
     Langage = "en-US";
   }
}

Vue file:

 <template>
        <div id="app" class="fluid container">
            <div id="main-menu" class="jumbotron logo">
                <img src="./assets/logo.png">
                <p>{{Localization.NeutroniumLocalizationExample}}</p>
            </div>

            <div class="col-md-2">
                <span>{{Localization.Language}}</span>
                <select v-model="Langage">
                    <option v-for="lang in Langages" :value="lang">{{lang}}</option>
                </select>
            </div>

            <div class="col-md-10">
                <h1>{{Localization.Hello}}</h1>
                <h2>{{Localization.Welcome}}</h2>
                <h3>{{Localization.MyFriend}}</h3>
            </div>
        </div>
    </template>

Complete solution here

How to localize Neutronium-based UI using .RESX files?

Sign up