.NET MAUI Controls Documentation

Image Control

The Image view displays bitmap images, such as PNG or JPEG, and supports loading from resources, file paths, streams, or remote URLs.

Key Features

Basic Usage

XAML
C#
<Image
    Source="dotnet_bot.png"
    Aspect="AspectFit"
    WidthRequest="200"
    HeightRequest="200"/>
var img = new Image
{
    Source = "dotnet_bot.png",
    Aspect = Aspect.AspectFit,
    WidthRequest = 200,
    HeightRequest = 200
};

Advanced Example – Remote Image with Placeholder

XAML
C#
<Image
    x:Name="remoteImg"
    WidthRequest="300"
    HeightRequest="200"
    Aspect="AspectFill">
    <Image.Source>
        <UriImageSource
            Uri="https://picsum.photos/300/200"
            CachingEnabled="True"
            CacheValidity="7"/>
    </Image.Source>
</Image>
var remoteImg = new Image
{
    WidthRequest = 300,
    HeightRequest = 200,
    Aspect = Aspect.AspectFill,
    Source = new UriImageSource
    {
        Uri = new Uri("https://picsum.photos/300/200"),
        CachingEnabled = true,
        CacheValidity = TimeSpan.FromDays(7)
    }
};

Sample Gallery

Below are examples of the Aspect settings:

Aspect Fill
Aspect Fill
Aspect Fit
Aspect Fit
Aspect Center
Aspect Center

Properties

PropertyDescription
SourceImage location (resource, file, URI).
AspectHow the image scales within its bounds.
IsLoadingIndicates if a remote image is still downloading.
IsAnimationPlayingControls GIF or WebP animation playback.

Related Topics