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();

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay