locked
Image binding using path in Xamarin forms RRS feed

  • Question

  • User209349 posted

    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, itemImage is a type of string. I am working on xamarin forms with Mac using Xamarin studio. I am not able to access "fruitsalad.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.

    Thursday, May 5, 2016 11:12 AM

All replies

  • User76049 posted

    @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/

    Thursday, May 5, 2016 11:27 AM
  • User209349 posted

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

    Thursday, May 5, 2016 11:38 AM
  • User209349 posted

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

    Thursday, May 5, 2016 11:42 AM
  • User209349 posted

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

    Thursday, May 5, 2016 11:44 AM
  • User209349 posted

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

    Thursday, May 5, 2016 11:52 AM
  • User76049 posted

    @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

    Thursday, May 5, 2016 12:00 PM
  • User209349 posted

    @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}" />
    
    Thursday, May 5, 2016 12:15 PM
  • User76049 posted

    @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.

    Thursday, May 5, 2016 12:24 PM
  • User233224 posted

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

    What was the solution for binding image in XAML?

    Monday, July 18, 2016 1:50 PM
  • User176928 posted

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

    Sunday, November 6, 2016 8:57 PM
  • User345263 posted

    @JeroenVisscher I tried it but did not work

    Tuesday, August 29, 2017 9:04 PM
  • User324119 posted

    del

    Tuesday, December 26, 2017 9:15 PM
  • User390023 posted

    Is it just me because I am new to Xamarin Forms, or is setting images overly complicated? I have never run into any platform where setting images is so difficult! Maybe it's a Xaml thing as I've never been a fan of Xaml? I admit that Xamarin forms seems to be the best way to go for multi-platform mobile app development so I am finally biting the Xaml bullet... Is it this difficult to set images in WPF too?

    Monday, October 28, 2019 5:05 PM