Forum Xamarin Xamarin.Forms

Xamarin.Forms UWP - FFImageLoading CachedImage not Showing Bound Image Source

dinobdinob USUniversity ✭✭✭

I am working on Xamarin.Forms UWP project and I am trying to use FFImageLoading CachedImage instead of Xamarin.Forms Image view.

The Image Source is bound to ImageUri property which gets the image path from a directory on local systems. Putting break point on the property reveals that the path to the png image is:


Setting CachedImage Source property using Binding will NOT show the image:

      Source="{Binding ImageUri}" 
      DownsampleToViewSize="True" />

However, copying the path above and pasting in XAML will work:

      DownsampleToViewSize="True" />

Why is binding not working in this case?


  • DanielLDanielL PLInsider ✭✭✭✭
    edited September 2017

    That's quite strange. Here's the code for ImageSourceConverter which is used when you provide a string image source:

    What you could try is to prefix your path with file:// scheme. Eg. file://C:/Users/user-name/AppData/Local/Packages/MyApp/LocalState/eng/resources/resources/plugins/MyPlugin/provider_icon.png, but I don't have a clue why the behaviour could be different with binding vs providing constant string.

  • dinobdinob USUniversity ✭✭✭
    edited September 2017

    @DanielL I took the converter you provided me the link for and added it to a new class MyImageConverter.cs, then
    I added the namespace (xmlns) to my XAML file and added MyImageConverterto ResourceDictionaryin my XAML file
    with x:Key="myImageConverter".

    Below are two examples of using image, 1st does not work regardless whether I use converter or not.
    Am I using your converter properly?

    The 2nd does work fine.
    Any idea why 1st example with Binding does not work?

        <ff:CachedImage Source="{Binding ImageUri, Converter={StaticResource myImageConverter}}" 
          WidthRequest="30" HeightRequest="30" VerticalOptions="Center" 
          DownsampleToViewSize="True" />  # **//this does not work**

    Above, the Binding ImageUri property is set to "C:/Users/user-name/AppData/Local/Packages/mypackage/LocalState/eg/resources/resources/plugins/MyPlugin/MyImage.png"
    This returns error "Position 31:25. Cannot assign property "Converter": Property does not exists, or is not assignable, or mismatching type between value and property"

    <ff:CachedImage Source="C:/Users/user-name/AppData/Local/Packages/mypackage/LocalState/eg/resources/resources/plugins/MyPlugin/MyImage.png"
        WidthRequest="30" HeightRequest="30" VerticalOptions="Center" 
        DownsampleToViewSize="True" />  # **//this works**

    I have also tried modifying the ImageUri property to use "file://C:/...." instead of just "C:/..." as you suggested but that had no effect.

    I have also tried adding xmlns namespace for FFImageLoading.Formsand ImageSourceConverter to my ResourceDictionary instead of creating brand new class and copying the code from ImageSourceConverter like I did above. However, this also errors with the same error "Position 31:25. Cannot assign property "Converter": Property does not exists, or is not assignable, or mismatching type between value and property" like above.

    Here is how I added xmlns namespace to my XAML:

    Here is my ResourceDictionary:

              <ff:ImageSourceConverter x:Key="imageSourceConverter"/>

    This SelectableListimplements Layout<View>, so it is not a List really.

    And I use the converter just like above.

  • dinobdinob USUniversity ✭✭✭
    ... not sure if you noticed that the image is located at the above provided path which is in apps sandbox I believe. It is downloaded there and present on that path but I wonder if the fact that it is not in app for but there an issue
Sign In or Register to comment.