CODEWITHSUNDEEP
xamarinxamarin.forms
danbord
danbord

Reputation: 4096

Xamarin Forms Display image from Embedded resource using XAML

I'm trying to display and embedded image in a shared project resource (as explained here on microsoft documentation).

I created the ImageResourceExtension, the project compiles, but I get the following error when I start the project :

Could not load type 'Xamarin.Forms.Xaml.IReferenceProvider' from assembly 'Xamarin.Forms.Core, Version=2.0.0.0

Here's my code :

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App1"
             x:Class="App1.MainPage">

    <StackLayout>

        <Image x:Name="imgTest" Source="{local:ImageResource img.jpg}" />

    </StackLayout>

</ContentPage>

EmbeddedImage.cs

namespace App1
{
    [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;
        }
    }
}

Upvotes: 5

Views: 8360

Answers (4)

KGolden
KGolden

Reputation: 13

Replace:

<Image x:Name="imgTest" Source="{local:ImageResource img.jpg}" />

With:

<Image x:Name="imgTest" Source="{local:ImageResource 'Project.Folder.img.jpg'}" />

And Replace:

var imageSource = ImageSource.FromResource(Source, typeof(...));

With:

var imageSource = ImageSource.FromResource(Source);

Upvotes: 1

Nitika Chopra
Nitika Chopra

Reputation: 1405

You can try this, it works for me

xyz.xaml.cs

imgName.Source = ImageSource.FromResource("ProjectName.Images.backicon.png");

xyz.xaml

<Image x:Name="imgName" />

Hope this code helps you!!

Upvotes: 5

Hutjepower
Hutjepower

Reputation: 1261

Not knowing if the answer is still valid for you, but I usually have an Assets folder outside my solution which contains Android specific folders (drawables), iOS specific folders (Resource with @2x and @3x) and a Common folder for shared images.

In my solution I add these files as a link in the folders they should be associated with. On Android in the Resources/Drawable and iOS in the Resource. In this case Common files can be shared across both platforms without physically copying them.

As a bonus, updates to these Assets can be overwritten in the folder outside my solution and will be used within my solution without any additional action to be taken.

Upvotes: 0

Bruno Caceiro
Bruno Caceiro

Reputation: 7199

If you add the Image to your Android drawable folder, or to the iOS Resource folder, you don't need any extension. You can simply do:

 <Image x:Name="imgTest" Source="img.jpg" />

Upvotes: -1

Related Questions