Sunday 18 November 2018

Implemented Internationalization(localization) in a Xamarin.Forms app

Hello Friends,
Today, I am going to create localization in a Xamarin.Forms app. Whenever we are creating a  Xamarin forms app.  I want to need to change the Current Language and that time, I was stuck in the app, after some search I got the solution to this problem. So in this blog, I am going to implement the localization in Xamarin forms app.


Implementation:
 First, we have to create a project which name is LocalizationDemo.
Open VS2017, select file. Create Project, give the project name
and then set the path then hit enter.





Now here appear a window then you have to select Template Like Black Then choose Platform Like Android and ios and code sharing strategy like .NET Standard then hit enter.




In PCL Project we can create a folder whose name is Localization
Now in Localization folder, we can create Classes whose name is CultureChangedMessage and LocalizedResources.
CultureChangedMessage.cs



public class CultureChangedMessage
{
public CultureInfo NewCultureInfo { get; private set; }
public CultureChangedMessage(string lngName)
: this(new CultureInfo(lngName))
{ }

    public CultureChangedMessage(CultureInfo newCultureInfo)
    {
        NewCultureInfo = newCultureInfo;
    }
}

CultureInfo: The CultureInfo class holds culture-specific information, such as the associated language, sublanguage, country/region, calendar, and cultural conventions
LocalizedResources.cs





public class LocalizedResources : INotifyPropertyChanged
{
const string DEFAULT_LANGUAGE = "en";

    readonly ResourceManager ResourceManager;
    CultureInfo CurrentCultureInfo;
 
    public string this[string key]
    {
        get
        {
            return ResourceManager.GetString(key, CurrentCultureInfo);
        }
    }
 
    public LocalizedResources(Type resource, string language = null)
        : this(resource, new CultureInfo(language ?? DEFAULT_LANGUAGE))
    { }
 
    public LocalizedResources(Type resource, CultureInfo cultureInfo)
    {
        CurrentCultureInfo = cultureInfo;
        ResourceManager = new ResourceManager(resource);
 
        MessagingCenter.Subscribe
            string.Empty, OnCultureChanged);
    }
 
    private void OnCultureChanged(object s, CultureChangedMessage ccm)
    {
        CurrentCultureInfo = ccm.NewCultureInfo;
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Item"));
    }
 
    public event PropertyChangedEventHandler PropertyChanged;
}


ResourceManagerprovides convenient access to culture-specific resources at runtime.
Now we can create a Resources folder and in this folder, we can add .resx
1) LocalizationDemoResources.fr.resx for (fr = French)
· Add String Name and Value
PickLng = Choisir votre langue:
Settings = Paramètres
Welcome = Bienvenue! Bonjour!
2) LocalizationDemoResources.nl.resx for (nl = Dutch)
· Add String Name and Value
PickLng = Selecteer uw taal:
Settings = Instellingen
Welcome = Welkom! Hallo!
3) LocalizationDemoResources.resx for (English)
· Add String Name and Value
PickLng = Choose your language:
Settings = Settings
Welcome = Welcome! Hello!

Now we can set the default Language in App.cs
public static string CurrentLanguage = "EN";
Now Create ViewModels Folder and add ViewModelClassess
MainPageViewModel, SettingsViewModel, ViewModelBase
ViewModelBase.cs




public class ViewModelBase : INotifyPropertyChanged
{
public LocalizedResources Resources
{
get;
private set;
}

    public ViewModelBase()
    {
        Resources = new LocalizedResources(typeof(LocalizationDemoResources), App.CurrentLanguage);
    }
 
    public void OnPropertyChanged([CallerMemberName]string property = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
    }
 
    public event PropertyChangedEventHandler PropertyChanged;
}

MainPageViewModel.cs




public class MainPageViewModel : ViewModelBase
{ }

SettingsViewModel.cs


public List Languages { get; set; } = new List()
{
"EN",
"NL",
"FR"
};

    private string _SelectedLanguage;
 
    public string SelectedLanguage
    {
        get { return _SelectedLanguage; }
        set
        {
            _SelectedLanguage = value;
            SetLanguage();
        }
    }
 
    public SettingsViewModel()
    {
        _SelectedLanguage = App.CurrentLanguage;
    }
 
    private void SetLanguage()
    {
        App.CurrentLanguage = SelectedLanguage;
        MessagingCenter.Send
                string.Empty, new CultureChangedMessage(SelectedLanguage));
   }

Now change the MainPage Design and Binding with MainPageViewModel.cs

Last Step is adding SettingsPage and set design then bind with SettingsViewModel.cs

Hopefully, this blog is useful............


Featured Post

Sliding Entry In Xamarin.Forms

  Today, I am going to show you how to create a Custom Slide entry in Xamarin.Forms with animation and also using gradient color. here is Y...