A Smoother User Experience with Image Caching in .NET MAUI

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

Step 2: Add .NET MAUI Avatar View reference

The Syncfusion .NET MAUI controls are available on NuGet.org. To add the .NET MAUI Avatar View to your project, open the NuGet Package Manager in Visual Studio, and search for 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.

Conclusion

Thanks for reading! In this blog, we’ve seen how to implement the image caching feature in the .NET MAUI Avatar View control for optimal image handling. To try out the Avatar View control, download our Essential Studio for .NET MAUI.

If you are not a Syncfusion customer, you can use our 30-day free trial to see how our components can benefit your projects.

We encourage you to check out our .NET MAUI controls’ demos on GitHub and share your feedback or questions in the comments below.

You can also contact us through our support forum, support portal, or feedback portal. Our team is always ready to assist you!