Image Control

Basic Usage

To display an image, you can set the Source property to a URI or a path to an image file.

In XAML:

<Image Source="dotnet_bot.png" />

In C#:

var image = new Image { Source = "dotnet_bot.png" };

Image Sources

The Source property can accept different types of image sources:

• Local Files: Place image files in the Resources/Images folder of your .NET MAUI project.
• Embedded Resources: Add images as embedded resources.
• Remote URLs: Use a valid URL to fetch an image from the internet.
• Image Data: Use ImageSource.FromStream to load an image from a stream.

Loading from a URL

When using a remote URL, ensure your app has internet permissions configured.

<Image Source="https://your-cdn.com/path/to/your/image.jpg" />

Loading from Embedded Resources

Images placed in the Resources/Images folder are automatically embedded resources.

<Image Source="my_custom_icon.svg" />

Aspect Ratio

The Aspect property controls how an image is resized to fit its allocated space. The available values are:

• AspectFit: The image is scaled to fit within the destination rectangle while maintaining its aspect ratio.
• AspectFill: The image is scaled to fill the destination rectangle. Portions of the image may be cropped.
• Fill: The image is stretched to fill the destination rectangle, potentially distorting its aspect ratio.

Example:

<Image Source="large_image.png" Aspect="AspectFill" />

Commonly Used Properties

Property	Description	Default
Source	The source of the image. Can be a Uri, filename, or embedded resource name.	null
Aspect	How the image is scaled to fit its container.	AspectFit
IsOpaque	Indicates if the image is opaque.	false
AutomationId	Unique identifier for automation testing.	null

Customizing Appearance

You can further customize the appearance of the Image control using standard visual properties like BackgroundColor, HeightRequest, WidthRequest, Margin, Padding, and TranslationX/Y.

<Image Source="logo.png"
       WidthRequest="200"
       HeightRequest="200"
       BackgroundColor="LightGray"
       CornerRadius="10"
       IsOpaque="True" />