---
title: "A Smoother User Experience with Image Caching in .NET MAUI"
published_at: "2023-06-06T11:15:00+00:00"
modified_at: "2026-01-09T13:54:07+00:00"
url: "https://www.syncfusion.com/blogs/post/image-caching-in-dotnet-maui"
excerpt: "This blog post explains implementing the image caching feature in Syncfusion’s .NET MAUI Avatar View control, with code examples."
taxonomy_category:
  - ".NET MAUI"
  - "Desktop"
  - "Development"
  - "Mobile"
  - "Syncfusion"
taxonomy_post_tag:
  - ".NET MAUI"
  - "Avatar View"
  - "desktop"
  - "MAUI"
  - "Mobile"
---

# A Smoother User Experience with Image Caching in .NET MAUI

[Selva Ganapathy Kathiresan](https://www.syncfusion.com/blogs/author/selva-ganapathy-k)

![A Smoother User Experience with Image Caching in .NET MAUI](https://www.syncfusion.com/blogs/wp-content/uploads/2023/06/A-Smoother-User-Experience-with-Image-Caching-in-.NET-MAUI.png)


Image caching is a technique that stores images in cache memory to improve an app’s performance. If we search for an image, the app first looks for the image in the cache. If the image is found in the cache, the application will not try to load the image from the source.

The image cache is significant because it helps reduce the app’s loading time and data usage. By caching images, the app can retrieve them more efficiently, which leads to a better user experience.

In this blog, we’ll see how to implement the image caching feature in Syncfusion’s [.NET MAUI Avatar View](https://www.syncfusion.com/maui-controls/maui-avatarview)
 control.

## Image caching in .NET MAUI

In .NET MAUI, **ImageSource** is a default feature that caches downloaded images for a day. The ** UriImageSource** class provides properties to customize the image caching behavior. The ** Uri** property specifies the image’s URI, and the ** CacheValidity** property sets the image’s local storage duration.

The default value for **CacheValidity** is one day. ** CachingEnabled** is another property that toggles image caching on or off, with the default value being ** true**.

Refer to the following code example.

```
<Image>
 <Image.Source>
  <UriImageSource Uri="https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Introducing-.NET-MAUI-Avatar-View-Control-thegem-blog-justified.png" CacheValidity="10" />
 </Image.Source>
</Image>
```

## Implement image caching in .NET MAUI Avatar View

The .NET MAUI Avatar View is a graphical representation of a user’s image. It allows you to customize the view by adding images, background color, icons, text, and more. You can also display useful information such as initials and status.

Developers can easily create an Avatar View by customizing the prebuilt vector images to meet their specific requirements. This control can be utilized in various apps such as social media, messaging, and email clients, where user profiles play a vital role.

Let’s see the steps to add the Syncfusion Avatar View control to your .NET MAUI app and implement the image caching feature in it.

### Step 1: Create a .NET MAUI app

First, [create a .NET MAUI application](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?tabs=vswin&pivots=devices-android)
.

### Step 2: Add .NET MAUI Avatar View reference

The Syncfusion .NET MAUI controls are available on [NuGet.org](https://www.nuget.org/)
. To add the .NET MAUI Avatar View to your project, open the **NuGet Package Manager** in [Visual Studio](https://visualstudio.microsoft.com/)
, and search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/)
, and then install it.

### Step 3: Register the handler

**Syncfusion.Maui.Core** NuGet is a dependent package for all Syncfusion .NET MAUI controls. In the ** MauiProgram.cs** file, register the handler for Syncfusion core.

```
Public static class MauiProgram
{
  public static MauiApp CreateMauiApp()
  {
     var builder = MauiApp.CreateBuilder();
     builder
      .UseMauiApp>App>()
      .ConfigureFonts(fonts =>
      {
        fonts.AddFont(“OpenSans-Regular.ttf”, “OpenSansRegular”);
        fonts.AddFont(“OpenSans-Semibold.ttf”, “OpenSansSemibold”);
      });
    builder.ConfigureSyncfusionCore();
    return builder.Build();
  }
}
```

### Step 4: Add the namespace

Add the **Syncfusion.Maui.Core** namespace on your XAML page.

```
xmlns: syncfusion ="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
```

### Step 5: Initialize the .NET MAUI Avatar View control

Then, initialize the .NET MAUI Avatar View control using the following code.

```
<syncfusion:SfAvatarView />
```

### Step 6: Load custom image in .NET MAUI Avatar View

You can add a custom image in the Avatar View using the **ImageSource** property and by setting ** Custom**as the value in the ** ContentType**property. Refer to the following code example.

```
<syncfusion:SfAvatarView ImageSource="avatarviewimage.png" ContentType="Custom"  
                         VerticalOptions="Center"
                         HorizontalOptions="Center"   
                         HeightRequest="200"
                         WidthRequest="400" />
```

### Step 7: Implement image caching in .NET MAUI Avatar View

Finally, implement the image caching feature in the .NET MAUI Avatar View using the **ImageSource** property for optimal image handling.

```
<syncfusion:SfAvatarView ContentType="Custom"  
                         VerticalOptions="Center"
                         HorizontalOptions="Center"   
                         HeightRequest="200"
                         WidthRequest="400" >
  < syncfusion:SfAvatarView.ImageSource>
   <UriImageSource CachingEnabled="True" Uri="https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Introducing-.NET-MAUI-Avatar-View-Control-thegem-blog-justified.png" CacheValidity="10" />
  </ syncfusion:SfAvatarView.ImageSource>
</ syncfusion:SfAvatarView>
```

Now, you can quickly search for images and retrieve them without reloading them from the remote source in the .NET MAUI Avatar View control.

## Reference

For more details, refer to the project on [GitHub](https://github.com/SyncfusionExamples/maui-avatarview-samples/tree/master/AvatarViewImageCache)
.

## Conclusion

Thanks for reading! In this blog, we’ve seen how to implement the image caching feature in the [.NET MAUI Avatar View](https://www.syncfusion.com/maui-controls/maui-avatarview)
 control for optimal image handling. To try out the Avatar View control, download our Essential Studio® for [.NET MAUI](https://www.syncfusion.com/maui-controls)
.

If you are not a Syncfusion customer, you can use our 30-day [free trial](https://www.syncfusion.com/downloads)
 to see how our components can benefit your projects.

We encourage you to check out our .NET MAUI controls’ [demos on GitHub](https://github.com/syncfusion/maui-demos)
 and share your feedback or questions in the comments below.

You can also contact us through our [support forum](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback/home)
. Our team is always ready to assist you!

## Related blogs

- [Time Regions in .NET MAUI Scheduler—An Overview](https://www.syncfusion.com/blogs/post/time-regions-dotnet-maui-scheduler.aspx)
- [Easily Replicate a Sign-Up UI in .NET MAUI](https://www.syncfusion.com/blogs/post/replicate-sign-up-ui-dotnet-maui.aspx)
- [Create a Place Explorer App Using .NET MAUI and ChatGPT](https://www.syncfusion.com/blogs/post/place-explorer-app-using-dotnet-maui-chatgpt.aspx)
- [Chart of the Week: Creating a .NET MAUI Inversed Column Chart to Visualize Meta Reality Labs’s Yearly Operating Loss](https://www.syncfusion.com/blogs/post/dotnet-maui-inversed-column-chart-visualize-yearly-operating-loss-data.aspx)