Assigning image resource during runtime for xaml .Net 2.0 multi platform mobile development

Question

Goal:

I want to display an ImageButton with an image just like this:

The current solution is working but I can only choose to set a single image hardcoded into xaml.

For this purpose I have already prepared multiple things:

Current Situation

1. I have added the image and set it as "Build Action: Embedded Resource"
   

2. I have added ImageResourceExtension just as suggested online for use in xaml:

using System;
using System.Reflection;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Bitconomy.resources
{
    [ContentProperty(nameof(Source))]
    public class ImageResourceExtension : IMarkupExtension
    {
        public string Source { get; set; }

        public object ProvideValue(IServiceProvider serviceProvider)
        {
            if (Source == null)
            {
                return null;
            }

            // Do your translation lookup here, using whatever method you require
            var imageSource = ImageSource.FromResource(Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);

            return imageSource;
        }
    }
}

3. I have added reference to the ImageResourceExtension/resources in xaml:

xmlns:resources="clr-namespace:Bitconomy.resources"

4. I have added the image resource to the ImageButton:

<ImageButton x:Name="MiningButton" Grid.Row="0" Source="{resources:ImageResource Bitconomy.resources.images.mines.stone_mine.jpg}" ></ImageButton>

The result is the one shown in the top under the Goal section. fine so far.

Issue

I would like to set up the mines on the go. I have prepared a "mining_view.xaml". Within "mining_view.xaml.cs", I have added code to configure the mine, eg. for stone, iron, or whatever it will be. I want to have different images for each mine.

I have had a similar question in the past available on my stack overflow but it was for desktop use. I was shocked how different mobile development is after all. Similar but not the same.

I'd be very happy if you could help me figure out on how to set the image source in code so it will work in both, android and ios.

public void ConfigureMine(string ItemType)
{
    this.MiningButton.Source = new ImageSource.FromResource("resources:ImageResource Bitconomy.resources.images.mines.stone_mine.jpg");
    // or sth like that?
    this.MiningButton.Source = resources.ImageResourceExtension.ProvideValue(SomeProvider?)
}

Answer 1

1. create an image in xaml. Assign an x:Name property to select the image from code:

<Image x:Name="Mine_Image" Grid.Column="0" Grid.Row="0" Aspect="AspectFill"></Image>

2. You will need an resource extension:

using System;
using System.Reflection;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Bitconomy.resources
{
    [ContentProperty(nameof(Source))]
    public class ImageResourceExtension : IMarkupExtension
    {
        public string Source { get; set; }

        public object ProvideValue(IServiceProvider serviceProvider)
        {
            if (Source == null)
            {
                return null;
            }

            // Do your translation lookup here, using whatever method you require
            var imageSource = ImageSource.FromResource(Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);

            return imageSource;
        }
        public ImageSource GetImageSource(string resourcepath)
        {
            return ImageSource.FromResource(resourcepath, typeof(ImageResourceExtension).GetTypeInfo().Assembly);
        }
    }
}

3. add resource image
   

4. Set image to build action "Embedded Resource"

5. Change Image within form.xaml.cs (adjust the resource path for your needs):

this.Mine_Image.Source = Resources.GetImageSource("Bitconomy.resources.images.resources.Stone_mine.jpg");