A Smoother User Experience with Image Caching in .NET MAUI
Tags: dotnetmaui, development, mobile
Published: 2023-06-06 13:17:42

---
title: A Smoother User Experience with Image Caching in .NET MAUI
published: true
date: 2023-06-06 11:15:00 UTC
tags: dotnetmaui, development, mobile
canonical_url: https://www.syncfusion.com/blogs/post/image-caching-in-dotnet-maui.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b33l7w1538e43w32v06e.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 ".NET MAUI Avatar View control") 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.

```xml
<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 "Build your first .NET MAUI app documentation").

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

The Syncfusion .NET MAUI controls are available on [NuGet.org](https://www.nuget.org/ "NuGet Gallery"). To add the .NET MAUI Avatar View to your project, open the **NuGet Package Manager** in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"), and search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/ "Syncfusion.Maui.Core NuGet Package"), 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.

```csharp
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.

```xml
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.

```xml
<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.

```xml
<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.

```xml
<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 "Image caching in .NET MAUI using Avatar View GitHub demo").

## 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 ".NET MAUI Avatar View control") 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 ".NET MAUI controls").

If you are not a Syncfusion customer, you can use our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio products") 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 "Syncfusion .NET MAUI controls' GitHub 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 "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/home "Syncfusion Feedback Portal"). 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 "Blog: Time Regions in .NET MAUI Scheduler—An Overview")
- [Easily Replicate a Sign-Up UI in .NET MAUI](https://www.syncfusion.com/blogs/post/replicate-sign-up-ui-dotnet-maui.aspx "Blog: Easily Replicate a Sign-Up UI in .NET MAUI")
- [Create a Place Explorer App Using .NET MAUI and ChatGPT](https://www.syncfusion.com/blogs/post/place-explorer-app-using-dotnet-maui-chatgpt.aspx "Blog: Create a Place Explorer App Using .NET MAUI and ChatGPT")
- [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 "Blog: Chart of the Week: Creating a .NET MAUI Inversed Column Chart to Visualize Meta Reality Labs’s Yearly Operating Loss")