Xamarin.Forms Localizing with Xamarin Live Player

Switching between Xamarin Forms and Native Android Development back and forth I have noticed that there is one piece in the development toolbox that is extremly important but yet very lacking in Xamarin Forms.

That is; the ability to preview user interface layouts without having to compile, deploy and run the application every time.  The time spent iterating user interfaces without a well working layout previewer is a great waste of resources. Just imagine if a designer had to compile for 5 minutes between every change they made in Photoshop. Not very effecient, right?

Xamarin.Forms have made some attempts at solving this. They have the Xamarin.Forms Previewer which basically never works:

I don’t know if they stopped developing it because it seems to just be getting worse lately. Instead, it seems as if their focus shifted into a newer tool; Xamarin Live Player

So far I have been very happy with the Xamarin Live Player. It goes really quick and smooth to iterate on the user interface. However it’s still under development and doesnt support Custom Renderers or Embedded Resources (Limitations), the lately being a big blocker when following the recommended procedure for localizing using embedded RESX resource files.

I decided to modify their system a bit to be able to localize withour RESX files instead.

The first step is to get the language from the device of the user. This step remains the same as in the Xamarin Forms tutorial. For Android you need to implement localize.cs and for iOS, localize.cs and in the Portable project you need to implement the interface ILocalize.cs

Everything remains the same so far but now things will turn in a different direction; Instead of implementing resx files we will create one static file cs file for each language. In my example I will use English and Swedish.

To be able to call for these translations from XAML we need to create a Converter.

As you can see in the code I have hardcoded the mapping between culture name and translation class. This can be developed further to a more streamlined approach but I’ll keep it simple for now.

You will also notice that I have this parameter named “Text” in the top of the file. It’s there for a reason and it will become clear soon enough.

Now for the implementation in XAML.

ExampleView.xaml:

I hope most of the code is self-explementary but what I want to point out here is the binding to Text. This is the parameter inside the LocalizeConverter and the reason we have to bind to it is because the xaml have to be bound to a parameter to be able to execute the converter. This is it. Now you should be able to localize your application and have it running the Live Previewer. This will work fine for setting the Title as well.

Since my device is set for English the result in the Live Previewer is in English: