Skip to content
Avalonia UIKit
GitHub

Search documentation

Find components, guides and examples.

Esc
↑↓Navigate↵OpenEscClose

Theme

Choose the site's color theme.

ThemeT

System

Light

Dark

↑↓Preview↵ApplyEscCancel
Browse documentation

Image

Partial

Avalonia's Image with rounded corners and five fits.

ExampleInteractive
Image — Avalonia UIKit
Image demo
<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <Image Classes="rounded-lg" Width="192" Height="96"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <Image Classes="rounded-lg" Width="96" Height="96" Stretch="UniformToFill"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <Image Classes="rounded-lg" Width="96" Height="96" Stretch="Uniform"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
</StackPanel>

Usage

Image is not themed by default: an image keeps its colors, and Avalonia's Stretch="Uniform" is the default fit. Three classes clip the drawn image to a radius: rounded (the theme radius, 6), rounded-lg (8) and rounded-full (a pill; the radius is clamped to half the shorter side). Five fits are set with Stretch:

ImageDraws
Stretch="Fill"The image stretched to the frame, ignoring its aspect ratio
Stretch="Uniform" (the default)The whole image, scaled to fit inside the frame
Stretch="UniformToFill"The image scaled to cover the frame, cropped to it
Stretch="Uniform" StretchDirection="DownOnly"As Uniform, but a smaller image keeps its own size
Stretch="None" with HorizontalAlignment="Left" VerticalAlignment="Top"The image at its own size, at the top left

Examples

The five fits in a 96px frame: a wide image for the first three, a small one for DownOnly and None.

Object fitInteractive
Image demo: Object fit
<WrapPanel ItemSpacing="16" LineSpacing="16">
  <StackPanel Spacing="4">
    <Border Width="96" Height="96" BorderThickness="1" BorderBrush="{DynamicResource UIKit.Border}">
      <Image Stretch="Fill" Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
    </Border>
    <TextBlock Text="Fill" FontSize="12" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
  <StackPanel Spacing="4">
    <Border Width="96" Height="96" BorderThickness="1" BorderBrush="{DynamicResource UIKit.Border}">
      <Image Stretch="Uniform" Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
    </Border>
    <TextBlock Text="Uniform" FontSize="12" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
  <StackPanel Spacing="4">
    <Border Width="96" Height="96" BorderThickness="1" BorderBrush="{DynamicResource UIKit.Border}">
      <Image Stretch="UniformToFill" Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
    </Border>
    <TextBlock Text="UniformToFill" FontSize="12" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
  <StackPanel Spacing="4">
    <Border Width="96" Height="96" BorderThickness="1" BorderBrush="{DynamicResource UIKit.Border}">
      <Image Stretch="Uniform" StretchDirection="DownOnly" Source="avares://AvaloniaUIKit.Demos/Assets/small-48x48.png" />
    </Border>
    <TextBlock Text="DownOnly" FontSize="12" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
  <StackPanel Spacing="4">
    <Border Width="96" Height="96" BorderThickness="1" BorderBrush="{DynamicResource UIKit.Border}">
      <Image Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"
             Source="avares://AvaloniaUIKit.Demos/Assets/small-48x48.png" />
    </Border>
    <TextBlock Text="None" FontSize="12" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
</WrapPanel>

rounded, rounded-lg and rounded-full on a square image, and rounded-full on a wide one.

RoundedInteractive
Image demo: Rounded
<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <Image Classes="rounded" Width="96" Height="96" Stretch="UniformToFill"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <Image Classes="rounded-lg" Width="96" Height="96" Stretch="UniformToFill"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <Image Classes="rounded-full" Width="96" Height="96" Stretch="UniformToFill"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <Image Classes="rounded-full" Width="192" Height="96"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
</StackPanel>

Not covered

  • Fetching from a URL.
  • A fallback image when loading fails.