Markup Extensions - Access to internals / alternative approaches

[JaggerJo]

I'd like to build a Markup Extension that can be used as an in memory image cache.

I'd like to be able to bind to the resource and get a stream binding back that's either a completed task with the IImage or a running task.

I'd like to bind to an image path (as an IObservable) in XAML and use a markup extension to cache the result.

I can't figure out how to pass the ViewModels ImagePath property to the Markup Extension as an IObservable. The old binding API allowed passing it as a BindingBase. A call to Initiate(..) returned an InstancedBinding which had the Observable as the Source property.

What's the proper way of doing this now?

public sealed class ImageCache
{
    private static readonly ConcurrentDictionary<string, Task<IImage>> _cache = new();
    private static readonly Lock _cacheSync = new ();
    
    // How can I get an Observable of my binding value?
    private readonly IObservable<string> _imageUri;
    
    public ImageCache(IObservable<string> imageUri)
    {
        _imageUri = imageUri;
    }
    
    public object ProvideValue(IServiceProvider provider)
        => _imageUri.Select(Fetch);
    
    private static Task<IImage> Fetch(string imageUri)
        => _cache.GetOrAdd(imageUri, LoadImage);
    
    private static Task<IImage> LoadImage(string imageUri)
        => Task.Run(IImage () => 
        {
            var uri = new Uri(imageUri);
            var stream = AssetLoader.Open(uri);
            var bitmap = WriteableBitmap.Decode(stream);
            
            return bitmap;
        });
}

[jack775544]

I was faced with a similar issue recently and found some good advice given in this thread: #16787

Basically you wrap the binding in a MultiBinding and then use a converter to transform the binding into the value that you want.

[JaggerJo]

Thanks @jack775544

The issue I'm facing is that I need to do asynchronous operations after combining the observables. From what I know converters can't return IObservable or Task but need to return the target property type.

[stevemonaco]

I wouldn't use Image in this case. The other popular async image libraries create their own type:

https://github.com/AvaloniaUtils/AsyncImageLoader.Avalonia
https://github.com/AvaloniaUI/Avalonia.Labs/blob/9cb050a4fa44ea91dafc24ac230341880a4148ed/src/Avalonia.Labs.Controls/AsyncImage/AsyncImage.cs

The Image control is ~150 LoC and you shouldn't be too concerned about replicating it to provide additional logic that keeps other areas simpler.

That said, if you're simply trying to get a binding here:

// How can I get an Observable of my binding value?
private readonly IObservable<string> _imageUri;

You can call _imageUri.ToBinding(). Similar with any downstream observable which you need to return a binding of in ProvideValue. Not sure if Avalonia does this automatically from an observable.

Regarding converters: they're really bad for async operations. This is why I say to not use Image at all.

[JaggerJo]

Yes, but not to a task that is returned by a markup extension, right?

[thevortexcloud]

Not sure, I have never tried it. I think it should work with a converter though, since the converter only sees the result of the task. But it's been a long time since I tried.

[JaggerJo]

Yeah, it's not possible currently.

[stevemonaco]

Possibly an attribute like [AssignBinding] would need to be created for observables.

[JaggerJo]

@stevemonaco yes, something like that would be great. So you could simply get Observables in the markup extension.