Empty Carousel view

Rendy Putrayana 0 Reputation points
2025-05-02T07:00:06.2666667+00:00

I'm developing a MAUI application and encountering an issue with the CarouselView control. The indicators in the CarouselView appear correctly according to the number of items in my ObservableCollection<string> which contains the filenames of my images (e.g., "cr1.png"). However, the images themselves are not being displayed within the carousel.

Here are some key points regarding my situation:

I am using an ObservableCollection<string> as the ItemsSource for the CarouselView. Each string in this collection is the filename of an image located in the Resources\Images folder of my project. The perplexing part is that I can display the exact same images using a regular Image control on the same page by setting its Source property to the same filenames (e.g., <Image Source="cr1.png" />). The images appear correctly outside the CarouselView. I have verified that the "Build Action" for all the image files is set to "MauiImage". Here is a snippet of my CarouselView XAML:

<CarouselView ItemsSource="{Binding CarouselImage}" 
			HeightRequest="200" 
			IndicatorView="CrIndicator" 
			Loop="True"> 
	<
		<DataTemplate> 
			<Image Source="{Binding .}"
					Aspect="AspectFill"/> 
		</DataTemplate> 
	</CarouselView.ItemTemplate> 
</CarouselView>
<IndicatorView x:Name="CrIndicator" 
				IndicatorColor="LightGray" 
				SelectedIndicatorColor="Orange" 
				HorizontalOptions="Center" Margin="0,5"/>

And here is a snippet of my C# code in the ViewModel that populates the ObservableCollection:

```csharp
public ObservableCollection<string> CarouselImage { get; set; } = new ObservableCollection<string>();

[RelayCommand]
public async Task Appearing()
{
    CarouselImage = new ObservableCollection<string>()
    {
        "cr1.png",
        "cr2.png",
        "cr3.png",
        "cr4.png",
    };
    Username = Preferences.Get("username", string.Empty);
}

I have already tried simplifying the CarouselView and checked the output logs, but I haven't found any clear errors related to image loading within the CarouselView.

Are there any specific configurations or properties of the CarouselView that might be preventing the images from displaying, even though they can be displayed outside this control? Is there a potential binding issue within the DataTemplate despite it appearing straightforward?

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
4,090 questions
0 comments No comments
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.