I have seen this question come across pages like Stackoverflow a couple of times: “how can I load a page from a XAML string at runtime?”. Up until a little while ago this was hard, now it’s pretty easy! Let’s have a look at how we can load controls and even pages from a XAML string.
To be completely honest, I didn’t come across any use-case for this yet, but apparently there are reasons you might want to load a XAML page from runtime. The most obvious example is probably the Xamarin Live Player who does something like this, but other than that I can’t directly think of one. But hey, why do we need reasons anyway? Just because we can!
Edit: on Twitter Miloš Spasojević (@irreal_s) has let me know that he has been using this to facilitate A/B testing in production apps. This way, you don’t need to release a new version through the App Store, and are still able to do proper A/B testing. This is actually a pretty good use! Thanks Miloš!
A bit of Sherlocking…
To answer this question, I quickly started searching on plain ol’ Google, and came across a documentation page that told me there is a LoadFromXaml method. The word “internal usage” is mentioned a lot of times, so I was starting to think that it wouldn’t be accessible from the outside. Also, the API wasn’t clear from the start, since it wants to load a Type and not so much a string as I would expect it to.
After that, I decided to look in the GitHub repo for Xamarin.Forms. There I simply searched for this extension method to see how it was used in Xamarin’s own source. Lucky for use, at the time of writing they have just added a new overload of the LoadFromXaml method which takes in a string.
Let’s get to it, how do we use it then? As mentioned, the method is a extension method. The extension method takes in any kind of object, although it will probably only work on VisualElements. To access the extension method be sure to upgrade to the latest available Xamarin.Forms package at the time of writing. Then just add the using Xamarin.Forms.Xaml; namespace declaration.
Now we can just create some XAML string and load it like this:
It basically comes down to creating a new instance of the control you want to inflate and call the extension method on it.
Like I said: this works for anything UI related, even whole pages as you can see underneath!
If you look closely, you can even see that I have used the Label I generated from the XAML is used inside this page. Any normal string operation also works on XAML string, obviously.
To see the above code in a full running example, please have a look at this GitHub repo here: https://github.com/jfversluis/LoadXamlSample. There I load the Label and Page as seen above. From there I use it to navigate to, to show you that is works like any regular page.
And that’s all there is to it, really. I am really curious as to why you would use this. So, if you have any real use-case, please be sure to let me know. You can reach out to me here or on Twitter. Also be sure to have a look at my YouTube channel for some more live content.