Home

Awesome

AsyncImageLoader.Avalonia

Provides way to asynchronous bitmap loading for Avalonia Image control.
Features:

Getting started

  1. Install AsyncImageLoader.Avalonia nuget package
dotnet add package AsyncImageLoader.Avalonia
  1. Start using

Using

Note: The first time you will need to import the AsyncImageLoader namespace to your xaml file. Usually your IDE should suggest it automatically. The root element in the file will be like this:

<Window ...
        xmlns:asyncImageLoader="clr-namespace:AsyncImageLoader;assembly=AsyncImageLoader.Avalonia"
        ...>
   <!-- Your root element content -->

Note: Assets and resources in Avalonia described here.

ImageLoader attached property

The only thing you need to do in your xaml is to replace the Source property in Image with ImageLoader.Source.
For example, your old code:

<Image Source="https://mycoolwebsite.io/image.jpg" />

Should turn into:

<Image asyncImageLoader:ImageLoader.Source="https://mycoolwebsite.io/image.jpg" />

Also you can use ImageLoader.IsLoading readonly attached property that indicates whether the load is in progress or not.

AsyncImageLoader support resm: and avares: links. And does not support relative referenced assets such as Source="icon.png" or Source="/icon.png". Use AdvancedImage control.

AdvancedImage control

This control provides all capabilities of ImageLoader attached property and support relative referenced assets such as Source="icon.png" or Source="/icon.png". Before you go, add following style to you App.xaml file and Application.Styles section:

<StyleInclude Source="avares://AsyncImageLoader.Avalonia/AdvancedImage.axaml" />

And you can use AdvancedImage as any other control:

<asyncImageLoader:AdvancedImage Width="150" Height="150" Source="../Assets/cat4.jpg" />

This control allows specifying a custom IAsyncImageLoader for particular control.
Also, this control has loading indicator support out of the box.

ImageBrush

If you need a brush you can use Avalonia's ImageBrush with ImageBrushLoader.Source property (instead of default Source). It will look like that:

<Border>
  <Border.Background>
    <ImageBrush
      asyncImageLoader:ImageBrushLoader.Source="https://mycoolwebsite.io/image.jpg" />
  </Border.Background>
</Border>

Loaders

ImageLoader will use instance of IImageLoader for serving your requests.
You can change the loader used by setting new one to the ImageLoader.AsyncImageLoader property. Do not forget to Dispose previous loader.
There are several loaders available out of the box:

RamCachedWebImageLoader are used by default.