#Xamarin.Forms: Remote Image Markup Extension

downloadI had a requirement to have an Image get its source from a URL. I didn’t want to hard code it as I wanted a central place to manage them in case they did change in the future.

I decided to write a simple MarkupExtension so that I could pass in an Enum and get a Source for the Image, like this:

<Image Source="{local:RemoteImages Login_Help_Live}" />

First, we create the Enum to indicate which image to use:

public enum EnumRemoteImages
{
    Login_Help_Live ,
    Login_Help_OnPrem,
    Multiple_tab_coachmark ,
    Multiple_swipe_coachmark,
    Notifications_coachmark,
    Todays_Business_coachmark
}

Our MarkupExtension will be used by the Source property on the Image tag, so we indicate it:

[ContentProperty("Source")]
public class RemoteImagesExtension : IMarkupExtension

And offer a reference:

public EnumRemoteImages Source { get; set; }

Then we provide the logic which simply matches an enum with an image:

public object ProvideValue(IServiceProvider serviceProvider)
        {
            ImageSource s = null;
            string url = GetImageUrlFor(Source);
            if (url.IsValidUrl())
                s = new UriImageSource()
                {
                  Uri = new Uri(url)
                };
            
            return s;
        }
 
        public static string GetImageUrlFor(EnumRemoteImages image)
        {
            string url = "https://i.ibb.co/2gcHxdg/Small-Logo.png";
            switch (image)
            {
                case EnumRemoteImages.Login_Help_Live:
                    url = "https://i.ibb.co/JdNPS4Y/login-help-live.png";
                    break;
                case EnumRemoteImages.Login_Help_OnPrem:
                    url = "https://i.ibb.co/bLbKCDS/login-help-onprem.png";
                    break;
 
                case EnumRemoteImages.Multiple_tab_coachmark:
                    url = "https://i.ibb.co/tZ9nKDt/multiple-tab-coachmark.png";
                    break;
                case EnumRemoteImages.Multiple_swipe_coachmark:
                    url = "https://i.ibb.co/XzkWX01/filter-swipe-coachmark.png";
                    break;
                case EnumRemoteImages.Notifications_coachmark:
                    url = "https://i.ibb.co/Zchr0Dq/notifications-coachmark.png";
                    break;
                case EnumRemoteImages.Todays_Business_coachmark:
                    url = "https://i.ibb.co/QMS8Fc2/todays-business-coachmark.png";
                    break;
 
            }
 
            return url;
        }

The final full class looks like this:

[ContentProperty("Source")]
    public class RemoteImagesExtension : IMarkupExtension
    {
 
        public EnumRemoteImages Source { getset; }
 
        public object ProvideValue(IServiceProvider serviceProvider)
        {
            ImageSource s = null;
            string url = GetImageUrlFor(Source);
            if (url.IsValidUrl())
                s = new UriImageSource()
                {
                  Uri = new Uri(url)
                };
            
            return s;
        }
 
        public static string GetImageUrlFor(EnumRemoteImages image)
        {
            string url = "https://i.ibb.co/2gcHxdg/Small-Logo.png";
            switch (image)
            {
                case EnumRemoteImages.Login_Help_Live:
                    url = "https://i.ibb.co/JdNPS4Y/login-help-live.png";
                    break;
                case EnumRemoteImages.Login_Help_OnPrem:
                    url = "https://i.ibb.co/bLbKCDS/login-help-onprem.png";
                    break;
 
                case EnumRemoteImages.Multiple_tab_coachmark:
                    url = "https://i.ibb.co/tZ9nKDt/multiple-tab-coachmark.png";
                    break;
                case EnumRemoteImages.Multiple_swipe_coachmark:
                    url = "https://i.ibb.co/XzkWX01/filter-swipe-coachmark.png";
                    break;
                case EnumRemoteImages.Notifications_coachmark:
                    url = "https://i.ibb.co/Zchr0Dq/notifications-coachmark.png";
                    break;
                case EnumRemoteImages.Todays_Business_coachmark:
                    url = "https://i.ibb.co/QMS8Fc2/todays-business-coachmark.png";
                    break;
 
            }
 
            return url;
        }
    }

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s