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

dinobuljubasicdinobuljubasic 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:

C:/Users/user-name/AppData/Local/Packages/MyApp/LocalState/eng/resources/resources/plugins/MyPlugin/provider_icon.png

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

    <ff:CachedImage 
      Source="{Binding ImageUri}" 
      WidthRequest="20" 
      HeightRequest="20" 
      VerticalOptions="Center" 
      DownsampleToViewSize="True" />

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

    <ff:CachedImage 
      Source="C:/Users/user-name/AppData/Local/Packages/MyApp/LocalState/eng/resources/resources/plugins/MyPlugin/provider_icon.png" 
      WidthRequest="20" 
      HeightRequest="20" 
      VerticalOptions="Center" 
      DownsampleToViewSize="True" />

Why is binding not working in this case?

Answers

  • DanielLDanielL PLInsider ✭✭✭✭
    edited September 10

    That's quite strange. Here's the code for ImageSourceConverter which is used when you provide a string image source: https://github.com/luberda-molinet/FFImageLoading/blob/master/source/FFImageLoading.Forms/ImageSourceConverter.cs#L17-L47

    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.

  • dinobuljubasicdinobuljubasic USUniversity ✭✭
    edited September 12

    @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 MyImageConverter to ResourceDictionary in 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" 
          InputTransparent="True" 
          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" 
        InputTransparent="True" 
        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.

    UPDATE:
    I have also tried adding xmlns namespace for FFImageLoading.Forms and 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:
    xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"

    Here is my ResourceDictionary:

          <c:SelectableList.Resources>
            <ResourceDictionary>
              <ff:ImageSourceConverter x:Key="imageSourceConverter"/>
            </ResourceDictionary>
          </c:SelectableList.Resources>
    

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

    And I use the converter just like above.

  • dinobuljubasicdinobuljubasic 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.