Image binding using path in Xamarin forms

PrawalGuptaPrawalGupta USMember ✭✭

Hi All,

This is how I am trying to bind image in ListView-

fruitGroup.Add (new MenuListModel () {
Name_PriceTag = "strawberry", IsReallyAVeggie = false,Comment = "spring plant",item_Image="fruit_salad.jpeg"
});

and Xaml -

  <Image Source="{Binding item_Image}"/>

In above example, item_Image is a type of string. I am working on xamarin forms with Mac using Xamarin studio. I am not able to access "fruit_salad.jpeg" which stored in Image folder of PCL project. Instead of using file name, if I am using URL of any image, it's accessible. What to do for accessing images stored in Images folder of PCL project.

Answers

  • NMackayNMackay GBInsider, University ✭✭✭✭✭
    edited May 2016

    @PrawalGupta

    if you want to access images in your PCL you have do do it slightly differently and use a XAML extension

    using System;
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    
    namespace Foobar.Helpers
    {
        [ContentProperty("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);
    
                return imageSource;
            }
        }
    }
    

    xmlns:local="clr-namespace:Foobar.Helpers;assembly=Foobar"

    <Image
                Aspect="AspectFit"
                VerticalOptions="End"
                WidthRequest="60"
                HeightRequest="60"
                HorizontalOptions="CenterAndExpand"
                Source="{local:ImageResource Foobar.Resources.CompanyLogo.png}" />
    

    Resources is a folder, in your case use whatever folder name your images are stored in.

    There is more information in the official documentation.

    https://developer.xamarin.com/guides/xamarin-forms/working-with/images/

  • PrawalGuptaPrawalGupta USMember ✭✭

    @NormanMackay- I need to create separate class "ImageResourceExtension". Is it?

  • PrawalGuptaPrawalGupta USMember ✭✭

    @NormanMackay - I need to create separate class "ImageResourceExtension". Is it?

  • PrawalGuptaPrawalGupta USMember ✭✭

    @PrawalGupta said:
    @NMackay- I need to create separate class "ImageResourceExtension". Is it?

  • PrawalGuptaPrawalGupta USMember ✭✭
    edited May 2016

    @NMackay
    In my code I need binding like <Image Source="{Binding item_Image}"/> not particular image like Source="{local:ImageResource Foobar.Resources.CompanyLogo.png}". Any solution in the same?

  • NMackayNMackay GBInsider, University ✭✭✭✭✭
    edited May 2016

    @PrawalGupta

    I'm not really clear why your doing it in this way. If you have a listview with say 4 different image indicator states based on a property of a bound object your better using a valueconverter and having the images as resources in your platform specific project, also it's easier as you can set images sizes based on the platforms/device your running your app on.

    You probably need to use both IMarkupExtension and IValueConverter to achieve what you want to do.

    http://stackoverflow.com/questions/7445119/improved-ivalueconverter-markupextension-or-dependencyobject

  • PrawalGuptaPrawalGupta USMember ✭✭

    @NMackay
    Thanks for reply.
    I have one more question- In your class your namespace is like "namespace Foobar.Helpers" but I have "namespace DinePerfect". Why is it so? Is it any special type of project? In my case, the how will be the following line ?

    Source="{local:ImageResource Foobar.Resources.CompanyLogo.png}" />
    
  • NMackayNMackay GBInsider, University ✭✭✭✭✭

    @PrawalGupta

    Your namespace can be whatever you want. I just used Foobar as a generic non descriptive namespace for sample code, it's just the namespace of the PCL for your UI layer (Pages, converters, extensions etc). I keep my viewmodels/business logic in a separate PCL but not everyone does.

    You could use DinePerfect.Extensions for example for your markup extensions or DinePerfect.Converters for ValueConverters. Just means if someone else picks up your work it's easy to find out where stuff is and what it's purpose is.

  • RianDutraRianDutra USMember ✭✭

    @PrawalGupta said:
    @NMackay
    In my code I need binding like <Image Source="{Binding item_Image}"/> not particular image like Source="{local:ImageResource Foobar.Resources.CompanyLogo.png}". Any solution in the same?

    What was the solution for binding image in XAML?

  • 14skywalker14skywalker NLMember ✭✭

    @RianDutra: use <Image Source="{Binding ImageResourceProperty}"> and let the property return the image resource (without using the Extension)

  • @JeroenVisscher I tried it but did not work

Sign In or Register to comment.