DEV Community

Jayson Ragasa
Jayson Ragasa

Posted on

Inline codes inside XAML with XAMARIN

https://raw.githubusercontent.com/jaysonragasa/jaraimages/master/EvaluateCodeInXAML/2020-05-09_1825.png

Basic Information

I couldn't think of any best example of this one so above is a little example how you can execute/evaluate a code inside the XAML file.

There are three things happening here

  1. The placeholder hides when there's an image.
  2. The placeholder shows when there is no image.
  3. It shows a portion of the item name inside the placeholder.

I know, I know. Coverters can easily do this. You just have to create a Converter for hiding a part of an element and a Converter for taking part of the string... but this is a code inside the XAML and one great thing with this one is for example in Hot Reload, you will be able to see the changes. Imagine the flexibility of having an inline code inside the XAML.

So if you notice, I am only using one converter eval which executes my code.

Here's GIF preview

https://raw.githubusercontent.com/jaysonragasa/jaraimages/master/EvaluateCodeInXAML/05-07-2020-15-01-59.gif

History

This is made possible by Interpreter made by HiSystems way back 2013. The development was stopped last 2015 and I think this is a good addition to Xamarin platform, WPF, or UWP.

I extended the Interpreter a bit to support some additional functions. Check README

So why Converter?

I was trying to implement this with Attached Attribute to somehow make it a bit interesting but I want this to run in any attributes in element.

I also tried using Markup Extension but it's just not possible since the source path could be in any name and it is important to know the source and getting the source value is even harder.

So the Converter is much easier to implement. It can be implemented in any attributes and you can easily get the actual value from the source.

Here's our converter

public class Convert_Interpret : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        object result = null;

        if (!string.IsNullOrEmpty((string)value))
        {
            string p = (string)parameter;
            p = p.Trim();

            var e = ((App)Application.Current).Interpret;
            var xp = e.Parse(p);
            xp.Variables["x"].Value = new Text((string)value);
            return xp.Execute();
        }

        return result;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

Added this line in App.xaml.cs

public Engine Interpret = new Engine();

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay