DEV Community

Cover image for Loading State for Images in .NET MAUI
Victor Hugo Garcia
Victor Hugo Garcia

Posted on

12

Loading State for Images in .NET MAUI

Handling the loading state for images can significantly enhance the user experience in any application. In this post, we will explore how to implement a loading indicator when images are being fetched and displayed in .NET MAUI for iOS, Windows, macOS and Android platforms. Leveraging Control Reference Bindings, we'll ensure that your app feels smooth and responsive even when dealing with heavy image loading tasks.

Special Thanks

A huge shoutout to my friend Gerald Versluis for his insightful video on using Control Reference Bindings. His guidance has been invaluable in making this implementation a reality.

Implementation

You can implement the loading state either on a Single Image, CarouselView, or CollectionView. In the example below, we are going to use a CarouselView:

<CarouselView
    VerticalOptions="Start"
    Loop="False"
    HeightRequest="256"
    IsBounceEnabled="True"
    PeekAreaInsets="30"
    BackgroundColor="Transparent"
    ItemsSource="{Binding Images}">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout
            Orientation="Horizontal"
            ItemSpacing="10"
            SnapPointsType="Mandatory"
            SnapPointsAlignment="Start" />
    </CarouselView.ItemsLayout>
    <CarouselView.ItemTemplate>
        <DataTemplate x:DataType="models:Demo">
            <Grid>
                <Image
                    x:Name="MainImage"
                    Aspect="AspectFill"
                    Source="{Binding ImageUrl}"
                    HeightRequest="180"/>
                <ActivityIndicator
                    HeightRequest="32"
                    WidthRequest="32"
                    VerticalOptions="Center"
                    Margin="0,0,0,0"
                    HorizontalOptions="Center"
                    IsRunning="{Binding IsLoading, Source={x:Reference MainImage}}"
                    IsVisible="{Binding IsLoading, Source={x:Reference MainImage}}"
                    Color="#000000" />
            </Grid>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

Enter fullscreen mode Exit fullscreen mode

Conclusion

Implementing a loading indicator for images in your .NET MAUI application can greatly enhance the user experience by providing visual feedback during image loading. This tutorial demonstrated how to achieve this using Control Reference Bindings for both all supported platforms. By leveraging the IsLoading property of the Image control, you can ensure that your app remains responsive and user-friendly.

For more detailed information on the IsLoading property, please refer to the official Microsoft documentation.

Happy coding and may your apps load smoothly!

Follow me on Social:

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay