Xamarin.forms: Visual=Material breaks image loading inside a bindable flexlayout

[mikescandy]

Description

Images are not loading inside a FlexLayout with a BindableLayout.ItemsSource and a BindableLayout.ItemTemplatei if the contentpage Visual is set to Material

Steps to Reproduce

• Set the Visual of the ContentPage to "Material"
• Add a flexlayout:

 <FlexLayout Margin="0,20,0,0" BindableLayout.ItemsSource="{Binding Artist.Songs}"  Direction="Row" Wrap="Wrap" JustifyContent="SpaceEvenly">
                        <BindableLayout.ItemTemplate>
                            <DataTemplate>
                                <templates:AlternateAlbumTemplate/>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </FlexLayout>

this is the template

<Frame 
    xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:Pollux.Views"
    x:Class="Pollux.Templates.AlternateAlbumTemplate"
    Margin="5" Padding="0" CornerRadius="8" HasShadow="True" HeightRequest="150" WidthRequest="150">
    <Grid HeightRequest="150" WidthRequest="150">
        <Image x:Name="CachedImage" HeightRequest="150" WidthRequest="150"  Aspect="AspectFill" />
        <views:SKGradientCanvasView HeightRequest="150" WidthRequest="150" VerticalOptions="Start"  />
        <Label Margin="10,0,10,10"  Text="{Binding Title}"  FontSize="12" FontFamily="Montserrat-Bold.ttf#Montserrat-Bold" TextColor="White" VerticalOptions="End" LineBreakMode="WordWrap"  />
    </Grid>
</Frame>

Expected Behavior

The image loads

Actual Behavior

Image doesn't load. Debug output shows
Context android.view.ContextThemeWrapper@f47d335 is not an Android.App.Activity, aborting image load for `Uri:

Basic Information

• Version with issue: 4.0.1.7734-nightly
• Last known good version: n/a
• IDE: Visual Studio
• Platform Target Frameworks:
  
  
  
  • Android: 9.0
  
  
• Android Support Library Version: 28.0.0-preview8
• Affected Devices: tested on emulator

Screenshots

vs.

Reproduction Link

Will try to provide a sample code to reproduce the issue if needed.

[PureWeen]

@mikescandy in your sample I don't see how you're setting the source on the image.

I ran a quick test locally and the image is loading for me
The Visual is also set at the ContentPage Level

<FlexLayout Margin="0,20,0,0" Direction="Row" Wrap="Wrap" JustifyContent="SpaceEvenly" x:Name="bindableStackLayout">
                        <BindableLayout.ItemTemplate>
                            <DataTemplate>
                                <Frame Visual="Material">
                                    <Image Source="https://raw.githubusercontent.com/xamarin/Xamarin.Forms/master/Xamarin.Forms.ControlGallery.Android/Assets/WebImages/XamarinLogo.png"></Image>
                                </Frame>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </FlexLayout>

[mikescandy]

I'm using something like this

 var uri = ((UriImageSource)UriImageSource.FromUri(new System.Uri(song.AlbumImageThumbnail)));
 uri.CachingEnabled = true;
 uri.CacheValidity = new System.TimeSpan(365, 0, 0, 0);
 CachedImage.Source = uri;

from the template OnBindingContextChanged() method.
I'll try to isolate a minimal repro.

[PureWeen]

Thanks @mikescandy

I can definitely see the possibility of that error but I'm not having the best of luck reproducing

[mikescandy]

… Can't reproduce anymore. I think that at some point I was trying the glidex library, and probably the app was keeping on loading images using glide and failing. I branched my app, cleaned everything and it working. sorry :(

I guess I can close.

[PureWeen]

@mikescandy
I'll keep an eye out while I'm working on this more :-) I'm probably redoing the code that uses the ContextThemeWrapper's anyway.

Thank you for trying out the Visual stuff!! Let me know any thoughts or suggestions

[mikescandy]

A quick note as I gave it another shot. The problem is related to Glidex.Forms (pinging @jonathanpeppers here). Some images load fine, but the one in the Frame fail to load.
I'll just leave this here because of https://xkcd.com/979/ 😁

[PureWeen]

Some "context" @jonathanpeppers

The visual code uses ContextThemeWrapper to apply Material themes to controls. So in a case where you have

<Frame Visual="Material">
<image>

The Context that's going to reach Image at the Android level is going to be of type ContextThemeWrapper not type Activity

[mikescandy]

And now that I spent some time digging into Glidex.Forms I see where the issue is coming from.

In GlideExtensions.cs:

 if (imageView.Context is Activity activity)

Now it makes sense. I'll implement my ImageViewHandler with a tweaked GlideExtension. That should do the trick!

Thanks @PureWeen !

[jonathanpeppers]

@mikescandy we might just need to completely remove this else: https://github.com/jonathanpeppers/glidex/blob/e5b44e1da49d9324ccce113246cec7534e8cafe1/glidex.forms/GlideExtensions.cs#L28-L31

The check for Activity was to make sure it wasn't in the middle of finishing.

Would you be able to make a quick repro in the glidex repo using the glidex.forms.sample project? Do I just need to enable "material"? (file an issue there if you can)

[mikescandy]

I checked on my app and it works without. I'll file an issue later.