AsyncImage

An image loaded from a URI off the UI thread, with loading and fallback content, as uikit:AsyncImage.

ExampleInteractive

AsyncImage — Avalonia UIKit

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <uikit:AsyncImage Classes="rounded-lg" Width="192" Height="96"
                    Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <uikit:AsyncImage Classes="rounded-lg" Width="96" Height="96" Stretch="UniformToFill"
                    Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <uikit:AsyncImage Width="96" Height="96" Source="avares://AvaloniaUIKit.Demos/Assets/missing.png">
    <uikit:AsyncImage.Loading>
      <Border Background="{DynamicResource UIKit.Muted}" CornerRadius="8" />
    </uikit:AsyncImage.Loading>
    <uikit:AsyncImage.Fallback>
      <Border Background="{DynamicResource UIKit.Muted}" CornerRadius="8">
        <StackPanel Spacing="4" HorizontalAlignment="Center" VerticalAlignment="Center">
          <uikit:Icon Kind="CircleX" HorizontalAlignment="Center" Foreground="{DynamicResource UIKit.MutedForeground}" />
          <TextBlock Text="Unavailable" FontSize="12" Foreground="{DynamicResource UIKit.MutedForeground}" />
        </StackPanel>
      </Border>
    </uikit:AsyncImage.Fallback>
  </uikit:AsyncImage>
</StackPanel>

Usage

uikit:AsyncImage loads its Source, an http, https, file or avares URI, off the UI thread and draws the image as Image does: Stretch, StretchDirection and the rounded, rounded-lg and rounded-full classes work the same. While the image loads, the control keeps its own size and draws nothing; if the load is still running after 200ms, it shows its Loading content, so a fast load never flashes it. If the load fails, it shows its Fallback content. The pseudo-classes :loading, :loaded and :failed follow the load.

The default loader (ImageLoader.Default) keeps each source's image for every AsyncImage that shows it; Remove and Clear forget images, and a failed load is tried again by the next image of that source. Set Loader to your own IImageLoader to load images another way. SVG and animated images are not decoded.

In the demo, the first two images load from the app's assets; the third one's source is missing, so it shows its fallback.

AsyncImage

#Usage

Usage